W-0003 目に優しい配色とは？

白地にスタイリッシュな画像と文字列でデザインしたページを見かけますが、パソコンの画面というのは明るい面積が大きいほど目に負担がかかるもので、長時間見続けていると頭が痛くなってきたりします（真っ白い画面を見続けるのは、蛍光灯を直接見ているのと同じ事です――パソコンの画面は蛍光灯ほど明るくはありませんが、見ている時間は遥かに長いです）。僕の場合、 goo や Yahoo! ・ファイル管理でエクスプローラを使っているときでさえ目がチカチカします。

しかし、単純に明暗を反転すればいいかというと、そうでもありません。黒地に白い文字だと、逆にコントラストが強すぎて、結局目が疲れてしまうこともあります。学校などの黒板が深緑色をしているのは、このことを考慮に入れているためです。

見えにくい・目が疲れる配色？

そういうわけで、 Piro の独断と偏見と実験と経験による「見えねぇのでイヤ」「見えやすいがイヤ」な配色をいくつかリストアップしてみました。

見えねぇのでイヤな配色！

• ……見えにくいっつーの！
• つーか見えねーよオイッ！
• マジ見えねーッ！
• わかんねーよッ！
• 格好いいつもりなのかもしんないけどさぁ……

見えやすいがイヤな配色！

• 目が疲れるっつーの！
• チカチカするッ！
• 見てらんねーッ！
• いや、目立つんだけどねぇ……
• 目が……
• 疲れる……
• ……も、駄目……
• …………

背景に凝ってるヤツほどウザいんだ！

• わかりにくいよ
• ウザいなァ
• 暑苦しいし……
• モノトーンでも辛いなぁ……

基本的に、背景に原色を使うと目が疲れます。また、コントラストを抑えたキャラ物画像を背景に使用しているサイトや、文字を配置した背景を敷き詰めていたりというのを見かけますが、それもハッキリ言って読みにくいです。

キャラ物の絵は縦横に複雑に線が走っているせいで、それが文字とかぶって読みにくくなってしまいます。これは色つき文字の背景も同様です。こういった画像は、例えモノトーンにしても、かなり読みにくい物となってしまいます（サンプル参照）。背景画像を使う場合はこのページのようにコントラストを抑えた、且つ、シンプルなパターンの画像を用いるのが無難でしょう。

背景は画像だけでなく、色も同時に指定しよう

明るい背景画像に黒い文字を重ねる場合はあまり問題になりませんが、特に暗い背景を使うときには注意が必要です。

このページのように比較的暗い色の背景を使う場合、文字は白などの明るい文字を使用することになります。しかし、それだけだと背景画像を読み込んでいる間、文字が全く見えなくなってしまいます。

また、画像の読み込みをオフにしている人にも、文字がさっぱり読めません。これは、 Web ブラウザの背景色が標準では白になっているために起こる現象です。

このような場合は、このページのようにページの背景色に、使っている背景画像と似た色を設定しておきましょう。

（背景色を指定した場合としていない場合の比較サンプル）

ウチの場合

実際にどんな色を使用するかは個人の感覚に任されるわけですが、ここで僕の場合を例に挙げてみます。

どんな色がいいのかということで、背景色を変更できるアプリで青系や赤系などコントラストを抑えていろいろ試してみたところ、黒板と同じ深緑色が比較的ラクに思えるという結論に達しました。そこで、エディタの背景や Excel のワークシートなど、設定で変更できるものは全て背景色を深緑色に変更してしまいました。（深緑色は、フルカラー環境で R:0, G:80, B:80 です。）

こうしておくことで、長時間の作業でもストレス無く行うことが出来るようになりました。ついでに壁紙も、このように黒の面積が多い物を使用すれば、目への負担は大幅に軽減されるはずです。

余談ですが、この「背景色の変更」は、慣れてしまうと恐ろしいもので、この機能を持たないアプリは使えなくなってしまうほどです（笑）。僕がこの設定のできない某フリーウェアより設定のできる某シェアウェアを取っているのも、これが一番大きな理由だったりします……。

尚、このことは実際にパソコン誌「 PC Live 」（学習研究社）1994年 9 月号で、「目に優しいパソコンデスク」 ERGOMiC DESK で名を知られる（株）日本クリエイタの（当時）代表取締役・松本貞夫氏も「そうした方がいい」と述べておられました。これからページを作られる方にも、強ーくお勧めします。

人によっては逆に「見にくい」こともある

コントラストを抑えた配色は目が疲れませんが、度が過ぎると、逆に読みにくくなってしまうこともあります。特に視覚障害のある人（色盲など）の場合、配色によっては全然読めないなんて事にもなりかねません。

そうでなくても、配色の好みというものは人それぞれです。このページの「紫地に白文字」という配色も、自分にとっては「目が疲れないベストな配色」ですが、人によっては「見づらい配色」でしょう。

こういう人のために、ブラウザによっては、設定次第で配色を自分の好みのものに固定することができます。例えば NetscapeNavigator 4.x なら、「編集 (E) 」→「設定 (E) 」→「表示」→「配色」で、配色を固定する設定が行えます。また、 NetscapeNavigator5.0 などでは、ユーザースタイルシートという機能を使うことで同様のことができるようになるそうです。（しかし、こうすると全てのページで同じ配色が適用されるため、見た目に寂しいものがあります）

「全ての人に対して見やすく、且つ目が疲れない」配色というのは、なかなか難しいものがあります。こういう場合、 Alternate スタイルシートや Preferred スタイルシートを切り替えられるブラウザが相手なら、あらかじめページ作成者が複数のスタイルを用意しておくこともできます。 Gecko 搭載ブラウザなどではここら辺の機能の実装が進むという話ですので、今からそれに対応しておくのもひとつの「配慮」でしょう。

イメージ的な意味

「見やすさ」とは別の話題になりますが、暗い背景のページは暗い印象を持たれ、人が集まりにくいという傾向があるようです。 Vector や goo といった企業サイトが明るい色調なのは、より多くの人の目を引き、広告収入を得るためという理由が多分にあると考えられるでしょう。これも、一種のイメージ戦略と言えるのではないでしょうか……。

Back