ドロワーUIとは？モーダル・ダイアログとの違いと使い分け、dialog要素での実装

ドロワーUIは、画面の左右や下の端に置き、メニューや絞り込み条件を収めるパネルです。多くは普段は画面の外に隠しておき、ボタンやスワイプで引き出す開閉型で、PCの左側に常に出しておく常時表示型もあります。ドロワー（drawer）は英語で引き出しの意味です。よく並べて語られるモーダルは背景の操作を止めている状態、ダイアログはユーザーに応答を求める小窓を指し、3つは同じ軸の選択肢ではありません。ドロワーは「どこに出すか」、モーダルは「背景を止めるか」、ダイアログは「何のために出すか」を表すので、「モーダルなドロワー」も「非モーダルなダイアログ」も成り立ちます。この記事では3者の違いを表で整理したうえで、メニューをドロワーに隠したときの弱点、どれを選ぶかの判断基準、Material Design 3でのナビゲーションドロワーの非推奨化、HTMLの<dialog>要素とpopover属性を使った実装までを扱います。コード例はChrome 155で動作を確かめたものです。

まとめ

• ドロワーUIは画面端に置くメニュー用のパネルで、多くはボタンやスワイプで引き出す。ハンバーガーメニューはそれを開くボタンの呼び名で、左右から出るものをサイドドロワー、下から出るものをボトムシートと呼ぶ。
• ドロワー＝配置、モーダル＝状態、ダイアログ＝目的。軸が違うので排他ではない。Material 3のナビゲーションドロワーにも、背景を止めるmodalと並べて置くstandardの2種がある。
• メニューをドロワーに隠すと使われにくくなる。NN/gの179人の調査では、PCで隠したメニューが使われたのは27%で、表示したメニュー（48%）の約半分だった。PCでは主要なメニューを隠さない。
• 選ぶ基準は「今の作業を中断してでも答えさせる必要があるか」。必要なら確認モーダル、不要なら非モーダルのドロワー・ポップオーバー・インライン表示にする。頻繁に行う取り消せる操作では、確認モーダルを省き、元に戻す手段を用意する。
• Material 3 Expressive（2025年5月）でナビゲーションドロワーは非推奨になり、展開できるナビゲーションレールへの置き換えが推奨されている。Androidの新規設計では、スマホの縦画面はナビゲーションバー、幅の広い画面はレールを先に検討する。
• Webでは<dialog>をshowModal()で開くと、背景の操作不可、Escキーで閉じる、閉じた後のフォーカス復元までブラウザが受け持つ。背景のスクロールは止まらないのでCSSで止める。
• 外側クリックで閉じるclosedby="any"はChrome・Edge 134とFirefox 141が対応済みで、Safariは2026年10月時点で未対応。Safari向けには閉じるボタンを必ず置く。

ドロワー・モーダル・ダイアログの比較：配置・状態・用途

3者の違いは、背景を操作できるか、どう閉じるか、何に使うかで比べると混同しません。

「ダイアログとモーダルの違い」で迷うのは、実際のダイアログの多くがモーダルで出るからです。Material Components for Androidのドキュメントはダイアログを「modal windows that require interaction」と定義しており、Material 3のダイアログは常にモーダルです。一方、HTMLの<dialog>要素はshow()で開けば背景を操作できる非モーダルになります。デザインシステムの言葉か、HTMLの言葉かで範囲が変わる点に注意してください。

ドロワーUIとは：画面端から引き出すパネルの種類

ドロワーは、狭い画面でメニューや絞り込み条件を置く場所を確保するための配置パターンです。開くまでは画面を本文に使え、開いたときだけ項目を並べられます。Web・Android・デスクトップアプリのいずれにも使われ、表記は「ドロワー」のほか「ドロアー」も見かけますが、指しているものは同じです。

ドロワーメニューとハンバーガーメニューの関係

ハンバーガーメニューは三本線のアイコン（ボタン）の呼び名で、ドロワーメニューはそのボタンを押して出てくるパネルの呼び名です。「同じもの」と説明されることがありますが、ハンバーガーアイコンでドロップダウンや全画面メニューを開く設計もあるので、ボタンと開いた中身は分けて考えた方が設計の議論がかみ合います。画面の左右から出るものをサイドドロワー、下から出るものをボトムシートと呼び分けるのが一般的です。

