サイトの色を解析してくれる Web Colour Data

webcolourdata_img

ホームページの色を決めるのって難しいんですよね。
見た感じでイメージがつきますし、正解の色というのもないですし….
業界トップのホームページはどんな色使いなんでしょう?

そんなときは(笑)!
ホームページで使われている色を解析してくれるサイトWeb Colour Dataを使ってみてください。
我々のようなデザイン系の仕事をしていると重宝するツールなんですが、先ほどのように自社サイトと他社サイトをそれぞれ色分析して、色の違い、そして色からくるイメージの違いを発見できるかもですよ!

Web Colour Data

ホームページの色を調べてくれるWeb Colour Dataはこんなサイトです。

webcolourdata

web colour data
http://webcolourdata.com

使い方

すごく簡単です!
「http:// 」となっている部分に調べたいホームページのアドレスを入力(コピペ)し、紫色の「GET COLOURS」のボタンをクリックするだけです。

このブログの色を調べた結果です。

webcolourdata_results

Macで表示させたから?かもしれませんが、ホームページの画像がズレてますね。
それは良しとて、調査結果はいくつかの項目にわけて結果が表示されます。

・Breakdown → どの色が何%使われているか
・Hue Distribution → 色合いの分布図
・Colour Wheel → 類似色、補色などを位置で見せてくれる色相環
・Websites with Similiar Colours → 色が似通っているホームページ

です。
このブログは青系、オレンジ系が多いんだなあ。
ほとんどが写真の色だと思いますが…

まとめ

使われている色が良いか悪いかということではなく、同業他社はどんな色使いをしているのか、自社はどうなのか、その色使いは提供しているサービスのイメージ通りかなどを検証するの使うのが良いと思います。
また、あっちもこっちも目立たせたいと思い、むやみに多色使いになっていないかなどもチェックできますよね。

このサイトのトップページにあるPopular Sitesでは、有名サイトの色の調査結果が表示されていますが、どのサイトもほぼ何かの色系統に統一されています。

webcolourdata_popular

Pinterestは赤系統、Dropboxはブルー系統、Facebookは濃紺系で統一されています。
Popular Sitesに上がっているホームページはいろんな色をたくさん使ってはいないですよね。多色使いするとブランドカラーやイメージがつきにくくなりますし…、さらにほかにもいろいろあるんでしょうね。
しっかりと研究・検証されているんだなあと感じます。
勉強なります!

実際に、色からくるイメージって大きいんです。
ホームページに訪れたユーザーが理由もなく、なんとなく行動することにプラスに働くのにも、色の力があるかもしれません。現に、お問合せボタン、購入ボタンは緑色が一番クリックされるとかって言われています。

お時間があれば、自社サイト・業界大手サイトを含めて、色の検証などもされてはいかがでしょうか?
貴社ホームページを強化するなんらかヒントが見えてくるかもしれませんよ〜!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です