色によって与える影響が異なるというのは誰もが知っていますよね。
「青色は誠実に見える」「ピンクはかわいい」といった大雑把なイメージだけでなく、色が人の心理に及ぼす影響範囲は想像以上に大きいです。
色には五感に働きかける効果が!
- 視覚
- 触覚
- 味覚
- 聴覚
- 嗅覚
![](https://321web.link/wp-content/uploads/2021/11/hate.png)
視覚はわかるけど、他の4つはホント…?
![](https://321web.link/wp-content/uploads/2021/11/gdn.png)
色が五感に作用する事は様々な研究論文からわかっています
今回はデザインに欠かせない色が人間の心理に無意識レベルで与える心理効果や科学的な話、色ごとの特徴をわかりやすく解説していきます。
色の持つ印象・イメージ
![色の持つ印象・イメージ](https://321web.link/wp-content/uploads/2020/09/imagination-1.jpg)
色の心理効果で一番利用されるのが色の印象。
五感で言うところの一般的な『視覚』ですね。
全く同じデザインでも色が変わるだけでユーザーに与える印象は大きく異なります。
色が与える心理効果
カラー | 色が与える印象 |
---|---|
白 | 純粋、清潔、神聖、正義 |
黒 | 高級感、重厚感、威厳 |
グレー | 落ち着き、大人、真面目 |
赤 | 情熱、活力、明るさ、興奮、高揚 |
青 | 知的、先進的、信頼、誠実、爽快感、速度 |
緑 | 新鮮、リラックス、安らぎ、調和、安定、若さ、健康 |
黄 | 愉快、元気、軽快、希望、賑やか、無邪気、カジュアル |
紫 | 上品、高貴、優雅、妖艶、神秘 |
ピンク | 可愛い、幸福、愛情、柔らかさ、ロマンティック |
オレンジ | 喜び、活発、陽気、明るさ、暖かさ |
色が与える心理効果の代表例は上表の通りです。
![](https://321web.link/wp-content/uploads/2021/11/kou.png)
では実際に具体例付きで印象の変化を感じてみてください
色による印象変化の比較
![青い背景のイメージ画像](https://321web.link/wp-content/uploads/2020/08/9b7830ee-color-image-blue.jpg)
![](https://321web.link/wp-content/uploads/2021/11/gdn.png)
上記の青い画像を見てどのような印象を持ちますか?
人によって感じる印象は異なりますが、一般的に青色には下記のような心理効果があります。
- 信頼
- 知的
- 誠実
- 爽快感
- 清涼感
- 先進的
- 冷酷
- 憂鬱
- 孤独感
- 悲壮感
- 寂しさ
『ブルーな気分』とも言われるように青には精神的なマイナスイメージが多く含まれるため、悲しい物語などでは青がイメージカラーとして利用される事も。
![赤い背景のイメージ](https://321web.link/wp-content/uploads/2020/08/bf25254f-color-image-red.jpg)
![](https://321web.link/wp-content/uploads/2021/11/gdn.png)
では、背景を赤くしてみたらどうでしょう?
![](https://321web.link/wp-content/uploads/2020/06/3a80a3a6-usagi-hidari.png)
印象が大きく変わり情熱的、活動的な印象を受けますね
- 情熱
- 活力
- 興奮
- 高揚
- 力強さ
- 怒り
- 危険
- 攻撃的
![緑の背景イメージ](https://321web.link/wp-content/uploads/2020/09/color-story-green.jpg)
![](https://321web.link/wp-content/uploads/2021/11/gdn.png)
緑色には『安全』や『若さ』などのイメージがあります
![](https://321web.link/wp-content/uploads/2021/11/kou.png)
『自然』とか『健康』も緑をイメージしますね
新鮮
安全
健康
成長
調和、安定
自然、エコ
リラックス、安らぎ
保守的
未熟、初心者
デザインは写真、形、文字など様々な要素の組み合わせで成り立ちますが、そのなかでも第一印象を大きく左右する『色』
与えたい印象に応じた色を選択することで伝えたい情報をより強く伝えることが可能になります。
色以外の心理学の併用で色の心理効果が倍増
![黄色+フォント変更イメージ](https://321web.link/wp-content/uploads/2020/08/1779439a-color-image.jpg)
上図は『色』と『フォント』の2つを変えただけで、明るくポップな印象になりました。
色の心理効果は強大ですが、色だけで表現する必要はありません。
色以外の心理効果を併用することでよりさらに強固な印象誘導が可能になります。
- 視線を誘導するバンドワゴン効果
- イメージを誘導するクレショフ効果
- 余白で表現するホワイトスペース効果
デザインに応用できる心理学はこの他にもたくさんあるので下記を参考に取り入れてみてください。
![](https://321web.link/wp-content/uploads/2020/06/e74dc079-desigin-psycho-500x263.jpg)
心理効果以外にもフォントによる印象変化など、デザインの印象を変化させる方法は多岐にわたります。
![](https://321web.link/wp-content/uploads/2023/01/fonts-impression.png)
色による視覚効果 距離感や大きさが変わる?
![色による視覚効果 距離感や大きさが変化](https://321web.link/wp-content/uploads/2020/09/color-redblue.jpg)
色により見え方が異なる視覚効果は正確にいうと心理学ではなく、網膜の収差による光学的な話になります。
- 進出色と後退色:距離感
- 膨張色と収縮色:大きさ
![](https://321web.link/wp-content/uploads/2021/11/kou.png)
どちらも色デザインに欠かせない要素!
進出色と後退色によって距離感が異なる
![進出色と後退色 比較図](https://321web.link/wp-content/uploads/2020/09/si.jpg)
色には進出色と後退色があり、色によって見た目の距離感が異なります。
![](https://321web.link/wp-content/uploads/2021/11/ha.png)
赤色が手前、青色が奥にあるように見えませんか?
なぜ色によって距離感に差が出るのか?
人体の仕組みをかんたんに解説します。
![可視光](https://321web.link/wp-content/uploads/2020/09/hatyou.jpg)
赤と青では上図のように波長が異なります。
人間が認識できるもっとも長い波長は赤色で、さらに波長が長くなる赤外線は視認できません。
逆に青系色は波長が短くなっており、超低波長は紫外線と呼ばれる不可視光になります。
人間は色を認識する際、波長に応じて目の水晶体を薄くしてピントを合わせているため、色の波長に応じて水晶体の厚みが異なります。
![水晶体の変化による屈折率の変化図](https://321web.link/wp-content/uploads/2020/09/iroa.jpg)
- 波長が長い(赤):水晶体が厚くなり近くを見る状態
- 波長が短い(青):水晶体が薄くなり遠くを見る状態
水晶体の働きによって高波長帯の色は近く見え、低波長帯の色は遠く見えるようになります。
![色による距離感の変化](https://321web.link/wp-content/uploads/2020/09/car-color-h.jpg)
色による距離感の違いが数字として顕著に出るのは車。
後退色は暗い色で視認性が落ちるというだけでなく、距離感を見誤りやすい色のため青色車の事故率が一番高くなっています。
インテリアで利用される後退色
![赤色の壁と青色の壁、距離感の違い](https://321web.link/wp-content/uploads/2020/09/color-room.jpg)
インテリアデザインでは一番遠くの壁紙やカーテンに寒色を使用し、奥行きを広く感じさせる工夫が行われています。
後述する膨張色と合わせてカラーコーディネートを行えば同じ間取りでも開放感を感じることが可能。
進出色と後退色の比較
![進出色と後退色の比較](https://321web.link/wp-content/uploads/2020/09/color-b.jpg)
三属性 | 進出色 | 後退色 |
---|---|---|
色相 | 暖色 | 寒色 |
明度 | 明色 | 暗色 |
彩度 | 高彩度 | 低彩度 |
進出色は赤系で明るい色、後退色は青系で暗い色と覚えておけばOK!
![](https://321web.link/wp-content/uploads/2020/08/abcc0885-color-500x263.jpg)
膨張色と収縮色でサイズ感が異なる
![膨張色と収縮色でサイズ感が異なる](https://321web.link/wp-content/uploads/2020/09/c-white-black.jpg)
![](https://321web.link/wp-content/uploads/2021/11/gdn.png)
『膨張色の白』と『収縮色の黒』を比較すると白が大きいように見えます
膨張色と収縮色の関係は『大きく見える色』と『小さく見える色』
- インテリア:膨張色で部屋を広く見せる
- ファッション:収縮色で着痩せ効果
![膨張色と収縮色](https://321web.link/wp-content/uploads/2020/09/color-fs1.jpg)
膨張色・収縮色はファッションデザインで頻繁に用いられる用語で、膨張色の白い洋服よりも収縮色の紺や黒のほうが痩せて見えるという効果があります。
![膨張色と収縮色の比較](https://321web.link/wp-content/uploads/2020/09/color-ab.jpg)
三属性 | 膨張色 | 収縮色 |
---|---|---|
色相 | 白系・暖色系 | 黒系・寒色系 |
明度 | 特に明るい色 | 特に暗い色 |
![碁石のサイズの違い(膨張色と収縮色)](https://321web.link/wp-content/uploads/2020/09/go-color.jpg)
囲碁に使われる白と黒の碁石。
実は正式な棋戦で利用される碁石はサイズの見た目を揃えるため黒石のほうが大きく作られています。
色が『触覚』に及ぼす影響
色が遠くに見えたり大きく見えたりする進出色や膨張色は『見た目』の話ですが、実際の感覚に作用する色効果もあります。
- 色によって温度が変わる?
- 色によって重さが変わる?
『触覚』に作用する色温度と色の重さについて解説しますね。
色で温度が変わる『暖色』と『寒色』
![色で温度が変わる『暖色』と『寒色』](https://321web.link/wp-content/uploads/2020/09/color-ond.jpg)
暖色と寒色は文字通り暖かさや寒さといった体感温度に影響を及ぼします。
色は副交感神経に作用し、部屋の色が赤色の場合は部屋の温度が暖かく高く感じ、青色の場合には寒く感じます。
また、上図のように容器の色によって中身の温度の感じ方が異なることがわかっています。
![色相環で見る暖色と寒色](https://321web.link/wp-content/uploads/2020/09/color-kandan.jpg)
- 赤色
- 橙色
- 黄色
- 青色
- 水色
- 緑青色
暖色は気分の高揚を高めたり、時間を長く感じて欲しい結婚式場などの場所に利用される事が多くなっています。
寒色は興奮を抑える鎮静作用があり、時間を短く感じて欲しい待合所や作業所などに多く利用されています。
![自動販売機の赤と青](https://321web.link/wp-content/uploads/2020/09/drink-color.jpg)
『赤=温かい』『青=冷たい』というのは慣習による記号としても用いられており、色の印象がより強くなります。
色で重さが変わる
![色の重さ 比較図](https://321web.link/wp-content/uploads/2020/09/weight-1.jpg)
![](https://321web.link/wp-content/uploads/2021/11/gdn.png)
上図の黒い箱と白い箱、黒いほうが重そうに見えますよね?
これは見た目だけでなく実際に持った際の体感重量にも作用し、同じ重量で比較テストを行った場合にも『白い箱のほうが軽い』という結果になります。
![色の重さを有効利用した例](https://321web.link/wp-content/uploads/2020/09/suitcase.jpg)
- 白い資材入れ
- シルバーのスーツケース
- 引っ越し用の白いダンボール
工場の荷物移動や引っ越し業務など重いものを持つ仕事においては体感重量が生産性に大きく影響を及ぼすため、白や明るい色を使用する企業が増えている。
色の軽重感 比較
![色の軽重感](https://321web.link/wp-content/uploads/2020/09/w-co.jpg)
色の軽重感は明度によって決まります。
明るい色は軽くなり、暗い色や濃い色は重く感じるようになっています。
軽さを出したい場合には白系や明度の高いパステルカラーがよく利用されます。
![色ごとの重量感覚](https://321web.link/wp-content/uploads/2020/09/color-we.jpg)
色の重量に関しては明度が重要なウェイトを占めますが、色相によっても重量感は異なり黄色より黄緑、赤色より紫色が重くなります。
濃く感じる色ほど重く感じ、白が最小で黒が最大になります。
![商品の色デザインにより感じる重さも異なる](https://321web.link/wp-content/uploads/2020/09/color-w.jpg)
![](https://321web.link/wp-content/uploads/2021/11/gdn.png)
同じ製品でも使用するカラーによって軽く感じるので少しでも軽くしたいなら白や明るい色を選ぶといいですよ!
色の味覚効果を意識したデザイン
![色と味覚 色比較](https://321web.link/wp-content/uploads/2020/09/1925e1d7-color-food.jpg)
人は生活を通じて慣用的な食材の色を味覚と関連して味をイメージします。
上のマカロンの写真、何味か書いてなくてもなんとなく味のイメージが伝わりませんか?
赤:ストロベリー
青:チョコミント
緑:抹茶
黄:レモン
茶:ココア
![](https://321web.link/wp-content/uploads/2021/11/gdn.png)
イメージと食品が完全に一致しなくても、ある程度の味を想定することはできますし、色によって食欲が変化します
このイメージは慣用的なもので、地域や食文化によって異なります。
味を連想する色をデザインに取り入れる理由
味覚を連想させる色をデザインに取り入れる主な理由は下記の3つ
- 食べ物の美味しさを上げる
- 食べなくても美味しさが伝わる
- 色の不一致によるマイナスイメージを消す
実際にパッケージやメニューの色を変更しただけで売上が2倍以上になった事例は多々あります。
コストがかかる合成着色料を利用してまで色を変えるメリットがあるという事がよくわかりますね。
色と味覚の違いは美味しさを低下させる
![料理の色が違う](https://321web.link/wp-content/uploads/2020/09/943b68f7-curry-color.jpg)
色には下記の味覚を強くする力があります。
- 甘味
- 辛味
- 酸味
- 塩味
- 苦味
- うま味
目隠ししてジャガイモを食べると『林檎』や『柿』といった答えがでるくらい人の味覚は視覚に依存しています。
![](https://321web.link/wp-content/uploads/2020/06/3a80a3a6-usagi-hidari.png)
真っ暗な部屋や目隠しをして食べる食事は美味しくありません
またイメージする色と食品の色に大きな差異があると美味しく感じることができなくなるどころかまずく感じるようになってしまいます。
慣用色との差異例
![色とイメージの不一致例](https://321web.link/wp-content/uploads/2020/09/b3a8bcbb-color-food-11.jpg)
- 紫色のステーキ
- 紫パッケージに入った茶色い牛乳
- 黒いレタス
- 赤い卵焼き
- 青いパン
このように自分がイメージする色と味覚が大きく異なる食品は美味しく感じられません。
逆に、食品のイメージに合った色を選択することで購買意欲が増し、より美味しく感じてもらうことが可能になります。
食品パッケージの色選択
食品のイメージに合わせた色を使うのが基本ですが、必ずしも食品色が使われているわけではありません。
あえて青色などの非食品色を使うことで『パッケージの差別化』や『シリーズバリエーションを増やす』といったメリットもあります。
味覚に訴える色
![味覚に訴える色](https://321web.link/wp-content/uploads/2020/09/aji.jpg)
色 | 味覚 |
---|---|
白、ピンク、パステル系 | 甘い |
黄、緑 | 酸っぱい |
赤、橙 | 辛い |
茶、黒 | 苦い |
グレー、青 | しょっぱい |
ベージュ系 | うま味 |
味覚を色で強調したい場合は食材の色と合わせてデザインするとイメージとの乖離を防げますよ。
食品色の補色効果
![食品色の補色効果](https://321web.link/wp-content/uploads/2020/09/pr.jpg)
色の配色でよく使われる『補色』
補色とは色相環の反対側にある色で、コントラストが強く色が映える組み合わせの事。
補色は食品に対する色の心理効果としても有効で、食事を華やかに美味しそうに見せてくれます。
料理に補色を取り入れた例
![料理に補色を取り入れた例](https://321web.link/wp-content/uploads/2020/09/food-cc.jpg)
![](https://321web.link/wp-content/uploads/2021/11/kou.png)
『お刺身にシソの葉』『サラダにトマト』など定番の組み合わせは補色による料理の見栄え向上効果もあるんですよ!
![](https://321web.link/wp-content/uploads/2020/04/7353c965-adobe-color-500x263.jpg)
色による音のイメージ『色聴』
![色による音のイメージ『色聴』](https://321web.link/wp-content/uploads/2020/09/music-color.jpg)
聴覚刺激から色を意識する『色聴』と呼ばれるものもあり、色と音の関係は世界中の研究者によって研究されている。
色聴は慣習に影響される色の心理効果と違い、共感覚や感性間知覚とも呼ばれる個人差の大きい感覚になります。
個人差はあれど音から色をイメージする人は多く、音と色の結びつきにはハッキリとした傾向が現れる。
音階と色調
あなたがドレミファソラシドに色を付けるとしたら何色でしょうか?
アメリカの心理学者が2回に分けて調査した結果は下記の通りです。
![音階と色調(ドレミ)](https://321web.link/wp-content/uploads/2020/09/onkai1.jpg)
音階 | 幹音 | 1905年 | 1911年 |
---|---|---|---|
C | ド | 赤色 | 赤色 |
Db | レb | 紫色 | 薄紫 |
D | レ | すみれ色 | すみれ色 |
Eb | ミb | 淡い青色 | 濃い青色 |
E | ミ | 黄金色 | 太陽のごとき色 |
F | ファ | ピンク | ピンク |
Gb | ソb | 緑青色 | 緑青色 |
G | ソ | 明るい青色 | 明るい空色 |
A | ラ | 冷たい黄色 | 暖かくない、澄んだ黄色 |
Bb | シb | 橙色 | ほぼ橙色 |
B | シ | 鮮明な銅色 | 鮮明な銅色 |
♭(フラット)の多い曲は暖色系、#(シャープ)の多い曲は寒色系のイメージを呼び起こします。
音調による色感覚
音調と色イメージに関しては様々なタイプがあるが下記のパターンの傾向が強いとされる。
- 高調波成分が高くなるたび彩度が上がり、明度が下がる
- 音高が高くなるたび明度が上がる
高い音調は明るい色になり、低い音調は暗い色になるというのはイメージしやすい気がします。
音楽のイメージカラー
![音楽と色のイメージ](https://321web.link/wp-content/uploads/2020/09/color-music.jpg)
色 | 曲のイメージ |
---|---|
赤、橙、黄色、緑 | 激しい、元気、ノリがいい、明るい |
青、紫、青緑 | 悲しい、静か、落ち着いた |
茶色、紺、黒 | 暗い、地味、厳粛、重厚 |
暖色系はアップテンポでにぎやかな感じ、寒色は静かで落ち着いた雰囲気をイメージしやすいですね。
色と香りの関係
![色と香り](https://321web.link/wp-content/uploads/2020/09/ad884e11-pufume-color.jpg)
色は嗅覚にも大きな影響を与えます。
香水なんかは液体の色はすべて透明でも『瓶の色』『ラベルの色』『パッケージの色』などで香りの印象が大きく異なりますよね。
![香水と色](https://321web.link/wp-content/uploads/2020/09/ac517e6b-color-pufume.jpg)
色が嗅覚に与える影響
![黄色い香水とピンクの香水の比較](https://321web.link/wp-content/uploads/2022/08/color-p-image.jpg)
色や写真による視覚刺激が嗅覚に影響を与えることは多くの論文や文献からわかっています。
- 視覚情報があると嗅覚が鋭くなる
- 視覚色が適切だと香りを強く感じる
実際に目隠しをした状態で匂いを感じるより、匂いの発生源を目視して嗅いだ時のほうが『香り』『風味』を強く正確に感じることができるようになります。
また、イメージする色と香りの色が異なる場合には認識時間や嗅覚の精度が落ちる事も確認されている。
色と香りの実験結果でわかる「色と香りの関係」
ストロベリーとスペアミントの香りを当てるテストを色違いの2パターンで比較する実験。
色と香りのイメージが一致しているパターンでは匂いを嗅いでから回答するまでの判断時間が短くなり、正解率も高くなった。
![香りと色の比較テスト](https://321web.link/wp-content/uploads/2020/09/color-test.jpg)
参考文献:他の感覚が嗅覚知覚に及ぼす影響
実験結果 | 色と香りが適切 | 色と香りが不適切 |
---|---|---|
正解率 | 96% | 90% |
反応時間 | 1129m | 1307m |
香りに適切な色がつくことで匂いを判断する時間も短くなり、嗅ぎ分ける精度も上がる。
![](https://321web.link/wp-content/uploads/2021/11/kou.png)
この実験結果からも香りを利用する商品の色デザインの重要性がわかりますね
色から連想される香り
![色から連想される香り](https://321web.link/wp-content/uploads/2020/09/color-nioi.jpg)
色 | 香りのイメージ |
---|---|
白、グレー | 無香料 |
薄いピンク、薄い紫 | フローラル |
黄色、緑、オレンジ | 柑橘系 |
青、薄い緑 | 爽やか系 |
緑、濃い緑 | 自然系 |
色と香りも味覚同様に原材料の色に強く影響される。
香り系のパッケージでよく使われている色は慣習的にも原材料イメージ的にも一致しているものが多いので色の印象がより強くなります。
液体としての香料は多くの場合薄い色になるのでパステルカラーをイメージすることが多いですね。
色の心理効果はデザインに欠かせない要素
![色の心理効果はデザインに欠かせない要素](https://321web.link/wp-content/uploads/2021/05/color-pys.png)
色の心理効果や光学効果について解説してきましたが、どれも日常に馴染み意識せず自然に使っているものばかりですね。
色の特徴や性質を理解しておくことで『なんとなくこの色』でデザインしたものに理由を添えることが可能になります。
なぜその色を選んだのか説明できるのはデザイナーとして重要なポイント。
色のトーンによって与える印象が異なる
色相の色だけでなく色調によっても印象は大きく異なります。
![カラートーン図解](https://321web.link/wp-content/uploads/2022/02/tone-c-1.png)
彩度と明度が低いダーク系のトーンは落ち着いていて品の良いといった印象を与えます。
一方で明度と彩度の高い明るい色は活発、爽やかなどのポジティブな印象を与えます。
目的に応じて適したトーンを選びましょう。
![](https://321web.link/wp-content/uploads/2022/02/color-tone.png)
色の仕組みも理解しておきましょう
今見ている画面の色はどのように表示されているか理解していますか?
光の三原色のRGBの仕組みやDTPデザインに欠かせないCMKYの仕組み。
これらを知っておくと色への理解がグッと深まるのでしっかりと覚えておきましょう。
超わかりやすく解説してます
![](https://321web.link/wp-content/uploads/2020/08/abcc0885-color-500x263.jpg)
配色は心理効果だけではない
本記事では色のもつ力について解説しましたが、その色の持つ効果だけを見て「この色をつかうべき」とはなりません。
色を選ぶ上では心理効果以外にもブランドイメージ、ターゲットイメージ、見やすい色の組み合わせなど多くのことを考える必要があります。
色の配色を行う際は心理効果以外の面にも目を向けてみてください。
配色のコツについて
![](https://321web.link/wp-content/uploads/2021/01/colorschume-eyecatch-500x263.jpg)
色彩心理と関係の深い心理学
今回は『色』に関わる心理効果を解説してきましたが、デザインに使える心理学は色以外にもたくさんあります。
広告効果のあるデザインは単一の要素だけでなく、多くの要素を合わせることで効果を発揮するので下記の心理効果も合わせて取り入れてみてください。
![](https://321web.link/wp-content/uploads/2020/06/e74dc079-desigin-psycho-500x263.jpg)
色彩心理や心理学とは別に「フォントの印象」や「図形の印象」なども考慮することでより与えたい印象を強化することができるので合わせて取り入れてみてください。
![](https://321web.link/wp-content/uploads/2023/01/fonts-impression.png)
![](https://321web.link/wp-content/uploads/2023/04/geometric-figure.png)
デザインに使える心理法則をまとめました
本記事で紹介した「色彩心理」以外にも人に影響を与える心理効果がたくさんあります。
書籍『サクッと学べるデザイン心理法則108』ではデザインに取り入れることができる心理学、色彩心理、錯視効果、レイアウトの法則を1ページずつ簡潔にまとめて紹介しています。
![](https://321web.link/wp-content/uploads/2023/01/Design-psy-321web-874x1280.png)
サクッと学べるデザイン心理法則108
321web(三井将之) 著
発売日:2023/2/6
対象:未経験・初心者向け
定価:1848円(1,680円+税)
![](https://321web.link/wp-content/uploads/2021/11/suki.png)
人間心理をデザインに取り入れる上で欠かせない心理法則をデザイン初心者でもパラパラ見るだけでサクッと学べるのでぜひ読んでみてください!
コメント
コメント一覧 (1件)
色彩嗅覚の豊かな娘の将来を考え悩んでおります。
何かきっかけにつながれば幸いです。