ハンバーガーメニューとは？意味と名前の由来、メリット・デメリット、クリック率を上げる実装方法を解説

公開日：2026-08-19

「ハンバーガーメニューって、なんでハンバーガーって名前がついているんだろう」「スマホサイトの右上によくある3本線のアイコン、正式にはどう呼ぶんだろう」──;Webサイトの制作や運営に関わり始めると、一度は気になるのがこのアイコンの正体です。ハンバーガーメニューは今や当たり前のように使われているUIパーツですが、その裏には1980年代のパソコン黎明期にまでさかのぼる歴史があり、使い方を誤ると離脱率の悪化を招くという調査データも存在します。本記事では、ハンバーガーメニューの基礎知識と名前の由来から、メリット・デメリット、クリック率や認知率を高める具体的な工夫、アクセシビリティに配慮した実装方法、ドロワーメニューの設計パターンまでを体系的に解説します。

ハンバーガーメニューとは？基本の役割をおさらい

ハンバーガーメニューとは、水平に並んだ3本線（または3つの点）のアイコンをタップ・クリックすることで、隠れていたナビゲーションメニューを開閉するUI（ユーザーインターフェース）パーツのことです。多くのWebサイトやスマートフォンアプリで、画面右上または左上に配置されており、タップすると画面の端からドロワー（引き出し）と呼ばれるメニュー一覧がスライドして表示される仕組みが一般的です。

このアイコンの最大の特徴は、複数のナビゲーション項目を1つのボタンに集約できる点にあります。スマートフォンのように画面幅が限られる環境では、すべてのメニュー項目を常時表示すると画面が窮屈になり、コンテンツを読むスペースが圧迫されてしまいます。ハンバーガーメニューを使えば、ふだんは折りたたんでおき、必要なときだけユーザー自身の操作でメニューを呼び出せるため、画面をすっきりと保てるというわけです。現在ではレスポンシブデザインの標準的な構成要素のひとつとして、企業サイト・ECサイト・ブログ・アプリなど、あらゆるジャンルのWebサイトで採用されています。

なぜ「ハンバーガー」と呼ばれる？名前の由来とアイコンの歴史

「ハンバーガーメニュー」という名称は、その見た目に由来しています。同じ太さ・同じ長さの水平線が3本並んだ形が、バンズ（パン）とパティ（具）を積み重ねたハンバーガーの断面に見えることから、開発者やデザイナーの間で自然発生的にそう呼ばれるようになりました。

このアイコンの原型は、意外にも1980年代前半、パーソナルコンピュータの黎明期にまでさかのぼります。GUI（グラフィカルユーザーインターフェース）を早期に採用したことで知られるゼロックス社のワークステーション「Xerox Star」の開発チームに参加していたデザイナー、ノーム・コックス（Norm Cox）氏が、限られたピクセル数（16×16、あるいは13×13ドットという非常に小さな領域）の中で「メニューを開くボタン」を表現するために考案したのがはじまりとされています。コックス氏は、このアイコンについて「道路標識のようにシンプルで機能的に覚えやすく、実際に表示されるメニューリストの見た目を模倣すること」を意図したと語っており、当時は現在のような隠れたナビゲーション全体を表すというよりも、右クリックで表示される文脈依存メニューの「入れ物」としての役割を持たせたデザインでした。

その後、スマートフォンの普及とともに画面幅の制約が強まる中で、このアイコンは「隠れたナビゲーションメニューを開くボタン」という役割で再び脚光を浴び、モバイルサイトやアプリの定番パーツとして世界中に広がっていきました。名前の由来を知っておくと、「なぜ3本線なのか」「なぜこの形が選ばれたのか」という視覚的な必然性が腑に落ちやすく、初心者がUIデザインの基礎を理解するうえでも良い足がかりになります。

ハンバーガーメニューのメリット｜画面をすっきりさせられる理由

ハンバーガーメニューが広く使われている最大の理由は、限られた画面スペースを有効活用できる点にあります。具体的には、次のようなメリットが挙げられます。

