UIコンポーネント組み合わせ辞典

背景で回り続ける同期インジケータに注目してほしい。モーダルを開くとそれが止まり、ドロワーとトーストでは回り続ける。3つの違いは名前ではなく、いま見た「背景を止めるか／動かしたまま重なるか」という止まり方そのもの。

01基本部品（モーダル・ドロワー・トースト）

モーダルは「操作を止めて判断させたいとき」、ドロワーは「一覧を保持したまま詳細を覗かせたいとき」、トーストは「操作を止めずに結果だけ伝えたいとき」に使い分ける。3つとも「今どの階層にいるか」をユーザーに常に伝えられるかが設計の核になる。

3つの部品は平面ではなく「重なり」で共存している。トーストをモーダルの裏へ沈めるとステージが警告色に染まるように、z-indexの優先度が崩れると完了通知が判断ダイアログに隠れ、「今どの階層にいるか」が伝わらなくなる。

同じトーストでも、重要度の高いものは割り込み通知（role="alert"）、それ以外は穏やかな通知（role="status"）と読み上げ方を変える。「操作を止めずに伝える」中にも段階がある。

02組み合わせパターン（一覧+詳細／ウィザード型 等）

単体の部品よりも「組み合わせ方」が体験を決める。代表的な型:

• 一覧+詳細型: 左に一覧・右に詳細（またはクリックでドロワー展開）。メールやタスク管理に多い
• ウィザード型: 1画面1質問で進捗バーを見せる。入力の心理的負荷を分割して下げる
• カード+モーダル型: 一覧はカードで俯瞰させ、選択したものだけモーダルで深掘りする

設問はどちらも同じ3問。なのにウィザード型のほうが楽に感じるのはなぜか。「いま答えるのは1問だけ」という状態を画面の側が作っているからで、負荷そのものは減っていない。分けて見せているだけだ。

一覧はカードで俯瞰に徹し、選んだ1件だけをモーダルで深掘りする。俯瞰と精読を1画面に同居させず、役割で分けるのがカード+モーダル型。

03業種別の定番構成

金融・保険系はフォームが長くなりがちなためウィザード型と相性が良い。EC・カタログ系はカードグリッド+ドロワーで一覧性を保ったまま詳細を見せる構成が定番。ダッシュボード系はサマリー（数値）を上部に固定し、詳細をスクロール下部に置く「要約が先、詳細は後」の順序が鉄則。

定番の組み合わせに当てるとプレビューが光ってはまり、外すと警告色でちぐはぐになる。並べて選ばせたいのに1件ずつしか出ない、一望させたいのに指標が均等に埋もれる。業種ごとの定番構成は、こうしたミスマッチを一つずつ潰した先に残った形。だから、まず「一番させたいこと」を決めるほうが先だ。

全部の節を開くと認知負荷ゲージが一気に振り切れる。だから要約（KPI）を先頭に固定し、詳細は開いた節のぶんだけ足していく。「要約が先、詳細は後」とは、この足し引きを利用者の手に委ねる設計だ。

04アクセシビリティ上の注意点

モーダルはフォーカストラップ（Tabキーがモーダル外に出ない）とEscキーでの閉鎖、開いた瞬間に最初のフォーカス可能要素へフォーカスを移す実装が必須。トーストはrole="status"でスクリーンリーダーに通知されるようにし、自動で消える場合も一定時間（目安5秒以上）は表示を保つ。

トラップをOFFにしてTabを押し続けると、フォーカスがモーダルの裏の「見えないボタン」へ滑り出ていく。画面上は何も動いていないのに、キーボードだけが迷子になる。フォーカストラップがなぜ必須なのかは、外してみると一発で分かる。

背景クリックや×ボタンを塞いでもEscキーだけは残す。キーボード利用者にとってEscは唯一の脱出路であり、ここを閉じると「開いたら二度と閉じられない」罠になる。

「一覧+詳細」は幅次第で姿を変える。広ければ横並びの分割ビュー、狭ければ一覧を保持したままドロワーで詳細を重ねる。組み合わせパターンは画面幅というもう一つの軸でも設計する。