モーダルの型の選び方
モーダルの型は、「モーダルで何をしてもらうか」「背景を押したときに閉じてよいか」「SPでどこから出すか」の3つで変わります。問い1で型を選び、問い2で閉じ方を、問い3で出す位置を決めます。その前に、モーダルにせずページや開閉式で足りないかも確かめます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：モーダルで、何をしてもらいますか？
モーダルは読み手の操作を止めるため、目的がはっきりしているときだけ使います。
| してもらうこと | 向く型 |
|---|---|
| 元に戻せない操作の前に、確認を取る | 確認ダイアログ型 |
| 作業の途中で、補足の情報を確かめてもらう | 情報表示型 |
| 写真を大きくして、順番に見比べてもらう | 画像拡大型 |
| 2〜3項目の短い入力を、ページを移らずに済ませてもらう | フォーム入り型 |
| 一覧を見ながら、絞り込みの条件を選んでもらう | ボトムシート型 |
問い2：背景を押したときに、閉じてよいですか？
誤って閉じたときに困るかどうかで決めます。
| 状況 | 閉じ方 |
|---|---|
| 見せるだけで、閉じても何も失わない | 背景・Escキー・閉じるボタンで閉じる（情報表示型・画像拡大型・ボトムシート型） |
| 入力の途中で、閉じると内容が消える | 背景では閉じない。入力済みで閉じるときは破棄の確認も検討する（フォーム入り型） |
| 確認の結果が、閉じ方で分からなくなる | ボタンで選んで閉じる。Escキーは取り消しとして扱う（確認ダイアログ型） |
問い3：SPでは、どこから出しますか？
後ろの画面との関係を保つかどうかで決めます。
| 状況 | 向く出し方 |
|---|---|
| その場の操作に集中してもらう | 画面の中央に、左右に少し余白を残して出す（確認ダイアログ型・フォーム入り型） |
| 後ろの一覧を見ながら選んでもらう | 画面の下から、画面いっぱいにしない高さ（目安として8割程度）で出す（ボトムシート型） |
| 写真を大きく見せる | 画面いっぱいに出す（画像拡大型） |
モーダルの型の比較
| 型 | 役割 | 背景で閉じるか | 向く状況 |
|---|---|---|---|
| 確認ダイアログ型 | 確認の取り方 | 閉じない | 取り消しや削除など、元に戻せない操作の前 |
| 情報表示型 | 補足の見せ方 | 閉じる | 作業の途中で、決まりや説明を確かめてもらう |
| 画像拡大型 | 画像の見せ方 | 閉じる | 写真の枚数が多く、大きく見比べてもらいたい |
| フォーム入り型 | 入力の受け方 | 閉じない | 資料の請求など、2〜3項目で済む申し込み |
| ボトムシート型 | SPでの出し方 | 閉じる | 一覧を見ながら、絞り込みの条件を選んでもらう |
すべての型に共通する設計の原則
モーダルの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- dialog 要素を showModal() で開くか、独自に作るなら role="dialog" と aria-modal="true" を付け、題名を aria-labelledby で結び付ける。すぐに注意と応答を求める重要な確認では role="alertdialog" も選択肢にする
- 開いたら内容に合った最初の要素へ移し、閉じたら開いたボタンに戻す。短いフォームなら最初の入力欄、長い説明なら見出しや冒頭の文（tabindex="-1"）も候補にする
- 開いている間は、Tabキーの移動をモーダルの中に閉じ込め、後ろのページを操作できないようにする
- 閉じる方法を文字のボタンで示し、Escキーでも閉じられるようにする
- 開くボタンの名前で、何が開くかを伝える。「こちら」にしない
- モーダルの上にモーダルを重ねない。長い内容や項目の多い入力は、ページにする
- 読み手が押したときに開く形を基本にし、ページを開いた直後に自動で出さない
組み合わせの例
- 予約の管理画面：予約の取り消しは確認ダイアログ型、キャンセルの決まりは情報表示型で見せる
- 施工例のページ：写真の一覧を画像拡大型で拡大し、資料の請求はフォーム入り型で受け付ける
- 日程や物件の一覧：条件の選択はボトムシート型で出し、結果の件数は一覧の上に表示する
- サイト内検索：画面全体を覆う検索の画面も、モーダルとして同じ原則で作る（全画面検索型 サイト内検索）
よくある質問
モーダルは、使わないほうがよいのですか?
モーダルは読み手の操作を止めるため、多用すると邪魔になります。確認・補足・拡大・短い入力など、その場で済ませたほうがよい場面に絞って使えば、作業の流れを保つ助けになると考えられます。
モーダルは、dialog 要素で作ったほうがよいですか?
dialog 要素を showModal() で開くと、後ろのページを操作できない状態やEscキーで閉じる動きをブラウザが用意してくれます。独自に作る場合は、role=dialog と aria-modal=true を付け、操作を閉じ込める処理と閉じたあとに元の場所へ戻す処理を用意します。
ページを開いたときに、自動でモーダルを出してもよいですか?
開いた直後に案内や広告のモーダルを出すと、読みたい内容の前に操作を止めることになり、離れる原因になりやすいと考えられます。読み手が押したときに開く形を基本にします。
背景を押したら、閉じるようにすべきですか?
情報を見せるだけのモーダルなら、背景で閉じられると便利です。入力の途中や確認の画面では、誤って閉じて内容が消えたり、結果が分からなくなったりしないよう、背景では閉じない形にします。