ハンバーガーメニューのデザイン30選｜CSS実装とスマホで使いやすいUI設計

Webサイトのナビゲーションをコンパクトにまとめられる ハンバーガーメニューは、スマートフォンサイトを中心に広く使われているUIです。

一方で、三本線のボタンを設置するだけでは、見つけにくさや操作しにくさにつながることがあります。 ハンバーガーメニューを設計するときは、見た目だけでなく、 ボタンの位置、開閉アニメーション、タップ領域、アクセシビリティ まで考えることが重要です。

この記事では、Webデザイナー向けに ハンバーガーメニューのデザイン30種類を紹介します。 そのうち5種類は実際に操作できるCodePenデモを掲載し、 残り25種類はレイアウトや演出のアイデアとしてまとめています。

この記事でわかること

• ハンバーガーメニューの基本的な役割
• CSSとJavaScriptを使った実装方法
• スマートフォンで操作しやすいボタン配置
• ハンバーガーメニューのデザイン30種類
• レスポンシブ対応とアクセシビリティのポイント
• 実装時に起こりやすい不具合と対処法

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

ハンバーガーメニューとは、一般的に三本の横線で表現されるナビゲーションボタンです。 ボタンを押すと、画面外や非表示領域に格納されていたメニューが表示されます。

限られた画面内に多くの情報を表示する必要があるスマートフォンでは、 グローバルナビゲーションを常時表示するとコンテンツ領域が狭くなります。 そこで、必要なときだけナビゲーションを呼び出せるハンバーガーメニューが利用されています。

現在では三本線だけでなく、9個のドット、円形ボタン、「MENU」という文字、 カード型のボタンなど、さまざまな表現が使われています。

メリット

💻 画面を広く使える

ナビゲーションを普段は非表示にすることで、写真やコピー、商品情報など、 メインコンテンツを大きく見せられます。 特にビジュアルを重視するブランドサイトや採用サイトと相性のよい設計です。

🔗 多くのリンクを整理できる

メニュー内で情報をグループ化できるため、ページ数が多いWebサイトでも ナビゲーションをコンパクトに整理できます。

🎨 デザインの世界観を保ちやすい

ファーストビューにナビゲーション項目を並べずに済むため、 余白を生かしたレイアウトや没入感のあるデザインを作りやすくなります。

デメリット

👀 メニュー項目が最初から見えない

メニューを開くまでリンクの内容が分からないため、 ユーザーが目的のページに気づきにくくなる可能性があります。

重要なページはハンバーガーメニュー内だけに格納せず、 ファーストビューや固定ナビゲーションにも導線を用意すると効果的です。

🖱️ 操作数が増える

目的のページへ移動するために「メニューを開く」「項目を選ぶ」という 2段階の操作が必要です。 利用頻度の高い機能は、ボトムナビゲーションなどで常時表示する方法も検討しましょう。

❓ アイコンだけでは意味が伝わらない場合がある

三本線の意味に慣れていないユーザーもいるため、 アイコンの下や横に「MENU」と表示すると認識しやすくなります。

デザイン実装5選

ここでは、HTML・CSS・JavaScriptで実装した5種類のメニューを紹介します。 CodePen上で実際の動きやレスポンシブ表示を確認できます。

1. 右から表示するスライドメニュー

画面右側からナビゲーションがスライドして表示される、基本的な構成です。 ユーザーが動きを予測しやすく、コーポレートサイトやサービスサイトなど幅広く利用できます。

デザインのポイント

• メニューを開くと三本線を×へ変形させる
• 背景にオーバーレイを表示してメニューへ視線を誘導する
• 画面外を押しても閉じられるようにする
• メニュー表示中は本文のスクロールを停止する

---

2. スマホ向けボトムシートメニュー

画面下部のボタンを押すと、メニューが下からせり上がるデザインです。 スマートフォンを片手で持ったときに親指が届きやすく、 上部にボタンを配置する一般的なハンバーガーメニューより操作しやすくなります。

デザインのポイント

• ボタンを右手の親指が届きやすい右下に配置する
• 各項目のタップ領域を十分に確保する
• iPhoneのセーフエリアを考慮する
• 上方向のスワイプを連想できるレイアウトにする

---

3. 写真とナビゲーションを分けたスプリットメニュー

画面をビジュアル領域とナビゲーション領域に分割するデザインです。 左側に写真や動画、右側にメニューを配置することで、 ナビゲーションを表示している間もブランドの世界観を伝えられます。

