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

皆様こんにちは。気分があがらない時は頭の中でYeahめ●ちゃホリデイを再生する澤田です。梅雨のじめじめが続きますが、これを読んでいる方々はお元気でお過ごしでしょうか。 さて、前回のブログに引き続き、今回もレスポンシブWebサイトの配色を紹介していきたいと思います。今回は、業種別にカテゴリ分けして集計結果を見ていきます。

調査概要

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

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

大学・専門学校・高校・学校関係

メイン・サブカラーは白・黒が多いですね。学校系のWebサイトは学校説明など文章が多いためか、一般的で見やすい白地×黒のページがより好まれやすいのではないでしょうか。それにプラスして、学校そのものを明るいイメージにさせるアクセントカラーは大きな役目を担っています。そしてどこの学校もアクセントカラーで学校の雰囲気を表していることが多い気がします。

大学のWebサイトでは彩度の低い赤・青色（えんじ色・紺色）を使用しているところが多い印象を受けました。青は知性的な印象を与える色と言われていますので、高校を卒業したより高度で知性的な学びを印象付ける効果があると考えられますね。爽やか！青春！という意味でも使われているかもしれません（笑） この統計ではランクインしていませんが、落ち着いた紫色もよく使用されている気がします。ランクインしていないのはたまたまか、ここ最近のレスポンシブWebサイトに使用されていないということでしょうか…？彩度の高い色を使用した明るい配色の学校系サイトもありますし、定番色の流れも変わってきているのかもしれませんね。引き続き傾向を観察していきたいと思います！

病院・医療関係

メインカラーで一番多いのは白ですが、ベージュが4分の1を占める結果となりました。集計した感想としては、白やグレーなどより優しく温かい印象を与えるベージュは、個人医院や歯科医院などで好まれ使用されていました。サブカラーは文字に使用される黒色が最も多いです。ですが、学校関係やコーポレートサイトと比べると黒以外の色の割合も多いですね。おそらく集計の総数が多ければもっと黒に偏る結果になるかと思いますが、今回の集計ではグレー、青が２番目に多い結果となりました。サブカラー黒以外の色があてはまるWebサイトは、文字色をグレーや青、茶色にしたり、使用する割合を広げ、軽やかな印象になっていた印象です。病気や体の調子に不安を持っている患者さんの気持ちを少しでも軽くしリラックスさせる印象を与える目的もあるのかもしれません。白+グレーの背景に青文字の組み合わせのサイトも見ましたが、清潔感があり、堅苦しくなくすっと入り込める印象を受けました。

アクセントカラーは緑が最も多く、次いでピンク、オレンジ、黄色となりました。アクセントカラーは青が一番多いかと予想していたのですが、意外と緑が多いんですね。清潔感のある青色はサブカラーとして使われ、アクセントとなる色は親しみやすい明るい色を使用しているサイトも多くあるのかもしれません。病院は診察・入院など建物の中にいることが多いので、自然を連想させる色としての緑、やさしさ・親しみのイメージとしての緑が好まれているのかもしれませんね。

コーポレート

メインカラーが白100%！集計数が少ないためなんとも言えませんが、コーポレートサイトに白が多いのは確かかと思います。アクセントカラーは赤が多く、次いで青、緑、黄色…といった順です。赤は活気・元気、青と緑は誠実・堅実な印象を与えるサイトに使われることが多かったです。文章が多く堅くなりがちなコーポレートサイトの印象を、さりげなく明るい活気のある印象にさせる赤色は、多くの企業で取り入れられているようです。企業の中でも、食品を取り扱う企業は赤色を使用している会社が多く見られました。（例：ファストフード、冷凍食品、コンビニ経営企業など）

制作会社

広告・テレビ・グラフィック・Webなどの制作会社を調査しました。こちらは計6つのサイトから出した集計結果なので、あまり統計としては適切ではないかもしれませんが、メインカラーやサブカラーが同じなど共通点を持ちながら、全サイトのアクセントカラーがばらばらという面白い結果になりました。制作会社のWebサイトは、制作実績を大きく取り扱っている会社が多く、写真の邪魔をしない無彩色を生かしたデザインがほとんどでした。制作会社のWebサイトは、メインカラーとサブカラーに同じ白黒を使用していても上記3つの業種のデザインとは違い、シンプルな配色でメリハリのある、ぱきっとしたデザインが多いです。

制作会社Webサイトの中でも、白や黒、写真以外のアクセントカラーを持っているサイトは、誘目性の高い色を使用していることが多かったです。なかなか目をひく奇抜な色を多く見かけました。コーポレートサイトのように、文字を読むことが多いWebサイトだと、強いアクセントカラーによる極端な強弱はかえって文字を読みづらくすることもあるので、写真が多いサイト特有の表現ではないでしょうか。

制作会社サイトやイベントPRサイトは文字間や行間、文字の太さにもこだわっているサイトが多いので、このカラーバランスが生きる文字の処理もなされているのだと思います。

まとめ

少しずつ差はあるものの、メイン/サブ/アクセントカラーの順に白/黒/赤・青・緑のうちの1色または数色の組み合わせが王道のカラーリングのようですね。全体の集計結果とトップは変わらないようです。王道の配色はサイト利用者も慣れた色合いなので、すっと入ってきて受け入れ慣れた、見やすい配色と言えるかもしれません。 前回のブログで使用した集計結果をカテゴリごとに分けたため、集計数が少し物足りない結果になってしまいました。それぞれのカテゴリにつきWebサイトが合計10前後程度なので、定番を見つけるための統計としては不十分でしたね…。おそらくこれからは、今まで以上にレスポンシブ Webデザイン採用サイトがリリースされてくるのではないかと予想しておりますので、またじっくりと集計してみたいと思います。