デザインで使ってはいけない色「黒#000」のおはなし
使ってはいけない色の常識といわれているけれど、意外と使っちゃってる人も多い「#000(Black)」。
ようはこの色です。純黒。
デザインではとにかく避けたほうがよい色です。
最近「なんで？」と聞かれたので、答えた内容をここにまとめておきます。
目が疲れる
理由を一言で表すとこれです。純黒は目にキツイのです。
実際に比べてみるのが一番早いでしょう。
ふたつのテキストを用意しました。読んでみてください。
ぼくが６つのとき、よんだ本にすばらしい絵があった。『ぜんぶほんとのはなし』という名まえの、しぜんのままの森について書かれた本で、そこに、ボアという大きなヘビがケモノをまるのみしようとするところがえがかれていたんだ。だいたいこういう絵だった。「ボアというヘビは、えものをかまずにまるのみします。そのあとはじっとおやすみして、６か月かけて、おなかのなかでとかします。」と本には書かれていた。
そこでぼくは、ジャングルではこんなこともおこるんじゃないか、とわくわくして、いろいろかんがえてみた。それから色えんぴつで、じぶんなりの絵をはじめてかいてやった。
そこでぼくは、ジャングルではこんなこともおこるんじゃないか、とわくわくして、いろいろかんがえてみた。それから色えんぴつで、じぶんなりの絵をはじめてかいてやった。
もうひとつはこちら。
ぼくが６つのとき、よんだ本にすばらしい絵があった。『ぜんぶほんとのはなし』という名まえの、しぜんのままの森について書かれた本で、そこに、ボアという大きなヘビがケモノをまるのみしようとするところがえがかれていたんだ。だいたいこういう絵だった。「ボアというヘビは、えものをかまずにまるのみします。そのあとはじっとおやすみして、６か月かけて、おなかのなかでとかします。」と本には書かれていた。
そこでぼくは、ジャングルではこんなこともおこるんじゃないか、とわくわくして、いろいろかんがえてみた。それから色えんぴつで、じぶんなりの絵をはじめてかいてやった。
そこでぼくは、ジャングルではこんなこともおこるんじゃないか、とわくわくして、いろいろかんがえてみた。それから色えんぴつで、じぶんなりの絵をはじめてかいてやった。
背景色がそれぞれ、上は#000、下は#333になっています。
上は長文を読んでいるうちに、目がチカチカしてきませんでしたか？
人間の目は、光とその屈折量で色を判断します。
より明るいほうに適応しようと調整するので、その対角である#000はどうしても目に負担がかかります。
チラシでもパンフレットでもwebサイトでも、ユーザーに読んでもらう/見てもらうがなければ意味がありません。
読んでて「なんとなく疲れる……」なんて状態では、目を離されてしまいます。
黒は意外と“黒くない”
そもそも自然界に「黒いもの」はそうそうありません。
この写真はスペインにあるお城の夕焼け風景ですが、影、黒くありませんね。
カラーコードだと#68475F～#2E1D30あたりです。
別の写真も見てみましょう。
こちらの影はだいたい#004378から#01152Aあたりの色です。
日常生活のなかでも、“黒い”と思っているものをよーく見てみると、意外と違う色が入ってると思います。
人工物だと黒いものありますが、それも理論上の黒であって、目で見るときには光源により若干の色味がついていることが多いです。
身の回りに「黒」がなかなか無いが故に、純粋な黒は違和感を誘発します。
ちなみに、存在する物質で本当に純黒なのはペンタブラックくらいのものです。
イギリス国立物理学研究所(そしてサリー・ナノシステムズ社)が長年かけてわざわざ開発した代物で、これはホントに黒。真っ黒。
Did you know the world’s darkest material, Vantablack®, was developed by a VCT-backed company? Jo Oliver of Octopus Titan VCT tells the story to What Investment: https://t.co/NJFB39aeIY. See Wealth Club site for current VCT offers (capital at risk) pic.twitter.com/qMdCeGaCno
— Wealth Club (@WealthClubUK) 2018年3月28日
こちらペンタブラックの写真。うーん、違和感……。
異質なんです、「黒」ってやつは。
黒は意外と使われてない
例えば、グーグルクロームのブラウザを開いてみましょう。
適当に言葉を検索して……
黒い文字で検索結果が書かれている、と思うかもしれませんが、
これをカラーコードで解析すると#6A6A6A。意外と薄い！
#6A6A6A
使われてない理由は、既に述べた通り。
あと、有名なロゴも見てみましょうか。
インスタのロゴです。パッと見、黒く見えると思います、が……#262626です。
#000ではない。
#6262626
有名なUI、デザインで使われてないっていうのは、つまりそういうことです。
ごく稀な例外もある
ただ、ごく稀に純黒を使ったほうが良い場合もあります。
弱視の方が見ることを前提としたデザインをする場合です。
目が不自由な方にも様々なパターンがあるので一概には言えないのですが、
「色は判断できないが、明暗なら区別できる」という方が一定数いらっしゃいます。
そういった方にとっては、例えばこのような色は右も左もほぼ同じ色に見えます。
こういった方向けに制作する場合、とにかくコントラストに違いがあるほうが読みやすくなるようです。
そうはいっても、純黒をつかうこと自体がユニバーサルデザインであるとはとても言えないので……ようは使いようですね。
だったらどの黒を使うべき？
ここまでで、#000の純黒は使うべきではない、ということはご理解いただけたかと思います。
そのうえで黒を使いたいときに何を使うか、なのですが……。
ケースバイケースで明確な基準はないですが、私はこのあたりを使うようにしています。
#1a1a1a どうしても「もっと……もっと濃くするんだ！」という時の黒。
#2b2b2b 黒を面で使いたいときの黒。
#333333 ☆私の中での標準黒。ここが基本の「黒」。文字色とかもだいたいこの辺にしてる。
#4d4d4d 全体が柔らかめの時に使う黒。
#666666 他の色と合わせやすい黒。
人それぞれだと思うので、あくまで私の例です。参考程度にどうぞ。
#000は使わず、適切な黒で優れたデザインを目指しましょう！
