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