今日の問い
その二つが近いのは、同じまとまりだからですか。
30秒でつかむ
余白は、空いた場所ではありません。 要素同士の関係を伝える設計材料です。 近いものをまとめ、違うものを離し、 整列線で視線の移動を助けます。
毎回違う値を選ばず、少数の尺度へそろえます。 グリッドは檻ではなく、判断を再現する基準です。
30秒図解 · LESSON 20
中心モデル
余白は関係、Gridは規則を示す
近さと揃いを使って、同じものと違うものを伝えます。
関係の意味
- 同じ群は近く
- 同じ基準へ揃える
- 別の群は離す
- Gridで全体を統一
CLUE · 見抜く手掛かり
余白の差に意味があるか
TRAP · ありがちな罠
すべて同じ間隔にする
原則
まず、同じ意味の間隔を探します。 ラベルと入力欄、カード内、セクション間では、 必要な近さが違います。 意味の段階を、余白の段階へ対応させます。
最初の尺度は 4、8、16、24、32 のように、
少数から始めれば十分です。
数字そのものに普遍的な正解はありません。
同じ関係に同じ値を使えることが重要です。
次に、画面を貫く整列線を決めます。 見出し、本文、入力欄の左端が少しずつずれると、 視線は毎回位置を探し直します。 AppleのHIGも、整列は走査を助け、 組織と階層を伝えると説明しています。
グリッドは列だけではありません。 外側の余白、列間、本文の最大幅、 部品内部の余白も一つの仕組みとして扱います。 画面幅が変わったら列数を守るのではなく、 内容の優先順位が保たれる形へ組み替えます。
最後に、枠線を一時的に消して見ます。 余白と整列だけでまとまりが分かるなら、 構造はかなり強くなっています。
整列、論理的なグループ、十分な周囲余白、適応するレイアウトという原則を確認する。
良い例と惜しい例
カード一覧の余白
境界を動かし、値の数ではなく関係の一貫性に注目してください。
境界を動かし、値の数ではなく関係の一貫性に注目してください。
場当たり的
端がずれ、似た関係にも異なる間隔が使われています。
規則あり
共通の整列線と三段階の余白で関係が読めます。
AIへの指示例
目的: 予約変更画面に再利用できる余白と整列の規則を作る
制約: 任意の余白値を増やさない。画面幅が変わっても横スクロールを出さない
参照: wireframes/、visual-system.mdの視覚階層ルール
受入条件: 余白尺度、外側余白、列間、本文最大幅、主要な整列線を定義し、主要3画面へ適用する
確認問題
セルフチェック
1. 同じ種類のカードで、見出しと本文の間隔が画面ごとに違います。最もよい対応はどれですか。
最終制作へ反映する
visual-system.mdのレイアウト規則
前回の視覚階層へ、余白尺度、外側余白、列、列間、本文最大幅、整列線を追記し、主要画面へ適用する。
Acceptance criteria
- 同じ意味の関係に同じ余白値が使われ、例外には理由が記録されている
- 主要画面の見出し、本文、操作の整列線が説明でき、狭い幅でも優先順位が保たれる
今日のまとめ
- 余白は、要素同士の関係を伝える
- 少数の尺度と整列線で判断を再現可能にする
- 次は、文字の尺度と日本語の読み心地を整える