- サイトを何色にすべきかわからない…
- 今の色が合ってるかわからない…
- 適当に色を決めてしまった…
こんな悩みを解消します。
人間は視覚情報が80%以上を占めているため、色を意識しないとあなたの伝えたいことが伝わらないことも。
今回は、サイトに使われやすい9つの色の効果を解説していきます。
本記事を参考にすると、あなたに最適なサイトの色を選ぶことができます。
- ブランディングに色が大事な理由
- 各色が与えるイメージと効果
本記事は3つの記事を参考にしています。(本文末に記載)
1．ブランディングに色が大事な理由
人間は80%以上の情報を視覚から取り込むといわれています。
これについては『産業教育機器システム便覧』 (1972年)で以下のように書かれています。
<人間の五感と学習効果>
『産業教育機器システム便覧』(1972年)より
視覚から83%
聴覚から11%
臭覚から3.5%
触覚から1.5%
味覚から1.5%
の学習を行う。
したがって、情報の80%を担うサイトの色を何にするかはかなり重要な問題なのです。
そうはいわれても、色がそこまで重要だという実感がわかないよ…
と思う方もいるはず。
なので、一度以下の質問に答えてみてください。
Q.質問
オレンジでなく青色をメインに使った『食べログ』があったとしたら使いたいと思いますか？
使いたくない人は多いはず。
なぜなら、『青』は食欲を減らす色だからです。
もう一つ、質問しますね。
Q.質問
黒が基調の金融サイトがあったら、そのサイトを使いたいですか？
おそらく、使いたくないと思います。
人生初のクレジットカードを作ろうとしているのに、不安になりますよね。
なぜなら、『黒』は不安感を高める効果があるからです。
このように色はあなたのサイトに大きな影響を与えます。
では次にそれぞれの色が与える効果を、1つずつ解説していきます。
2．色が与えるイメージと効果
以下では、サイトで使われやすい色を解説していきます。
- 赤
- オレンジ
- 黄
- ピンク
- 青
- 緑
- 紫
- 白
- 黒
2.1赤
- イメージ/
挑戦、明るい、元気、情熱、力強さ - 効果/
活発な印象をあたえる
赤は、行動を促す色です。
事実、”逆転合格”で有名な武田塾（大学受験塾）の『逆転合格.com』というWebサイトには赤が使われています。
>>逆転合格.com
したがって、挑戦や熱狂といったテーマなら赤色を使うことをオススメします。
具体的には、
✔受験系
✔スポーツ系
がよいですね。
2.2オレンジ
- イメージ/
若さ、新鮮さ、クリエイティブ - 効果/
コミュニケーションを活発にする
オレンジは、親しみやすさや食欲を増加させる色です。
したがって、親しみやすさやグルメといったテーマならオレンジを使うことをオススメします。
事実、クックパッド（グルメサイト）ではオレンジが使われています。
>>クックパッド
具体的には、
✔自分のことを書く系
✔グルメ系
✔映画系
がよいですね。
2.3黄
- イメージ/
快活さ、幸せ、危険 - 効果/
明るい気持ちにさせる
黄色は、ポジティブな印象を与える色です。
したがって、にぎやか、子どもがテーマなら黄色を使うことをオススメします。
事実、アヒル保育園のサイトでは黄色が使われています。
>>アヒル保育園
具体的には、
✔子育て系
✔メンタル系
がよいですね。
2.4ピンク
- イメージ/
女性らしさ、若い、愛らしい、やさしい - 効果/
やさしい気持ちにさせる
（薄いピンク）若々しさ
（濃いピンク）アダルトな
ピンクは、女性らしさを表す色です。
したがって、女性をターゲットにした可愛らしいことがテーマならピンクを使うことをオススメします。
事実、ジュレームのWebサイトではピンクが使われています。
>>ジュレーム
具体的には、
✔美容系
✔ママさん向け系
がよいですね。
2.5青
- イメージ/
知的、信頼感、誠実、品がある - 効果/
さわやかさや安心感をあたえる
青は、冷静な感じや信頼感を高める色です。
したがって、信頼感を高めたいなら青を使うことをオススメします。
（ちなみに、IT企業の多くは青を使っています。）
事実、TwitterのWebサイトでは青が使われています。
>>Twitter
具体的には、
✔ノウハウ系
✔金融系
がよいですね。
2.6緑
- イメージ/
癒し、成長、若さ、環境にやさしい、自然、安全、さわやか - 効果/
安らいだ気持ちにさせる
（薄い緑）都会的で若々しい印象をあたえる
（濃い緑）伝統的で落ち着いた印象をあたえる
緑は、安らぎや安心感を与える色です。
したがって、安らぎを与えるキャラを作りたい、安心感を与えたいなら緑を使うことをオススメします。
事実、JR東日本のWebサイトには緑が使われています。
>>JR東日本/
具体的には、
✔金融系
✔医療系
がよいですね。
2.7紫
- イメージ/
威厳、ミステリアス、上品 - 効果/
独特なものを感じさせる
紫は、高級感や個性を出す色です。
したがって、個性を出したいときは紫を使うことをオススメします。
事実、個性輝く会社を目指すヤマハ株式会社は、Webサイトで紫を使っています。
>>ヤマハ株式会社
具体的には、
✔美容系
✔独創系
がよいですね。
2.8白
- イメージ/
清潔、純粋、冷たい - 効果/
いらだちやストレスを和らげる
白は、純粋さや清潔な印象をあたえる色です。
したがって、純粋さやシンプルな感じをアピールしたいなら白を使うことをオススメします。
事実、シンプルなデザインを多く扱ったcoen（ファッションブランド）のWebサイトでは白が使われています。
>>coen
具体的には、
✔ファッション系
✔医療系
がよいですね。
2.9黒
- イメージ/
威厳、高級、ロマンチック、死、闇、冷たい - 効果/
独特な高級感をあたえる
黒は、重厚感や威厳、高級感を演出する色です。
したがって、独特な高級感を出したいときには黒をオススメします。
事実、最新の経済ニュースを集めたNewsPicks（経済ニュースメディア）のWebサイトでは黒が使われています。
>>NewsPicks
具体的には、
✔ノウハウ系
✔ファッション系
がよいですね。
まとめ：ブランディングは色で実現しよう
コンテンツばかりに目を向けられがちですが、Webサイトの色はあなたのサイトで重要な役割を担っています。
今回の記事を皮切りにあなたが、あなた自身をブランディングしたい方向に向かわせられたら嬉しく思います。
参考になれば幸いです。
参考記事
- 『産業教育機器システム便覧』
http://www2s.biglobe.ne.jp/~ganko/kikaku/polytech/1-5.html - 『色は語るブランド哲学|トレンドカラーとブランディングデザイン』
http://tokitayukiideas.com/blog/brand-color/ - 『色の持つイメージが与える効果と心理的効果のあるチラシデザインとは』
https://hansokunodaigaku.com/koukoku_post/4163/
コメント
[…] https://yurariyulog.com/branding-color […]
[…] ブランディングはサイトの色で実現できる【9つの色の効果を紹介】 […]