背景を止めるドロワーと並べて置くドロワー

Material Design 3はナビゲーションドロワーを2種類に分けています（Material Components for AndroidのNavigationDrawerドキュメントによる）。modalはスクリム（背景を暗くする覆い）で残りの画面の操作をブロックし、主に画面の狭いモバイル向けです。standardはコンテンツと並べて置き、ドロワーを開いたまま本文を操作できます。同ドキュメントは、modalはタブレットやデスクトップではstandardに置き換えられると書いています。既定値も載っており、ドロワーの最大幅（android:maxWidth）は280dp、スクリムの色は不透明度60%の黒です。自作するときの幅と背景の暗さの目安になります。Jetpack Composeでは、modalに当たるのがModalNavigationDrawer、standardに当たるのが開閉できるDismissibleNavigationDrawerと常時表示のPermanentNavigationDrawerです。ボトムシートにも同じ区別があり、modalはスクリムの上に出て、standardは画面の主要領域と共存します。

つまりドロワーを選んだ後に、もう一度「背景を止めるか」を決める必要があります。スマホで画面を覆うドロワーはモーダル、PCで左側に常に出ているサイドバーは非モーダルです。

ドロワーメニューの長所と短所：表示領域の確保と利用率の低下

長所は、画面を本文に広く使えることと、項目が多くても1か所にまとめられることです。短所は、閉じている間は中身が見えないため、メニューの存在自体に気づかれにくいことです。この短所は数字で測られています。Nielsen Norman Group（NN/g）は、179人に6つの実在サイトでタスクをこなしてもらい、メニューを隠した場合と表示した場合を比べました（Hamburger Menus and Hidden Navigation Hurt UX Metrics、2016年6月公開）。

同じ調査では、メニューを経由して目的のページにたどり着けた割合が、隠したメニューでは20%以上下がり、利用者が答えたタスクの難しさは表示した場合より21%上がりました。NN/gの推奨は、PCではハンバーガーアイコンなどでメニューを隠さず、最上位の項目をページの上部か左側に並べることです。スマホでは、最上位の項目が4つ以下ならすべて表示し、4つを超える場合は一部を隠すしかないとしたうえで、重要な情報へはページ内のリンクを用意するよう勧めています。スマホの方が影響は小さいものの、ドロワーにすべて隠してよい根拠にはなりません。

モーダルとは：背景の操作を止めている状態

モーダル（modal）は、特定のモードに入り、そのモードを抜けるまで他の操作を受け付けない状態を指します。背後の画面は見えていても、クリックもキーボード操作もできません。反対の状態は非モーダル（モードレス）で、開いたまま背後の画面を操作できます。

W3CのARIA Authoring Practices Guide（APG）は、モーダルダイアログの背後のウィンドウを「inert（不活性）」と表現し、背後は暗くするなどして判別しにくくするのが一般的だと書いています。HTMLでも同じ考え方で、showModal()で開いたダイアログ以外のページ全体は操作できなくなります。「モーダルウィンドウ」「モーダルダイアログ」はこの状態のウィンドウやダイアログを指す言葉で、モーダル自体は部品の名前ではありません。

ダイアログとは：応答を求める小窓

ダイアログ（dialog）は対話の意味で、確認・警告・短い入力など、ユーザーの応答を得るために出す小さなウィンドウです。「保存しますか？」のように選択肢を示して答えを待つものが典型で、応答を受けたら閉じます。

モーダルダイアログと非モーダルダイアログ

多くのダイアログはモーダルで、答えるまで背後に戻れません。非モーダルダイアログは、文書を編集しながら使う検索・置換パネルのように、開いたまま背後を操作できるものです。Appleのヒューマンインターフェイスガイドライン（HIG）は、iOSとiPadOSのシートにモーダルと非モーダルの両方があるとし、非モーダルの例としてiPhoneとiPadのメモアプリの書式シートを挙げています。

ポップアップ・ポップオーバーとの違い

ポップアップは「前面に飛び出して表示されるもの」全般を指す広い言葉で、ダイアログもトーストもメニューも含みます。ポップオーバーはボタンなどの近くに出る一時的な表示で、Apple HIGは外側をクリックまたはタップすると閉じるのが一般的だと説明しています。応答を強制しない点で、ポップオーバーはダイアログより軽い表示です。Webのpopover属性で出す要素もモーダルにはなりません。値を省略した場合やautoを指定した場合は外側クリックで閉じ、背景のボタンも操作できます。manualを指定した場合は、外側クリックでは閉じません。

