---
title: "ハンバーガーメニューとは？スマホで定番のUIの基礎"
description: "スマホで三本線をタップするとナビゲーションが開くあのUI、なぜ狭い画面で重宝されるのかを理解したい人向けに、ハンバーガーメニューの仕組みと採用を迷うときの向き不向きの判断軸を基礎からまとめます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/hamburger-menu-term"
markdown: "https://giga-site.com/articles/hamburger-menu-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# ハンバーガーメニューとは？スマホで定番のUIの基礎

スマホサイトの右上などにある三本線のアイコン。タップするとメニューがスッと開く、あれがハンバーガーメニューです。この記事では、なぜ狭い画面で重宝されるのか、その仕組みと向き不向きを、初めての人にもわかるように整理します。

> Source HTML: https://giga-site.com/articles/hamburger-menu-term
> Article index: https://giga-site.com/articles/index.md

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

ハンバーガーメニューとは、横三本線のアイコンをタップ（クリック）すると、隠れていたナビゲーションメニューが開く仕組みのことです。三本線がハンバーガーの具に似ていることから、この名前が付きました。

ふだんはメニューを折りたたんでアイコンだけ表示し、必要なときだけ展開します。これにより、画面の狭いスマートフォンでも本文の表示領域を広く保てます。

## なぜスマホで定番になったのか

スマートフォンは画面が小さく、ナビゲーションの項目を常に横並びで置くと本文を圧迫します。ハンバーガーメニューは、項目をいったん隠すことでこの問題を解決します。

アイコン自体も小さく、画面の隅に収まります。少ない場所でたくさんのメニュー項目を抱えられるため、スマホ向けデザインの定番として広く使われるようになりました。

## 実務ではどこで関係する？

ハンバーガーメニューは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

ハンバーガーメニューについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## メリットと、よくある批判

最大のメリットは省スペースです。一方で「メニューが隠れているため気づかれにくい」「重要なリンクへの到達に一手間かかる」といった批判もあります。

そのため近年は、よく使う数項目は画面下部などに常に見える形で置き、残りをハンバーガーにまとめる、といった折衷案も増えています。隠す項目と見せる項目の取捨選択が設計の肝になります。

## 基本の動きを組み立てる手順

ハンバーガーメニューの基本は「アイコンをタップしたら開閉する」だけです。仕組みを順に押さえましょう。

1. 三本線アイコンを画面の隅に配置する
2. メニュー本体を用意し、初期状態では隠しておく
3. アイコンをタップしたらメニューを表示する切り替えを付ける
4. もう一度タップ、または閉じる操作で隠れるようにする
5. 開いていることがアイコンの見た目（×印など）でも分かるようにする
6. スマホとパソコンで表示を切り替える場合は表示幅の基準を決める

## 使いどころの判断とわかりやすさ

メニュー項目が少なく、すべて常に見せられるなら、無理にハンバーガーにする必要はありません。隠すことで使いにくくなる場合もあるからです。項目数や重要度を見て判断します。

採用する場合は、アイコンが「押せるもの」だと一目で分かること、開閉の状態が見た目で伝わることが大切です。ラベルとして小さく「メニュー」と添えるだけでも、迷う人をぐっと減らせます。

## 開閉の使い勝手を実機で確かめる

ハンバーガーメニューは指でタップする操作が中心なので、実際のスマホで押しやすさや開閉のなめらかさを確かめるのが確実です。パソコンの画面だけでは指の操作感までは分かりません。

ギガサイト便なら、作成中のHTMLをドロップして発行されたURLをスマホで開くだけで、手元の端末で開閉を試せます。QRコードの配布にも対応しているので、複数人に配って「押しやすいか」の感想を集める用途にも向いています。

## よくある質問

### なぜ三本線のアイコンなのですか？

横三本線がハンバーガーの具を重ねた形に似ていることが名前の由来です。多くのサイトで採用された結果、利用者の間で「これを押すとメニューが開く」という共通認識が広く根付いています。

### ハンバーガーメニューは使うべきですか？

画面が狭く項目が多い場合は省スペースに有効です。一方でメニューが隠れて気づかれにくい欠点もあるため、項目が少なく常時見せられるなら無理に採用する必要はありません。項目数と重要度で判断しましょう。

### 開いていることをどう伝えればよいですか？

開いたらアイコンを×印に変えるなど、状態が見た目で分かるようにすると親切です。また、アイコンの近くに小さく「メニュー」と添えるだけでも、押せるものだと気づいてもらいやすくなります。

### パソコンでも使ってよいですか？

画面が広いパソコンでは項目を横並びで見せられることが多いため、必ずしも隠す必要はありません。表示幅の基準を決めて、狭い画面ではハンバーガー、広い画面では展開表示、と切り替える設計がよく使われます。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [パンくずリストとは？役割とSEO効果](https://giga-site.com/articles/what-is-breadcrumb/index.md)
- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説](https://giga-site.com/articles/grid-layout-term/index.md)
- [メディアクエリとは？画面幅でデザインを切り替えるCSSの基礎](https://giga-site.com/articles/media-query-term/index.md)
- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [ボックスモデルとは？余白・枠・幅の関係をやさしく解説](https://giga-site.com/articles/box-model-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ハンバーガーメニューとは？スマホで定番のUIの基礎",
  "description": "スマホで三本線をタップするとナビゲーションが開くあのUI、なぜ狭い画面で重宝されるのかを理解したい人向けに、ハンバーガーメニューの仕組みと採用を迷うときの向き不向きの判断軸を基礎からまとめます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/hamburger-menu-term",
  "url": "https://giga-site.com/articles/hamburger-menu-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "なぜ三本線のアイコンなのですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "横三本線がハンバーガーの具を重ねた形に似ていることが名前の由来です。多くのサイトで採用された結果、利用者の間で「これを押すとメニューが開く」という共通認識が広く根付いています。"
      }
    },
    {
      "@type": "Question",
      "name": "ハンバーガーメニューは使うべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "画面が狭く項目が多い場合は省スペースに有効です。一方でメニューが隠れて気づかれにくい欠点もあるため、項目が少なく常時見せられるなら無理に採用する必要はありません。項目数と重要度で判断しましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "開いていることをどう伝えればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "開いたらアイコンを×印に変えるなど、状態が見た目で分かるようにすると親切です。また、アイコンの近くに小さく「メニュー」と添えるだけでも、押せるものだと気づいてもらいやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "パソコンでも使ってよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "画面が広いパソコンでは項目を横並びで見せられることが多いため、必ずしも隠す必要はありません。表示幅の基準を決めて、狭い画面ではハンバーガー、広い画面では展開表示、と切り替える設計がよく使われます。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```