レスポンシブ編 06 / 10 実践 約5分
スマホの文字サイズ｜見出しが大きすぎる問題
PCの文字サイズをそのままスマホに持ち込むと、見出しが画面を占領します。幅ごとのサイズ目安と、折り返しの整え方を解説します。
この教材で学べること
- PCとスマホでの文字サイズの目安
- 本文は小さくしすぎてはいけない理由
- 見出しの折り返しを整える方法
PCで作った見出しをそのままスマホで見ると、1つの見出しで画面の3分の1を占めることがあります。文字サイズは、幅ごとに調整する前提で考えてください。
幅ごとのサイズ目安
| 用途 | PC | スマホ | 調整の方向 |
|---|---|---|---|
| 大見出し（H1） | 40〜56px | 24〜32px | 大きく下げる |
| セクション見出し（H2） | 28〜36px | 20〜24px | 下げる |
| 小見出し（H3） | 20〜24px | 17〜19px | 少し下げる |
| 本文 | 16px前後 | 15〜16px | 下げない |
| 補足・注釈 | 13〜14px | 12〜13px | ほぼ据え置き |
本文だけは下げてはいけません。画面が狭いからと14px以下にすると、読み続けるのが苦痛になります。むしろスマホのほうが読む距離が近いぶん、しっかりした大きさが要ります。
折り返しを整える
見出しは、折り返しの位置で印象が変わります。意味の切れ目でない場所で折り返すと、読みにくく、素人っぽく見えます。
| やり方 | 効果 | 注意点 |
|---|---|---|
| スマホ幅で改行を入れる | 意図した位置で折り返せる | PC側にも改行が入らないか確認する |
| 文字サイズを少し下げる | 1行に収まる | 下げすぎると弱く見える |
| 見出しの文言を短くする | 根本的に解決する | いちばん確実な手 |
| ボックスの左右余白を詰める | 1行の文字数が増える | 詰めすぎると窮屈になる |
いちばん効くのは3つ目：スマホで収まらない見出しは、たいてい言葉が多すぎます。削れる修飾語がないか先に見直すと、PC側の見た目も引き締まります。
次は余白の詰め方です。