モーダル・ドロワー・シート・ポップオーバー
一時的な操作面を、モーダル・ドロワー・ボトムシート・ポップオーバーのどれで出す？
判断表
| 判断軸 | モーダル 中央に重ねて、答えるまで戻さない | ドロワー 横から出す、ナビや設定の置き場 | ドラッグ式ボトムシート 下から出す、指で高さを決める | ポップオーバー 押した場所の脇に、軽く出す |
|---|---|---|---|---|
| 中断の強さ | 最強。背景を暗くし、閉じるまで元の画面に触れない | 強い。背景は暗くなるが、元の画面の文脈は横に残る | 中。半開きなら元の画面が上に見えたまま操作できる | 弱い。外側を押せば消え、画面は暗くならない |
| 載せられる情報量 | 見出し＋本文＋2ボタン程度。長い内容は向かない | 縦に長いリストや設定項目を並べられる | リスト数件〜全開なら1画面ぶん | 2〜6項目のメニュー。スクロールが要るなら別の型 |
| モバイルでの手の届きやすさ | 中央なので届くが、閉じる×が上端にあると遠い | PC向き。狭幅では見本自身がボトムシート化を想定 | 最良。親指の範囲に収まり、ハンドルで閉じられる | 押した場所の脇なので届く。画面端では位置合わせが要る |
| 戻りやすさ | ×・キャンセル・背景・Esc の4経路。フォーカスは元へ戻る | ×・背景・Esc。開く前のボタンへフォーカスが戻る | ハンドルを下へ引くか背景を押す。Esc は見本に無い | 外側クリックか Esc で即閉じ。選んだら自動で閉じる |
| キーボードと支援技術 | role=dialog・aria-modal・Tab の循環まで見本にある | モーダルと同じ契約（dialog・Tab 循環・フォーカス復帰） | 見本はポインタ専用。実装では開閉ボタンの代替が要る | role=menu・menuitem。開いたら先頭項目へフォーカス |
迷ったらこれ
迷ったら、答えを求める1問ならモーダル、ナビや設定の一覧ならドロワー、行内の少数アクションならポップオーバー。ただしスマホ中心の画面なら、ドロワーとモーダルの多くはボトムシートに置き換えたほうが親指で完結する。
モーダルの中でさらにモーダルを開く構成は避ける（戻り先が分からなくなる）。破壊的操作の確認は confirm-dialog を、フォーカスの閉じ込めの実装例は focus-trap-dialog を参照。
候補の見本
- クリック
モーダル解説あり
Modal Dialog
ボタンでフェード＋スケールインしながらモーダルが中央に開く。背景クリック・×ボタン・Escキーで閉じる。
- JS
- クリック
ドロワー解説あり
Side Drawer
ボタンで右側からパネルがスライドイン。背景クリックか×で閉じる。モバイルではボトムシートになる想定のスタイル。
- JS
- ドラッグ
ドラッグ式ボトムシート解説あり
Draggable Bottom Sheet
画面下からせり出すシート。ハンドルをドラッグして「半分／全開／閉じる」の3段階にスナップする。iOS/AndroidのモバイルUI定番。
- JS
- クリック
ポップオーバー解説あり
Popover Menu
ボタン横に矢印付きの小パネル（メニュー）がフェードイン。外側クリックで閉じる。コンテキストメニューの基本形。
- JS