ターゲットに合わせた色選びとは?届けたい相手に響く配色の考え方

基本の理解

まずはターゲットに合わせた色選びとは何か、そしてなぜ必要なのかを押さえましょう。

ターゲットに合わせた色選びとは何か

ターゲットに合わせた色選びとは、バナーやデザインを届けたい相手(年齢層・性別・好みなど)が、どんな色に好感を持つかを考慮して配色を決める考え方のことです。

ここでいうターゲットとは、そのデザインを見てほしい・行動してほしい相手として想定する人のことです。

ターゲットの好みに合った色を使うことで、「自分に向けられたものだ」と親近感を持ってもらいやすくなります。

同じ商品でも、伝える相手が変われば適した見せ方(配色)も変わることを理解しておくことが大切です。

なぜターゲットを基準に色を選ぶのか

制作者自身の好みだけで色を選んでしまうと、実際にそのデザインを見るターゲットの感覚とズレてしまうことがあります。

年齢層や性別、好きなものによって、好まれやすい色の傾向(明るい色/落ち着いた色など)には一定の違いがあるとされています。

たとえば、トレンドに敏感な若い世代向けの商品なら、ピンクや淡くやわらかい色で若々しさやかわいらしさを演出し、ビジネスパーソン向けのサービスなら、白・グレー・青などで信頼感や落ち着きを演出する、といった使い分けがよく見られます。

ただし、こうした傾向はあくまで出発点です。

次の章で、ターゲットに本当に響く色を見つける手順を見ていきましょう。

ターゲットに合わせて色を選ぶ4ステップ

ここからは、ターゲットに合わせた色選びを、実際の作業の流れにそって4つのステップで見ていきましょう。

ステップ1:年齢・性別だけでなく「好きな雰囲気」まで描く

まず、ターゲット像を具体的に描きます。

このとき、年齢や性別だけで止めず、「どんな暮らしをしていて、どんな雰囲気のものが好きか」まで踏み込むのがポイントです。

同じ「20代女性」でも、好きな雰囲気によって響く色はまったく違うからです。

同じ「20代女性」でも	響きやすい色の例
かわいいもの・流行りのものが好き	淡いピンク・ラベンダーなどのパステルカラー
自然体の暮らし・オーガニックが好き	ベージュ・カーキ・テラコッタなどのアースカラー
シンプルで洗練されたものが好き	白・グレージュ・チャコールなどのモノトーン寄りの色

パステルカラーは白を多く混ぜたような淡くやわらかい色、アースカラーは土や木、葉など自然を思わせる色、グレージュはグレーとベージュの中間のような色のことです。

ターゲット像は「20代女性」ではなく、「休日はカフェ巡りをする、ナチュラルな雑貨が好きな20代女性」のように、1人の人物として書き出してみましょう。

ステップ2:ターゲットが普段見ているデザインから色を集める

ターゲットが好きな色を、自分の頭の中だけで想像するのには限界があります。

そこで、ターゲットが普段目にしているデザインを実際に集めて、共通する色を探します。

集めた画像を1か所に並べたものをムードボードといい、次の手順で作れます。

1. ターゲットが読んでいそうな雑誌の表紙、Webメディア、Instagramなどの投稿、競合サービスのサイトやバナーを探す。
2. 「ターゲットが好きそう」と感じたものを10〜20枚ほど集め、FigmaやPinterestのボードなど1か所に並べる。
3. 並べた画像を眺め、何度も出てくる色や、全体に共通する明るさ・鮮やかさを書き出す。

たとえば、ステップ1の「ナチュラルな雑貨が好きな20代女性」のムードボードから色を書き出すと、次のようなパレットになります。

ムードボードに何度も出てきた色を4色に絞ったパレットの例

集めた画像は、あくまで色の傾向を観察するための参考です。

他人のデザインや写真をそのまま自分の制作物に使うことはせず、書き出した色だけを手がかりにしましょう(優れたデザインから配色の理由を読み取る練習は実際のデザイン分析とは?で紹介しています)。

ステップ3:色の種類だけでなく「トーン」まで合わせる

色を選ぶときは、「何色か」だけでなく、明るさや鮮やかさの調子であるトーンまで合わせましょう。