ドロワーとモーダルの選定基準：作業中断の必要性

最初に問うべきは部品の見た目ではなく、「今の作業を中断してでも、ユーザーに答えさせる必要があるか」です。

最後の行はよく誤る判断です。Apple HIGのアラートの項は、よく行う取り消せる操作には、それが破壊的な操作であってもアラートを出さないよう求めています。メールやファイルの削除は捨てるつもりで行う操作で、取り消しもできるからです。一方、まれにしか行わない取り消せない破壊的操作では、誤操作に備えてアラートを出すべきだとしています。削除確認では、破壊的かどうかだけでなく、取り消しの可否と操作の頻度を基準にします。

モーダルを避けるべき場面も決めておきます。調べものをしながら入力するフォーム、背後の表と見比べる必要がある詳細表示、複数の手順にまたがる長い入力は、モーダルに閉じ込めると背後を確認できず作業が止まります。こうした内容は別ページか非モーダルのパネルに置きます。業務システムでこの線引きを画面一覧の段階から決めておきたい場合は、UI/UXデザインの支援で設計の相談も受けています。

デザインシステム別の呼び名と扱いの違い

同じ見た目でも、デザインシステムごとに名前と前提が違います。設計書やチケットで使う言葉を、採用しているシステムの用語にそろえると混乱が減ります。

Bootstrap 5.3.8のOffcanvasは、既定で背景（backdrop）を表示し、そのクリックで閉じます。開いている間は<body>のスクロールが止まり、data-bs-scroll="true"で解除、data-bs-backdrop="static"で外側クリックで閉じないようにできます。.offcanvas-lgなどのレスポンシブ用クラスを使うと、指定した幅より狭い画面だけでOffcanvasとして隠す設定にもできます。ReactのUIライブラリでドロワーを組む場合は、Chakra UI Drawerの使い方｜v3の実装とv2からの移行・placement設定を解説や、ダイアログ部品を提供するRadix UIとは？PrimitivesとThemesの違い・導入手順【radix-ui 1.6対応】も参考になります。

Material 3 Expressiveでナビゲーションドロワーは非推奨

Material Components for Androidのドキュメントは、ナビゲーションドロワーについて「being deprecated in the Material 3 expressive update」と明記し、代わりに展開状態のナビゲーションレール（expanded navigation rail）を使うよう案内しています。展開したレールはドロワーとほぼ同じ機能を持ち、ウィンドウの幅の変化にうまく適応するという理由です。レールのドキュメントでも、従来のレールは「collapsed navigation rail」に改称され、「expanded」がナビゲーションドロワーを置き換えると整理されています。

ComposeのAPIリファレンスには2026年9月時点でもModalNavigationDrawerなどが掲載されており、既存アプリのドロワーがすぐ動かなくなるわけではありません。ただし新しく設計する画面では、ドロワーの代わりを画面の幅で選びます。MDC-AndroidのBottomNavigationドキュメントは、画面下部に3〜5個の行き先を並べるナビゲーションバーをcompactとmediumの幅向けとしています。スマホの縦画面ではナビゲーションバー、横幅を確保できる画面では折りたたみと展開を切り替えられるレールを先に検討してください。Material 3の他の変更点はMaterial Design 3（Material 3）とは？Expressiveの変更点と各実装の対応状況にまとめています。

HTMLのdialog要素で実装する手順

Webでモーダルやドロワーを自作する場合、今は<div>とJavaScriptで組むより<dialog>要素を土台にした方が確実です。フォーカスの移動と復元、背景の操作不可、Escキーでの閉じる処理をブラウザが実装済みだからです。主な機能の対応バージョンは次のとおりです（MDN browser-compat-data 8.1.5、2026年10月8日版）。

Edgeの対応バージョンはChromeと同じです（dialog要素のみ79から）。closedby属性は、SafariではTechnology Previewでしか動きません。

確認モーダル：showModal()とform method=”dialog”

取り消せない削除の確認は、次の形が最小構成です。<form method="dialog">の中のボタンを押すとダイアログが閉じ、押したボタンのvalueがreturnValueに入ります。

