モーダルダイアログとは？ユーザーの操作を一時的に制止して確認を求めるUI部品

モーダルダイアログとは？ざっくりと3行で

メインコンテンツの上にオーバーレイで表示され、ユーザーが確認・入力・操作を完了するまで背後のUIを操作できなくするUI部品のこと。ダイアログボックス・ポップアップとも呼ばれる
「本当に削除しますか？」という確認・フォームの入力・重要な通知などユーザーの注意を一点に集中させて意図しない操作を防いだり重要な情報を見落とさせないようにしたりするUXパターンだ
背後のコンテンツを操作できないモーダルに対して、背後も操作できるダイアログをモードレスダイアログと呼ぶ。過剰なモーダル表示はユーザーの作業を中断してUXを損なうため適切な場面での使用が重要だ

【深掘り】これだけ知ってればOK！
よくある誤解
1. モーダルはどんな情報表示にも使えると思っている
2. モーダルのXボタンだけがあれば十分だと思っている
会話での使われ方
【まとめ】3つのポイント
よくある質問
【出典】参考URL

【深掘り】これだけ知ってればOK！

モーダルダイアログの適切な使用場面と避けるべき場面：適切な使用場面（不可逆な操作の確認・重要な通知・フォームの入力）・避けるべき場面（単純な情報表示・自動で表示される広告・離脱防止ポップアップ＝Googleのモバイルペナルティ対象）。

モーダルダイアログのアクセシビリティ実装で重要なこと：フォーカス管理（モーダル表示時にフォーカスをモーダル内の最初の要素に移動）・フォーカストラップ（Tabキーでのフォーカス移動をモーダル内に閉じ込める）・Escキーで閉じる（キーボードユーザーがEscキーでモーダルを閉じられる）・ARIAロール（role=dialogとaria-modal=trueを設定）。

モーダルダイアログとアラートダイアログの違い：ブラウザのalert/confirm/prompt（ブラウザ組み込みのネイティブダイアログで見た目のカスタマイズができない）・カスタムモーダル（HTMLとCSSとJavaScriptで実装したカスタマイズ可能なモーダルダイアログ）。UIフレームワーク（Material UI・Radix UI・Headless UI）を使うとアクセシビリティ対応済みのモーダルを簡単に実装できる。

モーダルの背後のコンテンツのスクロール固定について：モーダル表示中にモーダルの外側がスクロールしてしまう問題（スクロールの漏れ）がある。CSSでbody {overflow: hidden;}を設定することでモーダル表示中の背後のスクロールを防ぐことができるが、iOSのSafariでは追加の対策（position: fixed）が必要な場合がある。

Googleのモバイルインタースティシャルポリシーに注意しよう。自動表示される広告モーダルや離脱防止モーダルはGoogleのモバイルSEOペナルティの対象になりうる。コンテンツを覆う全画面モーダル・スクロールしても消えないポップアップ・コンテンツ上に重なるレイアウトは避けることが推奨される。

よくある誤解

モーダルはどんな情報表示にも使えると思っている

モーダルはユーザーの作業を強制的に中断するため過剰な使用はUXを大きく損なう。特に自動で表示される広告モーダル・離脱防止モーダル・単純な情報表示へのモーダル使用は離脱率を高める。

モーダルのXボタンだけがあれば十分だと思っている

Xボタンに加えて、キーボードユーザー向けのEscキーでの閉じる機能・オーバーレイ部分のクリックで閉じる機能・フォーカストラップの実装がアクセシビリティの観点で重要だ。

会話での使われ方

削除ボタンにモーダル確認ダイアログを追加しました。「本当に削除しますか？はい/いいえ」という確認でユーザーの誤操作による削除事故が減りました。

エンジニアが不可逆な操作へのモーダル確認の追加効果を報告している場面。

このサイト、ページを開くたびにモーダル広告が出てきます。Googleのモバイルインタースティシャルポリシーに引っかかって検索順位が下がるリスクがありますよ。

SEO担当者がモーダル広告のSEOペナルティリスクを指摘している場面。

モーダルのフォーカストラップを実装していないので、スクリーンリーダーのユーザーがTabキーでモーダル外の要素に飛んでしまいます。アクセシビリティ対応が必要です。

フロントエンドエンジニアがモーダルのアクセシビリティ問題を指摘している場面。

【まとめ】3つのポイント

メインコンテンツの上に重なりユーザーの操作を一時制止して確認を求めるUI部品：不可逆な操作の確認・重要な通知・フォーム入力に有効だが過剰な使用はUXを損なうため「ユーザーの即時確認が本当に必要な場面」に限定することが重要だ
フォーカス管理・フォーカストラップ・Escキーでの閉じる機能がアクセシビリティの必須実装：モーダル表示時のフォーカス移動・フォーカストラップ・Escキーでの閉じる機能はキーボード操作ユーザーとスクリーンリーダーユーザーへのアクセシビリティ対応として必須だ
広告・離脱防止目的のモーダルはGoogleのSEOペナルティ対象になりうる：自動で表示される広告モーダルや離脱防止ポップアップはGoogleのモバイルインタースティシャルポリシーに引っかかって検索順位が下がるリスクがあるため目的と影響を慎重に判断する

よくある質問

Q モーダルとポップアップはどう違いますか？: A

モーダルは背後のUIを操作不能にするダイアログです。ポップアップはより広義の突然表示されるUIの総称として使われることが多いです。

Q HTMLとCSSだけでモーダルを実装できますか？: A

HTML5のdialog要素を使うとCSSとJavaScriptを最小限にしてネイティブのモーダルを実装できます。ただしブラウザのサポート状況とスタイルの制約を確認することが必要です。

Q React向けの使いやすいモーダルライブラリはありますか？: A

Radix UIのDialog・Headless UIのDialog・React Modal・Material UIのDialogなどが代表的です。アクセシビリティ対応済みのものを選ぶことを推奨します。

Q モーダルの背景をクリックして閉じる実装はどうしますか？: A

オーバーレイ要素にonClickハンドラを追加してモーダルを閉じる関数を呼び出します。フォーム入力中など誤操作が起きやすい場面では実装しない方がよい場合もあります。

【出典】参考URL

https://www.nngroup.com/articles/modal-nonmodal-dialog/ ：NN/gのモーダル・モードレスダイアログの解説
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog ：MDNのdialog要素の説明

Dialog (Modal) Pattern

Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI...

：W3Cのモーダルダイアログのアクセシビリティガイドライン