レスポンシブWebサイトの定番色は？【配色編】

皆様こんにちは。日々色使いがぱっと決まらず、頭を悩ませております、澤田です。 デザインにおいて、使用する色やその割合によってデザインの印象は変わります。さらに色には流行もあり、業種によってよく使用される色も違うので、定番となる色・組み合わせも様々です。そんな色の定番や流行が気になったので、レスポンシブWebサイトで最近よく使われている色を調べてみました。

ここ近年のレスポンシブWebサイトに絞って調査をしたので、あまり数は多くないですが、Webサイトの傾向が少しでもわかるきっかけになるかと思います。

調査概要

• ギャラリーサイトで紹介されているレスポンシブWebサイトの中からメインカラー・サブカラー・アクセントカラーを調査。
• 各ギャラリーサイトの直近30〜40ほどを取り上げ、計90サイトによる統計。
• 3つのギャラリーサイトによる人力統計（ギャラリーサイト：RWD JP、muuuuu、イケサイ ）
• 2014年末〜2015年6月24日の集計結果。
• メインカラー・サブカラー・アクセントカラーに分類し集計。
• 業種などによるカテゴリに分けても調査。（別ブログにて記述）

人力統計なので、実際に使われている色の比率と異なることがあるかもしれませんが、実際の比率よりユーザーが見たときの印象と同じになるよう気をつけて調査しました。もっと機械的で効率のいいやり方があったのではと思いますが、お見苦しい点はご愛嬌ということでよろしくお願いいたします。

Webサイトの配色バランス

今回は、レスポンシブWebサイトのメインカラー・サブカラー・アクセントカラーに注目してよく使用される色を集計しました。この配色のバランスは、Webサイトだけでなくあらゆるものに共通します。

メインカラー・サブカラー・アクセントカラーの割合は、だいたい、メインカラー70%、サブカラー25%、アクセントカラー5%の割合が美しいと言われています。気づかないだけで、カップヌードルや缶ジュースなど、身の回りのものにはこのバランスで配色されているものが多くあります。配色のバランスが良いものは自然と美しいと感じたり落ち着くものだと思います。もちろん、メイン・サブ・アクセントという3つに分類されるからといって3色しか使ってはいけないわけではありません。この比率に収まるのなら、サブカラーが2色であったり、アクセントカラーが3色あったりしても大丈夫です。

では、それぞれの集計結果を挙げていきましょう！

メインカラー

Webサイトにおいて多くを占める色であるメインカラー。背景のように広域に使われたり、下層ページでも使用し基本となる色なので、ベースカラーとも呼ばれます。

割合の詳細は以下の通りです。

メインカラーはダントツで白！が多いですね。無彩色は全体のイメージをまとめやすい色ですね。紙の色が白いのと同じように、白は多くの人が慣れていて見やすい色でもあるのでしょう。ここまで圧倒的だとは思いませんでした。

白に次いで多いのがベージュでした。ベージュは、あたたかい印象にも、明るい印象にも使えるので使用しやすい色です。無彩色のグレーや黒を使用するよりもクールになりすぎない、ほどよい色ですね。黒かグレーが2番目に多いかなと思っていたので、少し意外な結果でした。

サブカラー

サブカラーは、メインカラーの次に多く使われる色です。Webサイトの内容である文章、つまり文字の色がサブカラーとなることもしばしば。

割合の詳細は以下の通りです。

メインカラーと同様に、サブカラーも無彩色が多いですね。文字色にもよく使用される黒が半分以上を占める結果となりました。まあ無彩色がトップにくるのはわかっていた結果な気はしますね。。。

白・黒をメインとサブで使用し、写真の色もモノクロにし、サイト全体の統一感を出しているWebサイトもありました。全体の明度と写真の明度や色味を合わせているとぐっとひきこまれますね。色っぽくて素敵です。

アクセントカラー

全体を引き締めるアクセントカラー。アクセントカラーはメインやサブより色数が多くなります。

割合の詳細は以下の通りです。

※カラフル…アクセントカラーが3色以上の場合

赤が一番多く、次いで緑、青、黄色といった順でした。赤・緑・青はコーポレートサイト、大学サイト、病院サイトなど広い業種で見られました。中でも赤色はショッピングサイトに使われていることもありましたね。赤色=値下げ=お買い得！みたいに購買意欲がそそられるのでしょうか。

黄色をアクセントカラーに使用しているWebサイトには、サブカラーに青を使っているところが多く見られました。爽やかで目を引くこの組み合わせは、元気な印象を与えるため、子供向け・学生向けであったり、明るいイメージを持たせたいWebサイトが多かったです。同じ黄色をアクセントカラーに使用していても、茶色やゴールドと組み合わされていると印象ががらりと変わり、高級感を印象づけます。この組み合わせは、大人の女性に向けた歯科医院や美容クリニックにも使用されていました。

アクセントカラーの役割をしている色が複数あるサイトもありました。メイン・サブは白や黒などのシンプルな色に5色ほどのパステルカラーや彩度を落とした基本色を使用していることが多かったですね。

まとめ

偉そうに記事を作成しましたが、実は私もうまく配色できず、数ヶ月前にこのメイン・サブ・アクセントの配色バランスについて教えていただいたことがあります…。 レスポンシブWebデザインでは、ご存知のように多様な画面サイズを想定して制作をする必要があります。今回統計をしていて、PCでアイコンに使っていたアクセントカラーが、スマホだとアイコンが画面の割に大きく表示されアクセントカラーの印象が強くなってしまう、というWebサイトもありました。PCとスマートフォンでは画面の大きさも縦横比率も異なるため、色の比率も気をつけてデザインする必要があるんですよね。

今回のブログでは、最近のレスポンシブWebサイト全体の色について調査しましたが、次回のブログではもう少し詳細な結果をお伝えしたいと思います。業種ごとにカテゴリー分けし、よく使用されるメイン・サブ・アクセントカラーを紹介したいと思いますので、ご興味がおありの方はお付き合いいただければ幸いです！