• サイトマップ

テキストを読みやすくする

テキストを読みやすくするコツ、それは文字サイズ、行間、字間、 テキストエリア(テキストが表示される部分)のサイズを考えるということです。

テキストを読みやすく。 あたりまえなのだけれど案外ほったらかしのサイトが多いと思いませんか？ ただ段落を意味する<p>や 見出しを意味する<hx>などのタグで文章を囲うだけではデザインしたとは言えません。 特にWebでは文章が大切な情報発信の手段です。 ここをおろそかにしないことがWebデザインの基本ではないでしょうか。

文字サイズ、行間、字間を指定する

テキストに対する文字サイズ、行間、字間の調整は読みやすさ を考える上で必要不可欠なものです。 デフォルト(何も変更していない最初の状態)の場合、 短文ではあまり気にならないかもしれませんが、 長文になると非常に読みにくいものになります。 特に行間は狭すぎて大変読みにくいので注意が必要です。 めんどくさがらずに、文字サイズ、行間、字間はきちんと指定することをオススメします！

文字サイズ、行間、字間の指定はCSSを使って行います。 具体的には、文字サイズはfont-size、行間はline-height、 字間はletter-spacingのプロパティを指定します。

文字の大きさは12px以上、行間はフォントサイズの1.5倍から2倍、 字詰めは1.1、1.2倍ぐらいが見やすいと思います。 いろいろ試した上で確認してみてください。 指定の単位は様々ですのでよく考えた上で最適な単位を使用してください。

ちなみにこのサイトでは文字の大きさは12px、行間は1.8em、字間は0.1em を基準に指定しています。

テキストエリアのサイズを考える

テキストエリアのサイズも大変重要な要素です。 よく見かけるのは無造作にテキストを横幅いっぱいに伸ばして表示しているサイトです。 これでは一行読むたびにディスプレイの左端から右端へ視点を動かさなければならず、 文字を追うだけでユーザは疲れてしまうでしょう。また読んでいる行を見失う結果につながる可能性さえあります。

テキストエリアのサイズでポイントとなるのは横幅の長さです。縦の長さはメリハリのある文章展開を守れば、 多少大きくても問題ではありません。しかし、横幅は視点の移動距離に深く関係するので、 400pxから500pxぐらい、文字にすると（フォントサイズにもよりますが） だいたい30字から50字ぐらいに収めるようにするのが良いと思います。