目に優しい配色を考える

様々なページを見ていると、時々ではありますが背景と文字の色がほぼ同色というページを見かけます。
例えば、黒の背景にダークグレーの文字という配色。
これは、本当に読むのがつらいです。(TOT)

また、黒い背景に明るいピンク系の文字の色だったりするページもあります。
これは、「読む」行為は可能なのですが非常に目に負担がかかります。

「サイトを作る=見てもらう、読んでもらう」ということですから十分に読み易く、また目に負担がかからないような配色を心掛けることが大事なのです。

haishoku001

例えば、白い背景に黒い文字。基本的にこの組み合わせが「文字を読みやすい」という点では一番良いと考えられます。
しかし実際は長時間真っ白な画面に黒い文字のページを見ていたとすると結構目が疲れたりするものです。

さんさんと太陽の光が降り注ぐ下で真っ白な紙を見ると、目を紙からそむけてしまうほどに結構眩しいものです。
それと同じように、白い画面は長時間見ていると目に疲労を感じさせてしまう色です。
ですから、背景の色は少しやわらかい色か白を使うにしても周りにやさしい色を置いてあげるといいかと思います。

背景の色が決まったら、文字の色を決めていきましょう。

冒頭で述べたように、黒い背景にとダークグレーの文字というように色が近すぎるととても読みづらくなります。
また、黒と明るいピンク系の色のようにきつい色同士となると目がチカチカして目に疲労を感じてしまいます。
背景にやさしい色を選んだら、濃い色を文字に選んであげると比較的見やすいページに仕上がります。

onnkann

また、色から受ける印象はサイトのイメージを決める要素でもあります。
まず、赤・黄・オレンジなどの暖色系は暖かさや強さ、エネルギーなどと言った印象を与え、逆に、青や緑などといった寒色系はクールで落ち着いた印象を与えます。このようにその色が持つ特色とサイトの内容とをあわせてサイトにあったイメージカラーを決めていきましょう。

最後に注意点ですが、実際に表示される色はモニターによってかなり異なるということを憶えておいてください。
表現できる色が限られているパソコンもありますし、液晶モニターだと暗く表示される色もあるのです。
例えば、薄いグレーの背景に濃いグレーの文字を配置したとします。
見る環境によっては背景と文字の色が(自分のパソコンで見るよりも)近い色になってしまっていて見づらいということも十分に考えられるわけです。

目に優しい色使いではっきりと色分けする!これが基本です。

※当サイトへのリンクを歓迎いたします。
(管理人へのご連絡は不要です)
PAGE TOP