2011年1月14日金曜日

文字と背景をまっ黒とまっ白にしない理由

スポンサーリンク


文字と背景をまっ黒とまっ白にしない理由について。

紙媒体から考えると白色の背景に黒色の文字が可読性が高いと思えます。
しかし、ディスプレイで見る場合はそうとも限りません。


極度の明度差


そもそも紙は白く光っているわけではなく、光が反射して白く見えます。
対してディスプレイは白い光を出しています。

この時点で、同じ白い背景でも見え方が全く違ってきます。
紙に反射する光に比べ、ディスプレイの白い光は強すぎて目に刺さるので同じようには見えません。

紙と同様の感覚で見やすかろうと文字に真っ黒な黒色を使ってしまうと、白の明るさと相まって刺激の強い画面になります。

このように、背景が白で文字色が黒のサイトを見た時に目が痛いと感じている方もいるのではないでしょうか?

読みやすくする


読みやすくするには、黒と白の明度差を下げる方法が効果的です。

背景を綺麗な白で統一したい場合は、文字色をグレーにします。
文字を黒くはっきりさせたいならば、白をくすませたり違う色に変えます。

明度差を低くしすぎれば見にくくなるだけですが、多少は下げた方が読みやすくなります。

実例


下記は白(#fff)背景に黒(#000)文字です。


白色背景に黒色の文字で書いています。



続いて白(#fff)背景にグレー(#444)の文字。


白色背景にグレーの文字で書いています。



白背景が目に痛い場合が多いので、背景自体をくすませてみます。
少しくすんだ白(#fafafa)の背景に黒(#000)の文字です。


くすんだ白色の背景に黒色の文字で書いています。



さらに、黒色の文字をグレー(#444)に変えるとより痛さが無くなります。


くすんだ白色の背景にグレーの文字で書いています。



比較対象として最初に挙げた白背景に黒色の文字を再度。


白色背景に黒色の文字で書いています。


小さいながらも大きな効果


上記の例を見て「微妙だな」と思われた方もいるはず。
しかし、背景の面積や文章量が増えれば増えるほど、小さな工夫が大きな効果を生みます。

部分で考えれば確かに微妙な差なのですが、WEBサイトの1ページにテキストが1行だけという状態は通常あり得ません。
全体的な要素の分量で考えなければ、どぎついページになってします。

細部と全体を繰り返してみる

細部ばかりを見ていると、全体の質がどんどん低下していきます。
これは、この記事の問題だけではなく全てに対して言える事です。

WEBサイトの場合であれば重要なのはWEBサイト全体であり、全ての要素は全体を構成するパーツとして重要なのです。
せっせと細部で調整しても、全体に当てはめた時に違和感があっては使い物になりません。

結び


白背景のWEBサイトは数多くあります。
それらの中でデザインが良いと感じたサイトは、背景色が白(#fff)であっても文字色が(#000)ではない事がよくありました。
恐らく、この記事が意図している所と同じ理由からだと思います。

可読性を単純に考えるなら文字との明度差は高い方が良いのですが、高すぎると逆に読みにくくなってしまいます。
背景色については以前も書きましたが、色で読みやすくする事もできますので留意しておけば必ず役に立つはずです。

おまけ

試しに、このブログの背景と文字色を白黒に変えるボタンを作りました。
....が、ページ全体の色を変えるが出来ていないためメインコンテンツの中だけの変化しかありません。
また時間が出来た時に試す予定です。

中途半端ではありますが、違いが少しでも見えれば幸いです。




この記事の続きを書きました。
主に文字色についてですが、他の部分にも適応できる内容です。

スポンサーリンク

0 件のコメント :

コメントを投稿