- スマートフォンアプリでハンバーガーメニュー（≡）をタップすると画面の端からスライドして表示されるナビゲーションメニューのこと。「サイドドロワー」「サイドメニュー」とも呼ばれる
- Google公式のデザインシステム「Material Design」で定義されたUIコンポーネントで、画面内のコンテンツ領域を最大化しつつ複数のナビゲーション項目を格納するための手法として普及した
- モバイルアプリのナビゲーションパターンとしてはボトムナビゲーション（下部タブバー）との使い分けが設計上の重要な判断点で、Googleも2021年以降はボトムナビゲーションを優先推奨している
【深掘り】これだけ知ってればOK！
ナビゲーションドロワーは2013年頃にGmailのAndroidアプリで大規模に採用されてから一気に普及した。FacebookのiOSアプリでも採用されて「ハンバーガーメニュー」という呼び名とともに世界中のアプリに広まった。当時のスマートフォンの物理的なメニューボタンが廃止されたこととも重なり、多くのナビゲーションをまとめる解決策として定着した。
UIデザインの観点では、ナビゲーションドロワーには「発見しにくい」という欠点がある。Snapchatがドロワーを採用した時期にユーザーの解約率が上がったという有名な事例がある。ユーザーがハンバーガーメニューの存在に気づかない・タップしにくいという問題から、Appleは重要なナビゲーションにはボトムタブバーを推奨している。
Webサイトのハンバーガーメニューとモバイルアプリのナビゲーションドロワーは仕組みが似ているが異なる文脈で使われる。Webサイトのハンバーガーメニューは主にモバイルサイトで画面幅が狭い際にナビゲーションを折りたたむためのもので、アプリのナビゲーションドロワーはMaterial Designで定義されたUIコンポーネントだ。
よくある誤解
ナビゲーションドロワー＝全てのアプリで使うべきUIだと思っている
頻繁にアクセスする主要な画面遷移にはボトムナビゲーション（下部タブバー）の方がユーザビリティが高い。片手操作で下部のタブをタップする方がハンバーガーメニューを開くより直感的だ。Googleも2021年以降はボトムナビゲーションを優先推奨している。
ハンバーガーメニュー＝ナビゲーションドロワーと思っている
ハンバーガーアイコン（三本線）はメニューを開くためのトリガーアイコンで、必ずしもナビゲーションドロワーを開くとは限らない。ハンバーガーアイコンが配置されていてもドロップダウンメニューやポップオーバーが開くケースもある。アイコンとUIパターンは別物だ。
会話での使われ方
このアプリ、ハンバーガーメニューにしか設定画面へのリンクがなくてユーザーが見つけられていないようです。ボトムバーに追加することを検討してください。
UXリサーチャーがユーザビリティテストの結果をデザインチームに共有している場面。ナビゲーションの発見しにくさが課題として見えている。
Material Design 3の最新ガイドラインでは、よく使うメニューはボトムナビゲーションに移して、ドロワーは頻度の低いメニューの格納場所として使うのが推奨です。
モバイルアプリのデザイナーがチームに最新のMaterial Designガイドラインの変更点を共有している場面。
Androidのナビゲーションドロワー、画面端から左スワイプでも開けるので、ハンバーガーアイコンが見つからなくてもジェスチャーで操作できます。
アプリサポート担当者がユーザーにナビゲーションドロワーの操作方法を案内している場面。ジェスチャー操作の存在を知らないユーザーは多い。
【まとめ】3つのポイント
- 画面のコンテンツ領域を最大化しながら多数のメニューを格納できる：ハンバーガーアイコンをタップするまでメニューが非表示のため画面を広く使えるが、反面でメニューの存在が発見しにくいというトレードオフがある
- 頻繁アクセス項目はボトムナビゲーションとの使い分けが重要：主要な画面遷移にはボトムナビゲーションを使い、アクセス頻度の低い補助的なメニューや多数の項目をドロワーに格納するという使い分けが現代のモバイルUX設計の標準になりつつある
- Material Design 3では補助的な用途に位置付けが変化している：Googleは2021年以降のガイドライン更新でナビゲーションドロワーの主用途をボトムナビゲーションに移行させており、最新トレンドを追うことがユーザビリティの高いアプリ設計につながる
よくある質問
-
Qナビゲーションドロワーとボトムナビゲーションはどう使い分ければいいですか？
-
A
アクセス頻度が高い主要な画面（ホーム・検索・マイページなど5項目以内）にはボトムナビゲーションが適しています。6項目以上のメニューや設定・ヘルプなどアクセス頻度が低い補助的な機能にはナビゲーションドロワーが適しています。
-
QWebサイトのハンバーガーメニューとアプリのナビゲーションドロワーは同じですか？
-
A
仕組みは似ていますが異なる文脈で使われます。Webサイトのハンバーガーメニューは主にモバイルサイトで画面幅が狭い際にナビゲーションを折りたたむためのものです。アプリのナビゲーションドロワーはMaterial Designで定義されたモバイルアプリのUIコンポーネントです。
-
QナビゲーションドロワーはSwiftUI・Jetpack Composeでどう実装しますか？
-
A
SwiftUI（iOS）では「NavigationSplitView」を使うことでサイドバー形式のナビゲーションを実装できます。Jetpack Compose（Android）では「ModalNavigationDrawer」コンポーネントが用意されており、Material Design 3の仕様に準拠したドロワーを実装できます。
-
Qナビゲーションドロワーとタブバーはどちらがユーザビリティが高いですか？
-
A
一般的にタブバー（ボトムナビゲーション）の方がユーザビリティが高い場合が多いです。「常に表示されていて発見しやすい」「タップ領域が大きく操作しやすい」「現在地が一目でわかる」という点が理由です。ドロワーは発見しにくさとタップ操作の手間という課題があります。
この用語と一緒に知っておきたい用語
| 用語 | この記事との関連 |
|---|---|
| アイコン | アイコンを押さえると本記事の理解がさらに深まります。アプリやファイル、操作ボタンなどをひと目でわかる小さな絵で表したもの、それがアイコンだ |
| ユーザビリティ | 本記事のテーマと実務上セットで使われることが多い用語です。ユーザビリティの主要な特徴と用途を理解することで、関連する技術・制度・概念を正確に把握できるようになる |
| サイト | サイトは関連分野でよく登場する重要キーワードです。関連する複数のWebページを、一つのまとまりとして束ねたもの、それがサイトだ |
| コンポーネント | コンポーネントは関連分野でよく登場する重要キーワードです。コンポーネントの主要な特徴と用途を理解することで、関連する技術・制度・概念を正確に把握できるようになる |
| スマートフォン | スマートフォンを押さえると本記事の理解がさらに深まります。スマートフォンの主要な特徴と用途を理解することで、関連する技術・制度・概念を正確に把握できるようになる |
【出典】参考URL
https://m3.material.io/components/navigation-drawer/overview ：Material Design 3 ナビゲーションドロワーの公式ガイドライン
https://developer.android.com/develop/ui/compose/components/drawer ：Android公式ナビゲーションドロワーの実装ガイド
https://www.nngroup.com/articles/hamburger-menus/ ：Nielsen Norman Group「ハンバーガーメニューのユーザビリティ研究」
コメント