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

UIを作成していると「ダイアログ」や「モーダル」という言葉が飛び交うと思いますが、違いをしっかり説明できるでしょうか？
違いがあやふやで気分で使うワードを変えたりしている人は多いのではないでしょうか？

というのも、私自身が固定概念で「ダイアログ」や「モーダル」と思い込んでいたものがどうやら認識が違いそうだぞ、、？と気づいたため改めて単語の意味を調べ直しました。

このワードへの認識違いで意図している内容が伝わらない可能性もあるため（失敗談から）違いを徹底解析します。

ダイアログとは

ダイアログとは「対話」するという動詞的な意味合いになります。
UIのオブジェクトのことを指して「ダイアログ」というと実は意味合いとしては間違っていることになります。

もう少し詳しく見ていくと、、

ユーザーの情報やアクションを聞きいて、情報を返してもらう行為のことをダイアログといいます。

引用させていただくと下記の様なことですね。

話し手と聞き手とが互いに理解を深めながら、互いに共感や意識・行動の変化を引き出し合う創造的なコミュニケーションを指す。

ダイアログ - リーダーシップインサイト

モーダルとは

では次にモーダルについてですが、こちらは制御に関するワードで「モーダル」と「モードレス」があります。
こちらもUIのパーツのことではなく、状態を指しているためオブジェクトの名詞を指している言葉ではありません。

状態とはなにか、、

モーダル

アクションを制限して他のことをさせない状態
何かのモードに入っていて出ない限り、そのモードを抜けれない状態

モードレス

並行して何かを行えること
モードに入っていないので、今の作業をしながら、他のアクションができること

言葉で説明されてもピンとこないと思いますが、実際のUIを見ると納得感が出ると思います。

モーダルは制御がかかってその行為が終わるまで他の操作ができないのに対し、モードレスはモードレスウィンドウを複数表示させ別々に同時進行で作業が行えます。

オブジェクトの名称

モーダルもダイアログも行為(動詞)のことを指していることが分かりましたが、ではUIのパーツを「ダイアログ」とか「モーダル」と呼ぶのはなんで？となりますよね。

ここは憶測ですが、日本では「モーダルダイアログ」のような掛け合わせの言葉でオブジェクト名称をつけたことが始まりで、なんとなく長いし「モーダル」とか「ダイアログ」とかになっていったのではないでしょうか。

その証拠に英語名だと「Modal box」や「Modal window」などがで検索する方が該当のUIがよくヒットします。
逆に「Dialog box」や「Dialog window」というワードはヒット数が多くなく、ダイアログは行為でありUI名称として使う頻度は低そうです。
※ちなみに「Dialog」だけで検索するとほぼUIはヒットしませんでした。

モーダルとモードレスどっちを使うべき？

ユーザビリティ的にはなるべくモードレスで使う方がストレスが少なく良いとされています。
ただ時と場合によるので、アラートのような優先順位の高いものや、確実に認識してもらう必要のあるものはモーダルで作成する必要があります。

では、モードレスはどう使うのか
実際UIで見ると意外とたくさんのところで使われていることが分かります。

画像の様に、
G-mailの新規作成ウィンドウもモードレスウィンドウになっているし
テキストエディタなどの検索ボックスや、通知とアクションが一体化しているウィンドウなどもモードレスです。
また、一つの行為でなく、プルダウンリストやカレンダーを出すなど複数作業や別ウィンドウを表示する様なものもモードレスに含まれる様です。（この行為を終えないとウィンドウが閉じれない場合はモーダルになりそうですが、、）

まとめ

ということで、モーダルもダイアログもUIの名称として単体で使うには少し意味合いが異なることがわかりました。

状態・行為を表す言葉

ダイアログ：対話するという行為(動詞)のこと
モーダル：一つの作業しかさせない、行動を制御すること
モードレス：複数の作業を並行して行える状態のこと

UI名称として適正なもの

モーダルウィンドウ
モーダルボックス
（モーダルダイアログ）

ついチームメンバーで話す時も、UIのオブジェクトに対して「モーダル」や「ダイアログ」と使ってしまいますが、意味が異なることを覚えておくと専門的な話をするときなどに齟齬が起きにくくなるため、なるべく正確な言葉を覚えて使っていきたいですね。