背景とテキストの関係(読みやすさ・使いやすさを考える)

勉強内容2008年5月2日

テキストの読みやすさを常に意識する

背景とテキストはコントラストを持たせて、テキストが背景に埋もれないようにしましょう。
特に背景に写真等を使う時はよく考えて使わないと、写真の主張が強すぎて全然テキストに目がいかない事がよくありがちなので、特に気をつけなければなりません。
背景とテキストの関係はテキストやサイト全体おける見やすさ・読みやすさにおいて非常に重要なものです。よくぎらぎらした背景を無造作に使っていたり、背景とテキストが同系色、または非常に鮮やかな色の組み合わせで読みにくいと感じたことはありませんか？なんとなくという理由でこのポイントに気を配っていないサイトが非常に多いのです。
かっこいいサイト、使いやすいサイトというのはユーザにとって使いやすい、見やすい、読みやすいサイトであるのが前提条件です。

背景のテキストの配色・コントラストについて

背景とテキストの関係で読みやすさを決めるのは明度と彩度です。それぞれの違いによってどのように読みやすさに影響するのか考えてみましょう。
まずは明度の影響を考えてみましょう。明度とは読みやすさを決める最も重要な要素で、色の明るさを表すものです。この明度の差をコントラストと言い、背景とテキストのコントラストは読みやすさに大きく関係します。
下の例を見てください。コントラストの低い色を並べてみました。

どうですか？読みにくいですよね。ディスプレイから目を離して見ればよくわかります。
背景と文字に十分なコントラストがないと背景の中に文字が埋もれたように見えてしまい、非常に読みにくいものになってしまします。
ただでさえ目にやさしくないコンピュータのディスプレイ。目を凝らして見ていたのでは目が疲れて大変です。次に彩度の影響を考えてみましょう。彩度は色の鮮やかさを表すものです。
彩度の高い色は鮮やかな色なので目立ち、彩度の低い色はくすんだような色なので目立ちません。
では下の例を見てください。上の例と同じように彩度の高い色を並べています。

目がちかちかしますよね？こんな配色ではページを開いたとたん、おさらばしたくなってしまいます。彩度の高い色は目立ちます。
言いかえればそれは目に刺激の強い色だということです。なので見ているだけで非常に目に負担をかけてしまいます。
あんまり見ていると頭が痛くなりますね。彩度の高い色は文字にも、もちろん背景にも使用すべきではないと僕は思います。

以上のように、明度と彩度の読みやすさとの関係は大変重要です。テキストや背景にはコントラストをつけ、彩度の高い色は使わないようにしましょう。
それだけでグンと読みやすくなります。

背景画像について

背景画像を使うときはよく考えて使わなければいけません。正直なところ、背景は無地なのが一番良いと思います。
基本的に背景画像を使用すると文字が読みにくくなるからです。その原因は2つあります。
1つめは画像が背景にあると場所によって色が違うので、どうしても文字の色と近い部分がでてしまい、重なると読みにくくなってしまうという点。
2つめは画像の形がいやでも目に入ってくるので必要以上に頭の中に情報が入ってきて、見ているとストレスを感じてしまうという点です。
参考までに、ダメな例を挙げておきましょう。

形のないテクスチャ等を使用することで、多少は防ぐことはできますが、どうしてもダサい、あかぬけないイメージになってしまいます。
全体として何か意味のある画像ならばかっこよく演出することはできるでしょうが、多くの場合そうではないのが現状です。
ただ、この背景画像は使い方によってはページデザインに有効な場合もあります。画像に背景色とのグラデーション処理をすることでボーダーラインのような使い方や、リピート指定をせず背景に指定することでページにアクセントをつける等の使い方です。背景画像は読みやすさを一番に考え、どのように使えばいいのかよく考えて使用しましょう。

この記事を読んでいる方にオススメの記事

「勉強内容」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。