読みやすい文字レイアウトーレイアウトの基本

Tweet

[`yahoo` not found]

Share on Tumblr

[`evernote` not found]

Pocket

情報を正確に効果的に伝えるには、文字の読みやすさは重要である。
文章をスムーズに読んでもらうには、字間や行間、レイアウトの知識が必要となって来る。

字間と行間で読みやすさが変わる

字間と行間を、どの程度に設定するかにより、読みやすさが変わってくる。
適切な字間や行間は、用いるフォントの種類、文字サイズによって変わってくる。

字間の調整

字間とは？

文字と文字の間の空き。

和文フォントの場合

和文フォントは、漢字やひらがな、カタカナなど、どのような文字も、１文字が、それぞれ同じ１つの正方形に収まるようにデザインされている。

そのため、文字と文字の間隔は、文字の形状によって異なって表れる。
特に、漢字とひらがなが混在する文章では、文字間隔の差が顕著に表れる。

これらの間隔を、文字の持つ形状に合わせて調整してやると、文字が読みやすくなる。

欧文フォントの場合

和文フォントと異なり、それぞれの文字の外形に合わせた幅が１文字毎に個別に設定されている。

このため、字間の調整は、通常必要ない。

行間の調整

行間も、文章の読みやすさの重要な要素である。

視線がスムーズに次の行に移行するように行間を調整する必要がある。

Webサイトデザインでの字間、行間の調整

閲覧環境で表示が異なるWebサイトでは、pt などの絶対的単位での指定よりも、%やemなどの相対的な単位での指定の方がよい。

字間のCSSプロパティ

letter-spacing

行間のCSSプロパティ

line-height

段組みを読みやすくするためのレイアウトのポイント

段組みとは？

文章を読みやすくするため、文章をブロック単位に分けて構成すること。

段組みを読みやすくするため、字間や行間の適切な調整をするほか、幾つかのポイントが存在する。

1行の文字数を最適化する

1行の文字数が多すぎると、ユーザーが疲れてしまいがちです。
文字数が少なすぎると、視線移動の頻度が多くなり、ユーザーに負担が掛かります。
適度な文字数を保ち、改行が適度で、ユーザーに負担が掛からないように注意する必要がある。

印刷物

横組みの場合、1行15〜28文字程度が、最も読みやすい文字数とされている。

Webサイト

1行35〜45文字程度までが自然に読みやすいとされている。

文章にアクセントや余白を加える

内容に合わせて、小見出しを入れたり、段落間に余白を加えたり、アクセントを加える事で読みやすさが向上するでしょう。

また、年代による読みやすさの違い（高齢者の場合、あまりにも字が小さいと読みづらい。）、スマートフォンなどデヴァイスによる読みやすさの違いを考慮して、読みやすさを設計しましょう。

参考書籍

Webデザインとコーディングのきほんのきほん

Tweet

[`yahoo` not found]

Share on Tumblr

[`evernote` not found]

Pocket