情報がきれいに整列していても、何が同じグループなのか、スイッチがどこに作用するのか分からないことがある。構図は配置と関係の両方を伝える必要がある。
共通の起点と行高から始め、設定画面や操作パネルでグループ化、説明の位置、強調の順序を考える。空間にも説明の一部を担わせる。
この記事は元の文章を再編し、内容を加えたものだ。数値は各試料の条件を示し、あらゆる画面に共通する設定ではない。シリーズの背景とツールは 総論。
整列と行高
共通の始点に情報を並べる
間隔のリズム（spacing rhythm） は関係の反復から生まれる。図の行高は64 px、アイコンと文字は12 px、パネルの内側余白は24 px。名前、説明、区切り線は文字の始点を共有し、アイコンには独自の領域を残す。表の見出しは内容のまとまりの始点に揃え、列の範囲を伝える。
グループ内は近く、グループ間には間を置く
共通の始点は整列を作り、近接性（proximity） は関係を伝える。2組のナビゲーションで文字、行高、グループ内8 pxは維持し、グループ間だけ8 pxから24 pxへ広げた。WorkspaceとPersonalのまとまりが読み取りやすくなる。
24 pxはこの内容の間であって、あらゆるナビゲーションに適用する必要はない。密なワークスペースでもグループは見分けられるようにしたい。線が必要なら、内容の始点に沿わせる。まず間隔に関係を担わせ、どこにもう1本線が必要かを決めている。
同じ行の要素とリズムを整える
文字の行高が24 pxでも、隣のアバター、バッジ、操作要素はそれ以上の高さを持つことがある。アバターやサムネイルには固有の寸法があり、ボタン、チェックボックス、ラジオ、スイッチ、入力欄、選択欄には内側の余白や最小操作領域もある。まず行高を決めている要素を調べる。
私はレイアウト上の占有範囲、見える範囲、操作範囲を分けて測る。輪郭線、影、フォーカス表示は外側に描かれても行を高くしない場合があるが、実体のあるborder、padding、要素の寸法はレイアウトに参加する。ベースライン揃え、見た目による光学的な整列、行同士の垂直リズムも別の判断だ。
この例では上下各−6 pxのmarginによって、36 pxの操作要素がflex行に占める高さは24 pxになる。要素本体と操作領域は36 pxのままだ。負のmarginによる補正は実装の説明で、bleedは周囲の空白へ制御しながら広げる関係を表す。Radixのghost buttonにもpaddingを相殺する似た処理がある。
値は要素と周囲の空間に合わせる。行の役割と密度を決め、寸法、余白、整列を確認してから補正を検討する。大きな画像、2行の文章、大きなタッチ領域が必要なら行高や配置を変える。単なる移動では元の占有高さが残り、外へ伸びた操作領域が隣の行を覆わないことも必要だ。
表のセルと文中の行ボックスは別に見る
表では、操作用セルのpaddingを調整できることがある。行高24 pxの文字に上下8 pxずつを足すと40 px。36 pxの操作要素を同じ余白に入れると52 pxになる。操作セルの上下だけを2 pxに変えると、操作要素を縮めずに40 pxへ戻せる。
ネイティブな表は、セルの内容と整列を含めて行高を計算する。trに高さを指定しても、大きな内容が縮むわけではない。操作要素のmarginだけを引いてもベースラインや行ボックスの空間が残るため、flexの計算式をそのまま使うことはできない。
文中の画像やアイコンには、ベースラインの下にディセンダー用の空間が残ることがある。文章の一部でない画像は独立した領域でblockにできるが、本当にインラインの要素は基線を確認する。code、上付き文字、ネイティブ操作要素の書体や行高も同様だ。vertical-align: middle は周囲の書体の基線とx-heightを使うため、行全体の幾何学的な中心とは限らない。
文字と行高の研究ページでは、5言語の文例、明暗、行幅、文字サイズを切り替え、各要素を操作できる。構文対応、実測、見た目の判断を分けて示し、文字や操作範囲に必要な空間が増えれば行も伸びる。
関係を見える形にする
枠は意味のあるまとまりを囲む
すべての入力欄を別々のカードにすると整って見えるが、関係まで伝わるとは限らない。この比較では欄と順序を固定し、右側では通知設定を一つの領域にまとめ、アカウント情報を分けている。境界がグループを表す。
まず見出しと間隔で整理し、必要なら背景や枠を加える。同じパネルでも一括保存とは限らない。保存範囲が異なるなら、ボタンと説明で示し、見た目が暗示する関係と動作を食い違わせないようにする。
説明を対象のそばに置く
エラーがフォームの先頭にしかないと、読者は内容を覚えて対象の欄を探す必要がある。ここでは位置だけを変え、同じメール形式エラーを全体の上部とメール欄の直後に置いている。
局所的な問題には近くの説明が役立つ。長いフォームなら先頭にリンク付きのエラー一覧も置ける。視覚的な近さに加え、プログラム上でも欄と説明を関連付ける。W3C のフォーム通知指針は全体の通知と欄の近くのフィードバックを扱っている。
重要な情報を先に見つけられるようにする
見出し、状態、時刻、すべてのボタンが同じ強さだと、どこから見るかを読者が判断しなければならない。この審査パネルは内容と位置をそろえ、右側だけ保留状態と主操作を強調している。
ページ全体に強調点を一つだけと決めるのではなく、現在の作業に合わせて重さを配分する。副次的な文字も読める必要がある。エラー、費用、取り消せない操作の結果は、主見出しでなくても明確に伝える。
操作部品を作用する内容の近くに置く
スイッチを右上に集めるとすっきりするが、どの通知を変えるのか分かりにくくなる場合がある。この図は名前と数を保ち、右側ではメールとデスクトップ通知のスイッチを対応する行に戻している。
位置は対応を助けるが、作用はラベルでも示す。ワークスペース全体に効く設定なら、その階層に置いて範囲を明示する。狭い画面でも、操作部品は自分の内容と一緒に移動させる。
詳細を閉じても選択は残す
詳細設定を常に開いておく必要はないが、閉じたときに適用中の内容まで隠してはいけない。この通知設定は頻度を主画面に残し、開くと休止時間を調整でき、閉じると選んだ時間を要約する。必要条件とエラーは表示を保つ。
低頻度の調整を明確な名前の下に置く。毎回開く必要があるなら、分け方を見直す。段階的な開示は画面を最短にする方法ではなく、必要性に応じて情報を配置する方法だ。
何を一緒に読み、どの操作がどこへ働き、今何に対応すべきか。それが配置から伝わる画面にしたい。間隔、領域、強弱で関係を示しておけば、折り畳みも単なる短縮ではなく、読むための助けになる。