今回は知っておくと何かと役立つ『配色の基礎知識』と『色の心理学』についてまとめます。
1. 色を決める3つのパラメーターをおさえよう
まず、基本的なところを簡単に説明します。色を決めるのは、①色相 ②明度 ③彩度の3つのパラメーターです。
- 色相
赤、青、黄などの色みの違いを表します。これは分かりやすいですね。 - 彩度
色みの強さの度合いを表します。いわゆる「あざやかさ」ですね。 - 明度
色の明るさの度合いを表します。限界まで明度を高くすると白になります。逆に限界まで低くすると黒になります。
この3つは「色の三属性」なんて呼ばれたりします。この3つは配色の話で何かと出てくるのでおさえておきましょう。
2. 補色について知っておこう
色相の並びをぐるっと1周つなげたものを色相環と呼んだりします。この色相環において、向かい合う2色ペアーの関係を補色と言います。この補色関係にある2色は、お互いを引き立てる性質があります。つまり、「青色のデザイン」にちょこっとアクセントを入れるなら補色の「黄〜オレンジ」あたりを選ぶと良い感じになるわけですね。参考程度に覚えておきましょう。
3. 色の選び方の基本を知ろう
はじめは、次のように色を選ぶことをおすすめします。ポイントは色の数を絞ることです。統一感があるほど、スッキリと綺麗に見えるのです。
- ■メイン色
1つテーマ色を決める。たとえば青 - ■サブ色
メイン色に近い色をもう1色。たとえば水色 - ■差し色
アクセントとして一部に青の補色周辺をつかう。たとえば橙色。 - ■黒
どの色にも合う - □白
どの色にも合う - ■グレー
ほとんどの色に合い、全体のバランスを崩さないため使いやすい。
たくさんの色を使って、カラフルに美しい配色をすることもできますが、やや上級者向けです。ますは、使う色の数は絞るのがベターでしょう。
4. 色ごとの心理効果を知ろう
色ごとに見る人に与える印象は異なります。ここでは、例を出しながら色の心理効果を紹介していきます。まずは一覧で。
- ■黒
他の色を引き立てる。高級感・大人っぽい印象を出しやすい。 - □白
どの色にも合う。清潔感を感じさせる。 - ■グレー
ほとんどの色になじむ。主張しすぎないため背景色として使いやすい。 - ■赤
目を引く効果あり。「興奮」「情熱」などの印象を与える - ■橙
親近感を感じさせる。「温かみ」「親近感」「喜び」などの印象を与える - ■黄
喜びや、陽気な印象を与える。 - ■緑
平和、ナチュラル、エコなどの印象を与える。リフレッシュ効果がある - ■青
最も万人ウケする色。知性、誠実、冷静、寒さを感じさせる - ■水
青春、爽やかなどのの印象を与える - ■紫
優雅、高貴な印象を与える - ■ベージュ
緊張を緩め、親近感を感じさせる。アットホームな雰囲気を演出したいときに使うと良い。
次に、いくつかの色をもう少し詳しく見てみましょう。
■万人ウケする青
青は、好感度No.1の色です。性別・年齢問わず、誰もが受け入れられる最強色と言えるでしょう。また、誠実、爽やか、冷静などの印象を与えられてるため、青色をテーマ色としている企業はたくさんあります（ポカリスエット、ローソン、Facebookなどなど）。
■親近感を感じさせる橙＆ベージュ
橙色は、見る人に温かく、身近でかつ活発な印象を与えます。ベージュは橙色ととてもマッチします。「アットホーム感」を出したいときにはこの配色を試しみましょう。
■ナチュラルで落ち着いた印象を与える緑
自然、エコ、オーガニックなどがデザインキーワードなら緑を使うと良いでしょう。明度低めの「深緑」だと落ち着いた印象も与えます。
5. わび・さびの演出は彩度低めの色で
少し別の角度から見てみましょう。
- 彩度の低い色はわび・さびを演出しやすい
- 一方で、彩度の高い色はダイナミックさが演出しやすい
また、低彩度色には、プロフェッショナル感を出す効果もあります。低彩度色をメインカラーとして使う場合、背景には白やグレーなど主張しない色を選ぶと良いでしょう。
6. 白に近い高明度カラーで「透明感」を出す
透明感や清潔感を醸し出したければ、白に近い「明度高め」のカラーを使うと良いでしょう。とくに、淡いオレンジやピンクなどの「暖色」には透明感を感じさせる効果があります。デザインの際には、背景に白など薄い色を選ぶと効果的です。
7. 黒と低明度色で「高級感」を出す
「高級感」「シャープ」「大人っぽさ」などの印象を与えたければ、黒と「低明度色」を使うと良いでしょう。また、黒に「明度の低い深紫」なんかを合わせると「セクシーさ」「グラマラスさ」を演出することができます。
8. 代表的な野菜・果物の色を使い「ヘルシー」さを出す
野菜・果物をイメージしたときに多くの人の頭にぼやっと浮かぶ「緑」「オレンジ」「黄色（レモン色）」などの組み合わせはヘルシーさを表現するのに適しています。とくに緑は効果的です。
9. 目を引きたければ、高彩度の色を使う
目がチカチカしてくるような彩度の高い配色にすれば、見る人の目を引きやすくなります。見てもらうことが何より重要になるポスター広告なんかでは有効でしょう。ただし、高彩度色は見ていて疲れやすいので、集中して見てもらいたい場合には不向きでしょう。また、高彩度色ばかり使うと、それらが主張し合い、マッチできずに見る人を不快にさせる恐れがあります。
10. グラデーションで多色表現する
多色表現はなかなか難しいですが、グラデーションをうまく使うと美しく表現することができます。
明度を変えるグラデーション
たとえば、上のポリゴン模様の画像では、右上から左下へと段々とパーツの明度が下がっています。明度をグラデーションさせた美しいデザインですね。
色相だけを変えるグラデーション
配色が素晴らしいiPhoneアプリと言えば、モニュメントバレーでキマリですね。淡い配色の世界がとても美しいゲームです。モニュメントバレーには無数の色が使われていますが、どれも彩度が低めに設定されており、統一感があります。たとえば、上の画像を見てみると、上端部の朱色と、下端部のエメラルドグリーンは色相にしか違いはありません。つまり、上の朱色を、色相バーで左側に少し動かせば、下のエメラルドグリーンが出来上がるのです。ベース色を選び、色相バーをちょこちょこと動かしてサブ色を選ぶのも1つの有効な手段です。
11. 自然界に見られる配色は受け入れられやすい
自然が作り出す配色はどれも美しいものです。また、見慣れていることもあるためか、見る人が受け入れられやすい配色が多くあります。 参考までに知っておくと良いでしょう。
最後に
ここまで配色のルールについて紹介してきましたが、慣れるまでは自分で配色を考えるよりも、オシャレなWebデザインや本を参考にするのが良いと思います。また、このブログでも近いうちに、「オシャレな配色パターン」をひたすら羅列する記事を書くことにします。カラーコード付で、気軽に参考にできるモノにしようと思っているのでお楽しみに。