行間は広くとろう

あなたが書類を手渡されたとき、文字がびっしりと詰まった文面だったらどう思いますか? 私ならおそらく「わぁ、読むのが大変だ」と思います。

ホームページも同じことです。同じ情報量でも、文字がびっしり詰まったページと、スクロールが必要でも適度なすっきり感のあるページとでは、はじめに受ける「読みやすさ・読みにくさ」の印象が異なります。

1. いろはにほへとちりぬるを
   わかよたれそつねならむ
   うゐのおくやまけふこえて
   あさきゆめみしゑひもせす
2. いろはにほへとちりぬるを
   わかよたれそつねならむ
   うゐのおくやまけふこえて
   あさきゆめみしゑひもせす

2番目の文章は1番目の文章に比べて、上下の行の中心間の距離を1.5倍とりました。この結果、横方向への視線の移動が楽になり、スッキリして読みやすくなりました。

ただし、あまり行間を広くとりすぎると情報量自体が少ない印象を受けますので注意してください。また「詰まった文章」はエネルギッシュな印象も持っていますので、スッキリした文章が必ずよいとは限りません。

一般的に、読みやすくするためには、文字と文字の中心間の距離を文字の高さの1.4倍以上とるべきと言われています。できるだけそれ以上の行間をとるようにして、「スッキリ」と「エネルギッシュ」のバランスを考えてみてください。

CSSで定義する際には、行間隔の指定をline-heightプロパティで指定します。たとえば、段落(p要素)における上下の行の文字と文字の中心間の距離を1.5倍に指定するなら、p { line-height: 150% }と記述します。

余白をうまくとろう

文章の「詰まり具合」を左右するもう1つの要素として、余白の量があります。デザイン用語では「版面率」と呼び、次のような働きを持つことが広く知られています。

• 余白が少ない状態を「版面率が高い」と言います。版面率が高いと、画面に圧迫感を覚える一方、全体的にエネルギッシュな印象を与えることができます。
  
• 余白が多い状態を「版面率が低い」と言います。版面率が低いと、落ち着いた、格調高い印象を与えることができます。
  

ホームページの内容やターゲットとするユーザーによって、適切な版面率は異なります。書籍で見慣れている余白の量は大体15mmから20mmで、Microsoft Wordの標準では、A4判のとき30mmになっています。それを考えると「見慣れた感じ」にするためには、左右それぞれ本文エリアに対して10%程度の余白をとるといいでしょう。また、版面率をどう設定するのでも、横方向の余白は左右均等にとる方が、しっかりした印象が得られます。

CSSで定義する際にはmarginプロパティで余白の量を指定します。たとえば、文章全体の余白を、本文の10%に指定したいときには、body { margin: 10% }と記述します。

漢字・仮名の量を考えよう

文章を構成する文字の漢字・仮名の比率によっても、画面全体の「詰まり具合」が変わってきます。

• わたしたちは常に、みなさまの利益を第一に考えています
• 私達は常に、皆様の利益を第一に考えています

この例のように、一般的に、仮名の多い文章は「すっきりやさしく」見え、漢字が多い文章は「ぎっしり難しく」見えます。これが文章全体になるとかなり印象が変わります。漢字は仮名に比べると文字自体が「詰まって」いるため、漢字ばかりだと「ぎっしり感」が増すわけです。

漢字や仮名の量は、内容のやわらかさ・堅さのバランスとも関係しますので、ホームページの内容やターゲットとするユーザーによって、適切な割合は異なります。ただ、一般的には、あまり漢字ばかりの文章にしない方が、読みやすい印象を与えるでしょう。

スポンサード リンク