通知・オーバーレイ
重ねて伝える、モーダル・通知・確認。
いまの画面の上に重ねて伝える部品のカテゴリ。中央のモーダルと確認ダイアログ、横からのドロワー、下からのボトムシートとアクションシート、ボタン脇のポップオーバー、右クリックのコンテキストメニュー、そして削除を取り消せるスナックバーがある。原則はプログレッシブ・ディスクロージャ。重ねるということは利用者の注意を奪うということなので、常時見せる必要のないものを「必要になった瞬間だけ」手前に出すために使う。何でもモーダルにして画面が止まってしまう、逆に確認なしで破壊的操作が通ってしまう、どちらの相談でも引く。
使い分け利用者の判断が要るなら modal / confirm-dialog、作業を続けながら見せるなら side-drawer、モバイルの選択肢は bottom-sheet / action-sheet。小さな操作群は popover-menu / context-menu。破壊的操作は確認で止めるより snackbar-undo で「取り消せる」形にするほうが速い。
まず見る3件
- クリック
モーダル解説あり
Modal Dialog
ボタンでフェード＋スケールインしながらモーダルが中央に開く。背景クリック・×ボタン・Escキーで閉じる。
- 出現は scale 0.88→1 と opacity を 220ms で同時に動かす。位置は動かさず、中央から「浮き上がる」ように見せる
- 閉じている間は inert と visibility:hidden の両方を当てる。opacity:0 だけでは見えないボタンに Tab が入る
- 開いたら中の先頭要素へ、閉じたら開く前にフォーカスがあった要素へ戻す。戻さないと文書の先頭に飛ぶ
- JS
- クリック
ドロワー解説あり
Side Drawer
ボタンで右側からパネルがスライドイン。背景クリックか×で閉じる。モバイルではボトムシートになる想定のスタイル。
- パネルは translateX(100%) で画面外に置き、280ms で滑り込ませる。フェードだと「どこから来たか」が伝わらない
- 影は開いている間だけ付ける。閉じていても影のぼかしが枠の右端に「暗い帯」として残る
- 閉じている間は inert＋visibility:hidden で Tab 順から外す。画面外のリンクにフォーカスが飛ぶと枠が横スクロールする
- JS
- ホバー
スナックバー＋取り消し解説あり
Snackbar with Undo
リスト項目を削除すると「削除しました ［取り消す］」が下部に出て3秒で自動消滅。取り消しで元に戻る。
- 削除した瞬間は DOM から消さず removing クラスで隠すだけにし、3 秒後の確定で初めて remove する。取り消しはクラスを外すだけ
- フォーカスは奪わない。代わりにホバー・フォーカスが乗っている間はタイマーを止め、読んでいる最中に消えないようにする
- 読み上げは aria-atomic=true で「削除しました 取り消す」を一続きにする。分かれて読まれると取り消せることが伝わらない
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| モーダル Modal Dialog | クリック | JS | はい／いいえの単純な確認・必ず読んで判断してほしい内容 | default / hover / focus / active |
| ドロワー Side Drawer | クリック | JS | ハンバーガーメニューの受け皿・項目数が多いナビ・フィルタ・カート | default / hover / focus / active |
| スナックバー＋取り消し Snackbar with Undo | ホバー | JS | 削除・アーカイブなど数秒なら覆せる操作・確認ダイアログを毎回挟みたくない一覧 | default / hover |
| 確認ダイアログ Confirmation Dialog | クリック | JS | 取り消せない削除の最終確認・既定を安全側（キャンセル）にしたい確認 | default / hover / focus / active / success |
| ポップオーバー Popover Menu | クリック | JS | 「…」ボタンにまとめる行内アクション・2〜6 個の選択肢を画面を暗くせず出す | default / hover / focus / active |
| ドラッグ式ボトムシート Draggable Bottom Sheet | ドラッグ | JS | 共有・アクションメニューのモバイル表示・指で開き具合を直接操作させたいパネル | default / focus / active |
| コンテキストメニュー Context Menu | クリック | JS | 右クリックで対象に紐づく操作を出す・行・カードごとの編集／複製／削除 | default / hover / focus |
| アクションシート Action Sheet | クリック | JS | スマホで対象に対する操作を一覧で選ばせる・共有・書き出しなど数個の選択肢 | default / hover / focus / active |
すべての見本（8件）
- クリック
モーダル解説あり
Modal Dialog
ボタンでフェード＋スケールインしながらモーダルが中央に開く。背景クリック・×ボタン・Escキーで閉じる。
- JS
- クリック
ドロワー解説あり
Side Drawer
ボタンで右側からパネルがスライドイン。背景クリックか×で閉じる。モバイルではボトムシートになる想定のスタイル。
- JS
- ホバー
スナックバー＋取り消し解説あり
Snackbar with Undo
リスト項目を削除すると「削除しました ［取り消す］」が下部に出て3秒で自動消滅。取り消しで元に戻る。
- JS
- クリック
確認ダイアログ
Confirmation Dialog
「本当に削除しますか？」をOK/キャンセルで確認。破壊的操作の前に一歩置く確認UIのパターン。
- JS
- クリック
ポップオーバー解説あり
Popover Menu
ボタン横に矢印付きの小パネル（メニュー）がフェードイン。外側クリックで閉じる。コンテキストメニューの基本形。
- JS
- ドラッグ
ドラッグ式ボトムシート解説あり
Draggable Bottom Sheet
画面下からせり出すシート。ハンドルをドラッグして「半分／全開／閉じる」の3段階にスナップする。iOS/AndroidのモバイルUI定番。
- JS
- クリック
コンテキストメニュー
Context Menu
ステージ上を右クリック（長押し）すると、カーソル位置にメニューが開く。アイコン付き項目・区切り線・破壊的項目を持ち、項目クリック・外側クリック・Escで閉じる。
- JS
- クリック
アクションシート
Action Sheet
画面下からせり上がるiOS風のアクションシート。操作の一覧と、離れた位置の「キャンセル」を持ち、破壊的操作は朱色で示す。背景クリック・Escで閉じる。
- JS