注目キーワード
  1. Photoshop
  2. Python
  3. Raspberry Pi
  4. Arduino

UIデザイン 色が人の心理に与えるイメージをまとめてみた

ここではUIデザインやイラスト作成でも使える色による心理学を個人的にまとめて紹介します。

taku

・色の選び方が分からないな

・色はどんな心理を与えるのかな

と言った疑問を解決できます。

 

の心理学を勉強したい!

という方はこの機会に是非一読してみてください!!

 

気になる箇所がありましたら、目次からジャンプしてもらうと効率的かと思います。

それでは始めていきましょうか。

基本色が与えるイメージ

colortype

まず色にも基本となる色とそれに伴うイメージがあります。

これらを理解した上で、彩度や明度を変えることで各色多様な心理を働かせることができるようになります。

なので、まずはこれらの色が人の心理に与える影響を知っておきましょう。

以下( )内にはイメージを記載します。

また、色相の種類別に5つへ分類しています。

赤系の色相

blossam-flower

赤色

情熱を表す(ネクタイ、応援旗)

興奮、強調(広告、文章中で強調したい文字色)

危険、警戒(注意マーク標識、血の色、炎)

 

■使用企業例

三菱電機、TOYOTA、JAL、YAHOO!、HONDA、DENSO、NETFLIX、Adobe、CocaCola、ユニクロなど

(著作権等のため画像は割愛します。以下同文)

 

よく就活の面接では赤色のネクタイをしていこうなんて話もあるくらいなので、普段何気なく使う場合は情熱の色として捉えられることが多いと思います。

黄系の色相

sunflower

橙色

温もり(待合室、飲食店など)

活気(主にファッションで使用時)

*赤と黄色の中間色です。

 

■使用企業例

au、gusto、JR東海、iimono、AUTOBACS、吉野家など

 

カジュアルでにぎやかな雰囲気を与えることができるため、インテリアやWebデザインにも使用されています。

 

黄色

希望(月明り、お金)

注意(サッカーのイエローカードなど警戒色)

*有彩色の中で一番明るい色

 

■使用企業例

クロネコヤマト、マツモトキヨシ、マクドナルド、BuzzVideo、Cocoda!など

 

黄色は知性を高める色であったり、子供っぽさを表現する色として捉えることもあります。

緑系の色相

green-tree

緑色

健康、安心(グリーンマークなどに使われ、落ち着きや安らぎを与える)

調和(穏やかさを表す)

 

■使用企業例

スタバ、LINE、hulu、Ameba、ニトリ、7ELEVENなど

 

森林、植物をイメージしやすいため、安心感、癒し、健康という心理を与えやすい色です。

青系の色相

blue-oscean

青色

知性、誠実(ビジネスマンのスーツなどに使用され、爽やかな印象も与える)

冷静、落ち着き(感情や興奮を抑える効果がある)

 

■使用企業例

Twitter、facebook、LAWSON、Panasonic、ANA、VISA、SUNTORY、POCARISWEATなど

 

感情、興奮を抑える効果があるため、知的さをアピールできます。

WEBデザインなどでは良く使われています。

 

紫色

神秘、不思議(古くから高貴さの象徴とされている)

 

■使用企業例

YAMAHA、GungHo、米Yahoo!、slackなど

無彩色系の心理作用

白色

清潔、純粋(まっさらにするイメージ)

神聖、平和(結婚式のドレス)

 

光を反射するもっとも明るい(明度の高い)無彩色であり、どの有彩色とも合わせやすいのが特徴

 

灰色

控えめで上品

曖昧(グレーゾーンなど曖昧さを表現)

 

■使用企業例

Apple、Nintendo、NISSAN、SoftBankなど

 

黒と白の中間色で、他色との協調性もあるため使用しやすいが、上品/曖昧といった2面性を持つ。

 

黒色

闇、恐怖

強固な意志、権威性(文章中の太文字)

 

全ての色を吸収する色で、死を連想させることから、拒絶・孤独といった重たいイメージを与えることもある。

色が人の心理に与えるイメージ

colorimage

基本的な色のイメージに対して、彩度や明度が変化するとまた異なるイメージを人の心理へ与えることができます。

そのため、UIデザインにおいても色の心理学を理解しておくだけで、ユーザーの使用満足度が変化していきます。

色のイメージには暖色・寒色、季節など表す色が存在するので、今回はこれらを紹介していきます。

 

暖色と寒色のイメージ

まず始めに

赤、橙、黄色など暖かさや暑さを表す色を「暖色」(だんしょく)

青、水色、緑など涼しさ、寒さを表す色を「寒色」(かんしょく)

といいます。
上図の左上部分で服の色を変えてみましたが、暖色を使った服の方が暖かさそうな感じがしますよね。

こればかりは実際に使用しながらイメージを掴むのが良いかと思います。

 

まだ、暖色・寒色の派生として「興奮」/「冷静」を表現することが可能です。

・暖色+彩度を高くする=興奮

・寒色+彩度を低くする=冷静

上図では、使用した暖色および寒色の彩度を限りなく高く/低くして服の色を塗り替えました。

見比べてみると違いが感覚的に分かるのではないでしょうか?!

(個人的に興奮はイメージしやすいと思いますが)

 

UIデザインにおいても、興奮や冷静さを伝えたいときは彩度の調整をすれば良いということを知っておくと良いと思います。

季節を表す色

UIデザインにおいて、どの時期に、どのようなユーザーを対象とするかで使用する色も変える必要があります。

例えば、春の季節に開催するイベントの広告、チラシを作成したいときに、秋や冬を表す色を使用して広告を作成してしまったとします。

するとユーザー(広告やチラシを見た人)は何となく違和感を覚えるのです。

違和感を与えてしまえば、もちろん成約率も落ちてしまうので季節によっても使用する色を注意しなければなりません。

 

上図では各季節ごとのイメージカラーで服を塗り分けてみました。

基本的に季節カラーは

その季節の植物や空といった自然の色

を使用すると季節にあったイメージを与えることができます。

 

具体的には

季節を表す自然のイメージ

・春 / 彩度:低い、明度:高い暖色 -桜など

・夏 / 彩度:高い、明度:高い暖色 -海や森林

・秋 / 彩度:中間、明度:中間の色 -紅葉など

・冬 / 彩度:低い、明度:高いor低い寒色   -雪、寒波など

に注意して色を選んでいけば、季節に応じたイメージを伝えることができるようになります。

何か服など色を変えられる素材を用意して、各季節ごとの色に塗り分けてみると理解しやすいと思います。

 

~さいごに~

色の与えるイメージはUIデザインにおいては必須の知識になってきます。

デザインはセンスではなく、理論を理解すれば一定レベルのデザインが可能だと僕は思います。

なので、普段から街並みを見渡して、どのような色の使い方/パターンをしているのかに注意するだけで、色の使い方をインプットする良い機会になると思います。

ここまでお疲れ様でした。

UIdesign-colormind
学びに関する情報をチェック!