web-dev-qa-db-ja.com

ほとんどのウェブサイトが白い背景を使用するのはなぜですか?

UIがすっきりとシンプルであることを除いて、すべての主要なWebサイトが非常に少ない色の白い背景を使用する理由は他にありますか?

26
Sorter
This answer is more general, instead of just white I'll focus on light backgrounds.

ほとんどのウェブサイトが明るい背景を使用するという事実に影響を与える2つの主な要因があります。1つ目はdefaultsの能力であり、2つ目は読みやすさ

デフォルトと標準

  • ブラウザのHTMLおよびCSSスタイリングはデフォルトで白になり、ほとんどのユーザーがこの場合、開発者はデフォルトのオプションを使用する傾向があります。 google " デフォルトの威力 "だけで、私の意味を確認できます。

  • インターフェイスがどこから来ているのか、現実世界のどのオブジェクトが模倣しようとしているのかについての進化的なコンポーネントもあります。主な用途が情報の表示であることを考えると、デザイナーが暗い背景の上に明るいテキストである本をエミュレートしようと試みたと考えるのは本当に簡単です。 (これについての証拠はありません)。

読みやすさ

2番目の理由は、明るい背景の暗いテキストの方が読みやすくなるためです。これは非常に物議を醸しています。

テキストの可読性は、主にコントラストだけでなく、フォントサイズ、色、照明条件など、さまざまな要因に依存します。

コントラストと色の選択

明暗と明暗の両方でコントラストが正しく等価( コントラストに関するW3Cアクセシビリティガイドライン )であると仮定すると、読みやすさの目的で 最良のことは明るい背景上の暗いテキスト

段落テキストを表示するときは、それらを読みやすくするために、暗い背景に白いテキストを使用しないでください。ユーザーに長い間白いテキストに固執させると、ユーザーの目が疲れます。これは、白が人間の目の3種類すべての色に敏感な視覚受容体をほぼ等しい量で刺激するためです。

白はまた、すべての波長の光を反射します。段落テキストの単語と文字はコンパクトで近接しているため、白いテキストが光を反射すると、反射した光が散乱し、隣接する単語や文字にぶつかります。

Comparison

トピックに関するいくつかの研究を集めた別の情報源もここにあります:

ただし、ほとんどの研究では、明るい背景の暗い文字が暗い背景の明るい文字よりも優れていることが示されています(リフレッシュレートがかなり高い場合)。たとえば、バウアーとカヴォニウス(1980)は、明るい背景に暗い文字を使ってテキストを読んだ場合、参加者はテキストを26%正確に読むことがわかった。また、Scharffらによる調査。 (1996)最も読みやすいと思われる色の組み合わせは、白い背景の上の伝統的な黒いテキストであることを明らかにしました。

ソース: http://uwf.edu/ddawson/d3net/documents/web_usability/optimal%20web%20design.pdf

そして、これはこのトピックに関する別の研究です: 正のコントラストよりも負のコントラストの方が識別性能が良い

照明条件

ただし、一部の人々は反対のことを好みます(ただし、証拠は見つかりませんでした)。暗い部屋で本を読んでいるときに暗い背景の上に明るいテキストを表示します。実際、ほとんどの電子ブックリーダーには次の2つのオプションがあります。

Kindle menu

28

コンテンツを目立たせるには、中立的な背景を構築する必要があります。多くの色と色パターンを使用する場合、背景はコンテンツと構造よりも重要に見えます。

ほとんどの場合、白は中間色の背景色として表示され、他の色は、割合を小さくしても、デザインで最も意味のある色になります。清潔さ、純粋さ、柔らかさを表すには白を使用します。

参照: About.com> White

白は最も完全で純粋な色であり、完璧の色です。白の色の意味は、純粋、無垢、全体性、完成です。

色彩心理学では、白は新しい始まりの色であり、いわばスレートをきれいに拭きます。それは書かれるのを待っている空白のキャンバスです。白は感覚を刺激するものではありませんが、心が思いつくものを作る道を開きます。

参考: The Color White

5
Benny Skogberg

簡単に言えば、サイトを白よりも暗い色でデザインするのは、そのより難しく、コストがかかると思います。

まず、他の回答で指摘されているように コントラストは王様 読みやすさに関しては、黒地に白より黒地に黒の方が読みやすいですが、それほど簡単ではありません。私は自分のAndroid電話で黒い背景に白いテキストが付いた携帯電話で本を読んで、それを読むことに問題はありません。

  1. ウェブサイトは、コメントで指摘されているように、白い背景とブラウザのデフォルトの色から始まりました。
  2. また、本を読むのに慣れているウェブサイトの訪問者からより期待されています
  3. したがって、より多くのデザインとデザイナーが白い背景に焦点を当てています。
  4. したがって、それが標準になり、使用するテンプレートや、白い背景で見栄えが良いものについて共有するアイデアが増えます。
  5. 次に、自社のサイトについて長期的な戦略を立てる必要のある大手企業は、明るい背景または暗い背景のいずれかを決定し、その経路をたどる必要があります。大きなサイトの場合、白から暗い背景に切り替えるため、大きな(費用のかかる)変更、例えばAmazonのようなサイトに切り替え可能なサイトテンプレートがあったとしても、何百万もの製品画像は明るい背景に最適化されており、暗い背景を決定した会社の場合も同じです。
  6. したがって、大企業のボスは、カスタムデザインを増やしてサイトを変更および改善するためにデザイナーがサイトに変更や改善を加えるのに時間がかかる(そしてコストがかかる)ことを考えると、暗い背景を使用する追加コストを考慮する必要があります。見栄えをよくするために、画像をよく考えました

したがって、目立たせたいニッチなサイトの一部は暗い背景を使用しますが、すべての主要なサイトは白い背景を使用せざるを得ません。

4
icc97