デザイン会社が発信!バナー制作情報メディア

バナーの配色の決め方|色の役割の分け方と、実際の広告で多い色【2万7,000件の集計】

公開日 更新日
バナーの配色の決め方|色の役割の分け方と、実際の広告で多い色【2万7,000件の集計】
バナーの配色は、好みではなく、押した先のLPやロゴに合わせて決めるのが基本です。この記事では、バナー制作.jpのデザイナーが色を決めるときの手がかり、色の役割の分け方、色が与える印象の目安をまとめました。弊社が運営するバナーアーカイブに掲載している広告バナー約2万7,000件のメインカラーの割合も紹介します。

目次

バナーの色は「押した先」に合わせて決める

バナーの色を好みや思いつきで決めると、押した先のページ(LP)やブランドと印象がずれてしまいます。バナー制作.jpのデザイナーは、色の指定が無いとき、次のものを手がかりに色を決めています。
手がかり見ること
リンク先のLPLPのトンマナ(色や雰囲気の統一感)。バナーを押した人が、同じ広告の続きだと感じられるようにする
ロゴロゴに使われている色。ブランドの色として、メインの色やアクセントに使う
提供された素材商品の写真やパッケージの色。写真と背景の色がぶつからないようにする
バナーとLPの見た目がそろっていないと、押した人が「違うページに来た」と感じて離れやすくなります。バナーとLPの関係はバナーとLPの違いで説明しています。

色は3つの役割に分けて使う

色を増やすほど、どこを見ればよいか分からなくなります。バナーでは、色を次の3つの役割に分けて考えると、まとまりが出ます。
役割使う場所と目安
ベースの色背景など、いちばん広い面積に使う色
メインの色見出しや帯など、ブランドの印象を伝える色。ロゴやLPの色から選ぶ
目立たせる色ボタンや価格など、いちばん見てほしい所だけに使う色。ほかの2色と差をつける
目立たせる色をあちこちに使うと、どれも目立たなくなります。ボタンなど1〜2か所に絞りましょう。

色が与える印象の目安

色にはそれぞれ持たれやすい印象があります。ただし、印象は組み合わせや商品によって変わるため、最後はLPやロゴとの相性で決めます。
色持たれやすい印象と、よく使われる場面
青信頼、誠実、清潔。金融、BtoB、IT、医療など
赤情熱、注目、お得感。セール、期間限定、食品など
緑自然、安心、健康。食品、健康、環境に関わるものなど
ピンクやさしさ、かわいらしさ。美容、女性向けの商品など
黒高級感、力強さ。高価格の商品、ファッションなど
白清潔、シンプル。化粧品、家電、医療など

実際の広告バナーで多い色

弊社が運営するバナーアーカイブに掲載している、Instagram・X・LINE・Metaの広告バナー27,364件(2026年10月28日時点)を、メインカラーで分けると次のとおりでした。色の分類は、AIによる自動分類です。
メインカラー件数割合
ブルー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%
そのほかは、パープル824件、ブラウン591件、グレー544件、カラフル328件、ゴールド290件です。ブルーが3割を超えて最も多く、ほかの色を大きく引き離しています。多くの広告と同じ色を使うと、並んだときに埋もれやすくなります。業種でよく使われる色を押さえつつ、ロゴやLPの色で自社らしさを出すのがおすすめです。弊社が集めた広告の集計で、広告全体の割合ではない点にご注意ください。

読める配色にする

おしゃれな配色でも、文字が読めなければ伝わりません。
  • 文字と背景の明るさの差をはっきりつける(薄いグレーの背景に白い文字などは避ける)
  • 写真の上の文字は、帯や影で背景と分ける
  • 赤と緑のように、色覚の違いで見分けにくい組み合わせだけで情報を分けない
色の差の基準はアクセシビリティ対応のバナー設計でまとめています。

配色に迷ったときの進め方

色が決まらないときは、次の順で決めると迷いにくくなります。
  1. リンク先のLPとロゴを見て、メインの色を1つ決める
  2. 背景(ベースの色)を、メインの色が映える白・薄い色・濃い色から選ぶ
  3. ボタンや価格に使う目立たせる色を、ほかの2色と差がつく色から選ぶ
  4. スマホの大きさに縮めて、文字が読めるか、ボタンが目に入るかを確かめる
参考になるバナーを色で探したいときは、バナーアーカイブでメインカラーやアクセントカラーから絞り込めます。

バナーの制作を頼むなら

バナー制作.jpでは、色の指定が無い場合も、リンク先のLPのトンマナ、ロゴ、ご提供の素材をもとに配色を決めて制作します。広告バナーはサイズに関係なく1本4,000円(税別、別途ディレクション費20%)です。くわしくは制作料金をご覧ください。
やっぱりLP制作はプロに任せたい!まず制作事例を見る

まとめ

  • バナーの色は、リンク先のLPのトンマナ、ロゴ、提供素材を手がかりに決める
  • 色はベース・メイン・目立たせる色の3つの役割に分ける
  • 目立たせる色は、ボタンや価格など1〜2か所に絞る
  • 弊社のバナーアーカイブでは、メインカラーはブルーが31.1%で最も多い
  • 文字と背景の明るさの差をはっきりつけ、読める配色にする
あわせて読みたい
この記事を書いたライター
2009年創業のデザイン会社です。バナー制作.jp(バナー制作実績)では、Instagram・X(旧Twitter)・LINE・Meta・Google・LINEヤフーなどの広告バナーを年間3,000本以上制作しています。制作実績は累計40,000件以上(バナー以外の制作を含む)、取引社数は4,000社以上です。記事の書き方と確認の流れは編集方針をご覧ください。

バナー制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    件名
    会社名

    会社名ふりがな

    担当者

    担当者ふりがな

    電話番号

    メールアドレス

    都道府県
    ご商談希望
    (3~4候補)

    web商談時に
    聞きたい事

    ご返信方法
    電話連絡の場合
    ※複数回答可

    お問い合わせ内容

    バナーサイズ
    (単位:px)

    デザイン参考

    バナーにいれる
    テキスト情報

    イメージ
    フォント
    リンク先URL

    レギュレーション(仕様)

    素材画像URL

    ※GigaFile便でアップロードしたURLを上記に張り付けてください
    ※提供素材が無い場合は有料素材のみで制作

    規約に同意する


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

     
    バナーアーカイブ