短い文ならともかく、苦労して書いたそれなりの量の文章が、「読みにくい」からと読んでもらえないとしたら悲しいことです。そこで少しでも読みやすくするためにはどうしたらいいのかを考えます。

読みやすさの条件

「読みやすさ」の条件には次のようなものが挙げられます。

1. 文字の大きさ
2. 文字の色と背景の色
3. 行間
4. 文字間
5. 行長
6. 文章そのもの

では順に見ていきましょう。

文字の大きさ

言うまでもなく、小さすぎる文字は読みにくいものです。また、大きすぎても一度に目に入る情報量が減るせいか読みづらく感じる場合があります。

では、本文の文字の大きさはどのくらいがいいのでしょうか。

手っ取り早く答えを書くと「大きさを指定しない」が正解です。

「読みやすい文字の大きさ」は人によって違います。ですから本文の文字の大きさの調整は見る人に任せましょう。そのためにブラウザは文字の大きさの調整ができるようになっているのです。

文字の色と背景の色

まずは読みにくい例を見てみましょう。

• こんな夢を見た。

  腕組をして枕元に坐っていると、仰向に寝た女が、静かな声でもう死にますと云う。女は長い髪を枕に敷いて、輪郭の柔らかな瓜実顔をその中に横たえている。真白な頬の底に温かい血の色がほどよく差して、唇の色は無論赤い。とうてい死にそうには見えない。しかし女は静かな声で、もう死にますと判然云った。自分も確にこれは死ぬなと思った。そこで、そうかね、もう死ぬのかね、と上から覗き込むようにして聞いて見た。死にますとも、と云いながら、女はぱっちりと眼を開けた。大きな潤のある眼で、長い睫に包まれた中は、ただ一面に真黒であった。その真黒な眸の奥に、自分の姿が鮮に浮かんでいる。

• こんな夢を見た。

  腕組をして枕元に坐っていると、仰向に寝た女が、静かな声でもう死にますと云う。女は長い髪を枕に敷いて、輪郭の柔らかな瓜実顔をその中に横たえている。真白な頬の底に温かい血の色がほどよく差して、唇の色は無論赤い。とうてい死にそうには見えない。しかし女は静かな声で、もう死にますと判然云った。自分も確にこれは死ぬなと思った。そこで、そうかね、もう死ぬのかね、と上から覗き込むようにして聞いて見た。死にますとも、と云いながら、女はぱっちりと眼を開けた。大きな潤のある眼で、長い睫に包まれた中は、ただ一面に真黒であった。その真黒な眸の奥に、自分の姿が鮮に浮かんでいる。

• こんな夢を見た。

  腕組をして枕元に坐っていると、仰向に寝た女が、静かな声でもう死にますと云う。女は長い髪を枕に敷いて、輪郭の柔らかな瓜実顔をその中に横たえている。真白な頬の底に温かい血の色がほどよく差して、唇の色は無論赤い。とうてい死にそうには見えない。しかし女は静かな声で、もう死にますと判然云った。自分も確にこれは死ぬなと思った。そこで、そうかね、もう死ぬのかね、と上から覗き込むようにして聞いて見た。死にますとも、と云いながら、女はぱっちりと眼を開けた。大きな潤のある眼で、長い睫に包まれた中は、ただ一面に真黒であった。その真黒な眸の奥に、自分の姿が鮮に浮かんでいる。

最初のは、にぎやかな背景で読みづらい例です。背景は無しにするか、入れる場合はコントラストをかなり落とした画像にするべきです。

2番目は文字の色と背景の色を近い色にそろえてます。上品な雰囲気を出せますが、色の違いが少ないと読みづらくなります。

3番目は、2番目とは逆に文字の色と背景の色を全く違う色にした例です。色の組み合わせを考えていないため、これまた読みやすいとは言えません。

読みやすさに必要なのは「色の違い」というより「明るさの違い(明度差)」です。背景が明るい色なら文字は暗い色、背景が暗い色なら文字は明るい色にする必要があります。

行間

読みやすさを求める上で欠かせないのが行と行の間隔、「行間」です。

印刷物では、文字の幅の0.5〜1.0倍ほど行間が必要で、文字が小さくなるほど行間を広くとる必要があると言われています。

行間が全くない例。メモ帳(Windows)でフォントはＭＳ Pゴシック。

適度に行間がある印刷物のイメージ。使用ソフトはLaTeXでフォントはリュウミンライト−ＫＬ。300dpiの出力を上の例とほぼ同じ文字の大きさになるよう縮小。

行間が全くないとかなり読みづらいことがわかります。では行間を空けるにはどうすればいいかというと、CSSで指定してやります。ただし、指定できるのは「行間」ではなく「行の高さ(line-height)」になります。

例えば、段落(p要素)全体に行間を指定するには次のように指定します。

p { line-height : 1.5 ; }

この例では行の高さに文字の高さの1.5倍を指定しています。

文字間

むやみに文字間(文字と文字との間)をあけると読みづらくなりますが、わざわざそんなことをしてあるページは見かけません。CSSで調整できますが無指定のままでOKです。

和文の本文におけるプロポーショナル/等幅問題についてはここでは扱いません。

行長

行の長さがあまりにも長すぎると読みづらくなります。そのため、適当なところでbr要素を入れて改行するよう勧めている人もいるようです。でも、これはまずい方法です。想定しているよりも狭いウインドウサイズで見た場合、とても不細工な表示になってしまいます。

腕組をして枕元に坐っていると、仰向に
寝た女が、静かな声でもう死にますと云
う。女は長い髪を枕に敷いて、輪郭の柔
らかな瓜実顔をその中に横たえている。

表示の幅(ウインドウサイズ)が十分なとき。

腕組をして枕元に坐っていると、仰向に
寝た女が、静かな声でもう死にますと云
う。女は長い髪を枕に敷いて、輪郭の柔
らかな瓜実顔をその中に横たえている。

表示の幅(ウインドウサイズ)が十分でないとき。不自然に切れている。

br要素は強制改行です。むやみに使うものではありません。ではどうすれば1行の長さを押さえられるかと言うと、やはりCSSで指定します。width という幅を設定するプロパティを使えば指定できます。ただし、widthの指定よりもウインドウサイズが小さい場合は横スクロールしないと読めなくなってしまいます(tableレイアウトで横幅を指定した場合も同じです)ので、max-width プロパティを使った方がいいでしょう。これは「最大幅」を指定するものです。これだと指定よりも狭いウインドウサイズではウインドウ幅で文字が折り返され、広い場合は指定幅で文字が折り返されます。

Mozilla系(FirefoxやNetscape7)、Opera、Safariなどの新しめのブラウザでは問題ありませんが、古いブラウザでは IE(Windows版、Mac版両方)のように max-width に対応してないものもある、という点が頭の痛いところです。

文章そのもの

最後は中身の問題です。まわりくどく長ったらしい、支離滅裂、何を言いたいのかわからない、というような文章は、いくらきれいにレイアウトしてあっても読みにくいものです。

ではどうしたらいい文章が書けるかは、ここでの説明の範囲を超えます。何度も読み直すなどの努力をしましょうとしか言えません。

まとめ

読みやすいページづくりにはこれ以外にも手段があると思いますが、読みにくくなる原因を1つずつ取り除いていけばいいと思います。

おまけとして、上記の点に注意したスタイルシートとそれを適用させたサンプルを載せておきます。

スタイルシート

見出しの指定などは省略してます。

適用例

IEなどでは上で書いたように最大幅の指定が利きません。