「モーダル」「ダイアログ」とは？

この記事は2025 ZAICO アドベントカレンダーの9日目の記事です。

こんにちは、zaicoでフロントエンドを主に開発しているあだちです。

Webアプリケーションのフロントエンドを実装する中で、エラーメッセージや警告を表示してOKボタン押下を要求したり、特定の情報を編集するために表示するボックスを実装する機会が多々あります。

このコンポーネント、皆さんはなんと呼んでいますか？

私「モーダルと呼ぶのかダイアログと呼ぶのかよくわかってないやつだ。迷ってても仕方ないから、とりあえず今回作るコンポーネントもXXXDialogで命名だぁ！ヨシ！」

...という具合で、私は「モーダル」「ダイアログ」の単語が何を表すかはっきり分からないまま、実装していました。

今回は、この一瞬の命名の悩みを解消すべく、Webアプリケーションのユーザーインターフェースで使用される場合の、それぞれの単語についてを調べます。

記事が複雑になるため、Webアプリケーションにおけるダイアログに絞っての調査です。

モーダル(modal)

モーダル(modal)という言葉は、アプリケーションで表示される小さい画面を指す名詞ではなく、「モードがある」という形容詞です。

そして、モーダルなユーザーインターフェースとは、ユーザーの操作によってモードを切り替え、特定のタスク以外の操作をブロックするユーザーインターフェースのことです。

例えば、テキストエディターのvimでは、ファイルを開いたそのままのノーマルモードから、iキー等でインサート(挿入)モードに切り替えなければ、ファイルに文字を入力できません。

Vimのインサートモード

モーダルの対義語はモードレス(modeless)です。モードレスなインターフェースとは、特別な手続きを行わずに、自由に操作できるインターフェースのことです。
例えば、テキストエディターアプリの、macOS TextEditやWindows NotePadでは、モード変更を行うことなく、自由にテキストの編集保存ができます。

macOS TextEditの画面

ダイアログ(dialog)

一般的にプログラムやアプリケーションで開かれる小さい画面全般のことをウィンドウと呼びます。

そして、ダイアログとは操作の過程で、ユーザーに特定の情報の入力やメッセージの確認を要求するために一時的に開かれる、子画面(ウィンドウ)のことを指します。

Webアプリケーションでは、スタイルやレイアウトを自由に表現するために、ウィンドウを模したダイアログボックスを表示します。

dialogは"会話、対話"と訳すことからも、アプリケーションとユーザー間のコミュニケーションの役割がある画面、と考えると分かりやすいかもしれません。

子画面で重要なメッセージを表示し、ユーザーに確認を要求する

似たような語彙

単語	説明
モーダルなUI	ユーザーの操作によってモードを切り替え、特定のタスク以外の操作をブロックするユーザーインターフェースのこと
モードレスなUI	操作にモード切り替えは不要で、自由に操作できるインターフェースのこと
ウィンドウ	プログラムやアプリケーションで開かれる小さい画面全般のこと
ダイアログ	ウィンドウの中でも、ユーザーに入力やメッセージの確認をするために一時的に開かれる、小さい画面のこと
ダイアログボックス	ダイアログと同じ

そして、ダイアログには、モーダルとモードレスなダイアログがあります。^[1]

モードレスなダイアログ

モードレスなダイアログは、表示されていても親画面での操作を自由に行うことが可能な子画面のことです。

Gmailでは、メールの新規作成を右下に表示される子画面で行います。その間も、メニューで画面遷移を行ったり、受信メールを確認・削除するなど、親画面で行うユーザーの操作を妨げません。

Gmailのメール新規作成は子画面で編集する

SmartHR社のデザインシステムでは、モードレスダイアログコンポーネントが提供されています。
ダイアログをドラッグして画面上で移動ができ、親画面の操作も自由にできます。

SmartHR Modeless Dialog

モーダルなダイアログ

モーダルなダイアログでは、特定のタスクを実行するために表示されるダイアログで、そのタスクを完了するか、ダイアログを閉じるまで、他の操作ができません。

モーダルダイアログの使用例を紹介します。

重要なエラーの防止や修正のために、ユーザーにメッセージを伝える

