web 配色

日本で人気サイトにするために”配色”はどうするべきか?

20170106_12

正月も三連休も終わり、ようやく普段の調子を取り戻しつつある方も多いのではないでしょうか。今年もデジタルマーケティングやWebの話題をいろいろお届けしていこうと思います。よろしくお願い致します。

さて、ウェブサイトという”視覚表現”を通し、閲覧者に対して情報を伝える際、様々な要件があると思います。訴求内容の情報が分かりやすく整理されてるか、使いやすくユーザビリティーに優れたデザインか、インパクトあるキャッチが使われているか…。こうした重要な要件の一つとして挙げられるのが、”色”。サイトに使われている配色についてです。

米国の最も人気のあるウェブサイトのトップ10のサイトを調べると、青を多用しており、黄と赤の2倍、緑の3倍近く、青が使われていることが判明したのだとか。

インターネットで最も人気な色は「青」──デザイナーが調査

最も人気があるウェブサイトのカラーパレットから、何かを学びたいと思ったためだ。「色彩設計に悩むことが多いため、他社はどうしているか気になったのです」ウェブの利用状況を調査するアレクサ・インターネットのランキングをもとに、最も人気がある10サイトから色を抽出した。このランキングには、Google(1位)、Facebook(3位)、Amazon(7位)などが入っている。

(中略)

フェイスブックは青を多用することでよく知られるが、実はそれ以外にも驚くほど多くの色を使用している。グーグルやウィキペディア、百度(バイドゥ)に比べると、フェイスブックが使う色の種類は3倍近くに達するのだ。一方、アマゾンは青をほとんど使用せず、代わりにさまざまな暖色をちりばめている。

http://wired.jp/2016/09/16/popular-color-internet/?site=pc

20170106_01 20170106_02

http://paulhebertdesigns.com/web_colors/index.php

米国での人気サイトでは青が最も多いようですが、では、日本の人気サイトトップ10の場合ではどうなっているか気になった私は、同じような手法で調べてみることにしました。「WEB SITE COLOR PICKER」は、URLを入れると、そのサイトの配色を、自動的に検出するサービスを提供しています。

20170106_03

http://pick.v-colors.com/

そして、こちらのサイトを参考にし、日本の人気ウェブサイトランキング TOP10にランクインしたサイトから、使用頻度の高い上位10色を検出して比較してみました。まずは、TOP10の中から特徴的だったサイトをいくつかご紹介してみましょう。

TOP1 google.co.jp

 

トップはやはり、検索エンジンの雄であるGoogleのようです。Googleのトップページといえば、誰もが連想するように…

20170106_05

シンプルで白いイメージですよね。当然ではありますが、サイトの約96%が白で占められており、圧倒的に白が多い結果になっています。

20170106_04

TOP3 Yahoo.co.jp

2位のgoogle.comの次点が、日本のYahoo!です。検索エンジンだけでなく、ニュースやショッピング、オークションなど、とても便利な日本最大級のポータルサイトです。Googleと比較すると、だいぶ色とりどりの印象があります。

20170106_06

やはり白が強いものの、意外に黄色系が使われているようですね。全体的に淡い色使いが多い傾向のようです。

20170106_07

TOP5 facebook.com

今やソーシャルメディアの代名詞ともいえるFacebookが堂々5位にランクイン。Facebookの配色といえば、青の印象が強いですが…

20170106_08

やはり、紫・ブルー・水色といった、寒色系が多く使われている結果になりました。とはいえ、タイムラインに投稿されている記事内容によって、配色の変動はありそうですね。

20170106_09

TOP10 rakuten.co.jp

EC系では、7位にAmazon.co.jpがランクインし、日系ECモールでは最大級のサービス、楽天市場が10位にランクイン。サイトの配色のイメージとしては、良く言えば賑やかな印象、悪く言えばどぎつく、ごちゃごちゃした、新聞の折り込みチラシ的な印象がありますが…

20170106_10

やはり、他のサイトではあまり見られなかった、赤やオレンジが配色として多く使われている傾向になりました。

20170106_11

TOP10のサイトの配色の傾向は…?

以上のように、日本のアクセス数TOP10のサイトの配色を調査し、前述の米国のWebデザイナーが分類した9色の色にあてはめてデータを集計してみました。これまでの数例からわかると思いますが、どうしてもwebサイトのベース色となりがちな”白”が圧倒的に多くなってしまうため、白以外の配色を対象としてどのような傾向があるのか整理してみると以下のような結果になりました。

20170110_01

1.グレー(31.4%)
2.(23.7%)
3.(18.6%)
4.(7.7%)
5.水色(6.4%)
6.黄色(5.5%)
7.(4.3%)
8.(2.4%)

・日本で人気のサイトはグレー黒の配色で制作されている傾向が強い
黄色は比較的使われない傾向が強い
・TOP3(グレー・黒)は、下位3色(黄色)のおよそ6倍使われる傾向にある

57760516904312594e2b0fa0b6eaefdb_m

およそ6倍もの差があったことが結果として分かりました。ここまでの差があることは事前には予想もしていませんでした。前述の米国の例もあるように、日本を含む、世界中のWebユーザーは寒色系の色を好む傾向があるといえるでしょう。

勿論、Webサイト制作の際には、商材やサービスなどに応じて、世代・性別など、ターゲットが異なるため、その属性に応じて好まれる配色を使うべきであり、この調査の結果を完全に当てはめることはするべきでありません。(最も、グレー・青・黒のみで構成したら、かなり地味なサイトになってしまいそうですよね…) ですが、今後、Webの担当者として配色についてディレクションする際などの参考にはなるのではないでしょうか。