STEP 1
読みやすさを決める4要素
本文の読みやすさは、おもに次の4つで決まります。どれか一つでも外すと、とたんに読みにくくなります。
文字サイズ
本文は小さすぎ・大きすぎどちらもNG。Web本文は15〜18pxが目安。
1行の字数(行長)
長すぎると次の行頭を見失い、短すぎると折り返しが多すぎ。全角28〜45字が目安。
行間(行送り)
詰まると行がくっつき、空きすぎると切れる。1.6〜1.9倍あたりが読みやすい。
コントラスト
文字と背景の明暗差。薄い灰色文字は読みにくい。本文は十分濃く。
STEP 2
調整してみる
4つのスライダーを動かして、読みやすさメーターが上がる組み方を探しましょう。やりすぎると下がります。
デザインを学ぶうえで、文字はもっとも身近な素材です。読みやすさは、書体を選ぶことだけでなく、サイズや行間、1行の長さといった「組み方」で大きく変わります。同じ文章でも、整え方しだいで、すっと頭に入ることもあれば、読む気をなくすこともあるのです。まずは自分の目で、心地よいバランスを見つけてみましょう。
読みやすさ —
STEP 3
読みやすさクイズ
2つの本文のうち、読みやすいほうを選びましょう。どこが違うかも確認できます。
PLUS
本文組みのコツ
1. 本文は欲張らない
大きく見せたい気持ちは見出しへ。本文は15〜18pxで素直に。
2. 行長を抑える
横幅いっぱいに流さない。1行が長いと目が疲れる。適度に折り返す。
3. 行間で呼吸を作る
行間1.6〜1.9で行のまとまりと読みやすさが両立する。
4. 薄いグレー文字に注意
「おしゃれ」で文字を薄くしすぎると読めない。本文は十分なコントラストを。
本文組みの目安
| 要素 | 目安 | 外すと… |
|---|---|---|
| 文字サイズ | 15〜18px(Web本文) | 小さい=読めない / 大きい=幼稚 |
| 1行の字数 | 全角28〜45字 | 長い=行頭を見失う / 短い=ぶつ切り |
| 行間 | 1.6〜1.9倍 | 狭い=窮屈 / 広い=ばらける |
| コントラスト | 十分濃く(薄い灰色は避ける) | 薄い=読めない・疲れる |
可読性の合言葉:
① 本文は15〜18px
② 1行は長すぎず短すぎず
③ 行間1.6〜1.9、文字は十分濃く
—— 「読みやすい」は、目立たないけれど一番の親切です。