見やすい・読みやすいサイトを作る

「読んでもらう」ためのデザインTips

　それでは、「読んでもらう」ためのデザインTipsを5つ紹介します。

　1つ目は、「分かりやすい見出しを置く」です。

　ページは本文だけで構成するのではなく、内容に応じた見出しを配置して文章を区切るようにしましょう。見出しは背景色やボーダーを使って目立つようにします。見出しをデザインする際は、「その見出しによって文章のブロックが認識しやすくなるか」「隣接するブロックの本文との、意識の境界線として機能するか」といったことに気を配りましょう。

　2つ目は、「小さなブロックに分割する」です。

　「見出し＋本文」という構成にした上で、そのブロックごとが小さくまとまっていると、流し読みでも内容が理解しやすくなり、可読性が高まります。1ブロックの適切な文章量は、もちろんページの内容によりますが、「1つのブロックが1画面を超えないようにする」というのが大まかな目安になるかと思います。

　3つ目は、「行間をしっかり取る」です。

　CSSのline-heightプロパティで適当な値を指定します。通常の文章であれば、1.3～1.8程度の値を設定すると良いでしょう（図2-1）。line- heightの値は「130%」のようなパーセント表記ではなく、「1.3」のように数値のみで記述します。パーセント表記にしてしまうと、部分的に文字の大きさを変えた場合にその部分が上下の行にめり込んでしまうことがあります（図2-2）。数値のみで指定することによって、この現象を防ぐことができます。

　4つ目は、「文字色と背景色のコントラストを意識する」です。

　文字色と背景色のコントラストがあまり低すぎると、文字が背景に溶け込んでしまい、視認性が悪くなります（図2-3）。最もコントラストが強いのは、白地（#ffffff）に黒い文字（#000000）、あるいは逆に黒バックに白い文字という配置です。特に前者はブラウザのデフォルトの配色としてなじみ深いものですが、閲覧環境によってはコントラストが強すぎる可能性も考慮したいところです。

　5つ目は、「文字の背景に模様は敷かない」です。

　これは非常に見にくいので、よほどの事情がない限りは避けるべきです（図2-4）。使用する場合でも、できるだけ可読性を低下させないような画像（シンプルなグラデーションやコントラストの低いパターンなど）を用いるべきです。印刷物、特に雑誌などでは背景パターンや写真の上に文字を配置するケースも多々ありますが、Webサイトの解像度では見づらくなるので避けた方が良いでしょう。

フォント関連のプロパティは要注意

　CSSのfont-sizeプロパティで文字サイズを「px」「pt」などの単位で指定した場合、IEのメニューによる文字サイズの変更が不可能になってしまいます。ユーザーは指定された文字の大きさを変更できなくなり、非常に不便さを感じます。これは絶対にやるべきではありません。

　IEに対してはパーセント指定や、「small」などのキーワードで指定するようにしましょう。なお、IE以外のモダンなブラウザではこのようなことはありません。また、フォントを指定する場合は、ユーザーの環境でどのように表示されるかを十分に考える必要があります。

　フォントや文字サイズの指定に関してはさまざまな考え方があり、議論が絶えません。筆者は「フォントは極力指定せず、ユーザーのブラウザ設定に任せる」をポリシーとしています。何らかの指定を行うことは、ユーザーの自由意志を制限する可能性があると考えているためです。

　ただ、UTF-8を使用する場合（最近はほとんどですが）は、IEでASCII文字が「ラテン語基本」で指定されたフォント、デフォルトでは「Times New Roman」「Courier New」で表示されてしまい、「MS P ゴシック」と雰囲気が大きく異なるという問題があります（図2-5）。

　この設定を自分の意志で変更しているユーザーはほとんどいないと思われます。そのため、「body { font-family:Helvetica, Arial, Verdana, sans-serif }」のように欧文書体だけを指定することも多いです。

　OSやブラウザによって、使えるフォントやデフォルトの設定はさまざまです。ユーザーによる設定変更も考慮すると、まさに千差万別。すべての環境を網羅して満足させるフォントの指定は非常に難しい問題です。