日常を生活する上で、色の持つ効果をあまり考える機会はないかもしれませんが、実は色が人間に与えるイメージや印象は様々で、無意識のうちに人間の心理に働きかけるような効果を持っています。これらの効果を意識することで、与える印象をコントロールすることができるため、デザインにおける配色はとても重要な要素です。

今回は、色の持つ効果とデザインにどのような影響をもたらすかをご紹介していきたいと思います。

スポンサーリンク

デザインにおける配色とは

普段の生活でも色を選ぶ機会はよくありますよね。無意識に選んでいるかもしれませんが、実は人間の心理や潜在意識がそれを左右している場合が多く、好みの色によってその人の性格や嗜好が分かったりします。反対に、どの色を使うかによってそのデザインが人に与える印象も異なります。そのため、どのような色を用いるかによって、デザインが見る人に与える影響も異なってきます。

デザインを作る上で配色は非常に重要な要素で、配色がデザインの大部分を占めていると言っても過言ではありません。デザインを作る時は配色を意識して作成するようにしましょう。

マンセル色相環

配色についてご紹介していく前に、まずはマンセル色相環(マンセル・カラー・システム、Munsell color system)についてご説明します。wikipediaでは、下記のように説明されています。

マンセル・カラー・システム (Munsell color system) とは、色を定量的に表す体系である表色系の1つ。色彩を色の三属性(色相、明度、彩度)によって表現する。マンセル表色系、マンセル色体系、マンセル システムとも言う。
wikipediaより

このように、色相、明度、彩度という3つの組み合わせによって色彩を表現するというのがマンセル色相環の考え方です。色相、明度、彩度という言葉はどこかで聞いたことがあると思いますが、それぞれ下記のような意味となっています。

色相
色相とは、いわゆる色味のことを表します。色相環は色の波長を元に作成されており、赤、緑、青、黄色などの異なる色相が存在しています。絵の具の色の違いが色相の違いにあたるイメージです。
明度
明度は、その名の通り色の明るさのことを言います。明度が高い色ほど白に近づき、明度が低い色ほど黒に近づきます。
彩度
彩度は、色の鮮やかさを表します。彩度が0の色は、黒、白、グレーといったモノクロの色になります。反対に、彩度が高い色は原色に近い色に近づきます。赤い絵の具に白や黒の絵の具を混ぜるとだんだん鮮やかさが落ちていくと思いますが、それは彩度が低くなっているということです。

それくらい知ってるよ!と思うかもしれませんが、知っているのと使いこなせるのとでは大きく違います。デザインを作る上で、これらをしっかり使いこなせるようにしておくと、見た目が同じデザインでもよりクオリティが高く仕上げることができるようになります。

進出色と後退色


色によって遠近感のイメージをつけることができます。上の画像では、左側の円は中心に近づくほど奥側へ進んでいるように見えますが、右側の円は中心に近づくほど手前に飛び出ているように見えますよね。これは、暖色と寒色、明度が関係しています。デザインに進出色と後退色を取り入れることにより、遠近感をコントロールすることができます。

進出色(膨張色)
赤色、オレンジ色、黄色のような暖色は近くにあるように見える。特に明度が高くなるほど、より近くにあるように見える。
後退色(収縮色)
青、紫、青緑のような寒色は遠くにあるように見える。特に明度が低くなるほど、より遠くにあるように見える

スポンサーリンク

70:25:5の法則

Webデザインに用いる配色を「ベースカラー:メインカラー:アクセントカラー」=「70:25:5」の割合で使用することで、バランスの良い配色にすることができます。あまり多くの色を使ってしまうとごちゃごちゃした印象になってしまうため、3色程度に留めておくとちょうどよくまとまったデザインを作ることができると言われています。

ベースカラー
ベースカラーは、余白部分やページの背景などあたる色です。ベースカラーに何色を使うかによってそのデザインの印象が大きく変わってきます。一般的に明度の高い色をベースカラーに使用する場合が多いです。下記に記載しているような、色ごとの効果を参考にして、どういった色がそのデザインに適しているかを考えて決めてみてください。
メインカラー
メインカラーとは、そのデザインのメインとなる色です。メインカラーにはブランドイメージとなる色や、ブランドのアイコン、ロゴの色などを用いる場合が多いです。ベースカラーと似ている色をメインカラーに選ぶと、バランスのいい配色になりやすいです。また、あえて色相環で反対に位置する補色を使うことによって、強いコントラストを生み、主張の強いデザインに仕上げることもできます。
アクセントカラー
アクセントカラーとは、デザインにアクセントを加えるための色です。ベースカラーやメインカラーとは色相が異なる色を選ぶことによって、アクセントカラーがより目立つようになり、見栄えがよくなります。デザインの中でも注意してみてほしい場所や、押してほしいボタンなどにアクセントカラーを使用することで、その部分に注意が向くため情報を伝えやすくなったりコンバージョン率のアップなどに繋がります。

