モーダル

Modal / Dialog

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

○ 使う場面

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

× 避ける場面

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

別名

モーダルダイアログ、ダイアログ、ポップアップウィンドウ

近縁種との比較

Modal と Dialog の呼称ゆれは、Modalが「背面操作を不可にする」という様態を指す言葉、 Dialogが部品そのものの名前という違いに由来する。日本語では「モーダル」が部品名として定着しているため、本図鑑ではモーダルを見出し名に採用する。「モーダル」という語自体は、様式・状態を意味するラテン語modusに由来する英単語modal（様態の）が転じたものとされる。

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

○ 使う場面

× 避ける場面

別名

近縁種との比較

分類