ハンバーガーメニューとは？サイト事例やエフェクト集を紹介

「ハンバーガーメニューってなに？」
「どんな種類のハンバーガーメニューにするといいの？」

スマートフォンサイトなどでよく見かける、3本線のアイコンでメニューを開くナビゲーションを「ハンバーガーメニュー」と呼びます。

幅広いサイトで使われている一方で、種類や特徴、メリットやデメリットまでは知らないという方も多いのではないでしょうか。

本記事では、ハンバーガーメニューの基本からエフェクト例、実際のサイト例まで紹介します。

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

ハンバーガーメニューとは、3本の横線で表されるナビゲーションアイコンのことです。

見た目がハンバーガーに似ていることから、この名前がつけられました。

WEBサイトで多く導入されており、クリックやタップで隠れていたメニューが開きます。

画面幅が限られるスマートフォンやタブレットなどでよく使われ、情報を整理しながら、必要な項目をコンパクトに表示できるのが特徴です。

ハンバーガーメニューのサンプル

ハンバーガーメニューは、ただ開閉するだけでなく、動きや見せ方によって印象が大きく変わります。

ここでは、クリック時のエフェクトに注目しながら、デザインの参考になるサンプルを紹介します。

エフェクトの違いを見比べることで、サイトに合う表現を考えやすくなるでしょう。

ナビゲーションのアイコンの種類

ナビゲーションアイコンには、一般的なハンバーガーメニュー以外にも複数の種類があります。

形や並び方が異なることで見た目の印象も変わるため、サイトの雰囲気や用途に合わせて選ぶことが大切です。

ここでは代表的な4種類を紹介します。

ナビゲーションメニューのアコーディオンメニューについては、以下の記事で詳しく解説しています。

あわせて読みたい

【初心者向け】WEBデザインで使う「アコーディオンメニュー」って何？ この記事でわかること ✔️ アコーディオンメニューとは何か✔️ アコーディオンメニューを使うメリット✔️ アコーディオンメニ…

1.ミートボールメニュー

ミートボールメニューとは、丸い点が横に3つ並んだナビゲーションアイコンのことです。

ハンバーガーメニューよりも省スペースなため、軽やかでシンプルな印象を与えやすい特徴があります。

主要なメニューよりも、補助的な操作や詳細メニューの表示に使われやすい傾向です。

2.ケバブメニュー

ケバブメニューとは、丸い点が縦に3つ並んだナビゲーションアイコンのことです。

スマートフォンアプリや管理画面などでもよく見られ、設定変更や追加操作など、画面上の補足的なメニューをまとめる際に使われます。

3.ドネルメニュー

ドネルメニューとは、3本の線が上から下に向かって順に短くなるナビゲーションアイコンのことです。

一般的なハンバーガーメニューに似ていますが、線の長さに変化があるため、少し個性的でデザイン性の高い印象を与えられます。

4.弁当メニュー

弁当メニューとは、四角形が3×3に並んだナビゲーションアイコンのことです。

ハンバーガーメニューよりも、一覧性や機能の多さをイメージしやすく、複数の項目やアプリ一覧などをまとめて見せたいときに使われます。

ハンバーガーメニューを使うメリット

ハンバーガーメニューは、限られた画面内でも情報を整理しやすいUIです。

使用するメリットは、次の3つになります。

3本線のアイコンでメニューだと伝えやすい

ハンバーガーメニューのメリットの1つは、3本線のアイコンだけでメニューの存在を伝えやすいことです。

文字で「メニュー」と表示しなくても、ユーザーがナビゲーションだと認識しやすいため、画面をすっきり見せながら必要な導線を確保できます。

シンプルな見た目を保ちやすく、洗練されたデザインや余白を活かしたレイアウトとも好相性です。

情報量が多いサイトでも、整理された印象を与えやすいといえます。

メインビジュアルを大きく見せやすい

ハンバーガーメニューを使うと、メインビジュアルを大きく見せやすくなるのがメリットです。

通常ならヘッダー内に並べる複数のメニュー項目を、省スペースでまとめられるため、その分ファーストビューに余白を確保しやすくなります。

最初に表示される画像やキャッチコピーの存在感が増すことで、サイトの世界観やブランドイメージを印象付けやすくなるでしょう。

メニューを更新しても他の要素に影響しにくい

ハンバーガーメニューは、メニュー項目を独立した範囲にまとめて表示できるため、更新時に他の要素へ影響を与えにくい点もメリットです。

通常のグローバルナビのようにヘッダーへ直接メニュー項目を並べる場合、項目数の増減によってレイアウトが崩れたり、ビジュアルの表示範囲が圧迫されたりすることがあります。

その点、ハンバーガーメニューなら調整範囲を抑えやすく、運用や改善を進めやすい設計にできるのが魅力といえます。

ハンバーガーメニューを使うデメリット

