バナー制作で避けるべき色と配色の基本。70・25・5の法則ですぐ使える5パターン
バナー画像やアイキャッチを作るとき、「なんかダサく見える」「クリックされない」という悩みの多くは、色の選び方に原因があります。色の使い方には、避けるべき組み合わせと、効果的な組み合わせが存在します。
本記事では、バナー制作で避けるべき色の使い方と、代わりに使える配色パターンを具体的に解説します。
バナーで避けるべき色の組み合わせ5選
1. 赤×緑の組み合わせ
赤と緑は補色（反対色）であり、並べると視覚的に「チラチラ」して見える現象（ハレーション）が起きます。また色覚特性（色盲・色弱）を持つ方には区別しにくい組み合わせです。クリスマスカラーとして使う場合も、両色の明度差を大きくするなどの工夫が必要です。
2. 青×オレンジの過剰使用
青とオレンジも補色の組み合わせで、コントラストが強すぎると視覚的に疲れます。この組み合わせ自体は効果的ですが、両色を同じ面積で使うと「うるさい」印象になります。どちらかをベース、もう一方をアクセントとして面積比に差をつけることが重要です。
3. 彩度が高い色同士の組み合わせ
鮮やかな色（彩度が高い色）を複数組み合わせると、バナー全体がうるさくなり、どこを見ればいいかわからなくなります。複数の色を使う場合は、1色だけを鮮やかにして（アクセントカラー）、他はくすんだ色・無彩色でまとめるのが基本です。
4. 白背景に薄い黄色のテキスト
黄色は明度が高い色のため、白背景との組み合わせはコントラストが非常に低くなります。読者にとって読みにくいだけでなく、視認性の問題でプロっぽく見えません。黄色を使いたい場合は背景を濃い色にするか、テキストに黒を使いましょう。
5. 類似色のみの単調な配色
青・水色・紺など類似色だけでまとめると、安定感はあるものの印象が弱くなります。必ずアクセントとして対照的な色を1点加えることで、視線の焦点が生まれます。
配色の基本：70・25・5の法則
バナーや画像の配色で迷ったときは「70・25・5の法則」が参考になります。
| 役割 | 面積比 | 内容 |
|---|---|---|
| ベースカラー | 70% | 背景など最も広い面積を占める色 |
| サブカラー | 25% | ベースを補助する色 |
| アクセントカラー | 5% | 視線を引きつける差し色 |
アクセントカラーは面積が小さいほど効果が高まります。ベースとサブを落ち着いた色にして、アクセントだけを鮮やかにするのが基本です。
すぐ使える配色パターン5選
| パターン名 | ベース | サブ | アクセント |
|---|---|---|---|
| クリーンビジネス | 白 | ライトグレー | ネイビー |
| ナチュラル | クリーム | ベージュ | テラコッタ |
| テック系 | ダークグレー | チャコール | シアン |
| ポップ | 白 | 薄いイエロー | コーラルレッド |
| エレガント | 黒 | ダークグレー | ゴールド |
配色パターンはあくまで出発点です。ブログのテーマカラーや記事のトーンに合わせてカスタマイズしてください。既存の記事と並べたときに違和感がないかを必ず確認しましょう。
まとめ：色の「量と役割」を意識するだけで変わる
バナーや画像の配色で失敗しないためには、使う色の種類を3色以内に絞り、70・25・5の面積比を意識し、アクセントカラーだけを鮮やかにする——この3点が基本です。避けるべき組み合わせを知っておくだけでも、デザインのクオリティは大きく上がります。
ソザイノの素材は色調が統一されているため、配色を整えやすい素材として活用いただけます。
バナー・アイキャッチに使えるWebP素材を1000点以上無料配信中。商用利用OK、登録不要です。
素材ギャラリーへ →