配色によるカラーイメージを意識してWebデザインをしよう!

2016/07/24

18_1
Webデザインで重要な要素の一つでもある「配色」。配色にはユーザーがサイトを表示して、それがどういうイメージなのかを印象づける効果があります。配色での印象とサイトの内容が合っていないと、ユーザーに違和感を与えてしまうことになってしまいます。せっかく、内容もレイアウトも良いのに配色で違和感を与えてしまってはもったいないですよね。それを避けるためにもカラーイメージを覚えて違和感のない配色をしましょう!

色が与える影響

私たちが目にしている様々なデザインには配色がされていて、何気なく見ていても無意識に色の与える心理を受け取っています。色には心理的・神経的な影響を与える効果があり、認識力や気持ちを誘導することができます。
 
それでは、どの色がどのような印象を与えるのかをみていきましょう!

白色のイメージ

18_2
白色は他の色を引き立てたり、軽く感じさせる効果があります。また、誠実さやクリーンな印象を与えるのにも適した色になっています。
 

プラスの印象

純粋・清潔・平和・始まり・軽い
 

マイナスの印象

無・冷たい・別れ
 

白色をメインにしたサイト

団地の未来
18_12
 
 

黒色のイメージ

18_3
黒色には他の色を吸収・遮断したり引き立てる効果があります。また、白色とは逆で重たい印象を与える効果もあります。
 

プラスの印象

重厚・高級・威厳・知的・中立
 

マイナスの印象

暗い・悪・恐怖・絶望
 

黒色をメインにしたサイト

The Honours
18_3
 
 

赤色のイメージ

18_4
赤色は太陽や血液など興奮した感情を与えるような刺激的な色です。他にも食欲を増進させたり、注目しやすい色ということもあり注意を促すのに使われやすい色でもあります。
 

プラスの印象

熱・興奮・愛・食欲増進・購買意欲
 

マイナスの印象

危険・暴力・怒り・禁止
 

赤色をメインにしたサイト

RINGO
18_4
 
 

青色のイメージ

18_5
青色は「空」や「海」などを想像させることから、爽やかさや冷静など落ち着きのある印象を与える効果があります。赤色と逆で食欲には減退させる効果があります。
 

プラスの印象

冷静・リラックス・涼しさ・清潔
 

マイナスの印象

冷淡・食欲減退・消極的
 

青色をメインにしたサイト

ポカリスウェット
18_5
 
 

黄色のイメージ

18_6
有彩色の中で一番明るい色である黄色には、明るさなど元気なイメージな印象をもつことができます。また認識しやすいこともあり注意の色として使われたりもします。

プラスの印象

明るい・希望・幸福・若々しい

マイナスの印象

目立つ・軽率・幼い・警告

黄色をメインにしたサイト

C1000
18_6

橙色のイメージ

18_7
橙色は赤色と黄色の中間の色で、温もりや活発的でポジティブな印象を与えます。また、Webサイトのボタンでクリックされやすいのが橙色のようです。
 

プラスの印象

温かい・活発・陽気・親しみ
 

マイナスの印象

安っぽい・わがまま・未熟
 

橙色をメインにしたサイト

プリンツ21
18_7
 
 

緑色のイメージ

18_12
草原や森林など自然の安らぎのようなリラックスした印象を感じることができる緑色。落ち着いている色なので他の色とのバランスをとりやすくもあります。

プラスの印象

リラックス・健康・若さ・調和

マイナスの印象

保守的・苦味・未熟

緑色をメインにしたサイト

夢のねだん
18_8
 
 

紫色のイメージ

18_8
青色と赤色が混ざり合ってでききるのが紫です。同じ紫でも赤っぽい紫〜青っぽい紫まで幅が広く、高貴でもあり下品でもある二面性を持った色でもあります。
 

プラスの印象

上品・伝統・神秘・美
 

マイナスの印象

下品・二面性・不安定・古風
 

紫色をメインにしたサイト

リクサス
18_9
 
 

桃色のイメージ

18_9
桃色には女性ホルモンの分泌を活発にする効果があるらしく、柔らかくて穏やかな女性的な印象を与えることのできる色です。ですが、彩度と明度を高くして黒などの暗い色と合わせることで刺激的な印象を与えることもできます。
 

プラスの印象

優しさ・幸福・春・柔らかさ・可愛さ
 

マイナスの印象

幼稚・弱い・不安定・派手
 

桃色をメインにしたサイト

Beautylabo
18_10
 
 

灰色のイメージ

18_10
灰色は黒色と白色との中間の色で、他の色との馴染みがよくて主張しすぎないところから上品な印象を与えることもできます。また、灰色は無彩色ですが有彩色が少しだけ含入っていても灰色に含まれるので範囲の広い色でもあります。
 

プラスの印象

上品・控えめ・落ち着き・スタイリッシュ
 

マイナスの印象

地味・無機質・曖昧・寂しさ
 

灰色をメインにしたサイト

Art&Code
18_11

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend