Web サイトの色の統計: Web サイトに最適な色は?

色は、Web サイトのデザインにおいて最も重要な視覚要素の 1 つです。 コンバージョン率から訪問者がブランドを認識する方法まで、あらゆることに影響を与える可能性があります。

言うまでもなく、Web サイトの配色を正しく設定する必要があります。 しかし、どの色を使用する必要がありますか? また、それらを効果的に使用するにはどうすればよいでしょうか。

このウェブサイトの色統計のまとめでは、これらの質問に答えるのに役立つ驚くべきデータを共有します.

以下の統計は、色がいかに重要であるかを明らかにし、さまざまな消費者セグメントがさまざまなウェブサイトの色にどのように反応するかなどを明らかにします.

準備？ 始めましょう！

ウェブサイトに最適な色は何ですか?

ウェブサイトに最適な色について客観的なコンセンサスはありません。それはすべて、ブランドとターゲット市場の性質に依存するためです. ただし、青と緑は、ほとんどの顧客が Web サイトで好んで見る色であるため、安全な選択のようです。

一般的に、消費者は暖色より寒色を好むようです。

Web サイトの訪問者が好む色は?

消費者の 46% は、企業が Web サイトで青を使用することを好み、Web サイト訪問者の間で最も好まれる色になっています。

後で見るように、この好みは世界中の一般的な色の好みと一致しています。

それはおそらく、私たちが青色を認識する方法と関係があります. 多くの場合、落ち着いて安全でプロフェッショナルな、脅威のない色として見られます。これは、ブランドのウェブサイトがしばしば目指している 3 つの特性です。 ただし、これらの色の関連付けについては後で詳しく説明します。

緑は投票の 30% で 2 番目に人気のある Web サイトの色で、赤は 22% で 3 番目でした。

興味深いウェブサイトの色の統計:

• 初めてウェブサイトにアクセスする消費者の 22% は、人目を引く色を探します。
• しかし、消費者の 21% は、奇抜な色の Web サイトを離れます。
• 19% の人が寒色を肯定的な感情的反応と関連付けるのに対し、暖色はわずか 14% です。

最悪のウェブサイトの色は何ですか?

黄色は、消費者がウェブサイトで最も嫌う色であり、調査対象者の 23% が、企業はウェブサイトのデザインにイエローを使用すべきではないと考えています。 オレンジとパープルは僅差で、22% が最も嫌いな Web サイトの色だと答えています。

とはいえ、客観的に「最悪のウェブサイトの色」というものはありません。 上記のウェブサイトの色の統計は、消費者が嫌いだと思うウェブサイトの色を示していますが、それがあなたにとって適切な選択ではないという意味ではありません. それはすべて、ブランドの個性やターゲット ユーザーなどの要因によって異なります。

人口統計によるウェブサイトの色の好み

ウェブサイトの色の好みは性別によって異なります。 男性も女性も青と緑が苦手なようですが、女性は特に好きです。

• 男性の 45% と比較して、女性の 50% は Web サイトで青色を好む
• 女性の 34% は、男性の 30% と比較して、ウェブサイトで緑を見ることを好みます

同様に、ウェブサイトで最も嫌いな色も性別によって異なるようです。 女性は黄色が嫌いで、男性はオレンジ色が嫌いです。

• 26% の女性が、企業はウェブサイトに黄色を使用すべきではないと考えています
• 男性の 23% は、企業はウェブサイトにオレンジ色を使用すべきではないと考えています

色の好みも年齢によって異なるようです。

• 18 歳から 24 歳までの 43% がウェブサイトで紫を好むが、44 歳から 54 歳までの年齢層では 17% しか同じように感じていない

Web サイトに最適な配色は?

ほとんどの Web サイトは 1 つの色だけでなく、複数の色を使用しています。 Web サイトで一緒に使用する色の組み合わせは配色であり、それを正しく行うことが非常に重要です。

データによると、ほとんどの消費者が Web サイトに最適な配色と考えているのは次のとおりです。

• 消費者の 26% は原色を好みます。 原色配色では、赤、黄、青の原色を使用します。
• 消費者の 21% は、補色を好みます。 補色配色では、青とオレンジ、または赤と緑のように、カラー ホイール上で互いに反対側にある 2 つの色を使用します。 1 つはドミナント カラーで、もう 1 つはアクセント カラーです。
• 消費者の 20% は類似した配色を好みます。 類似配色では、赤と紫と赤紫、または黄色と緑と黄緑のように、カラー ホイール上で隣り合わせに配置された色を使用します。

ホワイトスペースはどれくらい重要ですか？

初めて Web サイトを表示したときに余白に気付く消費者はわずか 8% であり、これが Web デザインにおいて余白が非常に重要である理由です。

CTAや購入ボタンなど、最も重要なものに訪問者の注意を向けることができるように、要素間にスペースを作成するのに役立ちます. また、Web サイトのページが乱雑に見えるのを防ぐのにも役立ちます。

出典:トップ デザイン会社¹ 、トップ デザイン会社²

色の人気統計

消費者が好むウェブサイトの色は何かを調べてきましたが、一般的に消費者が好む色はどうでしょうか? 確認してみましょう。

世界一好きな色は？

ジョー・ハロックの調査によると、青と緑は、ウェブサイトの色のトップチョイスであるだけでなく、世界で最も人気のある色でもあります。

調査対象者の 42% が、青が好きな色であると答えており、青が一番の選択になっています。 緑と紫は、世界で 2 番目に人気のある色で、それぞれ 14% の票を獲得しました。

この統計は、Colorcom のグローバル カラー調査のデータによって裏付けられています。 30万人以上を対象とした調査の結果、参加者が最も好きな色として青を選んだこともわかりました。

世界で一番嫌いな色は?

ジョー・ハロックによる同じ調査によると、オレンジは年齢や性別を問わず、ほとんどの人が最も嫌いな色です。

30% の人がオレンジが最も嫌いだと言い、23% は茶色 (世界で 2 番目に嫌いな色) と答え、13% は紫 (世界で 3 番目に嫌いな色) と答えました。

ただし、Colorcom のグローバル調査では、わずかに異なる結果が得られました。 彼らのデータによると、黄色は最も一般的で最も嫌いな色です。

男女別人気カラー

Web サイトの色と同様に、一般的に人々が好む色は、性別や年齢によって異なります。

以下は、私たちが持っている最良のデータによると、特定の色が好きだと言った男女の割合の内訳を示しています.

好きな色トップ10（女性）：

1. 青 – 35%
2. 紫 – 23%
3. 緑 – 14%
4. 赤 – 9%
5. 黒 – 6%
6. オレンジ – 5%
7. 黄 – 3%
8. ブラウン – 3%
9. 白 – 1%
10. グレー – 1%

好きな色トップ10（男性）：

1. 青 – 57%
2. 緑 – 14%
3. 黒 – 9%
4. 赤 – 7%
5. オレンジ – 5%
6. グレー – 3%
7. 白 – 2%
8. ブラウン – 2%
9. 黄 – 1%
10. 紫 – 0%

ここで興味深いのは、性別はどちらも青と緑のようですが、紫の好みには大きな違いがあるということです. 女性の間では、2番目に人気のある色です。 しかし、男性ではそれが最も少ないです。

性別で嫌いな色

次に、同じ調査によると、特定の色が最も嫌いだと答えた男女の回答者の割合の内訳を見てみましょう。

最も一般的で最も嫌いな色 (女性):

1. オレンジ – 33%
2. ブラウン – 20%
3. グレー – 17%
4. 黄 – 13%
5. 紫 – 8%
6. 緑 – 6%
7. 白 – 3%

最も一般的で最も嫌いな色 (男性):

1. ブラウン – 27%
2. 紫 – 22%
3. オレンジ – 22%
4. 黄 – 13%
5. 白 – 5%
6. グレー – 5%
7. 緑 – 2%
8. 赤 – 2%
9. 黒 – 1%
10. 青 – 1%

ここでも、興味深い類似点と相違点がいくつかあります。 男女ともに茶色とオレンジ色がやや嫌いなようですが、男性は最も嫌いな色が紫であると言う傾向がはるかに高かった.

ソース: Colorcom ¹ , ジョー・ハロック¹

色の好みは年齢による？

はい、色の好みは年齢によって異なるようです。 青は世代を超えて世界で最も人気のある色ですが、興味深いことに、年齢層が若いほど緑を好む傾向が高く、年齢層が高いほど緑を好む傾向が低いという統計があります。

紫はその逆で、若い人はあまり好きではなく、年配の人は好きです。

同様に、オレンジと黄色は、高齢の消費者の間ではあまり人気がないようです。 これらの色は、年齢層の高い回答者が最も嫌いな色として挙げる頻度が高くなります。

茶色は、若い年齢層で最も嫌いな色として挙げられることが多い.

Call-to-Action ボタンに最適な色は?

Web サイトのすべての要素の中で、コール トゥ アクション (CTA) ボタンはおそらく最も重要です。 これらは、顧客に注目してクリックしてもらいたい要素です。

そのため、CTA に最適な色を特定するために、多くの研究とテストが行​​われてきました。 統計が示すものは次のとおりです。

• Performable の Web サイトでの Hubspot による分割テストでは、赤いボタンは緑のボタンよりも大幅に優れており、クリック数が 21% 増加しました。
• 他のテストでも同様の結果が示されています。 たとえば、Dmix は、赤いボタンに切り替えるとコンバージョン率が 34% 上昇することを発見しました。
• ほとんどの研究は赤と緑のボタンに焦点を当てていますが (これらが最も人気があるため)、他の色を比較したものもあります. そのような研究の 1 つでは、青とオレンジのボタンを比較したところ、青がオレンジよりも 9% 優れていることがわかりました。

ここから簡単にわかるのは、赤が一番いいということですが、それは単純化しすぎです。

真実は、コールトゥアクションボタンに最適な色はありません. それはケースバイケースであり、万能のアプローチはありません。

最も重要な要素は、ボタンが Web ページの他の色から目立つようにすることです。 Web サイトの主要な色が緑の場合、緑のボタンはおそらく赤ほどユーザーの注意を引きません。 ただし、Web サイトの主要な色が赤の場合、緑のボタンが適切に機能する可能性があります。

出典:ハブスポット、CXL

なぜウェブサイトの色が重要なのですか?

次に、Web デザインにおける色の重要性について詳しく説明している Web サイトの統計をいくつか見てみましょう。

ウェブサイトの色は重要ですか？

調査対象の消費者の 39% が、企業の Web サイトで最も重視する視覚的要素は色であると述べています。 これにより、写真/画像 (40%) に次いで、消費者が高く評価する 2 番目の視覚要素となっています。

買い物客の 42% は、Web サイトのデザインのみ (色を含む) に基づいて意見を述べています。

Web サイトに戻らない買い物客の 52% は、美的要素 (色を含む) が原因です。

色の重要性に関するその他の統計

色は Web サイトだけでなく、製品デザインからブランド ロゴまで、すべてのブランディング マテリアルで重要です。 理由は次のとおりです。

• 製品に対する消費者の最初の評価の約 62 ～ 90% は、色のみに基づいています。
• 色はブランドの認知度を最大 80% 高めることができます
• 90% の人が、色が新しい顧客を引き付けるのに役立つと考えています
• 83% は、色が成功しているように見えると信じています
• 81% は、色によって競合他社より優位に立つことができると考えています
• 90% は、消費者は色を使用するとプレゼンテーションをよりよく覚えていると考えています
• 読者は白黒広告よりもフルカラー広告の方が 26% 多いことに気付きます。 これを発見した調査は、特に雑誌広告に注目していましたが、同じ原則が Web サイト広告にも当てはまる可能性があります。

