伝わるデザインを作るのに必須な色のトーンとは？

デザイン歴23年、ガチデザイナーの「Tetsuya」です。

デザインをする際に重要な要素はたくさんあるのですが、
その中でもとりわけ大事なのが「色のトーン」になります。

なぜなら、同じ色でもトーンによって相手に伝わる印象が変わりますし、
特に人は視覚情報の8割を色で認識しているからです。

なので、色のトーンはすごく重要。
極端な話「色のトーンを制すものはデザインを制す」。

そう言い切ってしまってもいいぐらいです。

ということで、今回は「色のトーン」について解説してますので、

特に自分のターゲットに響く色のトーンが分からないという方は
ぜひ参考にしてください。

これだけは知っておきたい色の基本

色のトーンを語る上で「これだけは外せない」という基本的な情報からお伝えします。
なので、すでに分かってるという方は読み飛ばしてくださいね。

有彩色と無彩色

色には大きく有彩色と無彩色の大きく2つに分けることができます。

有彩色というのは、いわゆる色がある状態。つまりカラーです。
逆に無彩色というのは色味がない状態、モノクロのことを言います。

そして色のトーンというのは、有彩色と無彩色を使って組み合わせた
色の三属性によって作られ、それぞれの色味やトーンで人に与える印象が変わります。

色の三属性

「色の三属性」と聞くとそれだけでアレルギー反応を起こしそうな方がいそうですが、
全然難しくないので大丈夫です。

要は「色を考えるには3パターンの考え方がありますよ」ということです。

それが何かというと、「色相・彩度・明度」です。

こう書いてしまうと分かりにくいので、噛み砕いてお伝えすると
「色味、鮮やかさ、明るさ」です。

これでもまだ分かりにくので、図で解説（笑）

まずは色相。

色相は色味の変化のこと。この色味をどう使えばいいのか？色のイメージはこちらの記事にまとめています。

次に彩度。

彩度というのは、色の鮮やかさになります。彩度が低くなると「無彩色（モノクロ）」に近づきます。

そして最後に明度。

明度は色の明るさです。明度が高くなると白に近づき、逆に明度が低くなると黒に近づきます。

デザインの印象を司る12のトーン

デザインは色味によって受け手側の印象は変わりますが、それに加えて、
色のトーンによってもかなり伝わる印象が変わります。

なので、色味も確かに重要ですが、自分のターゲットに響きやすいデザインを作るなら
色のトーンは外せませんので、ぜひざっくりでも覚えてください。

ちなみに、色のトーンには「色の三属性」を組み合わせてできる
以下12種類のトーンがあります。

デザインに色のトーンを活かす方法

さて、僕の記事はここからが本題です。

有彩色や無彩色、色の三属性やトーンの話を聞いたところで
「そもそもそれをどうデザインに活かせば良いねん？」と思われるかもしれません。

ということでここからは、トーンの活かし方について解説します。

明度の活かし方

色の三属性のうちの１つ「明度」は高くなると白に近づき、低くなると黒に近づきます。
なのでこの特性を考えると、明度によって「軽さや重さ」を表現できます。

つまり、デザインを明るく軽やかな印象にしたい場合は、明度を高くして色を明るくし、
逆に重厚感のある印象にしたい場合は、明度を低くして暗くすると落ち着きのある、
シックで高級感のある印象にすることができます。

また、色味を明るくすると軽さに加えて柔らかい印象にもなりますので、
幼い子供向けのデザインを作る場合は、明るめの柔らかいトーンがおすすめです。

彩度の活かし方

彩度は色の鮮やかさで、彩度が低くなると無彩色（モノクロ）に近づきます。
なのでこの特性を考えると、彩度によって「渋さや落ち着き」を表現できます。

つまり、軽すぎず落ち着いた印象にしたい場合は、
彩度を低く、明度は高めにして明るめのグレーがかった色のトーンに、

落ち着きのある渋めの印象にしたい場合は、
彩度を低く、明度も低めにして暗めのグレーがかった色のトーンにすることで
それらしい雰囲気を作ることができます。

上記のトーンを各世代が好みやすい色のトーンに当てはめると、
このような図式が完成します。※あくまでも目安ですが、色選びの参考にしtください。

こうして色に関する情報を分析していくと、自分のデザインに必要となる
色味や色のトーンをどの程度の振り幅で作れば良いのか、
大まかな範囲でも絞れるようになりますので、

色選びで悩まれる場合は、ターゲットを明確にし、
自分が届けたい人たちはどんな色やトーンを好むのか、先に情報を集めてからデザインすると、
デザインの色選びで悩まなくなったり、的外れな色になることがなくなります。

色のトーンをうまく調整する3ステップ

ちなみに最近はどんなツールにもカラーパレットがついていて
自分の好きな色を自由に作れるようになってますが、

自由度が高ければ高いほど調整がしにくくなってしまいます。

ですので、もしも色の調整をご自身でされる場合は、以下の3ステップがおすすめです。

基本的に色のトーンというのは、どんなメッセージを誰に届けたいのか
そのために調整するものでもありますので、

自分が伝えたいメッセージやターゲットさえ決まっていれば、
基準色を選び、明度や彩度を調整することで、ターゲットに響きやすい色味にできます。

逆にこれらの順番を間違えてしまうと、色の調整に時間がかかり、
しかも相手が認識しにくい、伝わらない配色となる可能性が高くなるため、

明度や彩度の調整は、ある程度デザイン全体のレイアウトが仕上がり、
ターゲットも明確にしてからするぐらいでちょうど良いです。

逆に企業ロゴや商品ロゴなど、規定によって変更ができない色もありますので、
先にいろんな色を合わせてごちゃごちゃ調整するよりも、先に色味が変更できない要素など、
レイアウトをまとめながら、最後にデザイン全体のトーンを調整する。

そんな感じでする方が色の調整がしやすく、デザイン全体の色はまとめやすくなります。

ですので、デザインもターゲットや目的を考え計画的に行えば、
効率良く制作することができるようになりますので、

デザインを作る際には、できるだけ感覚ではなくしっかりと
「デザインの目的と理由」を考えて意図に基づき作るようにしてくださいね。

まとめ

今回は「伝わるデザイン」を作るのに必須となる色のトーンについてお伝えしました。

というのもデザインはアートではなく、目的を達成したり、問題を解決するために行うものだからです。

なので、いくらデザインを頑張って作っても、自分の定めたターゲットに
気付いてもらえなかったり、振り向いてもらえなければ、デザインする意味がありません。

特に人は情報の8割を色で認識しているため、パッと見た瞬間に
「自分に関係ありそうなものだ」と思ってもらえる色のトーンは、非常に重要な要素となります。

だからこそ、自分のターゲットが好む色やトーンというのは、
きちんと知っておくことが大切ですし、逆にそうしてターゲットが好む色さえ知っていれば、
余計な配色で悩むことはなくなります。

そもそもデザインは自分のためではなく、相手とコミュニケーションするために行うものです。

ですので、デザインする上で最も大事なのは、
自分の感覚（センス）ではなく、ターゲットとなる人をきちんと知ること。

そうすれば、デザインで悩むことも少なくなり、相手の反応も取りやすくなります。

ということで、もしもデザインで悩まれる場合は「自分にセンスがない」と嘆くのではなく、
まずはきちんとターゲットとなる相手を知ることから始めてみましょう。

そうすれば必ず「伝わるデザイン」の道は開けます。

以上、参考になると嬉しいです。