デザインのポイント

• 写真とナビゲーションの比率をコンテンツ量に合わせる
• スマートフォンでは上下に積み替える
• メニュー項目にマウスを重ねると写真が切り替わる演出も有効
• 閉じるボタンが写真やメニューの下に隠れないようにする

---

4. 縦スクロールで選択するリボルバーメニュー

円形のメニューボタンを軸として、長方形の項目が回転するように並ぶデザインです。 メニューを開いている間はページスクロールを停止し、 縦方向のスクロール量を項目選択に利用します。

デザインのポイント

• 選択中の項目を最も濃く表示する
• 選択位置から離れるほど透明度を高くする
• ホイールと縦スワイプの両方に対応する
• 操作方法が分かりにくい場合は初回のみガイドを表示する

---

5. 3×3のグラスモーフィズムメニュー

9個のメニューを正方形のグリッドで表示するデザインです。 メニューボタンにも9個のドットを使用することで、 ボタンを押した後に表示される内容を視覚的に予測できます。

デザインのポイント

• 各カードにaspect-ratio: 1;を設定する
• 左上から右下へ順番にフェードインさせる
• 閉じるときは右下から左上へ逆順に消す
• 各ページの内容に合ったラインアイコンを使用する
• 半透明の背景、境界線、ぼかしでグラスモーフィズムを表現する

デザインアイデア25選

続いて、ハンバーガーメニューへ応用できる25種類のデザインアイデアを紹介します。 すべてを複雑に実装するのではなく、Webサイトの目的や利用者に合うものを選ぶことが重要です。

6. フルスクリーンメニュー

画面全体をナビゲーションに切り替える構成です。 大きな文字や余白を使いやすく、ブランドサイトやポートフォリオに向いています。

7. オフキャンバスメニュー

メニューを画面外に配置し、操作時に横から表示します。 本文とメニューの領域を明確に分けられる定番の構成です。

8. プッシュメニュー

ナビゲーションが出現すると、本文全体が横へ押し出されます。 メニューと本文の位置関係を理解しやすいデザインです。

9. 上から降りるドロップダウンメニュー

ヘッダーの高さが広がり、上部からナビゲーションが表示されます。 横幅を生かしたレイアウトに向いています。

10. アコーディオン型メニュー

子カテゴリを必要なときだけ展開します。 ページ数の多いコーポレートサイトやECサイトに適しています。

11. メガメニュー型

カテゴリ、説明、画像などを一画面にまとめます。 情報量が多いサイトでもページ構造を把握しやすくなります。

12. カードスタックメニュー

メニュー項目を重なったカードとして表示し、順番に展開します。 コンテンツをカードで構成するサイトと相性のよい表現です。

13. 円形ラジアルメニュー

中央や画面端のボタンを起点に、項目を放射状に展開します。 項目数が3〜5個程度の場合に適しています。

14. フローティングアクションメニュー

画面上に浮いたボタンから主要な操作を展開します。 Webアプリやモバイルファーストのサービスに向いています。

15. ボトムナビゲーション併用型

よく使う機能を画面下部へ常時表示し、 それ以外をハンバーガーメニューに格納します。

16. 文字だけのMENUボタン

三本線を使わず、「MENU」と「CLOSE」の文字だけで開閉状態を表現します。 シンプルで意味が伝わりやすい方法です。

17. 二本線のメニューボタン

三本線よりも軽い印象を与えられます。 線の長さを変えることで、ミニマルながら個性を出せます。

18. 9ドットのグリッドボタン

アプリ一覧や複数サービスへの導線であることを連想させます。 グリッドメニューと組み合わせると一貫性が生まれます。

19. 円形アウトラインボタン

細い境界線でボタンを囲むデザインです。 写真を大きく使ったファーストビューにもなじみやすくなります。

20. 塗りつぶし型ボタン

ボタンに明確な背景色を設定します。 背景写真やグラデーション上でも視認性を保ちやすい方法です。

21. グラスモーフィズムボタン

半透明の背景とぼかしを使った表現です。 背景に埋もれないよう、境界線や影を併用します。

22. グラデーションボタン

ブランドカラーのグラデーションを使い、 メニューボタンをデザイン上のアクセントとして見せます。

23. ハンバーガーから×へ変形するボタン

三本線を回転・移動させ、閉じるアイコンへ変形させます。 現在の開閉状態を直感的に伝えられる定番のアニメーションです。

