こんにちは！ASUE株式会社の広報のN村です。

さて、先日配色のキホンと配色を手助けしてくれるツールをご紹介する記事を公開しました。
https://asue.jp/blog/?p=18071

この中で何度か「ターゲットや商品に合わせた色選び」と言いましたが、「組み合わせについてはわかったけどじゃあターゲットや商品に合わせた色って何！？！？」となった方もいるのではないでしょうか。わたしはなります。

一般的に、若い女性がメインターゲットであればピンク・水色などの明るくて可愛らしい雰囲気の色に……や、男性がターゲットであればブルー系の色に……などはなんとなくイメージがつくところかな？と思いますが、今回はその辺りをもう少し詳しくご紹介できればと思います！

明度と彩度によって与えるイメージ

前回の記事でも明度・彩度とトーンについて簡単に触れましたが、今回は改めてもう少し詳しくご紹介していきます。

明度の差によるイメージの違い

明度とは、文字通り色の明暗にあたる属性です。明度が高いほど明るい色、低いほど暗い色になります。明度が高ければ高いほど、軽快・清潔・爽やかな印象を受け、逆に明度が低ければ重厚さや厳粛さ・不気味な印象を与える色です。

明度が高くなると軽やかな印象を受け、逆に低いとずっしりとした重厚感を感じます。また、明度が高い暖色はやわらかい印象を与え、明度の低い寒色は冷たく圧迫感を感じるため固い印象を与えます。

彩度の差が与えるイメージの違い

一方、彩度は色の鮮やかさを示す尺度で、彩度が高ければ高いほど鮮やかで派手な印象のカラーになります。逆に彩度が低いとくすんだ印象の色となり、地味さや落ち着いた印象を与えます。

また、彩度の高い暖色はエネルギッシュな印象を与える興奮色と呼ばれ、彩度の低い寒色は落ち着いた印象を与える沈静色（鎮静色でも可）と呼ばれています。

明度・彩度による視覚への影響

また、明度や彩度の違いによって、大きさなどが変わって見える場合もあります。

例えば、一般に明度が高く白に近い色は膨張色と呼ばれ、明度の低い黒っぽい色（=収縮色）よりも大きく見えますし、彩度・明度の高い暖色は前に飛び出してくるような印象を受け（=進出色）、低い色はへこんでいる（=後退色）ように見えると言われています。

トーンによるイメージの違い

トーン（=色調）とは、色の3属性のうちの明度・彩度を組み合わせたもので、色の明暗や濃淡の違いを表しています。同じ色相でも、トーンが違えば全然違う色になり、受ける印象も変わってきます。日本色彩研究所によってトーンと色相で体系化されたカラーシステムである「PCCS（=Practical Color Co-ordinate System）」では、このトーンを「ビビッド(v)」「ブライト(b)」「ストロング(s)」「ディープ(dp)」「ライト(lt)」「ソフト(sf)」「ダル(d)」「ダーク(dk)」「ペール(p)」「ライトグレイッシュ(ltg)」「グレイッシュ(g)」「ダークグレイッシュ(dkg)」という12種類のグループに分けており、ターゲットや商品に合った色選びを考える上で役立つものになっています。

純色であるビビッドトーンに白を加えていったもの（ブライトトーン・ライトトーン・ペールトーン）を明清色、純色であるビビッドトーンに黒を加えていったもの（ディープトーン・ダークトーン・ダークグレイッシュトーン）を暗清色、純色であるビビッドトーンに白と黒を加えたもの（ストロングトーン・ソフトトーン・ダルトーン・ライトグレイッシュトーン・グレイッシュトーン）を中間色、そして彩度0の色を無彩色と呼びます。

ということで、まずはトーンごとのイメージの違いについてご紹介します。

ビビッドトーン(v)

純色・原色のように呼ばれるカラーで、最も彩度の高いトーンです。冴えた・鮮やかな・派手な・目立つなどの印象を与えます。

インパクトを出したいときにおすすめのカラーです。

ブライトトーン(b)

純色であるビビッドトーンに、白を少し加えたトーンで、明清色の一つです。明るい・健康的な・陽気などの印象を与えます。

スポーツ用品や子供向けの商品などにおすすめのカラーです。

ストロングトーン(s)

