デザインには様々なものがありますが、黒地に白文字のものは少ないです。
Wordも検索結果の一覧も、一般に白地です。
だからこそ差別化のために黒背景を使用したいと考えるかもしれません。
一方、あまり用いられないのには何らかの原因があるはずです。
また、そのようなデザインをする上で、黒地に白文字のメリット・デメリットを押さえておくのは重要です。
そこで当記事では、黒地に白文字のデザインのメリット・デメリットを実験や実例を用いつつ紹介していきます。
ぜひ参考にしてみてください。
目次
黒地に白文字は可読性が低い？
検証するため2つの実験が行われた
黒地に白文字は可読性が低いとされています。
この言説は実際に正しいのでしょうか。
2つの実験
■1931年のG・ホームズの研究
・白地に黒文字の可読範囲は168cm
・黒地に白文字の可読範囲は140cm
■ダニエル・スターチの研究
・白地に黒文字だと1秒当たり6語読める
・黒地に白文字だと1秒当たり4語読める
これら2つの実験から、白地に黒文字の方が多くの文字を読めると言われています。
しかしこれら実験の結果には批判も可能です。
たとえばG・ホームズの研究は1931年と古すぎるともいえますし、ダニエル・スターチの研究は1917年とさらに古い実験です。
現代とは大きく違う環境下での実験であり、その信ぴょう性には疑問もあります。
また、たとえばバーのような暗い環境であれば白文字の方が読みやすいでしょう。
タクシーの座席に掲載されているタクシー広告は濃い色の背景で白文字の方が効果的ともされています。
このように一般に黒背景に白文字は読みにくいと言われていても、実際は当てはまらないケースもあります。
ここからは実際のケースも取り上げつつ、黒地に白文字が効果的かどうか検討していきます。
乱視の方にとって黒地に白文字は見えにくい？
ブリティッシュコロンビア大学の研究によると、乱視の方の可読性について以下のような結果が得られたとのことでした。
実際に乱視のかたでこの結論に納得される方は多いです。
これまでこの結論は「ヒトは紙に慣れているから」や「黒は縮小色で見えやすいから」といった理由が考えられていました。
しかし上記の研究は科学的であり信ぴょう性が高いです。
ここで「乱視の方のことを考えるべきか」と考えた方もいらっしゃるかもしれません。
実は乱視の方は人口の50％にも上ると言われています。
もちろん誰にとっても見やすいものを制作すべきですが、中でも乱視の方に配慮する必要性は高いと言えるでしょう。
乱視の方の可読性
・乱視の方にとっては黒地に白文字は見えづらい
・明るい画面＝白背景だと光彩が絞られレンズの歪みが低減する
・暗い画面＝黒背景だと光彩が開いてレンズの歪みが増加する
弱視の方にとっては黒地に白文字のほうが良い？
弱視の方が制作した手帳と言うものがあります。
黒色の紙に白で書かれた罫線の、「TONE REVERSAL DIARY」です。
ネット通販の他にも全国の東急ハンズで展開され、雑誌等のメディアでも紹介されています。
この手帳では、黒板のように黒地に白文字で書くように設計されています。
弱視の方にも使いやすいようにデザインされていますが、弱視ではない方にとっても使いやすいようなおしゃれなデザインになっています。
そのため、商品のキャッチにも「弱視用」とは書かれていません。
この事例から分かるのは、弱視の方にとっては黒地に白文字が読みやすいということです。
もちろん科学的に証明されたことではありませんが、弱視の方がこのような手帳を作っていることが何よりの根拠でしょう。
ブログが黒背景だとどんなデメリットがある？
以上の事例を踏まえると、黒背景のブログというものがあってもよさそうです。
しかし実際はあまり存在しないのは、いくつかのデメリットが考えられるためです。
目が疲れてしまう
黒背景に白文字は、一般に目が疲れてしまいます。
これは実際にそのようなサイトを見ると分かると思います。
黒背景のブログを運営していたが、目が疲れるために白背景に変えたという方もいらっしゃるようです。
これは単に慣れによるものかもしれません。
たとえば昔のデスクトップは黒背景だったためWordに最初に触れたときに目が疲れたが、現在では逆になったという方もいらっしゃいます。
色の調整が面倒
最初に作るブログは白背景という方が多いでしょう。
ここで黒背景に変更しようとすると、白背景の時に使っていた装飾が使用できなくなる可能性があります。
たとえば白背景の時に使用していた黒のアンダーラインは、黒背景では使用しづらいでしょう。
このように色の調整は面倒です。
黒背景のブログが少ないのには色の変更の面倒くささも関係しているかもしれません。
黒の持つイメージが良くない
黒には「暗い」「怪しい」といったイメージがつきものです。
もちろん「クール」「かっこいい」というイメージもあるでしょうが、前者のイメージによってビジネスでの運用は難しいという側面もあります。
また、白に比べて黒は持つイメージが強すぎるという性質もあります。
たとえば雑記ブログであれば掲載する情報の方向性が多様であり、黒だとあまり適していないでしょう。
ブログを読むときは、ブログの内容自体に着目するためにも、安心感が一定必要です。
誠実さを感じさせるために、黒ではなく白を用いるという方が多い印象です。
黒背景に白文字のときに目に優しいサイトにするためには？
黒背景が用いられない理由の一つに、「目が疲れる」というものを挙げました。
では、黒背景でも目に優しいサイトにする方法はないのでしょうか。
重要なのは、「コントラスト比を下げること」です。
つまり、黒を使用するのではなく少し明るい黒を使い、白を使用するのではなく少しくらい黒を使うということです。
以上の結論だけ聞いてもよく分からないという方も多いでしょう。
ここでは、実際のデザインではどのような色が用いられているか確認していきます。
Windowsのコマンドプロンプトの配色
Windowsのコマンドプロンプトの配色は真っ白（#FFFFFF）と真っ黒（#000000）ではありません。
理由は、コントラスト比を抑えて明度差を小さくすることです。
無機質に見えるコマンドプロンプトですが、目に優しい配色になっているのです。
Windowsのコマンドプロンプトの配色
・文字色：#CCCCCC
・背景色：#0C0C0C
Photoshopの配色
有名なグラフィックソフトPhotoshopのUIも、目に優しい配色です。
背景はグレーによっており、かなりコントラスト比が抑えられています。
ここには、カンバスを注視することをUIが邪魔してはいけないという、デザイナーの気配りが感じられますね。
なお、Photoshopでは明度対比を避けなければならないという点も理由に挙げられます。
Photoshopの配色
・文字色：#F0F0F0
・背景色#535353
まとめ
一般に黒地に白文字はあまり良くないようです。
当記事では様々な観点からこの理由を紹介してきたので、以下にまとめます。
一方、弱視の方が作られた手帳は黒地に白文字であり、一概に黒地に白文字が悪いとはいえなさそうです。
自分の作る制作物のターゲットを考慮したデザインが重要と言えるでしょう。
また、どのようなデザインをするにせよ、原色は使わないほうが無難です。
コントラスト比を抑えると目に優しくなる点は押さえておきましょう。
黒地に白文字のデメリット
・可読範囲が狭い
・読むスピードが低下する
・乱視の方にとって見えにくい
・読んでいて目が疲れる
・装飾の変更が面倒
・イメージが悪く使われにくい
