UIデザインで白背景にするか黒背景にするかを決める時に参考になる科学的事実

(2020/11/21 更新) UIデザイン |

white-black

こんにちは、@h0saです。

以前知人のデザイナーに教えてもらった記事が興味深かったので、ここでシェアさせてもらいます。元記事はこちら:

http://gizmodo.com/the-surprising-reason-computer-screens-arent-green-on-b-1643025374?utm_campaign=socialflow_gizmodo_facebook&utm_source=gizmodo_facebook&utm_medium=socialflow

乱視の人は、「黒背景に白文字」よりも「白背景に黒文字」の方が見やすい!

上記記事では、ブリティッシュコロンビア大学 Sensory Perception & Interaction Research Group の研究成果が紹介されているのですが、その内容が興味深いものでした。以下、引用します。

People with astigmatism (aproximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.

意訳すると以下のようになります。

乱視の人(人口の約50%)は、白背景に黒いテキストよりも、黒背景に白いテキストの方が見えづらいことがわかった。明るい画面(白背景)を見ると虹彩が絞られてレンズの歪みがわずかに低減する。一方、暗い画面(黒背景)では虹彩が開いてレンズの歪みが大きくなり、焦点のブレを生み出す。」

つまり、乱視の人は黒背景白文字よりも白背景黒文字のほうが良く見える、というのです。

私自身も乱視(眼鏡で矯正しているものの、完全には矯正し切れず)ですが、経験的になんとなく白背景の方が文字を読む上では読みやすいと思っていました。もともと人は紙に慣れているから、とか黒は縮小色だから文字がキリッと見える、とかの憶測を耳にしたことがありましたが、上記研究成果は科学的根拠に基づいているため、納得感があります。

必ずしも黒背景白文字が悪いというわけではない

だからと言って、必ずしも黒背景白文字が悪いというわけではありません。

組み込みUIであれば外装との一体感も考慮する必要があり、黒ベースの背景が好ましい場合もあります。また、自社のブランドイメージと合わせるため、黒背景を用いるという選択肢もあるでしょう。もしくは、暗い場所での使用が想定される機器やアプリであれば、眩しくない黒背景を選択するのは理にかなっています。

あくまで今回ご紹介した事実は、デザイン決定の際の1つのヒントに過ぎません。他の優先事項と並べた上で、正しく意思決定をする必要があります。

おわりに

以上、「乱視の人は黒背景白文字よりも白背景黒文字のほうが良く見える」という科学的事実をご紹介しました。より良いデザインをするために、このような科学的事実は引き出しに入れておきたいものです。

参考書籍

UIデザインに役立つ心理学の本、オススメです。引き出しが増えます。

Hiroki Hosaka

AIベンチャーのUXデザイナー/デザインマネージャー/CXO。メーカー→IoTベンチャー→外資系デザインコンサルを経て現職。このブログではデザインやUXに関するクリエイティブネタを発信しています。
詳細プロフィール