このように、ハンバーガーメニューは「画面をすっきりさせたい」「多くのメニュー項目を整理して格納したい」というデザイナー・エンジニア側のニーズに合致した、合理的な選択肢のひとつといえます。

知っておきたいデメリット｜クリック率・発見率が下がるという調査結果

一方で、ハンバーガーメニューには見過ごせないデメリットも存在します。UXリサーチ企業として知られるニールセン・ノーマン・グループ（Nielsen Norman Group）が実施した調査では、ナビゲーションを常時表示または一部表示にした場合と、ハンバーガーメニューで完全に隠した場合とを比較し、次のような差が報告されています。

• ナビゲーションの利用率は、デスクトップで「隠す」場合は27％にとどまったのに対し、「表示・併用」する場合は48〜50％に達した
• モバイルでも「隠す」場合は57％、「表示・併用」する場合は86％と、大きな開きが見られた
• 隠れたナビゲーションでは、タスクの成功率が20％以上低下し、タスクの難易度評価も21％悪化した
• タスクの完了時間は、デスクトップで少なくとも39％、モバイルで15％遅くなった

これは「メニューを隠す＝見えなくする」ことで、ユーザーがその存在自体に気づきにくくなり、結果としてサイト内の回遊や目的の情報への到達が妨げられてしまうことを示すデータです。いわゆる「ハンバーガーメニュー症候群」とも呼ばれるこの現象は、Web担当者やマーケターにとって、離脱率の悪化やコンバージョン率の低下という形で顕在化しかねないリスクといえます。

もちろん、これはハンバーガーメニュー自体が「悪」であることを意味するわけではありません。ニールセン・ノーマン・グループも、隠れたメニューを補完する手段（ページ内リンクや検索機能の設置など）を併用することを推奨しており、要はメニューが「隠れている」という前提を理解したうえで、発見しやすさを高める工夫を重ねることが重要だということです。次の章では、その具体的な工夫を見ていきます。

クリック率・認知率を高める工夫｜テキスト併記とABテスト

ハンバーガーメニューのデメリットを補うために最も効果的とされているのが、アイコンに「メニュー」「MENU」といったテキストラベルを併記する方法です。国内のWebマーケティングメディア「ferret」が実施した、7パターンのハンバーガーメニューデザインを比較するABテストでは、基本の3本線アイコンのみのクリック率を100とした場合、次のような相対的な結果が報告されています。

この結果から読み取れる重要なポイントは2つあります。1つは、アイコンに色を付けるだけでは必ずしもクリック率が上がるとは限らず、むしろ低下したケースがあること。もう1つは、「アイコン＋テキスト＋囲い線」を組み合わせたFタイプが最も高いクリック率を記録しており、単独のテキストや色よりも、複数の視覚的手がかりを重ねることで認知率が高まりやすいということです。また、テキストのみのDタイプと、それに囲い線を加えたEタイプを比べると10ポイント以上の差が生じており、囲い線という「ここはボタンです」というシグナルの有無が、クリックのしやすさに大きく影響することも示唆されています。

マーケターの立場からは、こうした調査結果をそのまま自社サイトに当てはめるのではなく、あくまで「参考値」として捉え、自社のユーザー層・デバイス比率・デザインテイストに応じて、実際にABテストを実施して検証することが望ましいといえます。ハンバーガーメニューは見た目の変更だけで比較的手軽にABテストを回しやすいUIパーツでもあるため、ヒートマップツールやアクセス解析と組み合わせて、継続的に改善を重ねる運用がおすすめです。

効果的な実装方法｜配置・タップ領域・アニメーションの工夫

ハンバーガーメニューを効果的に機能させるためには、デザイン面・実装面の両方で押さえておきたいポイントがあります。

アクセシビリティに配慮した実装のポイント

