広告配色は「感覚」ではなく「理由」で決める
広告バナーの色は、好みで決めてしまいがちです。「青が好きだから青」「なんとなく赤が目立つから赤」。でも、色は見た人の感情と判断に直接働きかけます。理由を持って選ぶだけで、同じデザインでも反応が変わります。
ある調査では、購買判断の約92%が「視覚」をきっかけに動くとされています（VWO）。その視覚の大半を占めるのが色です。広告配色を整えることは、デザインを飾ることではなく、伝わる確率を上げる作業だと考えてください。
この記事では、感覚に頼らず広告配色を決めるための考え方を、色の心理・基本ルール・業界別の選び方・失敗例の順で解説します。バナー広告そのものの基礎を先に押さえたい方は、バナー広告の基本もあわせて読んでみてください。
この記事でわかること
- 色が見た人に伝える「意味」と、その文化的な注意点
- 3色ルールと70:25:5の配色比率
- 文字とCTAを読ませるコントラストの基準（数値あり）
- 業界・配信面ごとの配色の選び方
- やりがちな配色の失敗3つと、その直し方
※ 広告配色を含めたバナー制作をまるごと自動化したいなら、Tasky はURLを入力するだけでAIが配色まで設計します。7日間の無料トライアルで試せます。
色が広告で持つ「意味」を知る
広告配色の出発点は、色ごとの一般的なイメージを押さえることです。色には、見た人の感情を動かす共通の連想があります。
- 青: 信頼・誠実・安定。金融や士業、BtoBで多く使われます（VWO）
- 赤: 高揚・緊急・情熱。心拍を上げ、セールや限定訴求に向きます（VWO）
- 緑: 健康・安心・自然。医療やオーガニック、食品と相性がいい色です
- 黄・オレンジ: 親しみ・元気・お得感。価格訴求やキャンペーンで目を引きます
- 黒・紺: 高級感・上質さ。コスメやハイブランドの世界観づくりに使われます
ただし、色の効果は「文脈次第」です。Help Scoutは、色そのものより「そのブランドにふさわしいか」が重要だと指摘しています。赤がいつでも強いわけではなく、周りの色との関係で意味が決まります。
「色で認知が80%上がる」をどう受け取るか
広告配色の話でよく出るのが「色でブランド認知が80%上がる」という数字です。ただ、この引用のもとになった研究を確認すると、正確には「最大80%・条件によっては」という内容でした（insights4print）。
つまり、色を変えれば必ず認知が80%伸びるわけではありません。色は成果を底上げする要素のひとつであり、訴求やレイアウトと合わせて初めて効きます。数字は鵜呑みにせず、「色は無視できないが、万能でもない」と捉えるのが実務的です。
日本ではイメージが変わる色もある
色の連想には文化差があります。たとえば白は、欧米では清潔さの象徴ですが、日本では弔事を連想させる場面もあります。緑も、海外では「未経験」を指すことがある一方、日本では安心・自然のイメージが強い色です。
海外の配色論をそのまま使うと、国内のユーザーに違う印象を与えることがあります。日本市場向けの広告では、日本での色の受け取られ方を基準に選んでください。
広告配色の基本ルール
色の意味がわかったら、次は「組み合わせ方」です。ここを外すと、どれだけ良い色を選んでも散らかって見えます。
色数は3色まで。70:25:5で配分する
まず守りたいのは、使う色を絞ることです。色数が増えるほど、まとまりを保つのが難しくなります。アナグラムも、まとまらないときは3〜4色に減らすことを勧めています。
配分の目安が70:25:5です。
- ベースカラー（70%）: 背景。白やライトグレーなど控えめな色
- メインカラー（25%）: ブランドカラーやテーマカラー
- アクセントカラー（5%）: CTAボタンや強調したい部分に使う目立つ色
迷ったら、メインにブランドカラーを置き、アクセントにはその反対側の色（補色）を選びます。これだけで、視線がアクセントに集まる配色になります。
文字とCTAは「コントラスト」で決める
配色で最も成果に直結するのが、文字とボタンの読みやすさです。色がきれいでも、背景に溶けて読めなければクリックされません。
判断の基準になるのがコントラスト比です。W3Cのアクセシビリティ基準（WCAG）では、通常サイズの文字は背景と4.5:1以上、大きい文字でも3:1以上のコントラストを推奨しています。バナーの文字やCTAも、この水準を目安にすると安全です。
効果も具体的です。アパレルECのRIPT Apparelは、背景に馴染んでいた黒のCTAボタンを、はっきり見える緑のボタンに変えたところ、コンバージョン率が6.3%改善しました（VWO）。色の良し悪しではなく、「背景と差がついているか」が成果を分けたわけです。
実務では、背景が明るいならCTAは濃い色、背景が暗いなら白や黄色にします。「背景と逆方向の色」を選ぶ。これがコントラスト設計の基本です。
Taskyは100万件以上の広告配信データをもとに、AIが配色とコントラストまで設計します。生成したバナーはAI ScoringでCTR・CVRを配信前に予測でき、約45円〜/枚から制作できます。
業界・配信面で広告配色を最適化する
基本ルールの上に、業界と配信面の事情を重ねると、広告配色の精度が上がります。
業界ごとに「効きやすい色」がある
業界には、ユーザーが見慣れていて受け入れやすい色の傾向があります。Infinity-Agentも、寒色の青は信頼感が出るため士業や専門サービスに向き、緑やベージュは安心感が出るため医療・オーガニック系に向くとしています。
Taskyの配信データでも、業界ごとの傾向が見えています。
| 業界 | 効きやすい配色の傾向 |
|---|---|
| EC・通販 | 白背景＋暖色（赤・オレンジ）のアクセント |
| BtoB・SaaS | 青・ネイビー基調で信頼感を出す |
| 美容・コスメ | 白背景＋ピンク、または黒で上質感 |
| 不動産・金融 | グリーンや濃紺で安定・信頼を演出 |
ただし、これは出発点です。同じ業界でも商材やターゲットで最適解は変わるため、傾向から始めて検証で調整してください。
配信面の背景に「負けない色」を選ぶ
バナーは、配信される面の背景の中で見られます。タイムラインや記事の中で、周囲に埋もれない配色かどうかが効いてきます。
たとえば、白背景のフィードに白っぽいバナーを出すと、境界が曖昧になって見過ごされます。配信面が想定できるなら、その背景と差がつく色を選ぶか、バナーの外周にはっきりした枠や濃い色を置いて境界を作ります。媒体ごとのサイズや特徴はバナー広告の作り方も参考にしてください。
やりがちな広告配色の失敗と直し方
最後に、現場で起きやすい3つの失敗を整理します。自分のバナーに当てはまらないか確認してみてください。
失敗1：色を使いすぎる。 あれもこれもと色を足した結果、どこを見ればいいか分からないバナーになります。直し方はシンプルで、色を3色に絞り、70:25:5に配分し直すことです。
失敗2：コントラスト不足。 写真の上に同系色の文字を載せて、明るい部分で消えてしまうケースです。半透明の帯を文字の背後に敷く、文字に影をつける、写真を暗く加工する。いずれかで4.5:1の水準まで差をつけます。
失敗3：ブランドと合わない色。 目立たせたい一心で、ブランドカラーと無関係な色を使うと、見た人に違和感が残ります。Help Scoutが言う「ふさわしさ」を基準に、ブランドの世界観から外れない範囲でアクセントを選びます。
配色やレイアウトの土台をまとめて確認したい方は、バナーデザインのコツもあわせて読んでみてください。色は、デザイン全体の一部として効いてきます。
配色の「正解」はテストで見つかります。Taskyなら月180枚〜のバナーを生成でき、サイズ展開もマジックリサイズで追加費用なし（外注なら1枚あたり+2,000〜5,000円）。配色違いのパターンを高速に試せます。まずは7日間の無料トライアルから。
よくある質問
Q. 広告バナーに使う色は何色までが目安ですか？
3色までが基本です。ベース・メイン・アクセントの3色を70:25:5で配分すると、まとまりと視認性を両立できます。4色以上を使う場合は、トーンを揃えて全体の印象を1つにまとめてください。
Q. CTAボタンは何色がいいですか？
固定の正解色はありません。背景と最もコントラストがつく色を選ぶのが原則です。背景が明るければ濃いオレンジや青、暗ければ白や黄色が候補になります。色そのものより「背景との差」を優先してください。
Q. ブランドカラーとアクセントカラーが喧嘩します。どうすれば？
メインにブランドカラーを据え、アクセントにはその補色（色相環の反対側）を少量だけ使います。アクセントは全体の5%に抑えると、ブランドの印象を保ったまま強調できます。
Q. 業界の定番色に従うべきですか？
出発点としては従う価値があります。ユーザーが見慣れた色は安心感につながるためです。ただし定番色は競合も使うため、差別化したい場合はアクセントや明度・彩度で個性を出し、A/Bテストで反応を確かめてください。
まとめ — 広告配色は「意味・基本・検証」で決める
広告配色は、感覚ではなく次の3点で決めます。
- 意味: 色ごとの心理と、日本での受け取られ方を踏まえる
- 基本: 3色・70:25:5・コントラスト4.5:1を守る
- 検証: 業界の傾向から始め、A/Bテストで自社の正解を見つける
まずは今あるバナーを1つ選び、色数を3色に絞り、CTAのコントラストを上げる。この2か所を直すだけでも、見え方は変わります。小さな1箇所の改善が、クリック率の差として数字に現れるはずです。
