デザイン

デザイン

アクセス数トップのCSSとHTMLでは何色がよく使われているの?

1,424 views

過去の記事「SF映画で描かれるモニターが青色である理由」では、歴代のSF映画に登場する近未来的なモニター画面の色を解析した結果、SF映画では古くから青色が象徴的に使われていたことをご紹介しました。記事では、青は自然界で見られない色だからこそ、神秘的なイメージを持っているという考察がありましたが、このように色の印象は人の心に強く働きかけます。

 

今回は、グラフィックデザイナーのPaul Hebertさんが世界的に有名なウェブページのトップページとスタイルシートの色を解析した結果を見ていきたいと思います。Axela.comで最もアクセスが多いサイトとして掲載されているGoogle.com, YouTube, Facebook, Baidu, Yahoo, Wikipedia, Amazon, Google.co.in(インド版Google), Qq(中国で人気のポータルサイト), Twitterにて色の解析が行われました。データは2016年9月10日時点のものです。

それではさっそく結果をご紹介します。

 

まずは、それぞれのサイトで使われている色を羅列した図になります(順番は上記のとおり)。

ws000001

GoogleやBaiduでは使われている色の種類が少なく、YahooやTwitterでは多めです。特にYahooはGoogleと比べてカラフルな色を多用していることが一目瞭然で、ここから企業の特色も垣間見えますね。

 

色の透過度(アルファ値)を排除し、主要な色ごとに分類したものが以下の図です。

ws000002

青色が最も使われる傾向があり、グレー、赤、ターコイズと続いています。紫系の色は全体的にはあまりつかわれていないようです。過去の記事でも紹介しましたが、西洋では青色は「企業」というイメージがあるそうで、まさに一致していますね。ちなみに、グレーは「退屈・悲しみ」というネガティブなイメージが強く、赤は「興奮・愛」だそう。逆に紫色は「忠誠」というイメージを西洋の人はもつ傾向にあるようです。

 

次に、RGBAや16進法などのカラーフォーマットで分類した結果になります。

ws000003

上記のサイトでは4つのフォーマットが使われていました。使用されていたのは上から順に16進法(例:#4e4a40)、3桁16進法(例:#08c)、RGBA(例:255,255,255,10)、Named Colors(例:Red)です。16進法のフォーマットが圧倒的に多く使用されていることが分かります。

 

最後に、彩度で分類した結果です。

ws000004

円の中心から外れていくほど彩度が上がっていきます。大きくプロットされている色は、その色が何度も使用されている人気の色であることを表しています。青系の色がよく使われていることがよく分かります。

 

以上になります。世界のトップ企業が使用する色の傾向から、みなさんのページ作りの参考になれば幸いです。

 

この記事は「The Colors Used by the Ten Most Popular Sites」を翻訳・参考にしています。サイト内では、マウスカーソルを色に合わせるとその色の名前が出てくる仕様になっています。

関連記事

おすすめ記事