これで迷わない！Modal、Dialog、Drawerの違い
はじめに
Web やモバイルアプリを開発をしていると様々な UI コンポーネントを使いますが、どのコンポーネントを選択すべきかは悩むことは多いですよね。
特に 「Modal（モーダル）」 「Dialog（ダイアログ）」「Drawer（ドロワー）」 は、UI ライブラリによって呼び方が異なり混乱します。
例えば、最近伸びているshadcn/uiでは Dialog と呼んでいたり、Chakra UI ではModalと呼んでいます。MUI(Material UI) に至っては Modal と Dialog の両方が存在します 🤯
本記事では、Modal、Dialog、Drawer それぞれの特徴と違いを解説していきます。
結論
3 つのコンポーネントは、それぞれ異なる概念レイヤーに焦点を当てた UI コンポーネントです。
比較しているレイヤーが異なるため、Modal と Dialog が同じコンポーネントを指すこともあります。
| 特徴 | Modal（モーダル） | Dialog（ダイアログ） | Drawer（ドロワー） |
|---|---|---|---|
| 焦点 | 操作の中断（モードに移行） | 対話（フォーム、Yes/No） | スライドアニメーション |
| 使用シーン | 広告、キャンペーン、重要なコンテンツの表示 | フォーム入力、確認ダイアログ | ナビゲーション、絞り込み、BottomSheet |
ベン図で表すと以下のようになります。
（あまり一般的でない名称のコンポーネントも便宜上使用しています。）
以降、詳しく解説します。
Modal
Modal は、ユーザに特定のアクションを求めるために、ユーザのインタラクション（操作）を中断させる UI コンポーネントです。
難しい表現をするならば、ユーザの操作を「モードに移行」させるコンポーネントと言えます。
もともと、「Modal」という英単語はこちらで言及されているように形容詞です。
そのため、「Modal な〇〇（名詞）」という意味が本来は適切な使い方です。例えば「Modal な Dialog」や「Modal な Drawer」などです。
今日では単に「Modal」だけで使われることが多いので注意が必要です。
Modal はユーザの操作を制限し、ユーザが特定のタスクに集中して対処しなければならない状態を作り出します。
ユーザは「モーダルを閉じる」か「指示されたアクションを完了する」まで他の操作を行うことができません。
「モーダル」と「モードレス」
ところで「モード」とは何を指すでしょうか？
これについて理解を深めるにあたって、 モーダル と対比される概念であるモードレスを知ることから始めましょう。
モーダルは「ユーザが特定の操作を完了するまで他の操作を中断する」のに対し、モードレスは「ユーザが他の操作を続行できる状態」を維持します。
つまり「モード」とは、ユーザが操作を行う際の状態を指します。
例えば、モーダルなダイアログはユーザが確認や入力を完了しないと閉じることができませんが、モードレスなダイアログは他の操作を行いながら表示し続けることができます。
モードレスについては以下の記事もご覧ください。
両者の UX を比較する
モーダルは、重要な情報や警告をユーザに伝える際に非常に効果的です。しかし、過度に使用するとユーザのフローを妨げる可能性があるため、安易に使用してはいけません。
一方で、モードレスなデザインは、ユーザに自由度を提供し、操作の流れをスムーズに保つことができます。
そのため、できるだけモードレスな UI 設計を心がけつつ、ユーザにとって重要な情報・アクションの場合はモーダルを使うなど、使い分けることが重要です。
利用例
必ずユーザに確認して欲しいコンテンツを表示します。
デスクトップの画面ではさまざまな情報が表示されるため、ユーザが重要な情報を見逃す可能性があります。そのため、ユーザフローの中で必ずユーザに確認して欲しい情報をモーダルで表示します。
お知らせ・広告
| Yahoo!マップ | Qoo10 |
|---|---|
 |
 |
Dialog
Dialog は、ユーザとの「対話」を目的とした UI コンポーネントです。
ユーザに情報を提供し、入力や選択を求める場面で使用されます。
利用例
フォーム入力ダイアログ
ダイアログ内にフォームを表示し、ユーザに入力を求める場合があります。
ダイアログを使うことで、ユーザの注意を「フォームの入力」に切り替えることができ、フォーム入力に集中させることができます。
Cloaked の例
確認ダイアログ
重要な操作の前に、「この操作を実行してもよろしいですか？」といった確認ダイアログを表示します。
ユーザに対して「これは重要な操作ですよ」と伝えることができ、誤操作を防ぐことができます。
Superlist の例
Drawer
Drawer は、一般に画面の端からスライドして表示されるパネルのことを指し、ナビゲーションメニューやオプションリストとして使用されます。
Modal や Dialog と異なり、バックグラウンドのコンテンツも操作可能なことがあります。
利用例
画面幅の小さいモバイルの UI で使われることが多いです。
私はモバイルデバイス幅では Drawer を使い、デスクトップデバイス幅では Dialog や Modal を使い分けています。
サイドナビゲーション
MUIを使っている方は、Drawer で SideNavigation を実装した経験があるかもしれません。それは、サイドメニューとしての使い方です。
| Spark | Airbnb |
|---|---|
 |
 |
絞り込み
モバイルアプリ開発では、Drawer と同じスライドアニメーションを伴うコンボーネントとして BottomSheet があります。これは、Drawer の一種として捉えることができます。
| Klarna | Shop |
|---|---|
 |
 |
まとめ
- Modal は ユーザのインタラクションを中断するコンポーネント
- Dialog は「対話」に重点を置いたコンポーネント
- Drawer はスライドアニメーションを伴うコンポーネント
それぞれの特性を理解した上で利用することで、UI を適切に設計することができます。
最後に、3 つのコンポーネントを比較した表とベン図を再掲します。
| 特徴 | Modal（モーダル） | Dialog（ダイアログ） | Drawer（ドロワー） |
|---|---|---|---|
| 焦点 | 操作の中断（モードに移行） | 対話（フォーム、Yes/No） | スライドアニメーション |
| 使用シーン | 広告、キャンペーン、重要なコンテンツの表示 | フォーム入力、確認ダイアログ | ナビゲーション、絞り込み、BottomSheet |
参考文献
Discussion
失礼します。
モーダルダイアログだけでなく、モードレスダイアログも存在するので、
という説明は事実と異なってしまうと思います。
MUI の Dialog が、たまたま「モーダルダイアログ」しかサポートしていないだけで、一般論としては「モーダルなダイアログ」だけでなく「非モーダルなダイアログ」も存在しうると思います。
HTMLDialogElement#show()メソッドHTMLDialogElement#showModal()メソッドDialog や Drawer は名詞であるのに対して、Modal は形容詞です。なので、「Dialog と Modal の違い」はレベルの違うものを比較しているので違和感があります。
もちろん、モーダルダイアログを省略して「モーダル」と呼ぶこともあり、そのときの「モーダル」は実質的に名詞のように使われています。しかし、名詞としての用法は、定義の話や厳密な議論に適さない使い方なので、両者の使い方を切り分けて捉えるべきだと思います。
話がややこしくなりますが、モーダルとモードレスの中間のような、「ハーフモーダル」なUIも存在します。
コメントありがとうございます！
ご指摘のとおり、 Modal と Dialog は厳密には上下の関係ではなく、 Modal Dialog だけでなく 非 Modal な Dialog も存在すると認識しています。
誤解を招きかねない表現をしていたため、当該箇所は後ほど修正して再度掲示させていただきます。
ご指摘いただきありがとうござました！🙏
論理的に複雑で難しい概念なので大変だと思いますが、頑張ってください！