配色は意図に合った色選びが大事！・・とは言うけれど

ここのところサイトをデザインする時、配色につまづいています。

皆さんはどのように色を決めていますか？

---

なんとなく、好きだからで色を決める

わたしは「いつもなんとなく」で色を決めていました。

サイトのイメージだけ決めて、あとは一番しっくりくる色を感覚で決める感じです。

特に不自由はしていなかったのですが、困ったことがひとつ。

それはサイトデザインを説明する時、なぜこの色がいいのか、ということを依頼者に伝えられないということです。

本来であればサイトの目的や業種に合った色を選択し、それがユーザーに与えたい印象と合ってることをお伝えしたいのです。
でも、「なんとなく」という感覚で決めているので言葉が出てこない。。

「配色の持つ効果は絶大」これは事実です。
改めてWebサイトでの色選びについて考えてみました。

配色に頭を抱えたら基本に帰ろう

好きな色だから・・ではなく、説得力のある配色には色の知識が必須。

というわけで、ひさしぶりに「色の基本」について書き出してみました。

色を表す方法はいくつかありますが、わたしが主に使っているのが「HSV色空間」です。

これは色を色相（H)、彩度（S)、明度（V)の３つの要素であらわしたもの。

• 色相とは

赤や黄色、緑、青などの色味を表す要素のこと。「赤っぽい色」や「青っぽい色」など、色の相を表す尺度です。

• 彩度とは

鮮やかさを表す要素。同じ色でも、彩度が高いと鮮やかで色みが強く見えます。逆に彩度が低いと灰色に近くなり、彩度がゼロになると色味がなくなるので、無彩色（黒や白や灰色）になります。

• 明度とは

文字通り色の明暗の要素です。明るさを表す尺度。明度が低いほど黒っぽく、高いほど明るくなります。

色の組み合わせはトーンを意識

複数の色を使う時、色の組み合わせを考えることが大事ですが、その中でもトーン（色調）はやっぱり意識しています。

トーンとは

色を明度と彩度のバランスでとらえます。明度と彩度を変えることで同じ色でも印象がガラっと変わります。

トーンを変えることでよく使う色の決め方

シンプルな配色にしたい時：同じ色（色相）で彩度や明度を変える。色の使い過ぎは騒がしくなりがちなので、見かけの色数を減らしたい時に使っています。２，３色なら同じ色相の中で色を使い分けることができます。

シンプルでありながらも鮮やかさが欲しい時：同じトーンで色相を変える。トーン（彩度・明度）は同じで色相のみ、※色相環で近い色を組み合わせます。色の数が増えたことを感じさせずに、鮮やか過ぎない色の配色を作ることができます。

※色相環とは色相をリング状に並べたもの

インパクトのある配色にしたい時：補色を組み合わせる。トーンの似た補色（色相環の反対側の色同士）を組み合わせることで、まったく異なる色同士を組み合わせることになります。賑やかで元気な印象にはなりますが、まとまりのない配色になりがちかも。トーン（彩度・明度）が近い色同士なら、落ち着いた印象も加えることができます。

ここまではフツーに色を決める時に使う仕組みですが、当然のことながらこれだけでは、一目でWEBサイトの意図にあった色選びができるわけではありません。

色の持つ力をサイト作成にどのように活かすのか？

「色」には、その色から連想される言葉があります。
例えば

「赤」　良いイメージ：情熱・熱い　悪いイメージ：危険・派手
「オレンジ」　良いイメージ：活発・元気　悪いイメージ：幼い・派手
「茶色」　良いイメージ：大人っぽい　悪いイメージ：暗い・汚い等々

どの色にも良いイメージと悪いイメージがあり、同じ色でも彩度や明度によってイメージは大きく変わります。

色と言葉はリンクしている

サイトを作る際は、そのサイト上で発信したいキーワードがありますね。

例えばペット関連（初心者向けのペットと共存するためのサポートサイト）のサイトを作成したい時は、

キーワードとして「安心感」「信頼性」「楽しさ」などいくつか出てきます。

「安心感」「信頼性」「楽しさ」というキーワードを訴求するための配色はどうでしょうか？

連動する色はいくつか思いつきますが、決め手が難しいですね。

「配色イメージスケール」を活用してみる

一つの方法として「配色イメージスケール」（日本カラーデザイン研究所）を活用しています。

説明は、こちらのサイトがわかりやすかったかな

→イメージスケールの基本 | カラー戦略の専門家 | NCD-WEB | 色彩心理・生活者研究・トレンド分析の日本カラーデザイン研究所 (ncd-ri.co.jp)

これは、キーワードに合わせてこの配色がマッチする、という相関関係が一目でわかるものです。

あくまでも配色の方向性を決めるだけですが、「感じ方」は人によって違うので、まずは一般的なイメージを確認するところから始めてみてもいいのかなと思って参考にしています。

こうやって考えていくと「なんとなく」や「好きだから」という曖昧な理由ではなく、ロジックは大事ですね。
「このサイトで訴求したい「キーワード」が〇〇なので、そのキーワードにマッチする色がこの色です」というように、色の決め方を直感ではなく論理的に依頼者に伝えやすくなると思います。

まとめ

以前、在宅ワーカー養成講座でデザインの講習を受けた時
「良いデザインとはユーザーのことを考えて説明できるデザイン」
ということを教えていただきました。

実際に作り始めて1年以上経ってから、あぁ何となくそういうことだったのでは・・と今頃になってやっと気づくスローペースぶりです(._.)

色の選び方や組み合わせ方については、これからも試行錯誤していきます。

みなさんも色の決め方には自分のパターンがあると思いますが、良かったら教えてくださいね。

最後までお読みいただき、ありがとうございました。

ナナイロ＠shibazaki