MENU
あなたの好奇心がAIを超える

モーダルとダイアログの違い

当ページには広告が含まれている場合があります
モーダルとダイアログの違い
  • URLをコピーしました!

ウェブサービスやアプリ開発の現場で、「モーダル」や「ダイアログ」といった用語を耳にする機会は多いと思います。

いずれも画面に被さるようにして表示される小さなウィンドウを指すことが多いのですが、違いを理解している方は少ないように感じます。

モーダルもダイアログもUI(ユーザーインターフェース)の一部ですが、それぞれ異なる意味を持っています。

本記事では、「モーダル」と「ダイアログ」について分かりやすく解説してきます。

目次

ダイアログとは?(dialog)

ダイアログとは「対話」という意味です。

システムが情報を提示し、それに対してユーザーが応答する「やりとり(対話)」を指します。

また、「ダイアログ」とは、「ダイアログウィンドウ」または「ダイアログボックス」の省略表現です。

つまり、ダイアログとはシステムとユーザー間をやりとりをするウィンドウ全般のことを指します。

モーダル / モードレス(modal / modeless

モーダル(modal)

モーダルとは「モードがある」という意味です。

ユーザーが応答しない限り、元の画面の操作に戻れない(強制的にアクションを促す)ように制御された状態を指します。

モードレス(modeless

制御された状態があるなら、制御されていない状態もあります。

それを「モードレス」と呼びます。
他にも、非モーダル、ノンモーダルと呼ばれたりもします。

具体的な例で言うと、GoogleのGmailがわかりやすいかと思います。

Gmailの新規メッセージを作成するダイアログは、「モードレス」なため、過去に受信したメールを確認しながらメッセージを書く事ができます。

このように、他のコンテンツを確認しながら作業したい場合などにモードレスなダイアログが活用されます。

まとめ

ダイアログ

システムとユーザー間をやりとりをする「ウィンドウ全般」のこと

モーダル

ユーザーが応答しない限り、元の画面の操作に戻れないように「制御された状態」のこと

なんとなく言いたいことが伝わり、致命的なミスにつながらないことから、これまで曖昧にしてきた方も多いのではないでしょうか?

違いが明確に分かると少し踏み込んだ話ができるので、ぜひ覚えておいていただければと思います。

(なにより、その文言を使っている本人がスッキリしますよね)

プロジェクトチーム内で、「ダイアログウィンドウに統一する」というルールを設定しておくと、ドキュメントの表記揺れや認識のズレを防ぐことにもつながりるのでおすすめです。

  • URLをコピーしました!
目次