見やすいデザイン

目次

統一されたデザイン

見やすいデザインのページをつくるキーワードは「統一感」です。次のような手順でページをつくれば、自然と統一感のあるデザインになります。

  1. デザインのことは一切考えずHTML文書をつくる
  2. 見出し(h1?h6要素)、強調(em要素・strong要素)などをCSSでデザインする

ポイントは、HTML文書をつくるときにデザインのことはきっぱり忘れることです。HTMLの中に、見た目を変えるようなfont要素やcenter要素などは入れないほうがいいです。HTMLを書きながら「ここの文字色は…」「この表の位置を…」と考え出すと、ちぐはぐなデザインになりがちです。

具体的なやり方はHTMLとCSSの解説を見てください。

背景色と文字色のコントラスト

背景白・文字色黒が読みやすい

背景色と文字色は、はっきりコントラストをつけましょう。文字色が薄いとおしゃれな気がしますが、読むのに目が疲れます。

ある調査では、「背景が白・文字色が黒の組み合わせが一番読みやすい」という結果が出ました。それ以外の組み合わせでは読むスピードが低下するそうです。ただ、白い背景はややまぶしいので、明度を少し落とすのもいいと思います。

読みづらい配色

逆に、目が疲れる背景色と文字色の組み合わせもあります。まず、文字色が薄い場合。

文字色が薄すぎると読みづらくなります。文字は黒かそれに近い色がベストです。

明るい色でも赤・黄・青などの原色を使いすぎると目がちかちかします。

このような配色は目を疲れさせます。目立ちすぎです。

シンプルな背景

背景画像は使わないほうが読みやすいページになります。背景画像を使うのなら、できるだけシンプルなものを選びましょう。

これでも背景なしにくらべると、やや読みにくく感じます。

これが限界か?かなり読みにくいですね。

フォントサイズは変えない

body要素やp要素などのフォントサイズは変えないようにしましょう。なぜなら、訪問者がブラウザの設定で自分が一番見やすいサイズに設定していれば、何もする必要がないからです。

小さい文字が好きな人はブラウザの文字サイズを「小」にしているでしょう。それ以上小さくされると、さすがに小さい文字が好きな人でも読めなくなってしまいます

まとめ

Information