出典: Colorcom ² 、Top Design Firms ¹ 、ResearchGate、Neil Patel、Kissmetrics

色の連想

研究によると、人間は特定の色と特定の関連性を持っているようです。 これらのいくつかは生来の生物学的に結びついているように見えますが、他のものは文化的に駆動されています.

Web サイトをデザインするときは、一般的な色の関連付けに注意することが重要です。これは、Web サイトの訪問者がブランドを認識する方法に影響を与えるためです。 ブランドの個性を表す色を選び、狙っているような感情的な反応を呼び起こすようにしてください。

それを念頭に置いて、Joe Hallock による調査に従って、各色が最も一般的に関連付けられているものを示す Web サイトの色の統計をいくつか示します。

信頼

青は、信頼に最もよく関連するウェブサイトの色です。 調査対象の回答者の 34% が、信頼について考え、青について考えると答えました。 これは、青色が Web サイトの色として人気がある理由の大きな部分を占めている可能性があります。

回答者の 21% が信頼を白に関連付けており、白が 2 番目に選ばれています。 これは、白が病院や医師の白衣などの環境で使用されているため (またはおそらく理由) にあると考えられます。

オレンジは、この調査で特定された最も信頼できない色でした。 回答者のわずか 1% が、それを信頼と関連付けました。

安全

青は、セキュリティに関連する最も一般的な Web サイトの色でもあり、投票の 28% を占めています。 セキュリティと信頼が意味的に密接に関連していることを考えると、これは驚くべきことではありません。 また、黒人は 16% でセキュリティに関連することがよくありました。 そして、オレンジは投票の 2% を獲得し、再びリストの最下位になりました。

スピード

赤は 76% の速度に最も一般的に関連付けられる色です。 これは、赤の根底にある活力を与える効果と、激しさ、怒り、激しさとの関連性によるものと思われます。 黄色は 7% で 2 位に差をつけました。

これにより、ウェブサイトに緊急性を持たせるのに赤が適している場合があります。 たとえば、時間制限のあるオファーを強調するために使用できます。

安い・安い

参加者の 26% が、オレンジを安い/安価な言葉と関連付けました。 黄色は投票の 22% で 2 位、茶色は 13% で 3 位でした。

青は、安さと関連付けられる可能性が最も低い色であり、回答者のわずか 1% しか選択しませんでした。

これについて興味深いのは、安さとの関連性が色の好みと密接に相関しているように見えることです。 ブラウン、イエロー、オレンジは、どちらも消費者が最も好まない色であり、最も安いという言葉に関連付けられる可能性が高い色です。

高品質

調査対象者の 43% が黒を高品質と関連付けました。 ウェブサイトの配色に黒を使用することで、品質との関連性を活用できます。

2 番目に高い品質を連想するのは青で、回答者の 20% が青を選びました。 オレンジは高品質と関連付けられる可能性が最も低く、得票率は 0% でした。

ハイテク

黒 (26%) と青 (23%) もまた、ハイテクに最もよく関連する色でした。 グレーは、回答者の 23% が選んだ 2 位でした。

恐れ

参加者の 41% が赤を恐怖または恐怖と関連付けました。 黒は 38% で僅差の 2 位でした。 ホラーをテーマにした Web サイトで作業している場合は、黒と赤が当然の選択です。

興味深いことに、青色を恐怖と関連付けた回答者はいなかった。

楽しい

28% の人が、オレンジは楽しいことを最も連想させる色だと答えました。 黄色は 26% で僅差の 2 位でした。 紫 (17%) と赤 (16%) も人気の選択肢でした。

これは、ウェブサイトの色の中で最も人気のない色であるにもかかわらず、オレンジと黄色がウェブサイトのデザインにおいて重要な位置を占めていることを示しています。 ブランドや製品を楽しいものとして位置付けようとしている場合、これらは効果的な選択肢になる可能性があります。