<button type="button" id="open-delete">削除</button>
<dialog id="confirm-delete" aria-labelledby="confirm-title">
  <h2 id="confirm-title">この案件を削除しますか？</h2>
  <p>削除すると元に戻せません。</p>
  <form method="dialog">
    <button value="cancel" autofocus>キャンセル</button>
    <button value="delete">削除する</button>
  </form>
</dialog>
<script>
const dlg = document.getElementById('confirm-delete');
document.getElementById('open-delete').addEventListener('click', () => {
  dlg.returnValue = '';
  dlg.showModal();
});
dlg.addEventListener('close', () => {
  if (dlg.returnValue === 'delete') {
    // ここで削除処理を呼ぶ
  }
});
</script>

Chrome 155で動かすと、開いた直後のフォーカスはautofocusを付けた「キャンセル」にあり、背後のボタンへフォーカスを移そうとしても移りません。「削除する」を押すとreturnValueは"delete"になり、Escキーで閉じた場合は空文字のままで、どちらの場合もフォーカスは開いた「削除」ボタンに戻りました。HTML Living Standardのdialog要素の節では、Escキーなどの閉じる要求はreturnValueを更新しないので、前回の"delete"が残らないよう、開く前に空文字へ戻しています。取り消せない操作では、W3CのAPGのモーダルダイアログパターンの指針どおり初期フォーカスを破壊的でない側に置きます。

サイドドロワー：closedby=”any”とcommandfor属性

ドロワーも<dialog>で作れます。CSSで画面の左端に寄せ、closedby="any"を付けると外側のクリックでも閉じます。commandforとcommand属性を使えば、開閉にJavaScriptは要りません。

<button type="button" commandfor="site-nav" command="show-modal">メニュー</button>
<dialog id="site-nav" class="drawer" closedby="any" aria-label="サイトメニュー">
  <nav>
    <ul>
      <li><a href="/projects/">案件一覧</a></li>
      <li><a href="/settings/">設定</a></li>
    </ul>
  </nav>
  <button type="button" commandfor="site-nav" command="close">閉じる</button>
</dialog>

<style>
.drawer {
  margin: 0;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: min(320px, 85vw);
  height: 100dvh;
  max-height: none;
  padding: 0;
  border: 0;
}
.drawer::backdrop { background: rgb(0 0 0 / .4); }
html:has(dialog:modal) { overflow: hidden; }
</style>

Chrome 155、ビューポート1000×700pxでの検証では、ドロワーは左端に幅320px・高さ700pxで表示され、フォーカスは先頭のリンク「案件一覧」に移りました。外側のクリック、Escキー、閉じるボタンのいずれでも閉じ、閉じた後は「メニュー」ボタンにフォーカスが戻ります。

dialogの既定スタイルには枠線があり、border: 0を書かないと幅と高さが枠線の分だけはみ出します（同じ条件でborder: 0を外すと、幅326px・高さ706pxになりました）。Safariではclosedbyが効かず外側クリックでは閉じないので、閉じるボタンは省略しないでください。commandforはSafari 26.2から対応のため、それより古い環境を支えるなら、開くボタンでshowModal()、閉じるボタンでclose()を呼ぶスクリプトを併用します。

非モーダルの補足表示：popover属性

入力欄のヒントのように作業を止めたくない表示は、popover属性で作ります。

<button type="button" popovertarget="help">入力のヒント</button>
<div id="help" popover>半角英数字8文字以上で入力してください。</div>

このポップオーバーはモーダルにならず（:modalに一致しない）、外側をクリックすると閉じます。検証では、開いたまま背後の「削除」ボタンを押すと、ポップオーバーが閉じると同時に確認モーダルも開きました。背後の操作を止めたい内容にはpopoverではなくshowModal()を使います。

なおpopover属性だけでは、ポップオーバーはボタンの近くではなく画面の中央に出ます（Chrome 155、ビューポート1000×700pxでは左から336px・上から331pxの位置でした）。ボタンの隣に出すには、CSSのアンカー位置指定で位置を決めます。書き方はCSS Anchor Positioningの使い方｜position-area・@position-tryと対応ブラウザで扱っています。

実装で壊れやすいフォーカス・スクロール・読み上げ

<dialog>を使っても、次の点は自分で確かめる必要があります。