色の持つ効果

色味(色相)によって人間が持っているイメージが異なり、デザインでどの色を用いるかによって与えるイメージが変わってきます。これは心理学にも使われていて、マクドナルドやケンタッキーフライドチキンの店舗の色が赤色だというのも食欲をそそる色だからという理由であったり、身の回りでも様々な所で応用されています。色の持つ効果について理解を深めておくことで、Webサイトの目的に合った配色ができるようになります。

赤色の与えるイメージ

赤色は炎の色と同じ色であることから、興奮やエネルギーといった強い力を感じる色です。購買意欲を掻き立てるような効果もあることから、コンバージョンに繋がるボタンに使われることも多いです。

警戒心 注意力 興奮 刺激 エネルギー 活力 情熱 元気 怒り 攻撃的 破壊 暴力

オレンジ色の与えるイメージ

オレンジ色は、元気で活発なイメージを持ちつつも、どこか落ち着いた印象を与えることができる色です。明度が高いオレンジ色は明るく元気というイメージが強くなりますが、明度が低いオレンジ色は紅葉や夕焼けのように、落ち着いた印象が強くなってきます。

楽観的 陽気 活動的 高揚感 元気 健全 活発

黄色が持つ効果

黄色は色の中でも比較的主張が強い色の1つで、希望や集中など、前向きな印象を与えます。また、踏切で使われているように黒色と組み合わせることによって危険を知らせる色を意味する場合もあります。

明るさ 希望 集中 知性 好奇心 知識 幸福 個性的

緑色が持つ効果

緑は暖色と寒色の「中間色」であり、刺激の少ない色です。植物の葉が緑色であり、癒しの効果を持っています。Webデザインに取り入れることで、ゆったりとして落ち着いた印象のWebサイトを作ることができます。

安定 安心 癒やし リラックス 安らぎ 成長 平和 調和 協調

青色が持つ効果

青は落ち着いていて、信頼感がある色であることから企業のロゴに使われることが多い色です。青色をメインカラーにしている企業とえば、Facebook、Dropbox、Panasonic、Skype、Twitterなどがありますね。寒色の特徴であるように、気持ちを落ち着かせたり、クール、爽やかといったイメージを与えます。

冷静 鎮静 抑制 集中力 爽やか クール 信頼感 清潔 誠実さ

紫色が持つ効果

紫色はミステリアスで魅力的な印象を与える色です。Webデザインのメインカラーに紫色を使うことはあまり多くないかもしれませんが、明度の低い紫を使うことで全体的に落ち着いた、優しい印象のデザインに仕上げることができます。

高貴さ 優雅さ 女性的 気品 神秘 魅力的 

黒色が持つ効果

黒色は圧倒的なイメージを持っている色で、古くから死や絶望の象徴として使われてきました。その強い力の在り方が時代とともに少しずつ変わり、力強さや高級感を与える色として現代では使われることも多いです。車やバッグなどの高級品に多く使われていますね。

高級感 力強さ 恐怖 不安 死 悪 恐怖 かっこよさ 権威

白色が持つ効果

白色は、光を最も反射する色であり、様々なデザインのベースカラーとして使われることが多い色です。白は、画用紙やキャンパスの色であることから、新しさ、始まり、清潔といった印象を与えます。デザインにおいては白色が多いと全体的に締まりづらくなりますが、どの色でも組み合わせることができるため、使い勝手の良い色ですね。

純潔さ 純真さ 神聖 清潔 始まり 無 透明感

まとめ

配色を考える時に自分で1から考えるのもいいですが、配色を決める時に役立つ様々なサービスがWeb上で公開されています。そのまま使ってもいいですし、参考にして自分なりにアレンジするという使い方もアリです。様々なデザインを作成しているうちに、だんだんと慣れてきて配色もしっかりとした理由を持って行えるようになります。そうなるまでは、配色の参考になるサービスを利用して勉強していくのがおすすめです。

デザインにおいて配色は非常に重要な要素です。せっかくいいデザインを作っても、配色によってそれが台無しになってしまうこともあります。デザインを作る前に配色をある程度決めておくことができると、デザインの全体像がイメージできるようになり、色の選び方が優れてくるのと同時に、デザイン自体のクオリティも高くなってきます。

改めてデザインの基本である「配色」について振り返ってみて、デザイン制作に活かしてみてください!

おすすめの記事