色の意味や心理的なイメージを知っておくと、その意味をふまえてどんな風に見せたいかを表現できるようになれます。
普段何気なく見ている色には、本当にたくさんの効果があります。記事にまとめることで、改めて色の持つ意味ってすごいな〜としみじみ思いました。ぜひ今回の記事で色についての知識を深めていただければ幸いです。
また記事の後半ではデザイナーの方向けに色に関する基礎知識と、配色をする時に役立ちそうなコツについても書きました。デザインを勉強している方の参考になれば嬉しいです。それではどうぞ!
スポンサーリンク
色とは?色はなぜ見えるの?
まずは色ってなんだろう?というところから。
透明も含めて、どんな物にもそれぞれの「色」があります。でも実際に目で見ているのはその物に反射した「光の色」なんです。たしかに暗い場所では反射する光がないので、物の色が分からないですよね。
下の例のようにリンゴが赤く見えるのは、光がりんごに当たった時に赤い色の光だけが反射されて目に届くからです。この時他の色の光は反射されず、吸収されるので目には届きません。
色はなぜ見えるの?
物の色はこのリンゴのように、表面を反射する光「表面色」と、物を光が透過して見える色「透過色」によって色が決まります。またこの2つの色は「物体色」と呼ばれています。
色は人の心理にイメージ(印象)を与える効果がある
色には人の心理に働きかける効果があると言われています。
色は人の心理にイメージ(印象)を与える効果がある
細かいことは知らなくても「この色は派手だな」とか「殺風景な感じがする」など、色を見て何かしら印象を持ちますよね。人によってそれぞれ好きな色や嫌いな色があるのも、色が人の心理に何らかのイメージを与えているからです。
専門用語では、色が持つ印象効果のことを「色彩感情」といい、その色が何かと結び付いて連想(イメージ)されることを「色彩象徴」といいます。
12色の意味や心理的なイメージについて
ここではよく使われている代表的な12色を例に、それぞれの色がもつ意味や心理に与えるイメージについて説明していきます。
赤色の意味・イメージ
赤色の意味・イメージ・心理
<イメージ(象徴)>
生命・活動的・情熱的・衝動的・破壊・暴力
<連想するもの>
血・太陽・火・りんご・トマト・女性
<心理的作用>
赤は生きる力や性を表していることから、神経を興奮させる・元気を出すという効果があります。逆に悪い意味では闘争心を出したり短気になるという一面もあります。
よく目にするものだと日本ではトイレの女性のマークが赤であることから、女性をイメージさせる色でもあります。
意欲を出させる色なので、スポーツで赤を身につける人も多いです。他にも購買意欲を出すために店のセールでも良く見かけますね。その他にも、代表的な暖色でもあるので暖かく感じたり、時間の経過を早く感じさせるといった効果もあります。とにかく赤は生命・活動の象徴です。
オレンジ(橙)色の意味・イメージ
オレンジ(橙)色の意味・イメージ・心理
<イメージ(象徴)>
家庭・仕事・自由・暖かい・深い知恵・推察力
<連想するもの>
夕焼け・みかん・柿・秋
<心理的作用>
オレンジ(橙)は解放感を与えて、楽しい気分にさせる色です。
また食欲を促進させる色としても有名なので、飲食店や商品のパッケージには橙などの暖色系が多く使われています。食べ物は暖色の色が使われていると、暖かそうでおいしそうに見えますよね。
見た目の印象としては赤に比べて少し柔らかい色なので、赤の積極的なイメージから一歩引いた「思いやりがある・親しみやすい」といった意味合いもあります。確かに夕焼けの色もほわーんとした光で癒されて思わず見てしまいます。
黄色の意味・イメージ
黄色の意味・イメージ・心理
<イメージ(象徴)>
好奇心・向上心・知識・幸福・軽快・カジュアル
【連想するもの】
レモン・ヒマワリ・卵(黄身)
<心理的作用>
黄色は暖色系の中でも特に明るく感じられる色なので、集中力を高めたり気分を明るくする効果があります。
他にも注意を促すといった警戒色の効果もあるので道路工事や踏切などでもよく見かけますよね。自信や元気がない時に、黄色いものを身につけると気分も明るくなるそうなので一度試してみてはいかがでしょうか。
黄色の効果(イメージ)をうまく使ったWebデザインまとめ
緑色の意味・イメージ
緑色の意味・イメージ・心理
<イメージ(象徴)>
穏やかさ・調和・自然・平和・バランス・協調
<連想するもの>
山・木・植物・野菜
<心理的作用>
緑は自然界で良く見られる色で、人はこの色を見ると興奮を静めたり、集中力を増す効果があります。
遠くの緑を見ると目に良いと言われていることからも分かるように、目の疲れを癒す効果もあります。また協調性を表し、運気が向上するために資金が集まる色とも言われています。なんだか願ったり叶ったりな色ですね。
まさに自然を象徴する色なので、気持ちが落ち着きのんびりした気分になれます。ナチュラルな感じを出したい時にはぜひ使いたい色ですね。
緑の色の効果(イメージ)をうまく使ったWebデザインまとめ
青色の意味・イメージ
青色の意味・イメージ・心理
<イメージ(象徴)>
平和・安全・冷静・誠実・清潔・若い・爽やか
<連想するもの>
空・海・川・水
<心理的作用>
青は興奮を抑え、冷静にさせる作用があります。
青は情熱を意味する赤とは反対に、涼しさや爽やかさ、知性や冷静を感じさせてくれる色です。そのため企業カラーとして青を取り入れている企業はたくさんあります。
空をイメージさせる色であることから航空会社(イメージカラーや飛行機の色)でも良く使われていますね。航空会社以外にも、涼しさを感じさせる清涼飲料水(ポカリスエット)や海を連想させる塩味の商品にも青い色が使われています。ビジネスの世界で頻繁に使われている色と言えると思います。
季節で言うと夏では「涼しさを感じさせる色」として青が使われ、冬では「季節感(寒さ)を表す色」として青が使われています。季節に応じて違った意味合いで使われる色なのでとても便利な色です。
青紫色の意味・イメージ
青紫色の意味・イメージ・心理
<イメージ(象徴)>
精神・孤独・気品・厳粛・崇高・宇宙
<連想するもの>
ラベンダー・ブルーベリー・あじさい
<心理的作用>
青紫は分類で言うと寒色ですが、赤の要素を含む青であるために寒色の中でも深みのある色と言われています。寒色と暖色それぞれの要素を持つおもしろい色です。
精神に関するものとよく結びつけられる色で、他にもエレガントな雰囲気や女性的なイメージを与えます。個人的な解釈だと青でもない赤でもない両方の要素を含む微妙な位置づけが、目に見えない精神に関するものに結びついているのでは?と感じました。
その他にも、心理的なイメージでは上品な感じや高級感を連想させます。青の要素が入っているために、安定・冷静な雰囲気も合わせもつので、紫の中では広い面積で使う場合でも比較的使いやすい色です。
紫色の意味・イメージ
紫色の意味・イメージ・心理
<イメージ(象徴)>
高貴・優雅・魅力的・非現実的・霊的・神秘
<連想するもの>
ナス・ぶどう・スミレ・あやめ
<心理的作用>
紫は想像力をかきたてたり、感受性を高める効果があります。
芸術的な意味合いもあるので、自分の中の感性を引き出したりする色です。紫と聞いて連想できるものが他の色と比べて少なく、抽象的な意味合いで連想されることが強いようです(スピリチュアルや芸術の世界など)。悪い意味だと、青でもなく赤でもないイメージから内向的・不明瞭といったイメージも持っています。
紫に関する色は全般的に高級感や上品さを表すものが多いため、他の色のバランスに気をつければ視覚で印象に残りやすいです。
白色の意味・イメージ
白色の意味・イメージ・心理
<イメージ(象徴)>
清潔・潔さ・美しさ・純粋・神聖・天国
<連想するもの>
結婚式・病院・雪・綿・牛乳・雲・紙
<心理的作用>
汚れていないという潔白なイメージから、清潔感や純粋なイメージを与える色です。
そのため病院や飲食店では白い制服が使われていることが多いですよね。その他には、ものを軽く感じさせたり、気持ちをリセットする(始まりを感じさせる)という効果もあります。
日本人が好む色のひとつで、商品のカラーバリエーションの中には白が入っていることが多いです(車や電化製品など)。明度が高く光を反射する色なので、明るいイメージで使われることがほとんどですが、悪いイメージだと無機質で空虚感を感じさせる色なので多用は禁物です。
デザインでは白は背景として使われることも多く他の色の邪魔をしないため、使用頻度も多めです。
モノクロの配色でクラシックな印象のWebサイトまとめ
灰色の意味・イメージ
灰色の意味・イメージ・心理
<イメージ(象徴)>
調和・憂鬱・不安・過去・薄暗い・思い出
<連想するもの>
曇り空・煙・石・コンクリート・ネズミ
<心理的作用>
黒でもなく白でもない中間の位置なので、象徴するイメージは曖昧で暗い感じのものが多いです。
プラスの作用で言うと、バランス感覚に優れ人との関わりが上手な人が好む色だと言われています。また主張が弱くはっきりしない色のイメージから、控えめで平凡な印象を与えます。控えめという意味の延長線上で、上品で落ち着いたイメージも兼ね備えています。
灰色は無彩色で、他の色と相性が良いので組み合わせることによってより効果が発揮される色です。薄い灰色は目に優しく控えめな印象のため、Webデザインでも背景に多用されています。
黒色の意味・イメージ
黒色の意味・イメージ・心理
<イメージ(象徴)>
暗闇・死・恐怖・悪・沈黙・高級感・男性的
<連想するもの>
スーツ・葬式・髪の毛・カラス・墨・夜
<心理的作用>
黒は全ての色を吸収した色といわれていて、何かを秘めた印象や影のある印象を与えます。
また男性的で威厳のある感じや、都会的で洗練された印象も与えます。白はものを軽く見せる効果があるのとは逆に、黒は重く見せる効果があります。
死を表す色であることから、葬式でも必ず使われる色ですね。黒は一番有彩色を引き立てる色で、明るい色を引き立たせる効果があります。
銀色の意味・イメージ
銀色の意味・イメージ・心理
<イメージ(象徴)>
冷たさ・金属・洗練・硬い・上品
<連想するもの>
小銭・アルミ・スプーン・銀歯・腕時計・アクセサリー
<心理的作用>
灰色と似た印象効果を持っていて、上品で落ち着いた印象、また洗練された都会的な印象を与えます。
金色に比べて控えめな色なので、派手さを抑えて、かつ高級感を持つ色ですね。「銀座」という地名は、実際に銀貨にまつわる由来があるようですが、「銀」という色が持つイメージも相まってより高級な印象を受けると思います。自然界では少ない色なので、人工的な印象も与えます。
金色の意味・イメージ
金色の意味・イメージ・心理
<イメージ(象徴)>
成功・高級・富・頂点・輝き・豪華
<連想するもの>
金箔・お金・宝石・金閣寺
<心理的作用>
派手で目立つ色、高価の象徴であることから、特別なものや高級感といった印象を与える色です。またお金や富を連想させ、豊かさを感じさせてくれます。
歴史的に見ても、富や豪華さを表すために建築や宝飾で金が多く使われていますね。欲を満たすといった気持ちを満足させる意味合いが強い色です。
ただし金などの派手な色は使いすぎると、高級なイメージから低俗なイメージ(物欲)に変わってしまうので注意が必要です。
12色の意味はいかがでしたか?
というわけで12色の色についての紹介でした。こうやって見るとひとつひとつ色々な効果がありますね。漠然としたイメージを持つよりも、具体的にそれぞれの色にどんな意味合いがあるのか自分でさらに調べてみるのも面白いと思います。
では色の意味や心理に与えるイメージを知ったあとは、デザインで配色する時にこういった配色の決め方・ポイントがあるよ!という配色のコツについてご紹介します。
配色のコツについて書く前に、まずは色の基礎知識についておさらいから。
光の3原色「RGB」と色の3原色「CMY」について
色には光の3原色(RGB)と色の3原色(CMY)があります。
RGBについて
RGB(レッド・グリーン・ブルーの3色)を加法混色といい、基本は光がない黒の状態でそこに色を足していくことで特定の色を表し、全てが重なった状態が白になります。
光の三原色RGB・加法混色について
CMYについて
もうひとつのCMY(シアン・マゼンタ・イエローの3色)を減法混色といい、基本は白でそこに色を足していき全てが重なった状態が黒になります。RGBは光の3原色なのでテレビなどの電子機器に使われ、CMYは印刷物に使われています。
色の三原色CMY・減法混色について
ただCMYの3色で作った黒は完全な黒とは色味が違うため、別にK(ブラック)という黒専用のものが用意されています。これは印刷の基本となるプロセスカラー(4つの色)と呼ばれていて、CMYKと表現します。ちなみにブラックがBじゃなくてKなのは、BはBlue(青)を表すためです。
WebデザインはRGBで、DTP(印刷物)はCMYKを使って色を決めています。フォトショップやイラストレーターを使う時もこの設定を最初にする必要が出てくるので、覚えておくと便利ですよ。
色相・彩度・明度について
色相とは?
色相とはそれぞれの色の違いのことで、下記のようにそれぞれの色を順に環(輪)にしたものを色相環といいます。
色相環と補色
色相環の隣り合う色のことを類似色、また向かい合う色を補色といいます。補色はよく使うので覚えておくと便利だと思います。
たとえばこの色相環の場合、赤の補色は青緑で、黄色の補色が青紫、ということになります。補色同士の組み合わせは、それぞれの色を引き立てより鮮やかに見せる効果があります(平たくいうと派手な印象になります)。
彩度とは?
彩度とは「鮮やかさの度合い」のことをいいます。
彩度とは
ちなみに一番彩度が高い色を純色と呼びます。
彩度が高いとはっきりとした主張の強い色に、彩度が低くなるにつれて白に近付いたような淡い優しい色になります。
明度とは?
明度は名前の通り「明るさの度合い」のことをいいます。
明度とは
一番明度の高い色が白で、一番低い色は黒になります。明度が高い色は印象が明るくなるので、元気な感じやポップな感じに見せたい時にはよく使われる色です。
補足メモ:色相・彩度・明度はPhotoshopなどで調整できます
この3つの要素は、デザインでも良く使うPhotoshopやIllustratorで調整できます。カラーピッカーを開くと「H・S・B」と書いてある欄があるので、確認してみてください。
色相・彩度・明度
色を選ぶ時はこの3つの要素にも注目すると、より色々な考え方ができると思います!基本的な知識を抑えておくと、色々なWebサービスなどのツールに頼らずに自分で考える力がつくと思います。
配色が苦手な人でも、ツールに頼らずどの色が合うのかを見つけ出すヒント。
配色をする時に役に立つポイントをご紹介
ではここからは、配色をする時にどんな風に色を使えばいいのか、困った時に役立ちそうなことを紹介したいと思います。
ひとつでも役に立てば嬉しいです。
配色ポイント① 「70:25:5」の法則を使う
色のバランスに困ったらとりあえずこれ!これはベースカラー・メインカラー・アクセントカラーの3色を決めて、それぞれの割合を70%・25%・5%に割り振るとバランスよく見えるという法則です。それぞれの色の選び方はこんな感じがおすすめです。
70:25:5の法則
Webデザインの場合だとベースカラーは背景など大部分を占める色になりますね。メインカラーは企業カラーなど中心となる色を配置します。そしてアクセントカラーでメインカラーとの相性を考え、アクセントをつけたり色の組み合わせを工夫します。
配色の参考例
Webの場合だと、ベースカラーは白や薄い灰色をおくことが多いです。たった3色しか選べないの?と思うかもしれませんが、色の組み合わせ次第で色々な表現ができますよ。
この法則のように、まずはなるべく色を抑えて配色すると色選びが迷いにくくなると思います。
また色の配分は必ず今回のようにしないといけないわけではないので、例えば配色を全て同じ配分にしてそれぞれの色のバランスを同じにしてみたり、といったことも良いですね。配分を考えずに色を決めていた方は一度振り返ってみると変化があると思います。
他の記事で色のバランスについても書いていますので、よければご覧ください!
デザインで複数の色を使うときに、バランスよく配色するコツ
配色ポイント② 視認性・誘目性に気を使う
伝えたいイメージで色を選ぶのも良いですが、視認性(見やすさ)と誘目性(目を引き付ける色)の観点で見るとまた違った色の選び方が出来ると思います。
視認性には大きく明視性(形の認知)と可読性(文字や数字の認知)の2種類があります。視認性を高めるポイントは、背景色と対象になる要素の色相・彩度・明度に差をつけることです。
下の具体例を見れば一目瞭然ですが、左側の差があるほうが視認性が高く見やすいと思います。
視認性を高める
形の認識は、黄色や赤などの暖色に比べて青などの寒色のほうが認識が低く、車の事故も青やグレーの車のほうが事故率が高いという情報もあります。
信号や標識でも、黄色や赤などを多く使っているので暖色で明度や彩度の高い色は明視性が高いですね。
配色ポイント③ 進出色・後退色を使い分ける
名前の通り進出色は「前に出て見える色」、後退色は「奥に引っ込んで見える色」です。
赤や黄色、橙などの暖色なおかつ明度の高い色は前に出て見え、逆に青や紫などの寒色なおかつ明度の低い色は奥に引っ込んで見えます。
キャッチコピーなどの主題となる文字がある場合や媒体のテーマに合わせて進出色・後退色を使い分けるとより効果が出ます。
進出色・後退色を使い分ける
下の例のように、作る内容のテーマに合わせて色を使い分けないと色でうまく表現できなくなってしまいます。伝えたいことと色の印象が合っているかを考えることも、的確な配色をするには必要なことです。
進出色と後退色を使い分けて、テーマに合わせる
見る人にどんな風に伝えたいかを良く意識すると、色を決めやすいと思います!
配色ポイント④ グラデーションを使う
定番のグラデーションを使うとリズムが出て動きがあるように見えるので、通常の配色をした時の単調さが軽減されます。
グラデーションを使う
グラデーションは色同士をなめらかに見せるので、それぞれの色の調和をとりやすくなります。ただしあまり極端な色同士を使うと、なめらかさがなくなるので色使いに注意です。うまく使えば幻想的で優雅な雰囲気も作りやすいので、ぜひ試してみてください。
色をぽんぽんと置くだけでなく、グラデーションを使うと表現の幅がぐっと増えますよ!
配色ポイント⑤ 国旗の色や、その国特有の色を活かす
国旗の色と言えばフランスのトリコロールが有名ですが、もともとトリコロールというのはフランス語で3色という意味があります。国旗はそれぞれの国の象徴するものを色や形であらわしていて、有名な国旗は見ただけでどこか分かる(連想される)と思います。
国旗の色を参考にする
上の例では3つの国の国旗の色を並べてみました。ちなみに国旗は白・青・赤が圧倒的に使われていることが多く、2色か3色の構成のものが多めです。
アメリカンな感じ、和風な感じ、エスニックな感じなど、媒体によってはその国の雰囲気を出したい時があると思いますが、そんな時は国旗を参考にすると色を決めやすいですね。
また国旗以外にも、日本だと伝統色や和色など特有の色があります。そういった色を使うと、より色をうまく使いこなせると思います。
配色ポイント⑥ 有彩色のイメージを際立たせる場合は、無彩色と組み合わせる。
あれこれ色を使ってしまうと、一番伝えたい色を置いても他の色の雰囲気と相まってなんだか思ったようないかない、ということもあると思います。
そういう時は無彩色と合わせる(有彩色と無彩色の2色使い)ことで有彩色が引き立ち、どの色がテーマ色かということが伝わりやすくなります。黒や白がイメージカラーとなる場合は、逆に派手な有彩色を使うとそちらに目が行ってしまうので、有彩色の割合と明度は抑えめにしたほうが良いです。
有彩色と無彩色を組み合わせる
配色ポイント⑦ 色の対比を意識する
色の対比というのは、複数の色がそれぞれに影響しあうことで、色が違って見えることをいいます。
配色をしてみたけどなぜか色が変に見える。思った通りの組み合わせにならない。という時は色の対比が影響していることも多いですよ。
対比を知っておくと、こういう色の組み合わせは思った通りの色合いにならないな、といった予想を立てながら配色をすることができるので覚えておくと便利だと思います。配色は奥が深くて、色の意味やイメージだけではないんですね。
色の対比については別の記事でまとめていますので、興味がある方はぜひご覧ください!
色の対比とは?配色を決める時に役立つ色の対比効果についてのまとめ。
色の意味・配色のコツまとめ
ボリュームの多い記事となってしまいましたが、いかがだったでしょうか。
配色の方法は専門的なことで言えば他にも探せば沢山出てくると思いますが、今回は自分がいままでに覚えたことや、普段意識していることについて書いてみました。
あれこれ書きましたが、とはいってもまだまだ配色に関して完璧というわけではもちろんなく、仕事してて修正やダメ出しはありますし、日々試行錯誤しています。つらい( ;∀;)
もっと配色のことが知りたいという方は、色に関する役立つスライド資料をまとめた記事もあるので、そちらもおすすめです。色々な方が役立つスライドを作っているので、ほんとありがたいです。
配色が苦手でも、これを読めばスキルアップできるおすすめスライド6選。
配色で大事なのは、伝えたいイメージをいかに色を駆使して伝えることができるかという部分だと思うので、色の意味や配色のコツをふまえて少しでも思い通りの配色が出来るようになるといいですね。
長々となってしまいましたが、最後まで読んでいただいてありがとうございました!色の意味や配色のコツを覚えて配色を決める時の参考に少しでもなればと思います。
人気記事【厳選】転職したいWebデザイナーにおすすめの転職サイトは3つだけ
人気記事フリーランスのWebデザイナー向け案件・求人情報サイトはこの3つ!【厳選】