WEBデザインの勉強だニャー

Photoshop・Illustratorのウェブデザインを勉強中!その他htmlやcss・javascriptの備忘録

カラーマネージメントに役立つ!SNSやウェブサービスのカラーコード主要10選

今回はSNSやウェブサービスで使われているカラーコードを調べてみました。
SNSボタンのカラーコードなどをみて色の持つイメージを見ていきます。
同じロゴやアイコンでもカラーを変えると印象が変わります。
人が目にしてまず入ってくるのは色。iphoneやandroidではアプリが並んでいるので、特に色のイメージは重要になってきます。調べたのは下記10点。

 

  1. Twitter
  2. Facebook
  3. LINE
  4. Google+
  5. Yahoo!Japan
  6. Google
  7. YouTube
  8. ヤフオク
  9. アマゾン
  10. 楽天

f:id:h__n:20150227235730j:plain

image byRoy Blumenthal

メジャーなソーシャルメディアサイトのカラーコード

主要SNSであるツイッター・フェイスブック・ LINEそれにGoogleプラスのSNSカラーコードを調べました。

  • Twitterカラーコード #55acee
  • Facebookカラーコード #455a9e
  • LINEカラーコード #00da00
  • Google+カラーコード #ea3033

青や明るい緑が多く、青の持つカラーイメージ=さわやかが効いています。

Google+の赤は少し不透明度を落とした優しめの赤色ですね。

有名検索プラットフォームサイトのカラーコード

  • Yahoo!Japanロゴ #ff0033
  • Googleカラーコード #156aec
  • YouTubeカラーコード #c3191e

SNSボタンのカラーコードとは同色でも、プラットフォームのボタンカラーはまるで太字にしたように強い青と強い赤が印象的です。

大手通販サイトのカラーコード

  • ヤフオクのカラーコード #ffda45
  • アマゾンのカラーコード #fc9a18
  • 楽天のカラーコード #bf0000

黄色やオレンジ色のカラーイメージである、やわらか・親しみやすさを感じる配色。顧客との距離感を縮めるためにも安心感・親近感をカラーイメージから訴求しているのでしょうか。

iphoneの電話・メッセージアプリのカラーコード

iphoneにデフォルトで入っている電話・メッセージのアプリカラーコードは#5cd272 でした。着信応答が緑色で着信拒否が赤色。ここでも世界認識のGOはgreen、STOPはredが使われています。
緑の癒しや安らぎの印象は、普段一番目にするアプリなら有効ですね。

以上ウェブサービスのカラーコードでした。
サイト制作で配色に困ったときは是非参考にしてくださいね。

 

史上最強カラー図解 色彩心理のすべてがわかる本

史上最強カラー図解 色彩心理のすべてがわかる本