ハンバーガーメニューは見た目のシンプルさゆえに、スクリーンリーダー利用者やキーボード操作のみでサイトを閲覧するユーザーにとって、その機能がわかりにくくなりがちなパーツでもあります。デザイナー・エンジニアが実装時に押さえておきたいポイントを整理します。

ドロワーメニューの設計パターン｜オフキャンバス・オーバーレイの違い

ハンバーガーメニューをタップした際に開く「ドロワー」には、いくつかの実装パターンがあります。デジタル庁が公開しているデザインシステムでも、ドロワーは「モーダル」な性質を持つコンポーネントと位置づけられており、開いている間は背後のコンテンツに直接アクセスできないようにする設計が基本とされています。代表的な展開パターンとしては次の3つが挙げられます。

オーバーレイ型

背景となるページの上に、半透明の暗いレイヤー（オーバーレイ）を重ねたうえで、画面の一部（右・左・全面）からメニューをスライドさせて表示する方式です。背後のコンテンツが透けて見えるため、「メニューを開いている」という状態が視覚的にわかりやすいのが特徴です。

オフキャンバス型

メニューをあらかじめ画面の外（キャンバスの外側）に配置しておき、開閉時にページ全体、あるいはコンテンツ領域を横方向にスライドさせて表示する方式です。デザインによっては背景コンテンツが押し出されるような動きになり、ネイティブアプリに近い操作感を演出できます。

プッシュ型

オフキャンバス型に近い考え方ですが、メニューが開いた分だけ本体コンテンツの表示位置がずれる（押し出される）レイアウトです。画面全体の構造をシンプルに保ちながら実装できる一方、コンテンツ幅が急に変化するため、レイアウト崩れに注意する必要があります。

いずれの方式を採用する場合でも、「閉じる」ボタンを明確に配置し、ユーザーがメニューを閉じる手段に迷わないようにすることが重要です。加えて、ドロワーが開いている間は背景のスクロールをロックする、メニュー外の領域をタップ・クリックすると自動的に閉じるようにするなど、細部の使い勝手を積み上げることで、迷いにくいサイト設計につながります。

ケバブ・ミートボール・ドネル…他のメニューアイコンとの違い

Webサイトやアプリを見比べていると、ハンバーガーメニューによく似た、点や線で構成された別のアイコンを目にすることがあります。これらは見た目も名前もハンバーガーメニューにちなんで付けられており、それぞれ役割が異なります。

• ハンバーガーメニュー：同じ長さの水平線が3本並んだアイコン。バンズとパティを重ねたハンバーガーに見立てられており、メインのナビゲーションメニューを開く用途で使われます。
• ドネルメニュー：水平線が3本並びつつ、上から下に向かって少しずつ短くなっていく形状のアイコン。串に刺した肉を回転させながら削ぐドネルケバブに見立てられており、小規模なインラインメニューを開く際に使われることがあります。
• ケバブメニュー：3つの点が縦に並んだアイコン。串焼き（ケバブ）に見立てられており、Googleが提唱するMaterial Designの文脈で広まりました。個別のアイテムに対する追加操作メニューを開く際によく使われます。
• ミートボールメニュー：3つの点が横に並んだアイコン。並んだミートボールに見立てられており、ケバブメニューと同様に追加のオプションを表示する用途で使われます。
• 弁当メニュー：正方形の中に9つの四角いドットが並んだアイコン。お弁当箱の仕切りに見立てられており、より多くの選択肢やアプリ一覧を開く際に使われます。

これらはあくまで開発者・デザイナーの間で定着した通称であり、正式な規格として定められているわけではありませんが、名前の由来を知っておくと、デザインカンプやワイヤーフレームのやり取りで「ケバブメニューをここに置いてください」といった指示があった際にも迷わず対応できます。初心者のうちは混同しやすい部分なので、この機会に整理しておくとよいでしょう。

ハンバーガーメニューを使うべきか？代替パターンとの使い分け

ここまで見てきたように、ハンバーガーメニューには「画面をすっきりさせられる」というメリットと、「発見率・クリック率が下がりやすい」というデメリットが共存しています。そのため、すべてのサイトで機械的に採用するのではなく、サイトの目的やユーザー層に応じて代替パターンと使い分けることが望ましいといえます。

