モーダルウィンドウ

🐾 猫で例えると？

ハンモックからひょっこり顔を出した猫に「いまはこちらを見て」と呼び止められる様子を思い浮かべると、モーダルの役割を覚えやすくなります。ただし、注目を集めるだけではモーダルではありません。技術的には、ダイアログを閉じるまで背景の画面を操作できなくする点が重要です。

💻 アプリ・Web開発における「モーダルウィンドウ」とは？

モーダルは、削除前の確認や短い設定など、現在の作業の途中で判断を求める場合に使います。単なるお知らせなら、画面内のメッセージで足りることもあります。また、前面に表示されても背景を操作できる画面は非モーダルです。ポップアップという見た目の呼び方とは分けて考えます。

暗い背景のオーバーレイはよくある表現ですが、それだけでは背景へのクリックやキーボード操作を止められません。操作対象をダイアログ内に移し、閉じた後に元の作業へ戻れることまで含めて設計します。背景のスクロールをどう扱うかも、端末や画面構成に応じて確認が必要です。

⚠️ モーダルウィンドウの仕組みと注意点

独自に作る場合は、重なり順に加えて、背景の操作抑止、フォーカスの移動、Tabキーで移動できる範囲、閉じた後のフォーカス復帰を扱います。z-index を大きくするだけではモーダルになりません。まずは標準の dialog 要素を使えるか検討します。

HTML5における <dialog> タグを用いたネイティブ実装の例

<dialog> に showModal() を呼ぶと、最前面のレイヤに表示され、同じ文書の外側の要素が操作対象から外れます。show() は非モーダル表示です。次はHTMLの後にスクリプトを置く最小例で、「確認した」という選択を画面に返すだけです。サーバーのデータ更新は行いません。

<button id="open-dialog" type="button">おやつの予定を見る</button>
<p id="result" role="status"></p>
<dialog id="treat-dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">おやつの予定</h2>
  <p>次のおやつは夕方です。</p>
  <form method="dialog">
    <button value="cancel" autofocus>戻る</button>
    <button value="confirmed">確認しました</button>
  </form>
</dialog>
<script>
  const opener = document.querySelector("#open-dialog");
  const dialog = document.querySelector("#treat-dialog");
  const result = document.querySelector("#result");
  opener.addEventListener("click", () => {
    dialog.returnValue = "";
    dialog.showModal();
  });
  dialog.addEventListener("close", () => {
    result.textContent = dialog.returnValue === "confirmed"
      ? "予定を確認しました。" : "予定の画面を閉じました。";
    opener.focus();
  });
</script>

method="dialog" のフォームは送信時にダイアログを閉じ、押したボタンの値を returnValue に設定します。標準ではEscキーでも閉じられます。この例は再度開く前に値を空に戻し、前回の「確認しました」が次のキャンセルに残らないようにしています。タイトルの関連付けや初期フォーカスは実装者が指定・確認します。

🛠️ モーダルウィンドウを賢く使うためのポイント

フロントエンドエンジニアやUI/UXデザイナーがモーダルを設計する際は、ユーザーに過度なストレスを与えないための「配慮」と「引き際」の設計が何より重要です。

• 閉じ方と戻り先を確認する： 見つけやすい閉じるボタンと、キーボードで閉じる方法を用意します。閉じたときに、開くきっかけとなったボタンなど自然な位置へフォーカスが戻るかを確認します。画面から消えるだけでは十分ではありません。
• 多用による「モーダル疲れ」の回避： ページを開いた瞬間に広告マーケティングのモーダルが出現し、さらに何かを押すたびに確認モーダルが立ち上がるような設計は、UXを著しく損ないます。本当にユーザーの操作を制限すべき重要な局面のみに限定して使用するのが現場の鉄則です。
• 狭い画面とキーボードで確認する： 文字を拡大しても内容や閉じるボタンへたどり着けるか、Tab・Shift+Tabで背景に移動しないか、Escで閉じられるかを試します。破壊的な操作の確認では、最初のフォーカスを安易に実行ボタンへ置かないようにします。

顔を出して注意を引くアメショのように、モーダルは今の作業から注意を移す仕組みです。使うときは、何を判断する画面かが伝わる文言にし、キーボードで操作・終了できるか、閉じた後に元の作業へ戻れるかを確認しましょう。