24. ボタン自体が拡大するモーフメニュー

小さなボタンが画面全体へ広がり、そのままメニュー背景になります。 開く前後の連続性を表現できます。

25. クリップパスで開くメニュー

円形や多角形のマスクを広げてナビゲーションを表示します。 印象的な演出を比較的少ない要素で実装できます。

26. ブラーで切り替わるメニュー

本文をぼかしながらメニューを表示します。 背景との階層差が生まれ、ナビゲーションへ視線を集められます。

27. 項目が順番に現れるステップ表示

各項目に異なる遅延時間を設定し、 上から下または左上から右下へ順番に表示します。

28. 画像が連動するプレビューメニュー

項目にマウスを重ねると、関連する写真や動画へ切り替わります。 制作実績やサービス内容を視覚的に伝えられます。

29. 数字付きナビゲーション

「01」「02」のような番号を付け、情報の順番や構造を見せます。 制作会社やポートフォリオサイトで使いやすい表現です。

30. 検索一体型コマンドメニュー

ナビゲーションと検索フォームを同じパネルにまとめます。 ページ数が多いメディアやドキュメントサイトに適しています。

CSSだけでハンバーガーメニューは作れる？

ハンバーガーメニューは、チェックボックスと :checkedを組み合わせることで、CSSのみでも開閉できます。 <details>要素を利用する方法もあります。

ただし、実際のWebサイトでは次の処理が必要になることがあります。

• メニュー表示中のスクロール停止
• Escキーによる閉じる操作
• メニュー外をクリックしたときの閉じる操作
• フォーカス位置の管理
• 開閉後のフォーカス移動
• 画面幅に応じた状態のリセット

CSSのみの実装はシンプルですが、操作性やアクセシビリティまで考慮する場合は、 JavaScriptを併用した方が管理しやすくなります。

🧑‍💻 基本的なHTML

<button
  type="button"
  class="c-menuButton"
  aria-label="メニューを開く"
  aria-controls="globalMenu"
  aria-expanded="false"
>
  <span></span>
  <span></span>
  <span></span>
</button>

<nav
  id="globalMenu"
  aria-hidden="true"
>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">私たちについて</a></li>
    <li><a href="/service/">サービス</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

ボタンにはaria-controlsとaria-expandedを設定し、 どのメニューを操作するボタンなのか、現在開いているのかを伝えます。

🧑‍💻 CSSで作る方法

