ジャストウェブ

-ウェブ集客情報ブログ-

2015-06-11

企業サイトランキングから学ぶWEBの配色10パターン

企業サイトランキングトップ10のWEBサイトの配色10パターン

WEBサイトを構築する際、配色をどうするかは、一つの悩みどころだと思います。

「Googleで検索すれば、配色の理論に関する記事はいっぱい見付かるけど、イマイチよく分からない・・・」

そんな方は、実際のWEBサイトから配色を参考にしてみると良いと思います。

そこで、今回は、「企業情報サイトランキング2014(日本戦略ブランド研究所)」の1位~10位の配色パターンをご紹介します。

企業情報サイトランキング2014

このランキングは、6コンテンツ(「会社案内」「ニュースリリース」「技術・品質・安全情報」「CSR・環境への取り組み」「IR情報」「理念・ビジョン」)をユーザーが評価するという形式で実施してます。

“ユーザーが評価したランキング”というのがポイントですね。それでは、配色パターンを見てましょう!

第1位 サントリー

サントリーWEBサイト画面キャプチャ

サントリーの配色

□#ffffff  #abdcea  #5bc2dc

ベースを白、アクセントに企業ロゴと同じ色を使い、メインをアクセントと同系色にする事で、全体的にまとまりがあり、且つ、清涼感を感じます。

第2位 キリン

キリンWEBサイト画面キャプチャ

キリンの配色

#191616 □#ffffff #f00303

ベースを黒、メインを白にする事で、アクセントの赤が際立っています。

第3位 トヨタ自動車

トヨタ自動車WEBサイト画面キャプチャ

トヨタ自動車の配色

□#ffffff #f5f5f5 #e60a1e

ベースが白でかなりシンプルなデザインですが、その分、アクセント(ロゴと同じ色)が目立っています。

第4位 サッポロビール

サッポロビールWEBサイト画面キャプチャ

サッポロビールの配色

#f0ebdf □#ffffff #d7cca6

ビールに近い色(?)でまとめています。ちなみに、テキストリンクもビールに近い色です。商品イメージと配色がマッチしたお手本だと思います。

第5位 カルビー

カルビーWEBサイト画面キャプチャ

カルビーの配色

#e5ddc6 □#ffffff #ed1c24

ベースが落ち着きのある茶、メインを白にする事で、アクセントの赤(ロゴと同系色)が目立っています。

第6位 アサヒビール

アサヒビールWEBサイト画面キャプチャ

アサヒビールの配色

□#ffffff #e5f1fb #004099

こちらも、ロゴと同じ色をアクセントに、メインも同系色にする事で、全体的なまとまりがあります。

第7位 伊藤園

伊藤園WEBサイト画面キャプチャ

伊藤園の配色

#ccead7 □#ffffff #00a040

ロゴと同系色で全体とまとめています。伊藤園と言えば「おーいお茶」、お茶のイメージ通りの配色です。

第7位(同率) 日本ハム

日本ハムWEBサイト画面キャプチャ

日本ハムの配色

#f3f1e4 □#ffffff #e60000

落ち着きのある茶をベースに、ロゴと同じ赤でアクセントを効かせています。

第9位 資生堂

資生堂WEBサイト画面キャプチャ

資生堂の配色

#f5f5f5 □#ffffff #df0068

薄い灰をベースに、白をメインにしているので、アクセントのピンク系が際立っています。

第10位 ヤクルト本社

ヤクルト本社WEBサイト画面キャプチャ

ヤクルト本社の配色

□#ffffff #fceedf #e60039

赤系で全体をまとめていますが、メインの赤が薄い(彩度、輝度が高い)ため、全体的にケバケバしくならず、落ち着いた雰囲気になっています。

まとめ「実在サイトの配色を参考にしよう!」

いかがだったでしょうか?配色の理論を学ぶ事も大切ですが、実在サイトの配色はかなり参考になると思います。

今回は、「企業情報サイトランキング」からのご紹介でしたが、ご自身が気に入ったサイトの配色を調べてみるのも面白いと思います。

以下は、様々なサイトをデータベース化しているサイトですので、気に入ったサイトの配色を参考にしてみて下さい。

WEBデザイン参考サイト bookma! v3
bookma!画面キャプチャ

WEBデザインの見本帳
WEBデザインの見本帳画面キャプチャ

I/O 3000 | Webデザインギャラリー
I/O 3000画面キャプチャ

尚、閲覧中のWEBページから、色情報(カラーコード)をクリックひとつで取得できる便利なツールを”カラーピッカー”と呼びます。

Firefox(31)では、”スポイト”というカラーピッカーが搭載さていますので、直ぐに使えます。
Firefox「スポイト」の使い方

Chromeの場合には、“Rainbow Color Tools”という拡張機能をダウンロードすれば、カラーピッカーが使えます。
chrome「Rainbow Color Tools」の使い

この記事が役に立ったら共有をお願いします

無料ツール
【SEO診断チェックシート】
Google公式ガイドラインに沿った50項目

無料ツール『SEO診断チェックシート』

あなたのWEBサイトに問題がないかチェックしてみませんか?

このSEO診断チェックシートは、こんな人にオススメです。

  • 検索順位がなかなか上がらない
  • ある時から検索順位が下がった
  • アクセス数が伸び悩んでいる

このツールを使えば、Googleが公開している「検索エンジン最適化スターターズガイド」に沿った50項目でサイトを診断できます。

是非、貴社のWEBサイトの診断にご活用下さい。

無料ツールをダウンロード 

最新の記事情報の取得はこちら

「いいね!」ボタンを押すと、最新の記事情報がFacebookに届きます。

「フォローする」ボタンを押すと、最新の記事情報がTwitterに届きます。