ハンバーガーメニューには便利な面がある一方で、使い方によっては不便さを感じさせることもあります。

特にデメリットとして挙げられるのは、次の2つです。

メニューだと気付かれにくいことがある

ハンバーガーメニューのデメリットは、一部のユーザーにメニューだと気付かれないおそれがあることです。

3本線のアイコンは広く使われている一方で、インターネットに不慣れな人や年齢層によっては、意味が伝わりにくい場合があります。

見た目をシンプルにできても、導線に気付かれなければ必要なページへ移動してもらえません。

そのため、ターゲットによっては「メニュー」の文字を添えるなど、分かりやすさを補う必要があるでしょう。

開くまで内容を確認できない

ハンバーガーメニューは、開く前の状態では中にどのような項目が入っているのか、分からない点もデメリットです。

通常のナビゲーションメニューのように主要なメニューが常に見えていれば、ユーザーは目的のページをすぐに判断できます。

しかし、ハンバーガーメニューでは一度タップしないと内容を確認できません。

そのため、回遊性が下がったり、必要な情報にたどり着くのが遅れたりする可能性があるのがデメリットといえるでしょう。

ハンバーガーメニューのサイト例

ここからは、実際に企業サイトにハンバーガーメニューを導入している例を紹介します。

次の4つのタイプに分けて、スマートフォンで見るハンバーガーメニューの画像も含めて解説します。

横からメニューが出てくる形式

まず、横からメニューが出てくる形式のハンバーガーメニューの事例です。

タップすると画面の横方向からメニューが現れるため、表示の変化が直感的に伝わりやすいのが特徴です。

株式会社TENTIAL

株式会社TENTIALは、リカバリーウェア「BAKUNE」などを展開し、コンディショニングを軸に事業を広げる企業です。

スマートフォンサイトでは、ハンバーガーメニューを開くと横からナビゲーションが現れ、「Service」「Company」などの項目へ移動できます。

情報量は多めですが、カテゴリごとに整理されているため見やすく、コーポレートらしい信頼感と操作性を両立しているのが特徴です。

引用：株式会社TENTIAL

熊本電子ビジネス専門学校

熊本電子ビジネス専門学校は、ITやデジタルクリエイター、医療事務などの知識を学べる専門学校です。

スマートフォンサイトでは、横から展開するハンバーガーメニューを確認でき、「学校案内」や「キャンパスライフ」などの情報へアクセスできます。

学校ならではの豊富な情報を、シンプルで見やすく整理しており、限られた画面幅でも目的のページを探しやすいのが特徴です。

引用：学校法人未来創造学園 熊本電子ビジネス専門学校

株式会社ウィルオブ・ワーク

株式会社ウィルオブ・ワークは、人材派遣や業務支援などを手掛ける企業です。

スマートフォンサイトでは、画面の下部に主要メニューが表示され、右下にハンバーガーメニューを開くボタンが設置されています。

タップすると右横からメニュー項目が現れ、「会社概要」や「特徴」といった情報を確認できます。

また、メニュー上部に求人サイトへのリンクが配置されているため、ユーザーが次の行動へ進みやすい構成です。

引用：株式会社ウィルオブ・ワーク

上下からメニューが出てくる形式

続いて、上下からメニューが出てくる形式のハンバーガーメニューの事例です。

画面の上下方向へ展開することで、表示の変化が伝わりやすく、横スライドとは異なる印象を与えられます。

アスザック株式会社

ファインセラミックスや食品など多角的な事業を展開する、アスザック株式会社の採用サイトの事例です。

スマートフォンサイトでは、ボタンをタップすることで、ハンバーガーメニューが上から下に向かって展開されます。

上下方向に大きく展開することで、情報量の多さを感じさせにくくなっています。

採用サイトならではの「募集要項」や「研修制度・キャリアステップ」といった情報にたどり着きやすいのが特徴です。

引用：アスザック株式会社

ソルー株式会社

ソルー株式会社は、WEBマーケティング支援を行う企業です。

スマートフォンサイトでは、ハンバーガーメニューから「サービス一覧」や「実績紹介」、「会社案内」などの項目へ移動できます。

各項目に番号を付けて整理しているため、情報の流れが分かりやすく、コーポレートサイトとしての整然とした印象につながっています。

また、真上からではなく斜め上から下方向に、ページがめくれるように表示されるため、より印象的な動きになっているのが特徴です。

引用：ソルー株式会社

フェードイン形式

フェードイン形式は、メニューがやわらかく表示されることで、画面の切り替わりを自然に見せやすいハンバーガーメニューです。

動きが強すぎないため、やさしい印象や上品な世界観を大切にしたいサイトと相性がよいといえます。

株式会社DAY TO LIFE

シュークリーム専門店の「ビアードパパ」などを運営する、株式会社DAY TO LIFEの採用サイトの事例です。

