モーダル

Modal / Dialog

別名: モーダルダイアログ、ダイアログ、Dialog、Modal window、ポップアップウィンドウ

生態(さわってみる)

一言定義

背面のコンテンツを操作不能にしたまま前面に表示され、閉じるまで他の操作を止めるウィンドウ。

分類

使う場面

  • 確認や入力など、いま完了させないと先に進めない作業を切り出したいとき
  • 元の画面の文脈を保ったまま、一時的に別のタスクへ集中させたいとき

避ける場面

  • 単なる結果通知で応答が不要なとき(→トースト)
  • モバイルでコンテンツ量が多く、下からせり上がる形が自然なとき(→ボトムシート)

近縁種との比較

ModalDialog の呼称ゆれは、Modalが「背面操作を不可にする」という様態を指す言葉、 Dialogが部品そのものの名前という違いに由来する。日本語では「モーダル」が部品名として定着して いるため、本図鑑ではモーダルを見出し名に採用する。ドロワーは画面端からスライドして現れる点、 ボトムシートはモバイルで画面下端からせり上がる点で表示位置と動きが異なるが、いずれも背面を 操作不能にする点は共通する。単なる結果通知で応答を必要としないなら、より軽量なトーストを使う。 アラートダイアログとは同じ「背面操作を止める前面ウィンドウ」でも役割が異なり、モーダルは フォーム入力など何らかの作業を載せる汎用の場であるのに対し、アラートダイアログは確認・警告に 用途を絞った最小構成のダイアログで、選択肢は原則ボタンのみに限られる。サイドピークとは 背面のコンテンツに重ねて詳細を表示する点が近いが、サイドピークは一覧を画面に残したまま右側に せり出し背面操作を完全には止めないのに対し、モーダルは背面操作を止める前面ウィンドウである点で 異なる。

実例リンク

アクセシビリティ

role
ネイティブ <dialog> の showModal() を使うと role="dialog" 相当の振る舞いとトップレイヤー化が得られる。見出しは aria-labelledby で紐付け
キーボード操作
Escで閉じる。開いた瞬間にダイアログ内へフォーカスを移し、閉じたら呼び出し元へフォーカスを戻す(フォーカストラップ)
補足
Ant Designはモーダルを「Feedback」カテゴリに分類する一方、HIG/Polarisは「Overlay」に分類する。本図鑑では機能軸=feedback・レイヤー軸=overlayの2軸で両者を両立させている(docs/research/02-taxonomy.md)