• サイトマップ

背景と文字の関係を考える

背景と文字はコントラストを持たせて、 字が背景に埋もれないように注意しましょう。 また、背景画像を扱う場合は文字との関係を見直しあまり目立たない、 主張の強くないものを使うとよいと思います。

背景と文字の関係は文章やサイト自体の 見やすさや読みやすさを考える上で非常に重要なものです。 よくぎらぎらした背景を無造作に使っていたり、背景と文字が同系色、 または非常に鮮やかな色の組み合わせで読みにくいなぁと感じたことはありませんか？ なんとなくという理由でこのポイントに気を配っていないサイトが非常に多いのです。 かっこいいサイト、使いやすいサイトというのはまずユーザのことを考えたサイトです。 ユーザにとって使いやすい、見やすい、読みやすいサイト であるための最低限の条件、それがこの背景と文字の関係です。

背景の文字の配色について

背景と文字の関係で読みやすさを決めるのは明度と彩度です。 それぞれの違いによってどのように読みやすさに影響するのか考えてみましょう。

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

あいうえお

どうですか？読みにくいですよね。ディスプレイから目を離して見ればよくわかります。 背景と文字に十分なコントラストがないと背景の中に文字が埋もれたように見えてしまい、 非常に読みにくいものになってしまします。ただでさえ目にやさしくないコンピュータのディスプレイ。 目を凝らして見ていたのでは目が疲れて大変です。

次に彩度の影響を考えてみましょう。彩度は色の鮮やかさを表すものです。 彩度の高い色は鮮やかな色なので目立ち、彩度の低い色はくすんだような色なので目立ちません。 では下の例を見てください。上の例と同じように彩度の高い色を並べています。

あいうえお

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

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

背景画像について

背景画像の扱いは非常に難しいものです。 はっきりいって初心者の方は手を出さない方がよいと思います！ 基本的に背景画像を使用すると文字が読みにくくなるからです。

その原因は２つあります。１つめは画像が背景にあると場所によって色が違うので、 どうしても文字の色と近い部分がでてしまい、かさなると読みにくくなってしまうという点。 ２つめは画像の形がいやでも目に入ってくるので必要以上に頭の中に情報が入ってきて、 見ているとストレスを感じてしまうという点です。

形のないテクスチャのようなものを使用することで、 多少は上の原因を防ぐことはできますが、 どうしてもダサい、あかぬけないイメージになってしまいます。 全体として何か意味のある画像ならばかっこよく演出することはできるでしょうが、 多くの場合そうではないのが現状です。

ただ、この背景画像は使い方によってはページデザインに有効な場合もあります。 画像自体に背景色とのグラデーション処理をすることでボーダーラインのような使い方をしたり、 リピート指定をせず写真などの背景画像を使うことでページにアクセントをつける等の使い方です。 背景画像は読みやすさを一番に考え、どのように使えばいいのかよーく考えてみましょう。