勇気

回答者の 29% が、紫を勇気と勇敢さを連想させると答えました。 赤は 28% で僅差の 2 位、青は 22% で 3 位でした。

勇気と勇敢さはより男性的な価値観として一般的に考えられているため、これは興味深いことですが、前述のように、これらの特性との関連性にもかかわらず、紫色を好む男性はほとんどいません.

Joe Hallock による Web サイトの色の関連付け

以下は、Joe Hallock による調査によると、上位の色の関連付けをまとめたものです。

• 青 – 信頼、セキュリティ
• 赤 – スピード、恐怖
• オレンジ – 安くて楽しい
• 黒 – 高品質、高度な技術
• 紫 – 勇気

Colorcom による Web サイトの色の関連付け

Colorcom のグローバル カラー調査でも、回答者に色の関連性について質問しました。 データによると、各色の最も一般的な関連付けは次のとおりです。

• 黄色 – 幸せ
• 白 – 純度
• 緑 – 幸運
• 赤 - おいしい
• ダークブルー – 品格
• シルバー – ハイテク
• 赤 – セクシー
• 黒 – 喪
• ゴールド – 高価
• ブラウン – 安価
• 赤 – パワフル
• 青 – 信頼できる
• ゴールド – 高品質
• 落ち着いた黄色 – 吐き気
• 白 – 神
• 黒 – 不運

出典: Colorcom ¹ 、Joe Hallock ²

ウェブサイトのロゴの色の統計

ロゴは、Web サイトで取り上げられるもう 1 つの重要な視覚的要素です。 以下は、特にロゴに関連する Web サイトの色の統計です。

ウェブサイトのロゴにおける色の重要性

Reboot Online によるテストでは、顧客の 78% が簡単に表示されたロゴの原色を思い出すことができましたが、名前を覚えていたのは 43% だけでした。

つまり、ブランド資産 (Web サイトなど) で使用する色は、ブランド名よりも記憶に残り、間違いなく重要です。

最も一般的なウェブサイトのロゴの色

ブラックは、トップブランドの中で最も人気のあるブランディングカラーです。 世界のトップ 100 ブランドの 34% のロゴに使用されています。

ロゴに各色を使用しているブランドの割合:

• 34%が黒を使用
• 30% 青を使用
• 30%が赤を使用
• 9% 黄色を使用
• 7%がグリーンを使用
• 6% シルバー/グリーンを使用
• 5% オレンジ使用
• 2% ブラウン使用

出典：オンラインで再起動

どれくらいの色があるの？

正確な色の数については誰も同意できませんが、私たちができる最善の答えは 1,000 万色です。

これが人間の目に見える色の最大数ですが、私たちが認識できない色は無限にあります。

どのようにして 1000 万という数字にたどり着いたのか興味があるなら、それは基本的な数学です。 人間の目は、1,000 階調の光を見ることができます。 そして、これらの光の色合いの中で、100 の異なる赤緑の色合いレベルと 100 の異なる黄青の色合いレベルを検出できます。

それをすべて掛け合わせると (1,000 x 100 x 100)、1,000 万になります。

もちろん、これはそれよりも少し複雑です。これは簡単で単純化しすぎた説明です。

最終的な考え

これで、Web サイトの色に関する統計のまとめを終了します。

うまくいけば、これらの事実と数字から、Web サイトのデザイン戦略を知らせるのに役立つ洞察を引き出すことができました.

重要なポイントは、色が明らかに重要である一方で、Web サイトでの色の使用に正しい方法も間違った方法もないということです。 適切な色の選択は、ブランドの個性、ポジショニング、ターゲット市場によって異なります。

優れた Web デザインがどのように見えるかについてさらに詳しく知りたい場合は、最近の Web サイト デザイン統計のまとめを参照してください。

または、グラフィック デザインについてより一般的に学びたい場合は、これらの衝撃的なグラフィック デザインの統計をチェックしてください。

幸運を！