ハンバーガーメニュー
スマホ表示で、画面右上または左上に配置される三本線アイコン(≡)。タップでサイドからメニューが展開する UI 部品。名称は形がハンバーガーに似ていることから。スマホ画面の限られたスペースを節約する基本パターンで、ほぼすべてのスマホサイトで採用されている。
本書のスタンス(Lesson 4-4)は「主要動線が隠れるデメリットがあり、最重要 CV ボタンはハンバーガー外に置く」。ハンバーガーは「中身が見えない」分、クリック率が下がる傾向があるため、CV ボタン(問い合わせ・購入・電話・LINE)はヘッダ右上に常時露出、または画面下に sticky 表示で配置する。
設計の論点:開閉ボタンの位置(右上が多数派、ロゴが右なら左)、開閉アニメーション(スライド / フェード / ドロワー)、背景のスクロール禁止(開いた状態で背景がスクロールしないよう overflow: hidden を当てる)、キーボード操作・スクリーンリーダー対応(aria-expanded 属性で状態を通知、Esc キーで閉じる)、アクセシビリティ(タップ範囲 44×44px 以上、aria-label でラベル付け)。
落とし穴は、重要 CV をハンバーガー内に閉じ込めて CV 率が下がる、ハンバーガーアイコンに「Menu」と書かない(年配のユーザーに伝わらない)、開いた瞬間に背景がスクロールしてユーザーが混乱、aria-expanded が付いておらず支援技術で状態が伝わらない、Esc で閉じれない、ハンバーガー内のメニュー項目数が多すぎて優先順位が消える、PC でもハンバーガーを使ってクリック効率が悪い。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
- ディレクター
会話上での使用例
業者から提案された SP のヘッダ案を見直す場面
-
業者デザイナー
SP ヘッダはハンバーガーメニューのみのシンプル構成です
-
Web 担当者
問い合わせを CV にしているので、ヘッダ右上に「問い合わせ」ボタンを常時露出、その横にハンバーガーアイコンの 2 つ配置で。電話タップも入れたいので、計 3 アイコンで再設計お願いします
年配ユーザーから「メニューがどこか分からない」と苦情があった場面
-
カスタマーサポート
年配のお客様から「メニューがどこか分からない」と毎月数件
-
Web 担当者
ハンバーガーメニューのアイコンに「MENU」テキストを併記しましょう。年配層は記号だけだと認識できない方が多いです。Lighthouse のアクセシビリティスコアにも反映されます