ブロックチェーン・AI・システム開発の株式会社INDETAIL

デザインで明度0の真黒(#000000)を使ってはいけない理由

2018.12.12
Su-Gi

※本記事は、INDETAIL Advent Calendar 2018の一環として投稿しています。

デザインで真黒を使ってはいけない理由

こんにちは、CI担当のSu-Giです。今回はデザイナーとして執筆します。

この記事では、「デザインで真黒を使ってはいけない理由」を実際にサンプルを見ながらご説明します。

デザイナーなら一度は聞いたことがあるテーマかもしれません。ちなみに筆者は大学で色の三属性について学んだときに聞きました。

ノンデザイナーでもわかるように基礎からご説明します。

<真黒の定義>
「真黒:ピュアブラック(Pure Black)、明度0、#000000」として扱います。

※本記事では、色の表記を16進トリプレット表記(HEX)で表現します。(#から始まる6桁の数字です。)

目次

真黒の世界を体験しよう
真黒を使ってはいけない理由
 明度差が大きい
 目への負担が大きい
真黒の代わりに濃い灰色を使おう
コントラストのバランスを取ろう

真黒の世界を体験しよう

「百聞は一見にしかず」ということわざにあるように、説明などを抜きにしてまずは真黒と真白のみで作った画像を見てみましょう。
(※注意:眼精疲労のある方は、長時間見ないようにお願いします。)

白文字黒背景

黒文字白背景

(自分で作っておいてなんですが、気分が悪くなりました。)
画像を数秒見るくらいならそれほど影響はないのですが、筆者のようにフォトショップで時間をかけて、この画像を見ていると目がチカチカして疲れてしまう結果になります。

普段Webサイトやアプリを見るとき、この明度のコントラストを見ることはまずないでしょう。(個人ブログや素人の作ったサイトは除きます。)世の中のデザイナーがコントラストを考慮してくれているからです。

真黒を使ってはいけない理由

真黒を使ってはいけない理由は大きくわけて2つあります。

  • 明度差が大きい
  • 目への負担が大きい

それぞれ詳しく見ていきましょう。

明度差が大きい

明度とは何か?という話をするには、「色の三属性」まで話が遡ります。色の三属性とは、「色相」「彩度」「明度」のことをまとめた呼び名です。

色相・彩度・明度の比較図

簡単に説明すると、

  • 色相は、「赤」「黄色」「緑」のような色の違い。
  • 彩度は、色の鮮やかさの度合い。
  • 明度は、色の明るさの度合い。

のことを示します。

明度について更に詳しく解説すると、
明度は0から10の数字で表現され、明度0が真黒、明度10が真白となっています。明度差は、2つの色の明度の数値差を表します。

明度0(真黒)と明度10(真白)は、明度差が一番大きいことになります。

一般的に、明度差が大きいほど可読性(読みやすさ)が上がります。しかし、真白の背景に真黒の文字ほど明度差が大きくなると別の問題が発生します。

目への負担が大きい

ここからが本題です。

真黒と真白の組み合わせは、ヒトの目に大きな負担をかけ、眼精疲労の原因につながることもあります。

目のイメージ

ヒトの目には、虹彩が瞳孔を調整して目に入る光量を調整するという機能があります。(部屋の明かりを消してすぐは何も見えなくても、時間が経つとゆっくり見えてくる現象といえば経験があるのではないでしょうか。)

明度のコントラストが大きいと、入ってくる光量に不釣合いが生じます。その結果、ヒトの目は、光量のバランスを取ろうと酷使され疲れてしまいます。

ヒトの目は優秀で、光量やピントを調整して自動で最適に見えるように調整してくれます。しかし、それぞれの機能をON / OFFにすることはできません。目を閉じて何も見ないことにするしかないのです。

真黒の代わりに濃い灰色を使おう

ここまでは真黒を使ってはいけないことを学びました。それでも、白黒のテキストを使いたい場面は出てくるものです。そのときは、真黒の代わりに濃い灰色を使いましょう。

白文字灰色背景

灰色文字白背景

濃い灰色と白のコントラストは、ヒトの目に十分な可読性を確保できます。さらに、必要以上に目を疲れさせることもありません。

コントラストのバランスを取ろう

コントラストが強いほど可読性が上がりますが、限度を超えるとヒトの目への負担が大きくなってしまいます。文字と背景の明度のバランスをとることで、ユーザーがコンテンツをストレスなく利用できます。どんなときもヒトの目に優しいデザインを心がけましょう。

余談ですが、真黒も真白も自然界には存在しない色です。これを詳しく説明しようとすると、明暗や光の反射と吸収の話になりますので、今回の記事はここまで。

Su-Gi

デザイナーから派生してマーケティング、UI / UX、ディレクションなどを行っています。悪く言えば器用貧乏、良く言えばオールラウンダー。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。