ウェブサービスやアプリ開発の現場で、「モーダル」や「ダイアログ」といった用語を耳にする機会は多いと思います。
いずれも画面に被さるようにして表示される小さなウィンドウを指すことが多いのですが、違いを理解している方は少ないように感じます。
モーダルもダイアログもUI(ユーザーインターフェース)の一部ですが、それぞれ異なる意味を持っています。
本記事では、「モーダル」と「ダイアログ」について分かりやすく解説してきます。
ダイアログとは?(dialog)
ダイアログとは「対話」という意味です。
システムが情報を提示し、それに対してユーザーが応答する「やりとり(対話)」を指します。
つまり、ダイアログとはシステムとユーザー間をやりとりをするウィンドウ全般のことを指します。
モーダル / モードレス(modal / modeless)
モーダル(modal)
モーダルとは「モードがある」という意味です。
ユーザーが応答しない限り、元の画面の操作に戻れない(強制的にアクションを促す)ように制御された状態を指します。
モードレス(modeless)
制御された状態があるなら、制御されていない状態もあります。
それを「モードレス」と呼びます。
他にも、非モーダル、ノンモーダルと呼ばれたりもします。
具体的な例で言うと、GoogleのGmailがわかりやすいかと思います。
Gmailの新規メッセージを作成するダイアログは、「モードレス」なため、過去に受信したメールを確認しながらメッセージを書く事ができます。
このように、他のコンテンツを確認しながら作業したい場合などにモードレスなダイアログが活用されます。
まとめ
システムとユーザー間をやりとりをする「ウィンドウ全般」のこと
ユーザーが応答しない限り、元の画面の操作に戻れないように「制御された状態」のこと
なんとなく言いたいことが伝わり、致命的なミスにつながらないことから、これまで曖昧にしてきた方も多いのではないでしょうか?
違いが明確に分かると少し踏み込んだ話ができるので、ぜひ覚えておいていただければと思います。
(なにより、その文言を使っている本人がスッキリしますよね)
プロジェクトチーム内で、「ダイアログウィンドウに統一する」というルールを設定しておくと、ドキュメントの表記揺れや認識のズレを防ぐことにもつながりるのでおすすめです。