ボトムナビゲーション（タブバー）との併用

ECサイトやアプリでは、「ホーム」「検索」「カート」「マイページ」など、利用頻度の高い項目を画面下部に常時表示するボトムナビゲーションを採用し、それ以外の副次的な項目だけをハンバーガーメニューに格納するという設計がよく見られます。主要な導線を隠さずに残すことで、発見率低下のリスクを抑えつつ、画面もすっきりと保てます。

タブ形式・常時表示メニューとの比較

PCサイトやコーポレートサイトのように、画面幅に比較的余裕がある場合は、主要なカテゴリーをタブ形式で常時表示し、ハンバーガーメニューは補助的なメニュー（サイトマップ、言語切り替えなど）にとどめるという選択肢もあります。ニールセン・ノーマン・グループの調査でも、可能な限りナビゲーションを「見せる」ことがユーザーの回遊やタスク成功率の向上につながると報告されており、画面幅に余裕があるデバイスでは、あえてハンバーガーメニューを使わないという判断も検討に値します。

判断に迷ったらABテストで検証する

「うちのサイトはハンバーガーメニューを使うべきか」という問いに唯一の正解はありません。サイトの規模、コンテンツ構成、ユーザー層によって最適解は変わるため、実際にヒートマップやアクセス解析を使い、メニューのクリック率・回遊率・コンバージョン率を測定しながら、必要に応じてABテストで検証していく姿勢が、最終的にはもっとも確実な進め方になります。

デジタルハリウッドでUI/UXデザインを体系的に学ぶ

デジタルハリウッドは、Webデザイナー専攻やUI/UXデザイン専攻をはじめとする専門コースで、未経験からのスキル習得をサポートしてきた専門スクールです。ハンバーガーメニューのような個々のUIパーツの実装知識だけでなく、なぜそのメニューを採用するのか、ユーザーにとって迷いにくい情報設計・ナビゲーション設計とはどのようなものかといった、UI/UXデザインの考え方から体系的に学べるカリキュラムが特長です。HTML/CSSやJavaScriptによるコーディングはもちろん、Figmaを使ったUIデザイン、ユーザー調査やワイヤーフレーム作成といったUXデザインの工程まで一貫して学べるため、Webサイトの制作・運営に携わり始めたばかりの方から、すでに現場で活躍しているデザイナー・エンジニアのスキルアップまで、幅広い層に対応しています。UI/UXデザイナーの仕事内容や必要スキルを確認しながら、自分に合った学び方を検討してみるのもおすすめです。就職・転職サポート体制も整っており、卒業生インタビューでは、実際にどのようにスキルを身につけ、キャリアを築いていったのかを具体的に確認できます。まずは無料のスクール説明会で、カリキュラムや学び方について相談してみてはいかがでしょうか。全国40校舎およびオンラインで受講できます。

まとめ

ハンバーガーメニューとは、3本線のアイコンでナビゲーションを開閉するUIパーツであり、その名前は1980年代にXerox Starのデザイナー、ノーム・コックス氏が考案したアイコンの見た目がハンバーガーに似ていたことに由来します。画面をすっきりさせ、多くのメニュー項目を柔軟に格納できるというメリットがある一方で、ニールセン・ノーマン・グループの調査が示すように、メニューを隠すことでナビゲーションの利用率やタスク成功率が下がりやすいというデメリットも存在します。テキスト併記や囲い線の追加、タップ領域の確保、アクセシビリティへの配慮、そしてボトムナビゲーションなど代替パターンとの使い分けを組み合わせることで、このデメリットは十分にカバーできます。大切なのは、ハンバーガーメニューを「なんとなく」採用するのではなく、自社サイトのユーザー層や目的に照らして、必要であればABテストも活用しながら、迷いにくいナビゲーション設計を積み重ねていくことです。

よくある質問