モーダルダイアログ （ 概要 ）
モーダルダイアログは、モードをもつダイアログです。これが表示されている時は、ダイアログ内しか操作できません。
ユースケース
- 削除などの破壊的な操作を行うとき
- 削除などの破壊的な操作を実行する際、押し間違いを防ぐために使用します。
- 短いメッセージを表示するとき
- モーダルダイアログ内で完結する短いメッセージを表示する場合に使用します。
注意が必要なケース
- 補足情報の提示には他のコンポーネントを先に検討する
- 補足情報を提示する場合は、情報の種類や量に応じて、サポートテキスト、注釈ブロック、ディスクロージャーの使用を先に検討してください。
- ユーザーのボタン押下なしにモーダルダイアログを表示しない
-
以下の問題が生じるため、ユーザーのボタン押下なしにモーダルダイアログを表示しないでください。
- ユーザー自身の明示的な操作によらず表示されると、表示された理由がわからず困惑する。また、そのモーダルダイアログを再び開く方法がわからないため、閉じても大丈夫なのか迷う
- 意図せずモーダルダイアログが表示されると、画面が隠れて、読んでいた場所を見失う
- ボタン押下なしに開くと、モーダルダイアログを閉じたときに元の場所にフォーカスが戻らない
- 処理の完了やステータスの変化を伝えることにモーダルダイアログを使わない
- 処理の完了やステータスの変化など、ユーザーの判断を必要としない内容をモーダルダイアログで表示しないでください。多くの場合、変化した結果の表示や、画面遷移したことで処理の完了は自明なため、メッセージは不要です。
- 告知情報の表示にモーダルダイアログを使わない
- 告知情報は一時的に表示するのではなく、ページ内で常に伝える必要があります。生命や財産に関わる緊急性の高い通知は緊急時バナー、常設の注意喚起にはノティフィケーションバナーを使用してください。
- アクションボタンがある場合は閉じるボタンを使わない
- 「OK」「はい」「いいえ」「キャンセル」などのアクションボタンを伴うモーダルダイアログに閉じるボタンがあると、アクションボタンと閉じるボタンの操作結果が同じなのか異なるのかを利用者が判断できなくなります。閉じるボタンはアクションボタンがないときだけ使用できます。
- 確認ダイアログだけを安全対策にしない
- 削除などの破壊的な操作では、確認ダイアログを表示しても、利用者が内容を確認せずに操作を進めると安全対策として機能しません。そもそも間違って削除しないようにする設計や、削除の取り消しや復元ができる設計を検討してください。
- モーダルダイアログ外の情報を読まないと判断できない場合は、モーダルダイアログを使わない
- モーダルダイアログが表示されているあいだは、モーダルダイアログ外の情報を読んだりコピーしたりすることができません。設定や詳細情報など、モーダルダイアログ外の情報を読みながら判断する必要がある場合は、モーダルダイアログを使わず、判断に必要な情報と判断を求める操作を同じ画面に表示してください。
- モーダルダイアログにフォームを入れない
- モーダルダイアログにフォームを入れると、フォーム内の入力や確認のために、さらに別のモーダルダイアログやポップアップが必要になる場合があり、モードが多重になってしまう可能性があります。また、モーダルダイアログが表示されているあいだは、モーダルダイアログ外の情報を読んだりコピーしたりできません。フォームは、ページ上に直接表示するようにしてください。
- ナビゲーションメニューの表示にモーダルダイアログを使わない
- 表示／非表示を切り替えられるナビゲーションメニューを表示する場合は、モーダルダイアログではなく、ドロワーやハンバーガーメニューボタンなどを使用してください。
関連コンポーネント
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | Figmaデザインデータ（v2） | 提供中 |
| HTML版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 | |
| React版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 |