スマートフォンサイトでは、右下に用意されたボタンをタップすると、画面全体がなめらかに切り替わり、ハンバーガーメニューを表示させます。

「ABOUT」や「WORKS」といった項目が並び、採用に関する情報を幅広く確認できるようになっています。

引用：株式会社DAY TO LIFE

株式会社モンブラン

株式会社モンブランは、福岡を拠点にブランディングやホームページ制作を手掛けている会社です。

スマートフォンサイトでは、右上のボタンをタップすると、ふわっとした演出でハンバーガーメニューが表示されます。

「実績紹介」や「サービス案内」などの項目が整理され、実績紹介の下には詳細なカテゴリも用意されています。

やわらかい表示で、サイトの世界観を崩さずに情報を届けられる事例といえるでしょう。

引用：株式会社モンブラン

ピーアークホールディングス株式会社

ピーアークホールディングス株式会社は、首都圏を中心に遊戯場を運営する企業です。

スマートフォンサイトでは、右上の青いドットの上にシンプルな3本線でハンバーガーメニューが用意されています。

タップすると、「店舗情報」や「企業情報」などがフェードインで表示され、画面下の方まで広がっています。

画面の切り替えが穏やかで、内容を把握しやすいのが特徴です。

引用：ピーアークホールディングス株式会社

アニメーションを含む形式

最後に、ハンバーガーメニューを開くと、アニメーションが含まれて表示される形式の事例を2つ紹介します。

株式会社peace put

株式会社peace putは、「I’m donut?」をはじめとした、ドーナツショップやベーカリーを運営する会社です。

スマートフォンサイトでは、ハンバーガーメニューを開くと、ブランドの世界観に合った印象的な動きとともに、ナビゲーションが表示されます。

メニュー内には「history＆vision」「brand」といった項目が整理されています。

フォントが下から浮き上がってくるようなアニメーションによって、視線を集めるのが特徴です。

引用：株式会社peace put

おもだか屋

おもだか屋は、株式会社中外陶園が運営する、瀬戸市をはじめとした日本全国の焼き物を販売するお店です。

スマートフォンサイトのハンバーガーメニューを開くと、縦書きになった「お知らせ」や「アクセス」といった項目が、右から順に表示されます。

やさしく落ち着いたサイトデザインに合わせて、メニューの見せ方も主張しすぎず、閲覧の流れを妨げにくいのが特徴です。

派手にならない、ブランドの雰囲気に寄り添ったアニメーションといえます。

引用：おもだか屋

使いやすいハンバーガーメニューを実装するコツ

ハンバーガーメニューは、設置するだけで使いやすくなるわけではありません。

使いやすさを高めるためのコツは、次の2つです。

メニューだとひと目で分かるデザインにする

使いやすいハンバーガーメニューを実装するには、まず「ここを押せばメニューが開く」と直感的に伝わるデザインにすることが大切です。

3本線のアイコンだけでも伝わる場合はありますが、ターゲットによっては意味が伝わりにくいこともあります。

分かりやすさを高めるために、次のような工夫を取り入れてみましょう。

特に、幅広い年齢を想定したサイトや、WEBに不慣れなユーザーを想定するようなサイトでは、デザイン性だけでなく迷わせない設計を優先することが重要です。

重要な導線はメニュー内に詰め込みすぎない

ハンバーガーメニューを使う際は、情報をまとめられるからといって、何でも詰め込みすぎないことも大切です。

項目数が多すぎると、開いたあとに目的のページを探しにくくなり、かえって使いにくくなるおそれがあります。

使いやすさを高めるには、次のように意識して整理するとよいでしょう。

ユーザーにとって、必要な情報へ最短でたどり着けることが、使いやすいメニュー設計の基本です。

情報を設計する視点も含めて、構成を検討しましょう。

WEBデザインを仕事にするには？

ハンバーガーメニューのように、見た目だけでなく「使いやすさ」や「分かりやすさ」まで設計する力は、WEBデザインの現場でも欠かせません。

WEBデザインを仕事にするには、こうしたUI・UXの考え方を身につけることが大切です。

日本デザインスクールでは、知識を学ぶだけでなく、実践的なスキルを身につけることを重視したカリキュラムをご用意しています。

WEBデザイナーとしての働き方について詳しく知りたい方は、ぜひ無料のオンラインセミナーにご参加ください。

まとめ

ハンバーガーメニューは、限られた画面の中で情報を整理しやすく、スマートフォンサイトを中心に広く使われているナビゲーションです。

一方で、ユーザーによっては気付きにくかったり、開かないと内容が分からなかったりする面もあります。

そのため、導入する際は見た目のおしゃれさだけでなく、伝わりやすさや操作性まで考えて設計することが大切です。

メリットとデメリットを理解したうえで、サイトの目的やユーザー層に合わせて取り入れましょう。