同じピンクや青でも、トーンが違うと与える印象は大きく変わるからです。

同じ色相でも、明るさ・鮮やかさ(トーン)が変わると印象が大きく変わる

たとえば「20代女性向けだからピンク」と決めても、元気な印象を出したいなら鮮やかなピンク、大人っぽさを出したいならくすんだピンク、というようにトーンで選び分けます。

ステップ2のムードボードで書き出した「全体に共通する明るさ・鮮やかさ」が、ターゲットに合うトーンの手がかりになります(トーンを揃える配色は明度・彩度を使った配色とは?、トーンの体系はPCCSとは?で解説しています)。

ステップ4:ブランドカラーとは面積で役割分担する

最後に、ブランドカラーとの兼ね合いを調整します。

ブランドカラーとは、企業やサービスを象徴する色として、ロゴやサイト全体で一貫して使われる色のことです。

たとえば、ブランドカラーが濃い紺なのに、ターゲットの10代女性には淡いピンクが好まれそう、というように、2つがぶつかることがあります。

このときは、どちらかを捨てるのではなく、色ごとに使う場所と面積を分けて両立させます。

• 元のブランドカラー(濃い紺):ロゴや見出しの文字など、ブランドを示す場所に残す。
• ブランドカラーを明るくした色:広い面積の背景に使い、やわらかい印象にする。
• ターゲットが好む色(ピンク):ラベルやボタンなど、目を引かせたい狭い場所に使う。

右はロゴと見出しに紺を残し、背景を明るい青、ラベルとボタンをピンクにして、10代女性向けのやわらかさを足した例

右の例では、紺と同じ色みの明るい青を背景に使っているので、ブランドらしさを保ったまま、やわらかい印象になっています。

文字はすべて、背景とのコントラスト比(明るさの差)が4.5:1以上になるように選んでいます。

ブランドカラーから明るい色を作る方法はブランドカラーをWebに展開する方法とは?、色ごとの面積の目安は色の割合とは?で解説しています。

実践のポイント

ターゲットから色を考える際に陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 「ターゲットは20代女性だからピンク」のように、属性と色を短絡的に結びつけてしまい、商品やブランドの個性を無視してしまうことがあります。
  年齢・性別の傾向はあくまで参考とし、ステップ1・2のように好きな雰囲気や普段見ているデザインまで調べて色を決めましょう。
• ターゲットの好みだけを優先しすぎて、商品・サービスの個性やブランドカラーとの整合性がとれなくなることがあります。
  ステップ4のように、ブランドカラーとターゲットの好む色を面積で役割分担して両立させましょう。
• ターゲットに合う色を選んでも、色の印象を優先するあまり、淡い背景に淡い文字を乗せて読みにくくしてしまうことがあります。
  文字には背景としっかり明るさの差がつく色を選びましょう(基準はコントラスト比とは?で解説しています)。

よくある質問

• Q. ターゲット像が明確でない場合はどうすればいい?
  A. 既存の顧客データやアンケート、競合サービスのユーザー層などを参考に、大まかなターゲット像を仮に設定してみましょう。
  仮のターゲット像があるだけでも、色選びの判断基準になります。
• Q. 複数のターゲット層に向けたデザインの場合は?
  A. すべての層に完璧に合わせるのは難しいため、最も重視したいメインのターゲット層を1つ決め、その層を基準に配色を組み立てるのがおすすめです。
• Q. バナーを作るときは、ターゲットと目的のどちらを優先すればいい?
  A. どちらか一方ではなく、「誰に(ターゲット)」「どうしてほしいか(目的)」をセットで書き出してから色を決めます。
  目的から配色を決める手順はバナーの目的に合わせた配色とは?で解説しています。

まとめ

ターゲットに合わせた色選びとは、届けたい相手の好みを考慮して配色を決める考え方です。

年齢・性別だけでなく好きな雰囲気までターゲット像を描き、ターゲットが普段見ているデザインから色とトーンを集めることで、親近感を持ってもらいやすい配色になります。

ブランドカラーとぶつかるときは、面積で役割分担して両立させましょう。

まずは届けたい相手を1人思い浮かべ、その人が見ていそうなSNSやWebメディアから画像を10枚集めて、共通する色を3つ書き出してみてください。