読者です 読者をやめる 読者になる 読者になる

LITERALLY

知っておくと楽しい知識をまとめて紹介

さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』

f:id:tsukuruiroiro:20161026153530j:plain

今回は知っておくと何かと役立つ『配色の基礎知識』と『色の心理学』についてまとめます。

 

1. 色を決める3つのパラメーターをおさえよう

f:id:tsukuruiroiro:20161026154333j:plain

まず、基本的なところを簡単に説明します。色を決めるのは、①色相 ②明度 ③彩度の3つのパラメーターです。

  1. 色相
    赤、青、黄などの色みの違いを表します。これは分かりやすいですね。
  2. 彩度
    色みの強さの度合いを表します。いわゆる「あざやかさ」ですね。
  3. 明度
    色の明るさの度合いを表します。限界まで明度を高くすると白になります。逆に限界まで低くすると黒になります。

この3つは「色の三属性」なんて呼ばれたりします。この3つは配色の話で何かと出てくるのでおさえておきましょう。

 

2. 補色について知っておこう

f:id:tsukuruiroiro:20161026162544j:plain

色相の並びをぐるっと1周つなげたものを色相環と呼んだりします。この色相環において、向かい合う2色ペアーの関係を補色と言います。この補色関係にある2色は、お互いを引き立てる性質があります。つまり、「青色のデザイン」にちょこっとアクセントを入れるなら補色の「黄〜オレンジ」あたりを選ぶと良い感じになるわけですね。参考程度に覚えておきましょう。

f:id:tsukuruiroiro:20161101091817j:plain

はなうた活版堂

 

3. 色の選び方の基本を知ろう 

はじめは、次のように色を選ぶことをおすすめします。ポイントは色の数を絞ることです。統一感があるほど、スッキリと綺麗に見えるのです。

  1. ■メイン色
    1つテーマ色を決める。たとえば青
  2. ■サブ色
    メイン色に近い色をもう1色。たとえば水色
  3. ■差し色
    アクセントとして一部に青の補色周辺をつかう。たとえば橙色。
  4. ■黒
    どの色にも合う 
  5. □白
    どの色にも合う
  6. ■グレー
    ほとんどの色に合い、全体のバランスを崩さないため使いやすい。

たくさんの色を使って、カラフルに美しい配色をすることもできますが、やや上級者向けです。ますは、使う色の数は絞るのがベターでしょう。

 

4. 色ごとの心理効果を知ろう

色ごとに見る人に与える印象は異なります。ここでは、例を出しながら色の心理効果を紹介していきます。まずは一覧で。

  • ■黒
    他の色を引き立てる。高級感・大人っぽい印象を出しやすい。
  • □白
    どの色にも合う。清潔感を感じさせる。
  • ■グレー
    ほとんどの色になじむ。主張しすぎないため背景色として使いやすい。
  • ■赤
    目を引く効果あり。「興奮」「情熱」などの印象を与える
  • ■橙
    親近感を感じさせる。「温かみ」「親近感」「喜び」などの印象を与える
  • ■黄
    喜びや、陽気な印象を与える。
  • ■緑
    平和、ナチュラル、エコなどの印象を与える。リフレッシュ効果がある
  • ■青
    最も万人ウケする色。知性、誠実、冷静、寒さを感じさせる
  • ■水
    青春、爽やかなどのの印象を与える
  • ■紫
    優雅、高貴な印象を与える
  • ■ベージュ
    緊張を緩め、親近感を感じさせる。アットホームな雰囲気を演出したいときに使うと良い。

次に、いくつかの色をもう少し詳しく見てみましょう。

■万人ウケする青

f:id:tsukuruiroiro:20161029124257j:plainNest

青は、好感度No.1の色です。性別・年齢問わず、誰もが受け入れられる最強色と言えるでしょう。また、誠実、爽やか、冷静などの印象を与えられてるため、青色をテーマ色としている企業はたくさんあります(ポカリスエット、ローソン、Facebookなどなど)。

 

■親近感を感じさせる橙&ベージュ

f:id:tsukuruiroiro:20161101091829j:plain

ヒノヨコ.com

橙色は、見る人に温かく、身近でかつ活発な印象を与えます。ベージュは橙色ととてもマッチします。「アットホーム感」を出したいときにはこの配色を試しみましょう。

 