.c-menuButton {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.c-menuButton span {
  width: 28px;
  height: 2px;
  background: #222;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition:
    top 0.3s ease,
    transform 0.3s ease,
    opacity 0.3s ease;
}

.c-menuButton span:nth-child(1) {
  top: 14px;
}

.c-menuButton span:nth-child(2) {
  top: 23px;
}

.c-menuButton span:nth-child(3) {
  top: 32px;
}

.c-menuButton.is-active span:nth-child(1) {
  top: 23px;
  transform: translateX(-50%) rotate(45deg);
}

.c-menuButton.is-active span:nth-child(2) {
  opacity: 0;
}

.c-menuButton.is-active span:nth-child(3) {
  top: 23px;
  transform: translateX(-50%) rotate(-45deg);
}

🧑‍💻 JavaScriptでメニューを開閉する方法

document.addEventListener('DOMContentLoaded', function () {
  const menuButton = document.querySelector('.c-menuButton');
  const globalMenu = document.querySelector('#globalMenu');

  if (!menuButton || !globalMenu) {
    return;
  }

  menuButton.addEventListener('click', function () {
    const isOpen =
      menuButton.getAttribute('aria-expanded') !== 'true';

    menuButton.classList.toggle('is-active', isOpen);
    globalMenu.classList.toggle('is-active', isOpen);
    document.body.classList.toggle('is-menuOpen', isOpen);

    menuButton.setAttribute(
      'aria-expanded',
      String(isOpen)
    );

    menuButton.setAttribute(
      'aria-label',
      isOpen
        ? 'メニューを閉じる'
        : 'メニューを開く'
    );

    globalMenu.setAttribute(
      'aria-hidden',
      String(!isOpen)
    );
  });
});

スマホで使いやすいハンバーガーメニューの設計

👆 タップ領域を十分に確保する

三本線の見た目が小さくても、ボタン要素には十分な幅と高さを設定します。 アイコンの線だけをクリック領域にすると、指で正確に押しにくくなります。

.c-menuButton {
  width: 48px;
  height: 48px;
}

---

🖐️ 片手操作を考えて配置する

右上は一般的で見つけやすい位置ですが、大きなスマートフォンでは親指が届きにくいことがあります。 モバイルファーストのサービスでは、右下のフローティングボタンや画面下部のナビゲーションも選択肢になります。

---

📱セーフエリアへ対応する

画面下部へボタンを固定する場合は、 iPhoneのホームインジケーターと重ならないようにします。

.c-menuButton {
  position: fixed;
  right: 16px;
  bottom: calc(
    16px + env(safe-area-inset-bottom, 0px)
  );
}

---

🚥 メニュー表示中のスクロールを制御する

メニューの背後にある本文が同時に動くと、現在位置を見失いやすくなります。 全画面メニューを表示している間は、本文のスクロールを停止します。

body.is-menuOpen {
  overflow: hidden;
}

レスポンシブ対応の考え方

PCではグローバルナビゲーションを常時表示し、 スマートフォンだけハンバーガーメニューに切り替える構成が一般的です。

.c-menuButton {
  display: none;
}

@media screen and (max-width: 768px) {
  .c-menuButton {
    display: block;
  }

  .c-globalNavigation {
    display: none;
  }

  .c-globalNavigation.is-active {
    display: block;
  }
}

JavaScriptでメニューを開いたまま画面幅を広げた場合、 bodyのスクロール停止状態が残ることがあります。 ブレークポイントをまたいだときに状態をリセットする処理も検討しましょう。

アクセシビリティで確認したい項目

• メニューボタンにbutton要素を使用する
• aria-expandedで開閉状態を伝える
• aria-controlsで操作対象を関連付ける
• 開閉に合わせてaria-labelを変更する
• Escキーでも閉じられるようにする
• キーボードだけでも項目を選択できるようにする
• フォーカス中の要素が視覚的に分かるようにする
• 動きを減らす設定を尊重する

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

よくある不具合

メニューを開くと閉じるボタンが消える

親要素によって新しいスタッキングコンテキストが作られ、 メニューがボタンより前面に表示されている可能性があります。 ボタン単体のz-indexだけでなく、親要素の重なり順も確認します。

閉じた後もページをスクロールできない

メニューを閉じる処理で、bodyに付与したクラスを 削除できているか確認しましょう。 アニメーション完了待ちの処理がある場合は、タイマーやクラスの競合にも注意します。

iPhoneで高さがずれる

モバイルブラウザではアドレスバーの表示状態によって 100vhの高さが想定と異なる場合があります。 全画面メニューでは100dvhや100svhも検討します。

背景をスクロールできてしまう

タッチ操作では、overflow: hidden;だけでなく、 オーバースクロールやタッチイベントの制御が必要になる場合があります。

開閉を繰り返すとアニメーションが崩れる

開くクラスと閉じるクラスが同時に残っていないか確認します。 連続クリックを許可する場合は、タイマーを解除してから新しい状態へ切り替えます。

ハンバーガーメニューを選ぶときの基準

ハンバーガーメニューのデザインは、見た目の新しさだけで決めるものではありません。 次の基準をもとに選びましょう。

• ユーザーが頻繁に利用するページは何か
• メニュー項目はいくつあるか
• 片手操作を重視するか
• 写真や動画の世界観を保ちたいか
• メニュー内でカテゴリを階層化する必要があるか
• 操作方法をユーザーがすぐ理解できるか
• キーボードや支援技術でも利用できるか

デザインより先に導線を考える

印象的なアニメーションを追加しても、目的のページへ移動しにくければ、 ナビゲーションとして使いやすいとはいえません。 まず情報の優先順位と操作方法を決め、その後にサイトの世界観に合う表現を選びましょう。

まとめ

ハンバーガーメニューは、限られた画面内にナビゲーションを整理できる便利なUIです。 一方で、メニュー項目が隠れる、操作数が増える、ボタンの意味が伝わりにくいといった課題もあります。

実装するときは、ボタンの見た目だけでなく、 タップ領域、配置、スクロール制御、開閉状態、キーボード操作、アクセシビリティ まで確認することが大切です。

一般的なスライドメニューだけでなく、ボトムシート、スプリット、 リボルバー、グリッドなど、サイトの目的に合わせてさまざまな形式を選べます。 ユーザーが迷わず操作できることを前提に、Webサイトの世界観に合ったデザインを取り入れてみてください。

よくある質問