バナーの目的に合わせた配色とは?伝わるバナーの色の決め方

基本の理解

まずはこの考え方の中身と、なぜバナーで特に重要なのかを押さえましょう。

バナーの目的に合わせた配色とは何か

バナーの目的に合わせた配色とは、そのバナーで「何を伝えたいのか」「何を目立たせたいのか」「どんな印象を与えたいのか」という目的から逆算して、使う色を決める考え方のことです。

デザインの目的と配色、つまり「おしゃれかどうか」ではなく「何を伝えたいか」から色を選ぶという考え方を、バナー制作という実践の場に応用したものといえます。

目的に沿った配色になることで、限られたスペースの中でも伝えたいメッセージが効果的に伝わります。

「なぜこの配色にしたのか」を説明できるようになり、感覚ではなく根拠を持った制作ができるのも大きな利点です。

なぜバナーで特に目的が重要なのか

バナーは表示される時間・スペースが限られているため、目的に合わない配色では、伝えたいことが伝わる前に見過ごされてしまいます。

しかも、バナーの色は「誰に見せるか(ターゲット)」「何を売るか(商品・サービス)」など、いくつもの観点から考える必要があります。

目的という1本の軸があれば、それらの観点を整理して、最終的な配色に迷わずたどり着けます。

目的に合わせてバナーの配色を決める5ステップ

ここからは、セール告知のバナーとビジネスセミナーのバナーを例に、目的から配色を決める流れを5つのステップで見ていきましょう。

ステップ1:目的を「誰に・何を・どうしてほしいか」で書き出す

色を選ぶ前に、まずバナーの目的を短い言葉で書き出します。

「誰に」「何を伝え」「どう行動してほしいか」の3つに分けると、目的がはっきりします。

	セール告知のバナー	ビジネスセミナーのバナー
誰に	ネットショップの常連客	中小企業の経営者
何を伝え	週末だけ最大50%OFF	専門家による無料セミナーがある
どうしてほしいか	今すぐセール会場を見てほしい	安心して申し込んでほしい

書き出した目的が、このあと色を選ぶときの判断基準になります。

ステップ2:目的に合う色の系統を選ぶ

次に、目的に合う色の系統を選びます。

色には、多くの人が共通して感じやすい印象があり、目的ごとにおおよその定番があります。

バナーの目的	よく使われる色	与えやすい印象
今すぐ行動してほしい(セール・期間限定)	赤・オレンジ・黄などの鮮やかな暖色	緊急感・高揚感・お得感
信頼してほしい(金融・BtoB・セミナー)	白・薄いグレー+紺・青	誠実さ・落ち着き・安心感
清潔感を伝えたい(日用品・医療)	白+水色・ライトブルー	爽やかさ・清潔感
やさしさ・自然らしさを伝えたい(食品・オーガニック)	ベージュ+緑	安心感・ナチュラルさ

赤・オレンジ・黄のように温かみや活発さを感じさせる色を暖色、青・青緑のように涼しさや落ち着きを感じさせる色を寒色といいます(詳しくは暖色・寒色とは?で解説しています)。

ただし、色の印象はあくまで一般的な傾向で、ターゲットの年代や商品のイメージによって最適な色は変わります。

表は「最初の候補」として使い、ステップ1で書き出した目的に照らして選びましょう。

ステップ3:70:25:5を目安に色の面積を割り振る

色の系統が決まったら、それぞれの色をどのくらいの面積で使うかを決めます。

配色の基本では、色を3つの役割に分け、面積を「70:25:5」にするとまとまりやすいとされています。

• ベースカラー(70%):最も広い面積を占める土台の色。
  バナーでは主に背景です。
• メインカラー(25%):デザインの印象を決める主役の色。
  見出しの文字や帯などに使います。
• アクセントカラー(5%):一番目立たせたい1点だけに使う差し色。
  「50%OFF」の文字やボタンなど、ごく狭い部分に絞ります。
  強調色とも呼びます。

ステップ1の2つの目的に当てはめると、次のようなバナーになります。

左は目的どおり鮮やかな暖色で、右は落ち着いた寒色でまとめ、どちらもアクセントは1点だけに絞った例

どちらのバナーも、一番目立つ色は「最大50%OFF」や「無料で申し込む」の1か所だけに使っているので、視線が自然とそこに集まります。

