【だいあろぐ】

ダイアログ とは?

最終更新:
💡 「ちょっといいですか?」と割り込んでくる確認ウィンドウ

利用者に確認・入力などを求めたり、情報を伝えたりするために表示するウィンドウ。背景を操作できないモーダルと、背景も操作できるモードレスがある。

📌 このページのポイント
モーダルダイアログの例 確認 このファイルを削除しますか? 削除する キャンセル この背景は操作できない モードレスなら背景も操作できる
モーダルの例。キーボードのフォーカスや閉じ方も設計する。すべてのダイアログが背景を制限するわけではない。
ひよこ ひよこ
「ファイルを削除しますか?」と出るのがダイアログ?
ペンギン先生 ペンギン先生
それが一例だよ。ダイアログは利用者に確認や入力を求めたり、情報を伝えたりするためのウィンドウなんだ。通知や名前の入力などにも使うよ。
ひよこ ひよこ
出ている間、後ろの画面を操作できないのはなぜ?
ペンギン先生 ペンギン先生
それはモーダルダイアログだからだよ。閉じるまで背景の操作を制限するんだ。背景も操作できるダイアログはモードレスと呼ぶよ。
ひよこ ひよこ
モーダルとダイアログは同じ意味ではないんだね?
ペンギン先生 ペンギン先生
そう。ダイアログはやり取りのためのウィンドウ、モーダルは背景の操作を制限する性質だよ。すべてのダイアログがモーダルというわけではないんだ。
ひよこ ひよこ
キーボードで使うときは何が大切?
ペンギン先生 ペンギン先生
モーダルでは、開いたら中へフォーカスを移し、Tabキーで背景へ抜けないようにするよ。閉じるボタンやEscapeキーでの操作、閉じた後に通常は呼び出し元へ戻す動きも設計するんだ。
ひよこ ひよこ
Webなら属性を付ければ完成する?
ペンギン先生 ペンギン先生
HTMLのdialog要素をshowModal()で開く方法があるよ。独自実装でaria-modal="true"を付ける場合、その属性は支援技術へ性質を伝えるものなので、背景の操作制限やフォーカス管理も実装・確認する必要があるんだ。
ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「ダイアログ」って出てきたら「確認・入力・情報提示のために開くウィンドウ」と思えばだいたいOK!
📖 おまけ:英語の意味
「Dialog / Dialogue」 = 対話・会話
💬 コンピューターとユーザーが「対話」するための窓、という意味からきているよ

参考資料

← 用語集にもどる