5分で試せるデザインTips:揃えるだけで整う ― アラインメントの力

「なんとなく素人っぽい」最大の原因は、要素がバラバラに置かれていること。逆に、文字・画像・見出しの「端」を揃えるだけで、驚くほどプロに寄ります。アラインメント（整列）はレイアウトの基礎中の基礎。ガイド線で基準をつくり、要素を吸着させるだけ。ここでは、5分で効く整列チェックと、よくある崩れの直し方をまとめます。

まずは基準線を1本引く

左読みの文書なら、本文の左端を「主軸」に設定。見出し、本文、箇条書き、画像キャプションの左端を同じ位置へ。次に、画像の「外側の箱」の左端も合わせる。これだけで、読み始めの位置が一定になり、視線が迷いません。右端をそろえる右揃えは、高度ですが見出しやキャプションで効果的。中央揃えは短文やタイトルに限定します。

5分でできる整列チェック

• 左端の主軸が通っているか（1ページに1本で十分）
• 画像とキャプションの幅が一致しているか（キャプションがはみ出していないか）
• 見出し→本文→注釈の順で段落頭がそろっているか
• ボタンの幅・高さが揃っているか（UI系）
• 表の桁が中央揃えや右揃えでルール化されているか

グリッドを味方にする

紙でもWebでも、等間隔のグリッドに沿って置くだけで、密度が均一になり、美しい「面のリズム」が生まれます。2分割・3分割・黄金比…。難しい理論よりも、まずは「列幅」と「余白」を固定すること。列幅が揃えば、写真サイズやボックスの角丸が多少違っても、面の安定感が出ます。

崩れの典型例と手当て

• キャプションだけ中央揃え：本文の揃えに合わせる。中央揃えはタイトル限定。
• バナーのボタンが各々違う幅：余白込みで同幅に。四隅の角丸も統一。
• 箇条書きの記号位置がバラバラ：インデント値を固定し、ネスト時は一段下げる。
• 写真の天地が揃っていない：トリミングで天地を揃え、立ち位置を合わせる。

まとめ

整列は「センス」ではなく「手順」です。基準線→吸着→余白の順で見直せば、5分で誰でも底上げできます。迷ったときは、まず左端の主軸を一本。

© 2025 attonote All Rights Reserved.