デザインの専門教育を受けていなくても、成果につながる配色は選べます。配色は生まれ持ったセンスではなく、いくつかの法則と数値で再現できる知識だからです。
この記事は、バナーを作る運用者に向けて、感覚に頼らずに色を決めるための手順をまとめたものです。「なぜ効くのか」と「どうやるか」を、良い例と悪い例を並べながら解説します。
バナーの構成やサイズなど全体像は、関連記事: バナー広告デザインの基本ガイド をハブとして先に押さえておくと理解が進みます。
なぜ配色が広告成果に効くのか
配色は「見た目の好み」の話ではありません。ユーザーがバナーを認識し、内容を読み取り、印象を持つまでの機能を左右する要素です。
ユーザーはコンテンツの合間に、ごく短い時間でバナーに接触します。その一瞬で伝わるかどうかは、色の使い方に大きく依存します。配色が担う機能は、次の3つに整理できます。
| 機能 | 内容 | 成果への効き方 |
|---|---|---|
| 視認性 | 広告枠の中でバナー自体が目に入るか | 目に入らなければクリックは発生しない |
| 可読性 | 文字やコピーが無理なく読めるか | 読めなければ訴求は伝わらない |
| 第一印象 | ブランドや商材の印象が意図どおりか | 印象が合わないと信頼や興味を得にくい |
3つとも「好き嫌い」ではなく、伝わるかどうかという機能の問題です。だからこそ、法則で組み立てられます。以降で具体的な手順を見ていきます。
土台になる「3色ルール」
配色で最初に迷うのは「何色まで使ってよいか」です。目安として、使う色を3種類に絞り、面積の配分を決める方法が扱いやすいです。
配分の考え方は、インテリアやWebデザインで広く使われる「60・30・10」の比率が出発点になります。バナーのように一点集中で押させたい面では、ベース70%・メイン25%・アクセント5%と、アクセントをさらに絞ると効きます。背景など広い面をベース、主役の要素をメイン、最も目立たせたい一点をアクセントに割り当てます。
上の例では、淡いベージュをベース、紺をメイン、オレンジをアクセントに割り当てています。各色の役割を整理すると次のとおりです。
| 役割 | 配分の目安 | 使いどころ | 例（上図） |
|---|---|---|---|
| ベースカラー | 約70% | 背景・余白など最も広い面 | ベージュ #F3EEE3 |
| メインカラー | 約25% | 見出し帯・主要ビジュアル | 紺 #1F3A5C |
| アクセントカラー | 約5% | CTAなど最も押させたい一点 | オレンジ #E8552D |
色数を絞ると、視線が散らからず、伝えたい要素が際立ちます。4色以上を使いたい場合は、同じトーン（明度と彩度の系統）でそろえると、まとまりを保ちやすくなります。
コントラストが可読性を決める
配色でつまずく原因の多くは、色の選び方ではなく「背景と文字の明るさの差」の不足です。この差をコントラストと呼び、可読性を大きく左右します。
判断の基準として、Webアクセシビリティの国際指針であるWCAGが、コントラスト比の目安を示しています。バナーの文字にもそのまま応用できます。
| 対象 | コントラスト比の目安（WCAG AA） |
|---|---|
| 通常サイズのテキスト | 4.5 : 1 以上 |
| 大きな文字（およそ24px以上、または太字18.66px以上） | 3 : 1 以上 |
コントラスト比は無料のチェックツールに背景色と文字色のカラーコードを入れると確認できます。実際の見え方の違いは、次の例で比較できます。
左の2つは、明るさの差が足りず文字が読み取りにくい配色です。右の2つは、明度差を十分に確保しているため、色相にかかわらず文字が浮き上がります。
写真の上に文字を乗せる場合は、背景の明るさが場所ごとに変わるため注意が必要です。文字の下に半透明の帯を敷くか、写真全体に暗いオーバーレイをかけると、可読性を安定させられます。
運用メモ デザインを一度グレースケール（白黒）にして見ると、コントラストの過不足を客観的に判断できます。白黒でも要素の区別がつくなら、色を戻しても読みやすい配色です。カラーで作り込む前のチェックとして有効です。
アクセントカラーでCTAに視線を集める
最も押させたい要素は、ふつうCTA（行動喚起ボタン）です。ここにアクセントカラーを使い、他の要素より一段強い色で目立たせます。
ポイントは、強い色を「一点集中」で使うことです。あちこちに鮮やかな色を置くと、視線の行き先が定まらず、かえってCTAが埋もれます。強い色が1つだけなら、そこに視線が自然と集まります。
左は、見出しの赤・バッジの黄・テキストの青・ボタンの緑と、強い色が競い合っています。どこを見ればよいか分かりにくい状態です。
右は、ベースと紺で全体を落ち着かせ、オレンジのCTAだけを際立たせています。押させたい一点が明確です。アクセントカラーは、ベースやメインと色相が離れた色を選ぶと、対比が強まり効果的です。
色が持つ意味と印象
色には、多くの人が共通して抱きやすい印象があります。ただし、これは「必ずそうなる」という法則ではなく、あくまで傾向です。文化や文脈で受け取り方は変わるため、目安として扱ってください。
まず大きな分け方として、暖色と寒色があります。暖色は活発さや親しみ、寒色は落ち着きや信頼といった印象につながりやすい傾向があります。
代表的な色の印象と、相性がよいとされる業種の傾向を整理します。あくまで出発点として、ブランドカラーや商材の実態に合わせて調整してください。
| 色 | 抱かれやすい印象 | 相性がよいとされる例 |
|---|---|---|
| 赤 | 情熱・緊急感・購買意欲 | セール、飲食、スポーツ |
| オレンジ | 親しみ・活気・食欲 | 飲食、EC、ファミリー向け |
| 青 | 信頼・知性・清潔 | IT、金融、BtoB |
| 緑 | 安心・自然・健康 | 教育、健康、環境 |
| 黒 | 高級・上質・フォーマル | 高単価商材、ラグジュアリー |
| ピンク | やわらかさ・親しみ | 美容、コスメ |
色の印象を頼りに配色を決めるときも、最後は必ずコントラストを確認してください。印象が合っていても、読めなければ機能しません。
よくある配色の失敗と直し方
配色の失敗には、パターンがあります。多くは色選びのセンスではなく、原則を外していることが原因です。代表的な失敗と直し方を整理します。
| 失敗パターン | 起きる症状 | 直し方（改善後） |
|---|---|---|
| 色を使いすぎる | 視線が散り、要点が埋もれる | 3色に絞り、強い色はアクセント1つに集約する |
| コントラスト不足 | 文字が読めず訴求が伝わらない | 背景と文字の明度差を確保する（通常テキスト4.5:1以上） |
| ブランドカラーを無視 | 広告ごとに印象がばらつき認知が積み上がらない | ベース・メインにブランドカラーを固定して統一する |
| 原色同士を隣接 | 色が衝突しちらつく（ハレーション） | 片方の明度や彩度を落とすか、間に白や余白を挟む |
| 色だけで情報を区別 | 色覚特性のあるユーザーに伝わらない | 文字・形・位置も併用し、色に依存しない |
とくに見落とされやすいのが、ブランドカラーの一貫性です。1枚ずつ見ると成立していても、複数のバナーで色がばらつくと、ブランドの印象が積み上がりません。
改善前は3枚がばらばらの色で、同じブランドの広告だと認識されにくい状態です。改善後はベース・メイン・アクセントを固定しているため、シリーズとして印象が積み上がります。
複数バナーを展開するときは、色の配分ルールを先に決めておくと、判断がぶれず制作も速くなります。訴求パターンごとの使い分けは バナー広告デザインの基本ガイド を参照してください。
まとめと配信前チェックリスト
配色は、いくつかの法則と数値に落とし込めば、感覚に頼らず再現できます。要点を整理します。
- 配色は好みではなく、視認性・可読性・第一印象という機能の話
- 使う色は3色に絞り、ベース70%・メイン25%・アクセント5%を目安にする
- 背景と文字のコントラストを確保する（通常テキストは4.5:1以上）
- 最も押させたいCTAにアクセントカラーを一点集中させる
- 色の印象は傾向として使い、最後は必ずコントラストを確認する
- 複数バナーはブランドカラーを固定し、印象を積み上げる
配信前には、次のチェックリストで配色を確認してください。1つでも外れていれば、修正の余地があります。
配信前の配色チェックリスト
- 使っている色は3色（±1）に収まっているか
- ベース・メイン・アクセントの役割と配分が明確か
- 文字と背景のコントラストは十分か（グレースケールでも読めるか）
- アクセントカラーはCTAなど一点に絞れているか
- ブランドカラーと矛盾していないか
- 色だけに頼らず、文字や形でも情報が伝わるか
- スマートフォンの実機で見て読めるか
配色は1回で完成させるものではありません。配信データをもとに良かった配色の要素を残し、次の制作に活かすことで、精度を段階的に高められます。