中央にそろえているのに、きれいに見えません。そろえる場所が違うのでしょうか？
PORT編集部中央ぞろえがいつも最適とは限りません。長い文章なら左端をそろえると読みやすくなります。配置に合う基準線を一つ選ぶ方法を見ていきましょう。
整列は、文字や画像を共通の基準線に沿わせることです。迷ったら長い本文の左端を決め、見出しと説明をその線へそろえるところから始めましょう。
整列とは？
整列とは、文字や画像などを共通の基準線に沿わせることです。例えば、見出し・説明・価格の左端を同じ位置にします。
基準線とは？
基準線とは、要素をそろえるときの目安になる線のことです。例えば、左揃えなら、行の始まりを合わせる線です。
次の行の始まりを探す。
500円
上から下へ読みやすくする。
基準をそろえて、探さず読める形へ
視線は次に読む場所を探しながら進みます。見出し、本文、ボタンの左端が揃っていれば、自然に下へ読めます。少しずつ位置が違うと、内容を理解する前に視線が左右へ動き、まとまりも弱く見えます。
| 要素 | おすすめの揃え方 | 理由 |
|---|---|---|
| 長い本文 | 左揃え | 行の始まりを探しやすい |
| 短いタイトル | 中央揃えも可 | 主役として見せやすい |
| 金額の一覧 | 桁を揃える | 数字を比較しやすい |
左端を揃えると視線が流れる
右の点線が揃える基準。文字の始まりを探し直さずに、上から下へ読めます。
長い文章は左、短い見出しは中央
説明文や箇条書きは左揃えが読みやすい基本です。中央揃えは短いキャッチコピーや一行の見出しに向きます。右揃えは日付や金額など、比較したい数字の列で役立ちます。一画面で揃え方を増やしすぎないことも大切です。
見出しと説明の左端を合わせる
まず左揃えで行の始まりを固定する。
中央揃えも候補にし、周囲との軸を確認。
同じ列の桁や右端をそろえる。
投稿画像なら、上からタイトル、説明、ボタンの左端を一本の線に沿わせます。画像の中に余白がある場合は、画像そのものの枠ではなく、目に見える主役の位置も確認してください。グリッドやガイドは判断を助けますが、最後は表示サイズで見ます。
どの文字を揃えるか見る
カフェラテ
ミルクの甘さを楽しむ一杯
500円
文字の位置を毎回変えない
なんとなく中央に置いた見出しの下に、左右の余白が違う本文を続けると、軸がぼやけます。カードごとに文字の開始位置やボタンの位置が違う場合も、一覧の読み比べが難しくなります。見た目のズレだけでなく、役割が同じ要素の位置も揃えましょう。
スマホでも行の始まりを揃える
説明文
ボックスをそろえても、文字がずれて見える。
説明文
先頭文字も同じ位置から始まる。
PCの二列をスマホの一列にしたら、各カードの見出しと説明の左端を揃えます。狭い画面では数ピクセルの違いも目立ちます。左右の余白が均等か、長い見出しが折り返した後も読みやすいかを確認してください。
実例｜告知画像の文字を揃える
見出しは中央、日時は少し左、場所は少し右。内容は少ないのに、視線が左右に往復する。
見出し・日時・場所の左端を一本の線に沿わせる。申し込みボタンも同じ幅の範囲に収める。
直す手順
- 一番長い本文を基準に、左端の位置を決める。
- 見出しと補足をその線に合わせる。
- スマホで見て、折り返した二行目も同じ位置から始まるか確認する。
よくある疑問
まとめ
整列は、機械的に全部を同じ位置に置くことではありません。読む順番を決め、同じ役割を同じ軸に乗せることです。
