整列 (Alignment)

「なんとなく中央に置いた」「だいたい揃っているからいいか」——こうした判断が積み重なったUIは、ユーザーに「雑に作られた」という無意識の不信感を与えます。数ピクセルのズレは意識されませんが、無意識のノイズとして認知負荷を高め、ページ全体のクオリティへの信頼を静かに蝕みます。

人間の視覚システムは、整列されたものを「意図的に作られた秩序」として認識し、バラバラなものを「未完成または雑」として判断します。整列が取れていると視線は自然に流れますが、整列が崩れると視線がそこで止まり、「なぜここだけズレているのか？」という不要な解釈コストが発生します。

整列の効果は見た目の美しさだけではありません。「このラベルはどの入力欄に対応しているか」「このボタンはどのコンテンツに属しているか」——整列は要素間の関係性を視覚的に語るコミュニケーション手段です。線を引かなくても、端を揃えるだけで「これらは仲間である」というメッセージが伝わります。

グリッドを使わずに「目でだいたい合わせる」設計は、担当者が変わるたびに崩れていきます。整列は個人の感覚ではなく、ルールとして定義することで初めてチームで維持できます。

1. 原則の定義

整列（Alignment）とは、要素を特定の「見えない線」に沿って配置することで、視覚的な秩序・要素間の関係性・ページ全体への信頼感を同時に作り出す設計原則。

本質は「関係性の構築」です。離れた場所にある要素同士でも、端が揃っているだけで「これらは仲間である」というメッセージが伝わります。整列には左揃え・中央揃え・右揃え・グリッドへの整合という種類があり、それぞれ使いどころが異なります。いずれも「意図を持って揃える」ことが前提で、「なんとなく配置する」ことの対義語です。

2. いつ使うか（適用場面）

特に重要になるケース

• フォームデザイン: ラベルと入力欄の左端を揃えることで、入力速度が劇的に向上します。
• カードレイアウト: 画像、タイトル、説明文の開始位置を揃えることで、スキャンしやすくなります。
• 長文テキスト: 左揃え（左寄せ）を基本とすることで、読み手の視線移動をスムーズにします。

トレードオフが起きる場面

• クリエイティブな表現: あえてグリッドを崩す「外し」のテクニックを使う場合、整列は退屈さを生む制約になることがある。ただし、崩すためにはまず整える基礎が必要——ルールを知った上で意図的に破るのが「デザイン」、ルールを知らずに崩れているのは「ミス」。
• 中央揃えの多用: タイトルや短いキャッチコピーでは中央揃えは効果的だが、3行以上の長文で使うと行の開始位置が毎回変わり、可読性が著しく低下する。日本語・英語問わず長文は左揃えが原則。
• 視覚補正との葛藤: 数値上で端を揃えても、アイコンの形状やテキストの字間により「見た目がズレて見える」ことがある。この場合は数値的な整列より視覚的な整列（オプティカルアライメント）を優先する。

3. なぜ重要か（設計判断の核）

整列は「綺麗に並べる」ための整理ではなく、「見えない線で関係を作る」ための機能である。

設計判断の基準

• 「この要素とこの要素は関係があるか？」→ YESなら、どこかのライン（上、下、左、右、中心）を必ず揃える。
• 「画面上に無秩序な配置はないか？」→ 何の意図もなく配置された要素を一つも残さない。

優先順位の考え方

• 左揃え (Left Align): 横書き言語における最強の基本。迷ったら左に揃える。
• 中央揃え (Center Align): 見出しやアイコンなど、アイキャッチとして使う場合に限定する。
• 右揃え (Right Align): 数値など、桁を揃える必要がある場合に使う。

例外条件

• 視覚補正（Optical Alignment）: アイコンの重心や、再生ボタンの三角形など、数値上の端と見た目の重心がズレる場合は、見た目の揃いを優先する。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

ここをクリアしていないと、製品として「使えない」レベルになります。

1本の線: 画面上のすべての要素が、他の何かと少なくとも1つの見えない線で繋がっているか？（孤立した要素がないか）
テキストの左揃え: 3行以上の文章は、中央揃えではなく左揃えになっているか？
マージンの統一: 同じ階層の要素間の余白は、一定のルールで統一されているか？

理想ライン（Better - できると強い/プロの品質）

UXをさらに高め、洗練された印象を与えるための基準です。

グリッドシステム: デザインツール上のグリッド（例：8pxグリッド、12カラム）に沿って配置されているか？
視覚補正: テキストボックスの余白やアイコンの形状による「見た目のズレ」を微調整しているか？
レスポンシブ対応: 画面幅が変わっても、意図した整列関係が維持（または適切に変化）されるか？

5. UI例

改善プロセス

1. ガイドラインの可視化: デザインツールで垂直・水平のガイドラインを引き、すべての要素の端がどの線に乗っているかを確認する。Figmaなら「レイアウトグリッドの表示」で即座に確認できる。
2. 孤立した要素の特定: どの線にも乗っていない「孤立した要素」を見つける。孤立した要素は必ずノイズになる。
3. 揃える基準を決める: 迷ったら「左揃え」が原則。中央・右揃えを使う場合は明確な理由が必要。
4. スペーシングの数値化: 余白を「だいたい」ではなく 8px 16px 24px のように数値ルールで定義する。数値化することでチームが同じ基準で整列を維持できる。

6. 関連リンク

• 関連リファレンス（理論）: ゲシュタルト原則 (Gestalt Principles), 視覚的階層 (Visual Hierarchy), 認知負荷 (Cognitive Load)
• 用語集（定義）: グリッドシステム, 視覚補正 (Optical Adjustment)
• 関連するUI原則（横）: 近接 (Proximity), グリッドシステム (Grid System), 余白 (Whitespace)

7. まとめ

今日から直せる一手 あなたのデザインの「中央揃え」を、一度すべて「左揃え」に直してみてください。それだけで、情報は驚くほど読みやすくなります。

チームに共有するなら一言 「『なんとなく』置くのをやめよう。すべてを『線』でつなごう。」