ページレイアウト
ビューポート内の要素配置を体系化したパターン。一貫したレイアウトはユーザーの学習コストを下げ、画面を見た瞬間に「何ができるか」を予測させる。
基本的な考え方
ページレイアウトは業務とオブジェクトモデルの理解から始まる。構造を統一することで、ユーザーは毎回 UI を学習しなおすことなく操作できる。
リード文の役割
- ページの目的・内容を 1〜2 文で伝え、全要素を確認しなくても素早く理解できるようにする
- 詳細画面（ユーザーが作成したオブジェクトの表示）にはリード文は不要
構成要素
すべてのページはこの要素で構成される。エラー画面は例外。
- Header: 画面最上部に固定。製品名・ユーザー情報・全体アクションを含む。
- Navigation-Menu: 主要機能への遷移を担うグローバルナビゲーション。現在地を強調表示する。
- 見出し領域: ページタイトル + リード文 + 関連情報（ステータス・操作ボタンなど）。
- コンテンツ領域: セクションまたはテーブルを縦に積む。視覚的グルーピングパターンに従って構成する。
種類
代表的なページレイアウトの種類。モーダルなページはモーダル UI パターンを、エラー画面は ErrorScreen を参照する。
- コレクション（テーブル）
- シングル（1 カラム）
- コレクションとシングルの 2 カラム
コレクション（テーブル）
オブジェクトの一覧表示と属性比較が目的。カイクラの顧客一覧・会話履歴一覧が該当する。
- 見出し領域の右に「新規作成」などのテーブル操作ボタンを置く（最大 3 つ）
- 検索・フィルター・ページネーションは一時操作エリアとしてテーブルの上下に配置する
シングル（1 カラム）
オブジェクトの詳細を縦に積んで表示するパターン。カイクラの設定画面・フォーム画面が該当する。
- セクションは 1 つのトピックを表す。見出し + コンテンツの構成を繰り返す
- セクション間の余白は
--spacing-xl以上を確保する
コレクションとシングルの 2 カラム
左のリストで項目を選ぶと、右に選択した項目の詳細が表示される。URL は変わらず同一画面内で切り替わる。Gmail の受信箱 + 本文プレビューが代表例。
- 左のコレクションで現在選択中の項目を強調表示する
- 右のシングルはシングル（1 カラム）と同じ構造で構成する
- 項目未選択時は右側にプレースホルダーまたは空状態を表示する