JavaScriptのwindow.alert(),window.confirm(), window.prompt()メソッドは、ユーザーがキャンセルかOKボタンを押下するまで、親画面の操作をブロックします。

zennでは、記事の編集状態を保存せずにブラウザバックをすると、保存内容が消失することを伝えるメッセージが表示されます。

zennで記事編集中に、ブラウザバックをした際に表示されるアラート

ユーザーに入力や操作を要求する

次の操作に進むための重要なメッセージを表示し、ユーザーに操作を求めます。
HackerRankでは、ログインしていないユーザーは、ページで問題を読み、コードを書くという操作はできます。しかし、解答のサブミットボタンを押下すると、ログインが必要であることを伝える子画面が表示されます。ユーザーに、ダイアログ上でログインまたはアカウント登録を要求します。

HackerRank未ログイン時の画面

スコープを絞ったタスクを親画面に影響させずにダイアログ上で実行する

業務アプリケーションなどでは、あるユーザーの操作の影響範囲を画面全体のオブジェクトに影響させないために、スコープを絞った特定のタスクをダイアログ上で行うことがあります。

zaicoの在庫編集画面では、物品の名前や数量など、様々な情報の編集を行います。
編集画面で新しく保管場所を作成する必要があると気付いた時に、もし保管場所新規作成画面へ遷移する必要があったとしたら、一度編集内容を保存して画面をする必要があり、不便です。
zaicoの在庫編集画面では、モーダルダイアログで、保管場所の新規作成を実行することができます。
新しく作成した保管場所を、在庫の保管場所の情報に紐づけて、保存をすることができます。

zaico 編集画面 保管場所作成ダイアログ

UX上での懸念点

一般的に、モードレスなUI設計が推奨されています。以下がモーダルダイアログの多用を避けるべき理由の例です。

• モード切替により、ユーザーの脳内ワーキングメモリを浪費する
• 他の操作ができなくなる
• 繰り返し作業のフローを阻害する

ダイアログコンポーネントの名前

ダイアログにはモーダルとモードレスなダイアログの2種類があることが分かりました。
それでは、ModalDialog,ModelessDialogという名前が理に叶う命名でしょうか。

一般的に、ダイアログコンポーネントをどのように命名しているのか、企業のデザインシステムを見てみましょう。

企業名	コンポーネント名	説明	デザインシステムURL
デジタル庁	モーダルダイアログ	準備中	URL
SmartHR	ActionDialog, MessageDialog, StepFormDialog,ModelessDialog	用途別のモーダルダイアログ(3種類)、モードレスダイアログ	URL
Atrassian	Modal Dialog	画面の上のレイヤーにユーザーの操作を必要とする内容を表示します。	URL
IBM	Modal	画面の内容の上に表示されるウィンドウを用いて、特定のタスクまたは情報に注目を集めるために使用します。	URL

企業ごとに命名が少しずつ異なっており、世間一般で統一された名称が存在するわけではなさそうです。各社が自社プロダクトの仕様やデザイン体系に合わせて命名している、という印象を受けました。
また、デザインシステムを公開している企業では、開発者やデザイナー向けに「モーダル／モードレス」の違いが明確に説明されており、呼び方だけではなくその利用目的も合わせて整理されている点が特徴的でした。

まとめ

私自身の経験では、Webアプリケーションでダイアログを使用する際、ほとんど（約99%ぐらいの体感）がモーダルとして使われています。
そのため、Web UI においては「ダイアログ＝モーダルとして振る舞うもの」であるケースが一般化し、結果としてモーダルとダイアログのどちらで呼ばれても「あのUIのことね」と認識されるようになっているのかなと思いました。

今回の調査で、ダイアログコンポーネントの命名という、小さな悩みの種を解決する糸口を見つけることができたように思います。

zaicoのソースコードではmodalという名前を含むコンポーネントが37個、dialogが75個と混在しています。ダイアログが多数ですが、同じ悩みを持つ人がいたら共有し、チーム全体で命名の合意形成をとっていきたいものです！🪟

次回の担当はsg335さんです。ぜひお楽しみに!

参考

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
Wikipedia Modal_window
NN/g Modal & Nonmodal Dialogs: When (& When Not) to Use Them

脚注

1. Carbon Design System