ホームページのデザインでポイントとなる色の選定は、目的やターゲットとなるユーザーによって決まります。
世の中にあるホームページでは、どのような色が使われているのでしょうか。
今回は、赤色を使用しているホームページを中心にWeb Site Color Pickerというツールを使って分析してみました。

Web Site Color Pickerとは

今回使用するツールのWeb Site Color Pickerとは、URLを入力するだけで、ホームページに使用している色を抽出することができます。
例えば、参考にしたいホームページが全体的に「どんな色」を「どれくらいの割合」で使用しているかを知る事ができます。
http://pick.v-colors.com/

赤色を中心に使っているホームページのデザイン

1.SEIYU

SEIYU

ヘッダーを中心に赤+黒を使用しており、背景は白を使用した色使いです。赤系統の色は全体にしても10%未満と意外と少ないようです。

全体を構成する色の割合

SEIYU割合

http://www.seiyu.co.jp/

2.DAIHATSU

DAIHATSU

ナビゲーションや見出しを中心に赤を使用しています。バナーも赤の縁取りが多く、ホームページ全体の色と合わせているようです。

全体を構成する色の割合

DAIHATSU割合

http://www.daihatsu.co.jp/

3.NISSIN

NISSIN

コンテンツには頻繁に赤を使用しており、カップヌードルのロゴも赤のため全体に統一感があります。割合としても全体の17%を占めています。

全体を構成する色の割合

NISSIN割合

http://www.cupnoodle.jp/

4.TSUBAKI

TSUBAKI

彩度の低い赤色とゴールドや黒を使用したデザインが高級感を演出しています。
赤色が15%に対し、黒は21%とやや高めとなっています。

全体を構成する色の割合

TSUBAKI割合

http://www.shiseido.co.jp/tsubaki/index.html

5.コカ・コーラ

コカ・コーラ

ブランドカラーの赤が印象的なコカ・コーラですが、ホームページのデザインももちろん赤です。ヘッダー・フッダ―を中心に赤を使いつつ、ユーザーの目を惹きたいポイントにも赤を使用しているようです。

全体を構成する色の割合

コカ・コーラ割合

http://www.cocacola.co.jp/

6.newsweek japan

newsweekjapan

グラデーションのかかった赤が印象的なヘッダーのデザイン。こちらも見出しなどの要所要所に赤を使用しています。

全体を構成する色の割合

newsweekjapan割合

http://www.newsweekjapan.jp/

7.UNIQLO

UNIQLO

ロゴの赤と白文字を使用した色使いがホームページにも反映されています。
カラーコードの#ff2020を中心に構成されています。

全体を構成する色の割合

UNIQLO割合

http://www.uniqlo.com/jp/