• 背景のスクロール：showModal()は背景の操作を止めますが、スクロールは止めません。前述のhtml:has(dialog:modal) { overflow: hidden; }を外して検証すると、モーダル表示中に背景の上でマウスホイールを回すだけでページがスクロールしました。タッチ操作でのスクロールも、対象の端末で確かめてください。
• フォーカスの復元：HTML Living Standardは、show()とshowModal()の呼び出し時に直前のフォーカス要素を記録します。閉じる際の復元は、モーダルとして開いていた場合、または閉じる時点でフォーカスがダイアログ内にある場合に行われます。開いたボタンを閉じる処理の中で削除すると戻り先が無くなるので、APGが言うように次に操作しそうな要素へ明示的にフォーカスを移します。
• Escキー：showModal()で開いたダイアログは既定でEscキーで閉じます。show()で開いた非モーダルは既定では閉じず、検証でも開いたままでした。閉じ方を変えるならclosedby属性（any・closerequest・none）で指定します。
• 読み上げ：showModal()で開いた<dialog>は暗黙にaria-modal="true"として扱われます。名前はaria-labelledbyで見出しを指すかaria-labelで付けます。MDNのdialog要素の解説は<dialog>自体にtabindexを付けないよう注意しています。
• Tabキーの循環：APGのモーダルダイアログパターンは、最後の要素でTabを押すと先頭へ戻る動きを定めています。<div role="dialog">で自作する場合は、この循環と背景のinert属性の付与を自分で実装することになります。

スクリーンリーダーでの読み上げ順の確かめ方はWebアクセシビリティのスクリーンリーダー対応：NVDA・VoiceOverでの実機検証と読み上げ順序の設計で、roleやaria-*属性の基本はWAI-ARIAとは？role・aria属性の使い方とネイティブHTMLを優先すべき理由で扱っています。

よくある質問

「modal」の意味と読み方は？

読み方はモーダルで、英語では「様式・形式に関する」の意味を持つ形容詞です。UIでは、特定のモードに入り、抜けるまで他の操作を受け付けない状態を指します。反対の状態は非モーダル、またはモードレス（modeless）と呼びます。

システムダイアログとは何ですか？

アプリではなくOSやブラウザが用意しているダイアログのことです。ファイルを開く・保存する画面、印刷の設定画面、位置情報やカメラの利用許可を求める画面などが該当し、変更できる範囲はAPIによって異なります。たとえばWindowsのファイルダイアログでは、IFileDialogのSetTitleやSetOkButtonLabelでタイトルやボタンの文言を指定できます。Webではブラウザのalert()・confirm()・prompt()もブラウザが描くダイアログです。

ダイアログとウィンドウの違いは？

ウィンドウは画面上の表示領域全般を指し、ダイアログはその中でも応答を得るために一時的に開くものを指します。メインのウィンドウは作業の場として開き続けます。ダイアログのうち確認ダイアログは応答後に閉じますが、検索・置換の非モーダルダイアログのように、開いたまま繰り返し使うものもあります。

サイドドロワーとボトムシートはどう使い分けますか？

ナビゲーションや長い項目の一覧はサイドドロワー、今見ている画面に関係する操作や短い選択肢はボトムシートが向きます。スマホでは画面下の方が指が届きやすいので、片手で使う操作はボトムシートに寄せます。ただしMaterial 3ではナビゲーションドロワーが非推奨になったため、Androidのナビゲーションは展開できるナビゲーションレールも候補に入れてください。

dialog要素はすべてのブラウザで使えますか？

<dialog>とshowModal()は、Chrome 37・Firefox 98・Safari 15.4以降の主要ブラウザで使えます。新しいclosedby属性はSafariが未対応で、commandfor属性はSafari 26.2からの対応です。<dialog>は使えるもののcommandfor属性が使えない環境では、開閉ボタンからshowModal()とclose()を呼びます。dialog要素自体が未対応の環境では、別途代替実装が必要です。

関連記事

• Material Design 3（Material 3）とは？Expressiveの変更点と各実装の対応状況
• Chakra UI Drawerの使い方｜v3の実装とv2からの移行・placement設定を解説
• Radix UIとは？PrimitivesとThemesの違い・導入手順【radix-ui 1.6対応】
• 業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定
• WCAGとは？最新版2.2の4原則・達成基準86件とAA適合の範囲