バナーの配色の決め方|色の役割の分け方と、実際の広告で多い色【2万7,000件の集計】
公開日 更新日
バナーの配色は、好みではなく、押した先のLPやロゴに合わせて決めるのが基本です。この記事では、バナー制作.jpのデザイナーが色を決めるときの手がかり、色の役割の分け方、色が与える印象の目安をまとめました。弊社が運営するバナーアーカイブに掲載している広告バナー約2万7,000件のメインカラーの割合も紹介します。
目次
バナーの色は「押した先」に合わせて決める
バナーの色を好みや思いつきで決めると、押した先のページ(LP)やブランドと印象がずれてしまいます。バナー制作.jpのデザイナーは、色の指定が無いとき、次のものを手がかりに色を決めています。
バナーとLPの見た目がそろっていないと、押した人が「違うページに来た」と感じて離れやすくなります。バナーとLPの関係はバナーとLPの違いで説明しています。
| 手がかり | 見ること |
|---|---|
| リンク先のLP | LPのトンマナ(色や雰囲気の統一感)。バナーを押した人が、同じ広告の続きだと感じられるようにする |
| ロゴ | ロゴに使われている色。ブランドの色として、メインの色やアクセントに使う |
| 提供された素材 | 商品の写真やパッケージの色。写真と背景の色がぶつからないようにする |
色は3つの役割に分けて使う
色を増やすほど、どこを見ればよいか分からなくなります。バナーでは、色を次の3つの役割に分けて考えると、まとまりが出ます。
目立たせる色をあちこちに使うと、どれも目立たなくなります。ボタンなど1〜2か所に絞りましょう。
| 役割 | 使う場所と目安 |
|---|---|
| ベースの色 | 背景など、いちばん広い面積に使う色 |
| メインの色 | 見出しや帯など、ブランドの印象を伝える色。ロゴやLPの色から選ぶ |
| 目立たせる色 | ボタンや価格など、いちばん見てほしい所だけに使う色。ほかの2色と差をつける |
色が与える印象の目安
色にはそれぞれ持たれやすい印象があります。ただし、印象は組み合わせや商品によって変わるため、最後はLPやロゴとの相性で決めます。
| 色 | 持たれやすい印象と、よく使われる場面 |
|---|---|
| 青 | 信頼、誠実、清潔。金融、BtoB、IT、医療など |
| 赤 | 情熱、注目、お得感。セール、期間限定、食品など |
| 緑 | 自然、安心、健康。食品、健康、環境に関わるものなど |
| ピンク | やさしさ、かわいらしさ。美容、女性向けの商品など |
| 黒 | 高級感、力強さ。高価格の商品、ファッションなど |
| 白 | 清潔、シンプル。化粧品、家電、医療など |
実際の広告バナーで多い色
弊社が運営するバナーアーカイブに掲載している、Instagram・X・LINE・Metaの広告バナー27,364件(2026年10月28日時点)を、メインカラーで分けると次のとおりでした。色の分類は、AIによる自動分類です。
そのほかは、パープル824件、ブラウン591件、グレー544件、カラフル328件、ゴールド290件です。ブルーが3割を超えて最も多く、ほかの色を大きく引き離しています。多くの広告と同じ色を使うと、並んだときに埋もれやすくなります。業種でよく使われる色を押さえつつ、ロゴやLPの色で自社らしさを出すのがおすすめです。弊社が集めた広告の集計で、広告全体の割合ではない点にご注意ください。
| メインカラー | 件数 | 割合 |
|---|---|---|
| ブルー | 8,520件 | 31.1% |
| レッド | 2,652件 | 9.7% |
| グリーン | 2,549件 | 9.3% |
| ピンク | 2,252件 | 8.2% |
| ホワイト | 2,124件 | 7.8% |
| ブラック | 2,099件 | 7.7% |
| イエロー | 1,748件 | 6.4% |
| オレンジ | 1,456件 | 5.3% |
| ベージュ | 1,387件 | 5.1% |
| そのほか | 2,577件 | 9.4% |
読める配色にする
おしゃれな配色でも、文字が読めなければ伝わりません。
- 文字と背景の明るさの差をはっきりつける(薄いグレーの背景に白い文字などは避ける)
- 写真の上の文字は、帯や影で背景と分ける
- 赤と緑のように、色覚の違いで見分けにくい組み合わせだけで情報を分けない
配色に迷ったときの進め方
色が決まらないときは、次の順で決めると迷いにくくなります。
- リンク先のLPとロゴを見て、メインの色を1つ決める
- 背景(ベースの色)を、メインの色が映える白・薄い色・濃い色から選ぶ
- ボタンや価格に使う目立たせる色を、ほかの2色と差がつく色から選ぶ
- スマホの大きさに縮めて、文字が読めるか、ボタンが目に入るかを確かめる
バナーの制作を頼むなら
バナー制作.jpでは、色の指定が無い場合も、リンク先のLPのトンマナ、ロゴ、ご提供の素材をもとに配色を決めて制作します。広告バナーはサイズに関係なく1本4,000円(税別、別途ディレクション費20%)です。くわしくは制作料金をご覧ください。
まとめ
- バナーの色は、リンク先のLPのトンマナ、ロゴ、提供素材を手がかりに決める
- 色はベース・メイン・目立たせる色の3つの役割に分ける
- 目立たせる色は、ボタンや価格など1〜2か所に絞る
- 弊社のバナーアーカイブでは、メインカラーはブルーが31.1%で最も多い
- 文字と背景の明るさの差をはっきりつけ、読める配色にする
この記事を書いたライター

※アンケートモニター提供元:ゼネラルリサーチ
調査期間:2020年8月7日~12日
調査方法:インターネット調査
調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
調査対象:全国の20代~50代の男女 1052名














へのお問い合わせはこちらから