ModalとDialogの分類

ModalとDialogは混同されることがあるが、そもそもレイヤーの異なる概念である。ここでは混同の解消を目的に、これら及び関連用語の大まかな説明を行い、より正しい分類を示す。

モードがある状態のこと。modalの反対はmodeless。

特定の操作にユーザーを集中させるために、他の操作を一時的にブロックするUIの「状態」を指す言葉。「モード（mode）」という言葉が示す通り、アプリケーションが特別な状態に入っていることを意味する。この状態を解除しない限り、ユーザーは元の画面の操作に戻れない。

本来、「状態」を指す言葉であるが、UIライブラリなどでは「モードがある状態」を実現するためのコンポーネント（特にModal dialog）の名前として使われることがある。

モードを提供するウィンドウのこと。

元々の画面（メインウィンドウ/親ウィンドウ）へのユーザーインタラクションを無効化しつつ、新たなモードを強制するメインウィンドウに従属する画面（子ウィンドウ）のこと。

Dialog boxが使われることが多いため、modal dialogとも呼ばれる。

Modeless window#

モードを提供しないウィンドウのこと。

メインウィンドウのインタラクションをブロックしない子ウィンドウのこと。

例：パレットウィンドウ、ツールバー、ツールチップ

ユーザーに情報を伝達し、応答を求める小さなウィンドウの形をしたグラフィカルなコントロール要素。

元のフローへのインタラクションをブロックするかどうかで「modal」または「modeless」に分類される。「modal」である場合、「Modal dialog」と呼称するが、「modeless」である場合に「Modeless dialog」と呼称することは稀。

UIライブラリなどでは、Dialog boxを指す場合に「Dialog」と呼ばれることがある。

一般に画面の端からスライドして現れる小さなウィンドウのこと。

そもそもDialogとModalを比較することがおかしいが、ここにDrawerを加えて比較されるケースがある。

ModalやDialog boxなどと比べて歴史が浅く、恐らく厳密な定義がない。コントロール要素である必要はないが、多くの場合内部にコントロール要素やリンクを含む。

一方、ウィンドウを追加する要素であるため、Dialog boxと同様に「modal」または「modeless」に分類できる。

利用例：ナビゲーションメニュー、サイドバー、モバイルでのDialog boxの代替

これらの用語は、以下の2つのレイヤーで分類できる。

UIの状態・挙動（振る舞い）
- modal: 他の操作をブロックする状態。
- modeless: 他の操作をブロックしない状態。
UIの部品（コンポーネント）
- Dialog Box（Dialog）: 主にユーザーとの対話に用いる小さなウィンドウ。
  - Modal dialog: 元の画面への操作をブロックするDialog box。UIライブラリなどで「Modal」と呼ばれることがある。
- Drawer: 主に画面の端からスライドして現れるパネル。
- Window: 上記を含む、より広範な画面要素。

「modal」は本来「状態」を指す言葉だが、UIライブラリなどで「コンポーネント」を指す「Modal」という名称が普及してしまったことが混同の一因となっていると思われる。