レイアウト・余白：グリッド / 視線誘導 / 整列
1. まずレイアウトは“余白”で決まる
初心者が一番つまずくのは「余白」。
プロは 余白を増やす → 可読性UP → 品質UP が鉄則。
🔹基本ルール
内側の余白（padding）は 8px の倍数 にまとめる
（8, 16, 24, 32… → 8ptグリッド）
要素の間隔も 揃える（例：すべて16px に統一）
違う余白をむやみに使わない
近くにあるものをグルーピングする（近接の原則）
2. グリッド（Grid）の基礎
Figmaでのレイアウトを整える最強の機能がグリッド。
✔ グリッドを設定する方法（Frameを選択して）
右パネル → Layout Grid → +
よく使うグリッド
① カラムグリッド（列）
Web・アプリで最重要
例：12カラム、マージン16〜24、ガター16
用途：
レスポンシブデザイン
テキスト幅の統一
コンポーネントの左右位置を揃える
② スクエアグリッド（8px）
要素の配置 / 余白 / アイコンサイズの基準
③ 行グリッド（row）
リストUI、カード群などで役立つが使用頻度は低め
3. 整列（Alignment）の基礎
整列とは、要素を揃えること。
揃っているだけで プロ感が10倍。
✔ よく使う整列
左揃え（Left align）
中央揃え（Center）
右揃え（Right align）
垂直方向の中央揃え（Vertical center）
端揃え（Top/Bottom align）
Figmaショートカット
左揃え：Shift + A → Auto Layout
整列：右上の整列ボタン群
4. 視線誘導（情報の読みやすさ）
人は画面を 左上→右下 にスキャンします。
心地よい視線誘導の作り方
✔ ① 余白のメリハリをつける
見出しの上には大きな余白
見出し下の本文は小さな余白
→ グループ感が出る
✔ ② 文字幅（行幅）を最大化しない
1行60〜80文字が読みやすい
✔ ③ 情報の階層構造を作る
大見出し（24px）
セクションタイトル（18px）
本文（14–16px）
✔ ④ 視線をブロックごとに整理する
カードUI・セクション区切りが有効
5. Figmaでの実践テクニック
✔ Auto Layout（最重要）
整列＆余白を全自動にする機能。
使い方：
要素を選択 → Shift+A
効果：
余白を “Padding” で統一
子要素間を “Spacing” で統一
ボタンやカードが自動で伸びる
レスポンシブが簡単になる
✔ Constraints（固定位置）
レイアウトが変わっても要素の位置を維持
例：右上に固定したいボタンなど
✔ Frame と Group の使い分け
Frame：レイアウト管理
Group：単なるまとめ（使う頻度は少なめ）
6. よくあるNG例
❌ 余白がバラバラ（8px, 11px, 13px…）
❌ 文字が左右で揃っていない
❌ 要素が“なんとなく”置かれている
❌ 情報の階層がなく全部同じ大きさ
❌ コンポーネントの幅が統一されていない
👆 このどれかが起きると「素人っぽさ」が出ます。
7. これさえ守れば “UIが安定する” ゴールデンルール
🟦 ① 8pxグリッド
余白・サイズは「8の倍数」
🟥 ② カラムグリッドを必ず使う
Webは12カラムが基本
🟩 ③ 整列を厳格にする
左揃え + 上揃え を基本にする
🟨 ④ Auto Layoutで全ての余白を管理
パディング・ギャップを統一するとプロ級になる
