ドロワーメニューとハンバーガーメニューとは？基本の理解
まずは、ドロワーメニューとハンバーガーメニューが何なのかを簡単に説明しましょう。
ドロワーメニューは、画面の横や上からスライドして出てくるナビゲーションメニューのことです。スマホアプリやウェブサイトでよく見られ、画面のスペースを節約しつつ、多くのメニュー項目を隠す用途で使われます。
一方、ハンバーガーメニューは、三本の横線が重なったアイコンを指します。このアイコンはメニューを開くトリガー（きっかけ）となっており、クリックやタップするとドロワーメニューなどの隠れたメニューが表示されます。つまり、ハンバーガーメニューはメニューを開くボタン、ドロワーメニューはそのボタンで開く内容の領域という違いがあります。
この基本理解がないと混同してしまうことが多いので、まずはここを押さえましょう。
ドロワーメニューとハンバーガーメニューの使い方と特徴比較
次に、両者の特徴や使われ方の違いを、わかりやすくまとめます。
ドロワーメニューは
- 画面の端からスライドインして表示される
- 多くのメニューや設定項目を収納できる
- メニューが邪魔にならずに必要なときだけ出せる
一方ハンバーガーメニューは
- 三本線のアイコンで、画面の目立つ位置に置かれることが多い
- シンプルで分かりやすいが、初心者にはメニューだと気づきにくい場合もある
- クリックすることで、ドロワーメニューや他のメニューが開く
つまり、ハンバーガーメニューはドロワーメニューを呼び出すためのボタンとして機能し、ドロワーメニューは実際のメニューリストを表示します。実際の画面では両者がセットで使われることが多いです。
以下の表で両者の違いをまとめてみましょう。
| 項目 | ドロワーメニュー | ハンバーガーメニュー |
|---|---|---|
| 役割 | メニュー内容が表示される領域・パネル | メニューを開くための三本線のアイコン |
| 表示方法 | 画面の端からスライドイン | 画面にアイコンとして常時表示 |
| 特徴 | 収納力が高い、多くの項目を入れられる | 見た目がシンプルで省スペースだが気付かれにくいことも |
| 用途 | アプリやサイトのナビゲーション全体をまとめる | メニューを隠したり表示したりするトリガー |
どんな場面でどちらを使うべき？選び方のポイント
では、ドロワーメニューとハンバーガーメニューをどう使い分けたら良いのでしょうか。
実際は多くの場合、ハンバーガーメニューを画面に置き、それを押すとドロワーメニューがスライドして現れるという組み合わせで使います。
したがって、選ぶというより、両方をセットで上手に使うことが多いと言えます。ただし、以下の点に注意しましょう。
- 訪問者の年齢層やパソコン・スマホの慣れ具合
初心者や高齢者向けの場合、ハンバーガーメニューが何かわからず気づかれにくいので、メニューバーを常に表示した方が親切です。 - メニューの量と内容
メニューが多いならドロワーメニューのような収納型が便利。メニューが少なければ、単純なナビゲーションリンクで十分な場合もあります。 - デザイン全体との調和
アプリやサイトのテーマに応じてシンプルにしたいならハンバーガー+ドロワーが向くこともあれば、目立つメニューバーの方がユーザビリティが増すケースもあります。
以上を踏まえて、うまく二つの特徴を活かしてユーザーに優しいメニューを目指しましょう。
「ハンバーガーメニュー」は、名前の通り三本の横線がパンを重ねたハンバーガーに似ていることから付いた名前です。でも、単なるアイコンと思いきや、実はユーザーがメニューにアクセスするための「スイッチ」の役割を持っています。
面白いのは、このアイコンがスマホやウェブで普及し始めたのは比較的最近のことで、昔は見かけなかったんです。
そのため、慣れていない人には何のアイコンかわかりにくいこともあり、デザインとしては一長一短。特に年齢層が高い方にはわかりにくい場合もあるので、よく使われるけど適切な説明や工夫が必要なんですね。
次の記事： 初心者でもわかる！グローバルナビゲーションとヘッダーの違いとは？ »
ITの人気記事
