企業サイトランキングから学ぶWEBの配色10パターン2015-06-11企業サイトランキングから学ぶWEBの配色10パターンWEBサイトを構築する際、配色をどうするかは、一つの悩みどころだと思います。「Googleで検索すれば、配色の理論に関する記事はいっぱい見付かるけど、イマイチよく分からない・・・」そんな方は、実際のWEBサイトから配色を参考にしてみると良いと思います。そこで、今回は、「企業情報サイトランキング2014(日本戦略ブランド研究所)」の1位~10位の配色パターンをご紹介します。CSR・環境への取り組み」「IR情報」「理念・ビジョン」)をユーザーが評価するという形式で実施してます。“ユーザーが評価したランキング”というのがポイントですね。■#5bc2dcベースを白、アクセントに企業ロゴと同じ色を使い、メインをアクセントと同系色にする事で、全体的にまとまりがあり、且つ、清涼感を感じます。■#f00303ベースを黒、メインを白にする事で、アクセントの赤が際立っています。■#e60a1eベースが白でかなりシンプルなデザインですが、その分、アクセント(ロゴと同じ色)が目立っています。■#d7cca6ビールに近い色(?)でまとめています。ちなみに、テキストリンクもビールに近い色です。商品イメージと配色がマッチしたお手本だと思います。■#ed1c24ベースが落ち着きのある茶、メインを白にする事で、アクセントの赤(ロゴと同系色)が目立っています。■#004099こちらも、ロゴと同じ色をアクセントに、メインも同系色にする事で、全体的なまとまりがあります。■#00a040ロゴと同系色で全体とまとめています。伊藤園と言えば「おーいお茶」、お茶のイメージ通りの配色です。■#e60000落ち着きのある茶をベースに、ロゴと同じ赤でアクセントを効かせています。■#df0068薄い灰をベースに、白をメインにしているので、アクセントのピンク系が際立っています。■#e60039赤系で全体をまとめていますが、メインの赤が薄い(彩度、輝度が高い)ため、全体的にケバケバしくならず、落ち着いた雰囲気になっています。まとめ「実在サイトの配色を参考にしよう!」いかがだったでしょうか?配色の理論を学ぶ事も大切ですが、実在サイトの配色はかなり参考になると思います。今回は、「企業情報サイトランキング」からのご紹介でしたが、ご自身が気に入ったサイトの配色を調べてみるのも面白いと思います。以下は、様々なサイトをデータベース化しているサイトですので、気に入ったサイトの配色を参考にしてみて下さい。閲覧中のWEBページから、色情報(カラーコード)をクリックひとつで取得できる便利なツールを”カラーピッカー”と呼びます。Firefox(31)では、”スポイト”というカラーピッカーが搭載さていますので、直ぐに使えます。Tools”という拡張機能をダウンロードすれば、カラーピッカーが使えます。Tools」の使いこの記事が役に立ったら共有をお願いしますTweetPocket無料ツール【SEO診断チェックシート】Google公式ガイドラインに沿った50項目あなたのWEBサイトに問題がないかチェックしてみませんか?このSEO診断チェックシートは、こんな人にオススメです。検索順位がなかなか上がらないある時から検索順位が下がったアクセス数が伸び悩んでいるこのツールを使えば、Googleが公開している「検索エンジン最適化スターターズガイド」に沿った50項目でサイトを診断できます。貴社のWEBサイトの診断にご活用下さい。最新の記事情報の取得はこちらFacebook「いいね!」ボタンを押すと、最新の記事情報がFacebookに届きます。ACラボTwitter「フォローする」ボタンを押すと、最新の記事情報がTwitterに届きます。