読みやすさアンケート結果 （２）余白、行間

「読みやすさアンケート」集計結果の続き。余白と行間についてです。
■結果

余白 0% 1票 0.1% 5% 19票 1.9% 10% 248票 24.7% 15% 370票 36.8% 20% 275票 27.4% 25% 80票 8.0% 30% 12票 1.2%

行間 110% 3票 0.3% 120% 6票 0.6% 130% 14票 1.4% 140% 33票 3.3% 150% 208票 20.7% 160% 157票 15.6% 170% 208票 20.7% 180% 190票 18.9% 190% 70票 7.0% 200% 78票 7.8% 210% 15票 1.5% 220% 6票 0.6% 230% 5票 0.5% 240% 2票 0.2% 250% 7票 0.7% 260% 1票 0.1% 280% 1票 0.1% 320% 1票 0.1%

※余白は、全体の幅に対する左右それぞれの余白の幅です。余白15%の場合、左余白15％、本文70％、右余白15％というレイアウトになります。
■グラフ
■コメント（余白）

• 改行が少なめの文章だと余白が大きめにほしいです。字はもっと小さくても大丈夫。 （文字サイズ：15px、余白：25％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
• ブラウザは常時最大化して左側でお気に入りを開いていますが、このくらいなら「お気に入り」を開いても閉じても許容範囲かな、と思います。勉強になりました。 （文字サイズ：16px、余白：20％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
• あまり横に長すぎるとつらい。 （文字サイズ：13px、余白：20％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
• 字の大きさより余白と行間が重要な気がする。白と黒はサイコー （文字サイズ：14px、余白：15％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
• 横に長いと疲れるので、このくらいで折り返すのが好き。 （文字サイズ：14px、余白：20％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
• このくらいの幅が丁度いいです。あまり広いと読みづらい。 （文字サイズ：14px、余白：25％、行間：160％、文字色：■、背景色：■、解像度：1280*1024）
• 一目（目を左右に動かさずに読める幅）が読みやすいんじゃないかと思います。 （文字サイズ：16px、余白：30％、行間：130％、文字色：■、背景色：■、解像度：1280*1024）
• 全画面表示は滅多なことではしません。今もウィンドウの大きさは画面の３分の２弱です。 （文字サイズ：14px、余白：20％、行間：170％、文字色：■、背景色：■、解像度：1280*1024）
• 目の錯覚効果というのか……幅広で文字が大きいと圧迫感が合って息苦しくなり、逆に幅狭だと文字が小さい方が窮屈に感じて息苦しくなりました。不思議なものですね。でも、このアンケートをしたおかげで気付けたので、答えて自分のためにもなってしまいましたｖ （文字サイズ：16px、余白：15％、行間：140％、文字色：■、背景色：■、解像度：1400*1050）
• いつも800*600ぐらいの窓にしているので、これぐらいがちょうどいいです。ただ全画面表示にした場合、余白は20％の方が読みやすく思います。個人的には本文の幅は固定したいのですが…。うーん、難しい。 （文字サイズ：14px、余白：15％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
• 一文が長いと読みにくいので、適度な長さであってほしいです。 （文字サイズ：15px、余白：25％、行間：160％、文字色：■、背景色：■、解像度：1280*1024）
• フレームで表示するならこのくらいが見やすいかも。 （文字サイズ：13px、余白：10％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
• 横幅いっぱいは苦手です。複数窓開けるせいもあるかな？ （文字サイズ：14px、余白：20％、行間：180％、文字色：■、背景色：■、解像度：1280*1024）
• 左にお気に入りを出しています。 （文字サイズ：15px、余白：15％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
• サイズを14pxとするならこれくらいですが、13pxにするならもう10pxは余白を加え、行間を狭めます。また、背景は#FFFFFFと#EEEEEEの間で調節します。 （文字サイズ：14px、余白：15％、行間：230％、文字色：■、背景色：■、解像度：1024*768）
• 2回目です。1280*1024画面で800*600程度の窓を開けて読むならこれぐらいがいいかも、ということで前回とは違うチョイスになりました。 （文字サイズ：12px、余白：15％、行間：170％、文字色：■、背景色：■、解像度：1280*1024）
• 文字サイズは14pxでも申し分ないですが、文字の間隔が詰まって読みにくく感じたので15pxにしました。普段ブラウザの横幅を800pxにしているのもあって、横800pxに程よい余白付きで収まるぐらいが好みです。 （文字サイズ：15px、余白：20％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
• 余白はまだ考慮の余地アリだと思います。もうすこし、少なくても良いかもしれません。 （文字サイズ：16px、余白：15％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
• 私の場合は「お気に入り」を開いた状態で、一文がさっと目に入る長さ（500px〜600pxくらい？）+長時間の読書に耐えられる色がこれくらいです。短編はよほど奇抜なデザイン色でなければ気にならなりません。 （文字サイズ：16px、余白：20％、行間：170％、文字色：■、背景色：■、解像度：1280*768）
• コンピュータ画面なので、あまり横に長くなると読みにくくなります。あと、文字と背景はあまり明度が違いすぎないといいです。 （文字サイズ：14px、余白：15％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
• 800×600でもきちんと表示できるような画面表示が好みです。 （文字サイズ：16px、余白：15％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
• 余白はひろめにとってある方が目が疲れなくていいです。文字も黒よりグレイがいいですねぇ。 （文字サイズ：15px、余白：25％、行間：160％、文字色：■、背景色：■、解像度：1024*768）