70:25:5は厳密に測る数字ではなく、「アクセントはほんの少し」という感覚をつかむための目安です(割合の考え方は色の割合とは?、3つの色の役割はベースカラー・メインカラー・アクセントカラーとは?で解説しています)。

ステップ4:文字が背景に埋もれていないか確かめる

色のイメージが目的に合っていても、文字が読めなければバナーの役目は果たせません。

色の印象だけで文字色を選ぶと、背景と明るさが近くなり、文字が埋もれてしまうことがあるためです。

同じ「情熱的な赤」の背景でも、文字の色によって読みやすさがまったく違う

左のピンクは赤と明るさがほとんど同じなので、色みが違っても文字が背景に溶け込んでしまいます。

文字には、背景としっかり濃淡の差がつく色を選びましょう。

この明るさの差はコントラスト比という数値で確かめられ、本文のような小さな文字なら4.5:1以上が目安です(詳しくはコントラスト比とは?で解説しています)。

上の2つのバナーの見本も、文字はすべて4.5:1以上になるように色を選んでいます。

ステップ5:「目的→色選び→配色→効果」の一文で説明する

最後に、決めた配色を「目的→色選び→配色→効果」の流れで、一文で説明できるか振り返ります。

人に理由を説明できれば、感覚ではなく根拠を持って色を選べている証拠です。

たとえば、この記事の2つのバナーは次のように説明できます。

• セール告知のバナー
  「常連客に週末だけのセールに今すぐ気づいてほしい(目的)ので、鮮やかな赤を選び(色選び)、背景を赤・文字を白にして『50%OFF』だけを黄色にした(配色)。
  これで緊急感が出て、割引率に真っ先に目が行く(効果)」
• ビジネスセミナーのバナー
  「経営者に安心して申し込んでほしい(目的)ので、落ち着いた紺を選び(色選び)、薄いグレーの背景に紺の見出しを置き、申し込みボタンだけをオレンジにした(配色)。
  これで誠実な印象を保ちながら、押してほしいボタンがひと目で分かる(効果)」

うまく説明できない部分があれば、そこが「なんとなく」で決めた色です。

ほかの人が作ったバナーを同じ流れで説明してみるのも、よい練習になります(練習方法は実際のデザイン分析とは?で紹介しています)。

実践のポイント

バナーの配色を決める際に陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 流行りの配色やおしゃれに見える配色を、目的を考えずにそのまま採用してしまうことがあります。
  おしゃれさよりも、目的に合っているかを優先しましょう。
• 複数の目的(信頼感も出したいし、目立たせたい)を欲張りすぎて、赤と青を同じくらいの面積で使い、結局どっちつかずの配色になってしまうことがあります。
  一番大事な目的を1つ決めて、それを全体の色(ベース・メイン)で表し、2番目の目的はアクセントカラーのワンポイントで表しましょう。
  たとえば信頼感が一番なら、全体を紺と白でまとめ、価格や申し込みボタンだけを赤やオレンジにします(上のビジネスセミナーのバナーがこの形です)。
• 目立たせたい気持ちが先走り、アクセントカラーをあちこちに使ってしまうことがあります。
  アクセントが増えるほど、一つひとつは目立たなくなります。

よくある質問

• Q. 目立たせたい要素が複数あるバナーはどうすればいい?
  A. すべてを同じ強さで目立たせると効果が薄れます。
  最も伝えたい1点にアクセントカラーを使い、他の情報は文字の大きさや太さで差をつけて、ベースカラー・メインカラーの中で控えめにまとめましょう(詳しくは強調色の使い方とは?で解説しています)。
• Q. ブランドカラーが決まっている場合も、目的で色を変えていい?
  A. ブランドカラーはベースやメインに残し、目的に合わせて変えるのはアクセントカラーだけにすると、ブランドらしさを保ったまま目的を伝えられます。
  ブランドカラーの濃淡の作り方はブランドカラーをWebに展開する方法とは?で解説しています。

まとめ

バナーの目的に合わせた配色とは、「何を伝え、何を目立たせたいか」という目的から逆算して色を決める考え方です。

目的を書き出し、目的に合う色の系統を選び、70:25:5を目安に面積を割り振ったら、文字の読みやすさを確かめて、最後に配色の理由を一文で説明できるか振り返りましょう。

流行りの配色をそのまま真似るのではなく、常に目的に立ち返って色を選ぶことを意識しましょう。

まずは最近作ったバナーや気になったバナーを1枚選び、「目的→色選び→配色→効果」の一文で説明してみてください。