ビビッドトーンの彩度を少し落としたトーンになります。鮮やかさはありますが、彩度を下げたことでビビッドトーンよりも落ち着いた力強い印象になるカラーです。

ディープトーン(dp)

ビビッドトーンに黒を少し足したカラーで、暗清色の1つです。明度・彩度ともにビビッドトーンより下がることで、落ち着いた上品な印象のカラーになります。

和やクラシカルなイメージを与える色なので、そのような商品・ブランドにおすすめのカラーになります。

ライトトーン(lt)

ブライトトーンに白を加えて、ブライトよりもさらに明度が高くなり彩度が下がったトーンです。いわゆる「パステルカラー」とも呼ばれるカラーで、爽やかさや澄んだ印象があるため、幅広い層に好印象を与えやすいトーンなので、生活用品や子ども向けの商品などにも合うカラーです。

ソフトトーン(sf)

純色であるビビッドトーンに明るいグレーを加えたことで彩度を下げたトーンです。

彩りも感じるトーンですが、落ち着きがあり、やわらかさややさしさ、穏やかなどの印象を与えるカラーなので、派手すぎない落ち着いた雰囲気をつくりたいときに合うトーンです。

ダルトーン(d)

純色であるビビッドトーンに暗いグレーを加えることで彩度と明度を下げたトーンです。中間色の1つです。

渋くくすんだ印象になるので、落ち着きのある上品なデザインに仕上げたい場合に合うトーンです。絶妙な色でうまく使えばおしゃれさも出る色ですが、同系色でまとめると地味になりやすいカラーなので、類似色だけでなくポイントで他の色相のカラーも取り入れるなどの工夫をすると◎です。

ダークトーン(dk)

純色であるビビッドトーンに黒を足した暗清色の1つです。

重厚感があり大人っぽさや格式高い印象を与えるため、高級感やフォーマル感を出す際に合うカラーです。

ペールトーン(p)

純色に白を多く加えた、最も白に近いトーンです。

可愛らしさや透明感を感じる色なので、女性に好まれやすいカラーになります。優しく可愛らしい印象になるため、ベビー用品や子どものいるファミリー向けのデザインにもよく使われる他、この色調単体では薄くインパクトが少ない色なので背景色などにも使われます。

ライトグレイッシュトーン(ltg)

ペールトーンから明度を落としたトーンで、中間色の1つです。

明度は高めですが彩度が低く、明るさもありながら落ち着いた印象になります。大人っぽい雰囲気にしたい際に向いているトーンです。オーガニック系の商品やリラクゼーション系のサロンなどに合うカラーです。

グレイッシュトーン(g)

ライトグレイッシュトーンからさらに明度を下げたトーンで、中間色の1つです。

ナチュラルな雰囲気や濁った印象、おとなしい印象などを与える色調で、アースカラーとも呼ばれています。ナチュラルな印象にしたい際に合うカラーです。

ダークグレイッシュトーン(dkg)

純色に黒を多量に加えた、明度・彩度共に最も低いトーンです。（暗清色の1つ）

暗いカラーで、重厚感を出したり、暗い印象やダンディな印象などを与える色調ですが、色の差が少なく見る環境によっては区別がつきにくい色になります。

 

 

同じイラストをそれぞれのトーンにしてみるとこんな感じ。

ターゲットと商品に合った配色を考える

例1：移動動物園

移動動物園的なものの宣伝用のデザインを作るとします。ふれあいコーナーなんかもあったりして……小さいお子さんのいる家族連れがメインのターゲット層です。ふれあいコーナーがある小ぶりな動物園は大体家族連れしかいないって、一人で行ったときに学んだからわたしは知ってるんだ。……ちなみにそういうところは虎は多分いないね。ごめん。

上のカラーだとブライトトーン付近のカラーリングで、元気で陽気で子供らしさがあって……という印象を受けやすいのではないでしょうか。一目見て小さなお子さんを連れて行けるイベントだな〜と認識しやすいと思います。対して下のカラーでは、明るさはありますが、彩度が低く色もツートーンになっていて、落ち着いた印象を受けるので、子供向けのイベントっぽさが感じ取りにくいのではないでしょうか。

例2：高校生向けの塾