■コメント（行間）

• 行間は広い方が読みやすいです。あと目を横に走らせる長さは500pxくらいがありがたい……。 （文字サイズ：12px、余白：20％、行間：200％、文字色：■、背景色：■、解像度：1280*960）
• 行間が空き過ぎていると逆に読みにくいと思う昨今です。 （文字サイズ：13px、余白：20％、行間：130％、文字色：■、背景色：■、解像度：1600*1200）
• 自分では、１６PXに行間150〜160％がベストです。これ以上だと小さく感じます。 （文字サイズ：16px、余白：10％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
• 小説書いてます。私は行間を１８０％取ってます。また自サイトのアンケートで本文の横幅は６００pxくらいが丁度良いと言われました。７００だと広すぎるようです。また白地に黒の文字も長く読むと疲れるとか。背景には薄い色をつけるほうが好まれるようです。お役に立てばいいのですが （文字サイズ：14px、余白：15％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
• ある程度行間が空いてた方がいい。 （文字サイズ：14px、余白：10％、行間：250％、文字色：■、背景色：■、解像度：1024*768）
• 私のページは行間１６０にしているのですが、これだと狭いと感じる人がいるかもなとわかりました……かといって広すぎてもアレだし。むずかしいですね。 （文字サイズ：16px、余白：25％、行間：180％、文字色：■、背景色：■、解像度：1280*1024）
• 行間が狭くて、文字が小さければ、目がチカチカします。（私の場合ですが。余白は、15〜20％くらいが見てて気持ちいいです。 （文字サイズ：16px、余白：15％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
• 好みの行間は、試してみたら、文字の大きさによって変わってくるようです。１５pxなら１５０％、１６pxなら１８０％がちょうど良かったです。 （文字サイズ：16px、余白：20％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
• 見易さとして、個人的には行間が適度に開いてれば行頭のスペースはいらない気がする。 （文字サイズ：13px、余白：20％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
• 文字のサイズによって、見やすい行間も変わりますね…。 （文字サイズ：15px、余白：15％、行間：190％、文字色：■、背景色：■、解像度：1024*768）
• 改行が少なめの文章だと余白が大きめにほしいです。字はもっと小さくても大丈夫。 （文字サイズ：15px、余白：25％、行間：160％、文字色：■、背景色：■）
• 段落をつけてほしい。 （文字サイズ：13px、余白：20％、行間：150％、文字色：■、背景色：■）
• 会話文の前後とかに余白を入れといてほしいかも。。全部ぎっしり詰まってたら息苦しい感じがする。 （文字サイズ：13px、余白：25％、行間：190％、文字色：■、背景色：■）
• 読み仮名の有る無しも気になるところです。 （文字サイズ：16px、余白：15％、行間：180％、文字色：■、背景色：■）
• ある程度の塊で空白行を入れてもらえると、もっと読みやすいと思う。 （文字サイズ：16px、余白：15％、行間：160％、文字色：■、背景色：■）

■感想
余白は10〜20％に集中しました。横幅が広いと読みづらいという意見が多く寄せられており、余白そのものが必要というより、余白を取ることで本文を読みやすい幅にしたレイアウトが求められています。そういった意味では、余白を固定するのではなく、本文の幅を固定し、余白はウィンドウ幅に応じて自動調節されるレイアウトでも良さそうです。
ただし、ウィンドウを小さくして閲覧している人も多いため、横スクロールバーが出ないように工夫する必要があります。横800ピクセルで左右に15％の余白が出るレイアウトの場合、本文の幅は560px。この数字がひとつの目安になるかもしれません。

行間は、ばらつきもかなり見られますが、150〜180％が人気のようです。文章が改行の多い文章か、改行の少ない文章かで、読みやすい行間も違ってくるようです。サンプルは比較的改行の少ない文章だったため、行間を広めに取るほうが良いという意見が寄せられました。
また、これは行間の問題とは別になりますが、段落ごとに１行あける、会話分の前後で１行あける、など、空行が適度にある文章のほうが読みやすいという意見も寄せられています。一般的な原稿用紙作法とは異なる手法ですので、書き手・読み手ともに好き嫌いもかなりあるでしょうが、Webならではの工夫と言えるでしょう。自分のサイトの訪問者層に合うようなら、採りいれてみてもいいかもしれません。