ハンバーガーメニューとは？デザイン事例や種類・最適化の方法を紹介

ハンバーガーメニューの基本デザインは3本線のアイコンです。

最近では、3本線以外のアイコンも多くみられます。いくつかハンバーガーメニューの種類を紹介します。

1. 「三本線」アイコン（横3本線）
最も一般的で認識率が高いスタイルです。クリックでオーバーレイやスライドインする定番メニューです。企業サイトでも広く採用されています。

事例　ANA

2. 「三点」アイコン（縦または横に並ぶ3つの●）
1よりミニマルでクリーンな印象を持たれやすく、シンプルな構成のサイトやサブナビゲーションで使われることが多いです。

3. スライドドロワータイプ（画面左右からスライド）
アイコンを押すと、右または左からナビが出現します。メニュー項目が多いサイト向けと言えます。

事例　面白法人カヤック

4. ドロップダウンタイプ
クリックで上部からプルダウンする形のことが多く、PCにも対応した構成で、スクロールしながら使えることもあります。

事例：Grab and Go（フードデリバリー）

5. 全画面オーバーレイメニュー
メニューを開くと画面全体を覆うタイルやスライダー形式のナビが表示されます。強烈な視覚演出と没入感を感じられます。

事例：Yard

6. アコーディオン型多階層メニュー
メニューの下に階層化されたサブメニューがあり、クリックで展開／収縮されます。

事例：エックスサーバーのスマホ版

7. アニメーション切り替え（アイコンが×に変化、変形する）
クリック時に三本線がアニメーションで「×」マークになるなど視覚で状態を示す演出が付いています。UX向上に有効です。

事例：Samsung（モバイルWeb）

8. アイコン＋テキスト（例：「MENU」やロゴ）
「MENU」の文字やロゴと組み合わされ、わかりやすさとブランド性を両立しています。

事例：Polecat Agency

9. 画像／イラストアイコン
手書きのアイコンやイラストや、独自の形状を用いたアイコン。遊び心やブランド性を演出。

事例：Oggy Story

このサイトでは、手描きアイコンを活用しています。

10. 動画や hover に反応するインタラクティブ型
メニュー項目をホバーしたりクリックしたりすると、背景動画や画像が変化する演出がつくなど動きがある仕様です。

事例：The July

このサイトでは、リンクごとに背景画像変化しています。

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

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

「たった3本だけの線で表示されている」
それを押すとナビゲーションメニューが表示されるということを理解することができ、シンプルにメニューの存在をユーザーに伝えることができる。また、このシンプルさから、どのようなデザインにも取り入れる事ができ、デザインの邪魔にならない。

「ヘッダーにスペースができる」
表示領域を多く確保できるため、いろんな見せ方、デザインが可能になる。そのため、ファーストビューで伝えたい事や見せたい事を大きく表示する事ができ、またユーザーの興味・関心を引く事ができる。

「メニューを手軽に設置、変更ができる」
ハンバーガーメニューであれば、ヘッダーには3本の線を設置するだけで、ドロワーメニューに複数のメニューを手軽に設置する事ができる。また、メニューを追加するなど変更の際も、デザインに大きな影響を与えず手軽に変更ができる。

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

「見つけにくい」
普段からスマホやパソコンでWebサイトを閲覧する人であれば、ハンバーガーメニューを押したらメニューが表示されるということはすぐ分かるだろう。しかし、普段あまりWebサイトを閲覧しない人はこの3本の線が何を意味しているのか分からない場合がある。ハンバーガーメニューの普及率が高いとはいえ、メニューだと分かりづらいユーザーが多くいる。

「使いにくい」
右上や左上に設置されている事が多く、スマホのサイズが近年大きくなっているため片手持ちでの指の可動範囲では押しにくい。また、ドロワーメニューを開くとコンテンツの上に重なるように表示されることが多いため、メニューを表示している間は、コンテンツの閲覧ができない

「押すまでメニュー項目が分からない」
ハンバーガーメニューは押してみないと、中にどんなメニューがあるのか分からない。そのため、TOPページなどでコンテンツに興味を持ってもらえないとメニューを開いてもらえない可能性が高い。

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

「【メニュー】【Menu】などを併記する」
3本の線だけだとそれを押すとメニューが表示されると分からないユーザーのために、「メニュー」や「Menu」と併記する事で、「ここを押せばメニューがある」という事が分かりやすくなる。

「ボタンだと分かるように囲いを付ける」
3本の線だけだとボタンとして認識されず、押されない可能性もある。囲いを付ける事でボタンだと認識されやすく、ユーザーが押しやすくなる。

「メニューの数を増やしすぎない」
ドロワーメニュー に複数のメニューが設置できるが、多くのメニューを設置してしまうとメニューの中で迷子になってしまう可能性があるため整理が必要。

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

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

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

LION

※いずれも2023年7月時点

ハンバーガーメニューを最適化するにはどのようにしたら良いか3つのポイントに分けて紹介します。

ブランディング観点や世界観を考慮し、ハンバーガーメニューを実装しましょう。

あらゆる属性のユーザーが訪れるWebサイトであれば、三本線のアイコン「≡」のみでは、展開がイメージしづらい可能性があります。その場合、「≡」の下に、「メニュー」と記載することでどのような展開になるのかがイメージしやすく、より使いやすくなる可能性があります。一方で、メニューと表記をしない方が洗練されたイメージを持ってもらえる場合もあるため、ブランディングの観点を意識してハンバーガーメニューを実装することが大切です。

実際の反応を確認するために、ABテストを行いましょう。ユーザーの反応がA案が良いのか、もしくはB案が良いのかは実際にABテストを行うことで数値として結果が出るため判断が付きやすくなります。アイコンのクリック率が高い方を採用するなど数字を基に反応の良い案で本番への実装を進めることが可能です。

ハンバーガーメニュー内に掲載するリンクはシンプルにするのがおすすめです。

シンプルにすることで、CTA（行動喚起）のボタンのメニューを展開しても隠れず、タップすることが可能になるなど、サイト内でユーザーに取ってもらいたい行動を促すことがしやすくなることもあります。