見やすいホームページを作る

配色、レイアウトの工夫

派手なページを作ることが目標ではありません。見やすいホームページを作れば、人が集まります。そのためには見やすい配色、分かり易いページ構成が重要です。読み手の視点でホームページを作りましょう。

色の種類はたくさんありますね。これらはばらばらに存在しているわけではありません。色はたくさんありますが、なかでも「赤」「緑」「青」のことを光の 3 原色と呼び、他の色はこの三色を合成することによって表現されます。

ホームページでカラー表示するには、以下の 2 つのやり方があります。

#	FF	FF	FF
	赤色の強さ	緑色の強さ	青色の強さ

色には、知覚的特徴として、以下にあげる 3 属性があります。

色相	「赤い」「青い」などの色の質的性質を表す。光の波長にほぼ対応する。
彩度	色の鮮やかさを示す。光が純粋になるほど、彩度は大きくなる。 RGB 表記では、3 つの数値の値が離れるほど、彩度も大きくなる。
明度	光の強さに対応する。 RGB 表記では、数値が大きいほど、明度も大きい。

さらに、無彩色(例:白、黒、灰色。RGB で 3 つの数字が等しい)といって、明度のみを持ち、色相と彩度を持たない色もあります。

背景色と文字色によって、見やすさ(読みやすさ)が大きく変化します。一般には、「背景を暗い色にし、文字を明るい色にする」あるいは逆に「背景を明るい色にし、文字を暗い色にする」と読みやすくなります。下に代表的な例をあげておきます。

見やすい文字

みにくい文字

見やすい文字

みにくい文字

背景色について、真剣に考えたことはありますか？おそらく考えてなかった人が多いでしょう。実は背景色が目の疲れやすさに大きく影響します。背景色が鮮やか過ぎると目が疲れます。赤や青などの彩度が非常に高い色(鮮やかな色)を避けるようにしましょう。白も明るすぎるので避けるようにしましょう。

背景色には、あまり鮮やかでない色がお勧めです。例えば、クリーム色、薄い灰色などです。特に、文書がメインコンテンツになっているサイトでは、背景色は必ず鮮やかでない色にしましょう。

背景を画像にすることは、お勧めしません。たしかに背景を画像にすると派手なページができますが、その結果として文字が読みにくくなってしまいます。どうしても背景を画像にする場合は、そのまま使うと背景が目立ちすぎて文字が読みにくくなるので、画像編集ソフトなどでぼかし操作をしておきましょう。

背景はあくまで背景です。

ホームページのレイアウトで重要なのは、凝った配置をすることではありません。それぞれのページのレイアウトを統一することです。ページごとにレイアウトがまちまちだと、読み手に余計な負担がかかります。また、同じサイトのページなのか、別サイトなのか、わかりにくなります。そのような不親切なことはやめましょう。

統一的なレイアウトは、スタイルシートを利用すると容易に作れます。実際、このホームページはスタイルシートを利用しています。スタイルシートについては、スタイルシート利用をごらんください。