ハンバーガーメニューとは

ハンバーガーメニューとは、サイト内の三本線のナビゲーションメニューで、クリックすると隠れている情報が表示される仕組み。主にスマートフォンのＵＩデザインとして用いられている。スマートフォンでは、パソコンと比べて画面サイズに制限があるため、グローバルナビゲーションなどを表示させると画面上が情報過多になってしまうため、ハンバーガメニューの中に隠すことで情報を整理している。

3本の線がパンでハンバーガーのように見えるのが、ハンバーガーメニューの由来である。この3本線のハンバーガーメニューを押すとスライドして出てくるメニューを、引き出しに似ていることから「ドロワーメニュー」と呼ぶ。

ハンバーガーメニューの必要性・メリットは、①「たった3本の線が表示されている」②「ヘッダーにスペースが出来る」③「メニューを手軽に設置、変更が出来る」が挙げられる。

1. 「たった3本だけの線で表示されている」
   それを押すとナビゲーションメニューが表示されるということを理解することができ、シンプルにメニューの存在をユーザーに伝えることができる。また、このシンプルさから、どのようなデザインにも取り入れる事ができ、デザインの邪魔にならない。
2. 「ヘッダーにスペースができる」
   表示領域を多く確保できるため、いろんな見せ方、デザインが可能になる。そのため、ファーストビューで伝えたい事や見せたい事を大きく表示する事ができ、またユーザーの興味・関心を引く事ができる。
3. 「メニューを手軽に設置、変更ができる」
   ハンバーガーメニューであれば、ヘッダーには3本の線を設置するだけで、ドロワーメニューに複数のメニューを手軽に設置する事ができる。また、メニューを追加するなど変更の際も、デザインに大きな影響を与えず手軽に変更ができる。

ハンバーガーメニューのデメリットは、①「見つけにくい」②「使いにくい・タップ数が増える」③「押すまでメニュー項目が分からない」が挙げられる。

1. 「見つけにくい」
   普段からスマホやパソコンでWebサイトを閲覧する人であれば、ハンバーガーメニューを押したらメニューが表示されるということはすぐ分かるだろう。しかし、普段あまりWebサイトを閲覧しない人はこの3本の線が何を意味しているのか分からない場合がある。ハンバーガーメニューの普及率が高いとはいえ、メニューだと分かりづらいユーザーが多くいる。
2. 「使いにくい」
   右上や左上に設置されている事が多く、スマホのサイズが近年大きくなっているため片手持ちでの指の可動範囲では押しにくい。また、ドロワーメニューを開くとコンテンツの上に重なるように表示されることが多いため、メニューを表示している間は、コンテンツの閲覧ができない
3. 「押すまでメニュー項目が分からない」
   ハンバーガーメニューは押してみないと、中にどんなメニューがあるのか分からない。そのため、TOPページなどでコンテンツに興味を持ってもらえないとメニューを開いてもらえない可能性が高い。

ハンバーガーメニューの利用時の注意点として①「【メニュー】【Menu】などを併記する」②「ボタンだと分かるように囲いを付ける」③「メニューの数を増やしすぎない」が挙げられる。

1. 「【メニュー】【Menu】などを併記する」
   3本の線だけだとそれを押すとメニューが表示されると分からないユーザーのために、「メニュー」や「Menu」と併記する事で、「ここを押せばメニューがある」という事が分かりやすくなる。
2. 「ボタンだと分かるように囲いを付ける」
   3本の線だけだとボタンとして認識されず、押されない可能性もある。囲いを付ける事でボタンだと認識されやすく、ユーザーが押しやすくなる。
3. 「メニューの数を増やしすぎない」
   ドロワーメニュー に複数のメニューが設置できるが、多くのメニューを設置してしまうとメニューの中で迷子になってしまう可能性があるため整理が必要。

上部にハンバーガーメニューを設置

• マクドナルド（3本線のみ）
• クロネコヤマト（メニュー併記）

下部にハンバーガーメニューを設置

• LION