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

配色、レイアウトの工夫

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

色の基本

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

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

  1. 色の名前で指定する。例:color="red"
  2. 赤成分、緑成分、青成分を順に 16 進数で定義する。 例:color="#0000FF"
# FF FF FF
赤色の強さ 緑色の強さ 青色の強さ

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

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

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

背景色と文字色の組み合わせ

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

見やすい文字 みにくい文字 見やすい文字 みにくい文字

Javascript を使って試してみることができます。(新しいページが開きます)

鮮やかでない背景色

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

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

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

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

スタイルシートを利用して、レイアウト統一

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

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

パソコン利用者のための猫背矯正ベルト

新着記事
人気記事ベスト3
全てのホームページ製作者に
アフィリエイトで稼ぐ方法
サーチエンジン最適化
携帯サイトの作り方
レンタルサーバの選び方
ホームページ作成ソフト
python入門
パソコン便利グッズ