■ナチュラルで落ち着いた印象を与える緑

f:id:tsukuruiroiro:20161101091845j:plain

伊藤久右衛門

自然、エコ、オーガニックなどがデザインキーワードなら緑を使うと良いでしょう。明度低めの「深緑」だと落ち着いた印象も与えます。  

 

5. わび・さびの演出は彩度低めの色で

f:id:tsukuruiroiro:20161101091852j:plain

星野リゾート

少し別の角度から見てみましょう。

  • 彩度の低い色はわび・さびを演出しやすい
  • 一方で、彩度の高い色はダイナミックさが演出しやすい 

また、低彩度色には、プロフェッショナル感を出す効果もあります。低彩度色をメインカラーとして使う場合、背景には白やグレーなど主張しない色を選ぶと良いでしょう。

 

6. 白に近い高明度カラーで「透明感」を出す

f:id:tsukuruiroiro:20161029145849j:plain

Thise Mejeri 

透明感や清潔感を醸し出したければ、白に近い「明度高め」のカラーを使うと良いでしょう。とくに、淡いオレンジやピンクなどの「暖色」には透明感を感じさせる効果があります。デザインの際には、背景に白など薄い色を選ぶと効果的です。

 

7. 黒と低明度色で「高級感」を出す

f:id:tsukuruiroiro:20161101091902j:plain

Super Top Secret

「高級感」「シャープ」「大人っぽさ」などの印象を与えたければ、黒と「低明度色」を使うと良いでしょう。また、黒に「明度の低い深紫」なんかを合わせると「セクシーさ」「グラマラスさ」を演出することができます。

 

8. 代表的な野菜・果物の色を使い「ヘルシー」さを出す

f:id:tsukuruiroiro:20161101091910j:plain

野菜・果物をイメージしたときに多くの人の頭にぼやっと浮かぶ「緑」「オレンジ」「黄色(レモン色)」などの組み合わせはヘルシーさを表現するのに適しています。とくに緑は効果的です。

 

9. 目を引きたければ、高彩度の色を使う

f:id:tsukuruiroiro:20161101091917j:plain

None

目がチカチカしてくるような彩度の高い配色にすれば、見る人の目を引きやすくなります。見てもらうことが何より重要になるポスター広告なんかでは有効でしょう。ただし、高彩度色は見ていて疲れやすいので、集中して見てもらいたい場合には不向きでしょう。また、高彩度色ばかり使うと、それらが主張し合い、マッチできずに見る人を不快にさせる恐れがあります。

  

10. グラデーションで多色表現する

多色表現はなかなか難しいですが、グラデーションをうまく使うと美しく表現することができます。

明度を変えるグラデーション

f:id:tsukuruiroiro:20161028224708j:plainFreepik

たとえば、上のポリゴン模様の画像では、右上から左下へと段々とパーツの明度が下がっています。明度をグラデーションさせた美しいデザインですね。

 

色相だけを変えるグラデーション

f:id:tsukuruiroiro:20161028231223j:plainMonument Valley

配色が素晴らしいiPhoneアプリと言えば、モニュメントバレーでキマリですね。淡い配色の世界がとても美しいゲームです。モニュメントバレーには無数の色が使われていますが、どれも彩度が低めに設定されており、統一感があります。たとえば、上の画像を見てみると、上端部の朱色と、下端部のエメラルドグリーンは色相にしか違いはありません。つまり、上の朱色を、色相バーで左側に少し動かせば、下のエメラルドグリーンが出来上がるのです。ベース色を選び、色相バーをちょこちょこと動かしてサブ色を選ぶのも1つの有効な手段です。

 

11. 自然界に見られる配色は受け入れられやすい

f:id:tsukuruiroiro:20161026171310j:plain

自然が作り出す配色はどれも美しいものです。また、見慣れていることもあるためか、見る人が受け入れられやすい配色が多くあります。 参考までに知っておくと良いでしょう。

 

最後に

ここまで配色のルールについて紹介してきましたが、慣れるまでは自分で配色を考えるよりも、オシャレなWebデザインや本を参考にするのが良いと思います。また、このブログでも近いうちに、「オシャレな配色パターン」をひたすら羅列する記事を書くことにします。カラーコード付で、気軽に参考にできるモノにしようと思っているのでお楽しみに。

 

関連記事