続いて、高校生が受験期に通う塾・予備校の宣伝用のデザインです。塾や予備校であれば、成績が伸びそう！というような成果に繋がりそうな信頼感や知的なイメージを出したデザインが好まれるかと思います。

2枚の画像はブルー背景に白い文字と黄色い文字という配色ですが、1枚目は彩度の高いブルーが基調になっています。青色は一般に信頼感や知的なイメージを感じると言われているカラーで、特にこのような青色はビジネスシーンなどに多く用いられるカラーです。塾や予備校などでも、知性や信頼感などが感じられるカラーは合ってると言えると思います。一方、2枚目のカラーは彩度・明度共に低く落ち着いていて、穏やかな雰囲気になっています。このようなカラーはリラクゼーションサロンや美容院などユーザーに落ち着いた雰囲気を伝えたい場合に合うカラーであり、緊張感を伴う大学受験のための塾にはあまり合うカラーではないものになります。

例3：20-30代女性向けのアパレルLook

こちらはモード感のある女性の写真を使った、20代〜30代の女性向けのワードローブを扱うブランドのルックデザイン的なものです。このような写真を使ったデザインの場合は、ターゲットや商品を考慮することはもちろん写真の世界観を壊さないような配色を選ぶことも重要になります。

2枚の画像は、どちらもピンクメインの配色ですが、左の画像では、スモーキーな彩度・明度が低めのピンクがメインになっていて写真の雰囲気にも合っています。また、20代〜30代のワードローブというブランドのテーマにも合っています。2枚目のカラーは彩度も明度も高いピンク色で、可愛らしい印象になっており、ターゲットとも写真ともちぐはぐな印象だと思います。

2枚目のカラーはこういう写真など、ガーリーな雰囲気のブランドや写真であれば合います。

例4：着物の広告

続いて、和風の商品・サービスの場合の配色です。

メインのカラーに鮮やかで彩度は高いけれど明度の低いカラーを使うことで落ち着いた上品さやクラシカルな雰囲気を出しやすくなります。そのほかに明度の高いカラーを使う場合も、ペールトーンやライトトーンのような明清色ではなく、グレーがかった彩度低めのカラーを使うと和風の雰囲気を損なわずに配色ができると思います。

1枚目は、明度の低い赤色にグレーがかった薄いベージュの組み合わせで、赤色が引き立つ和風の配色ですが、2枚目はパステルカラーになっていて（これはこれでイラスト単体で見れば可愛いですが）和の雰囲気には欠けますし、写真ともちぐはぐな印象になります。

例5：老人ホーム

続いて、緑を基調とした介護付き有料老人ホームのデザインです。緑色は、安心感や穏やかさ・快適さなどの印象を与えるカラーなので、ターゲット・商品共に合っているかと思います。

1枚目は、彩度の低い落ち着いたグリーンとベージュなどのアースカラーが組み合わせられていて、落ち着いた印象もあり、穏やかな毎日を送れそうな雰囲気があると思います。2枚目のカラーも、明るくて快活な印象を受けますが、日々の生活を送る場所……と思うともう少し落ち着いた色の方が合うのではないかと思います。2枚目の色は健康食品系のLPとかでよく見る色かな……？

 

まとめ

前回の「デザインの配色はどう決める？ 配色のキホンと困ったときに頼れるWeb配色ツール」と合わせて、デザインの配色の考え方のお話をお送りいたしました。なんとなく、こういうターゲット・こういう商品ならこの辺の色……というような配色を考えるイメージやヒントに繋がれば幸いです！

ASUEでは、ブログやメールマガジンでWebマーケティングに関する情報を発信しております！ブログの更新もメルマガでお知らせしているので、気になる方はぜひご登録くださいませ〜！

 

おまけ

色で起こる目の錯覚画像を用意しました。

ご飯粒の数を数えるくらい暇なときに見てください。

飛び出たりへこんだりするやつ

本編中にも出てきた進出色と後退色。この画像をイラレで作ってたらものすごく飛び出して見えて感動したのでみんなにも見せたかった。

二つ色は同じ？

よくあるやつです。画像内の2つの丸、左よりも右の方が暗い灰色に見えませんか？

実は2つとも同じ色です。

交差点の黒いモヤ

白い十字部分に、黒っぽいモヤが見える画像です。