ハンバーガーメニュー
スマホ表示で画面の右上または左上に配置される三本線アイコン(≡)です。タップするとサイドからメニューが展開する UI 部品で、名称は形がハンバーガーに似ていることに由来します。スマホ画面の限られたスペースを節約する基本パターンで、ほぼすべてのスマホサイトで採用されています。
実務での鉄則(設計と実装のポイント)
- アイコンと文字のセット：三本線だけでは意味が伝わらない層(シニア層など)に配慮し、アイコンの上下に「MENU」と文字を併記するのが安全です。
- 操作性の確保：指で押しやすいよう、タップ範囲は「44 × 44px 以上」を確保します。
- アクセシビリティ対応：キーボード操作(Esc キーで閉じる)や、スクリーンリーダーにメニューの開閉状態を伝える処理(
aria-expanded属性)をエンジニアに実装してもらいます。 - 開閉時の挙動：メニューを開いた状態では、背後のページがスクロールしないように固定(
overflow: hidden)し、ユーザーの混乱を防ぎます。
実務での落とし穴(よくある失敗例)
- 重要な CV を中に閉じ込める：担当者が最も陥りやすい罠です。「中身が見えない」ハンバーガー内に CTA ボタンを隠すとクリック率が下がります。問い合わせなどは、ヘッダー右上や画面下部の sticky 表示(スクロールしても追従・固定される表示)で常に露出させるのが鉄則です。
- メニュー項目が多すぎる：何でもかんでも詰め込み、優先順位が消滅して迷路のようになっている状態。
- PC でも使ってしまう：画面の広い PC サイトでは、デザイン上の特別な意図がない限り、一覧性の高い通常のナビゲーションにするのが無難です。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
- ディレクター
会話上での使用例
業者から提案されたスマホのヘッダ案を見直す場面
-
業者デザイナー
スマホのヘッダはハンバーガーメニューだけのシンプルな構成でいこうと思います。
-
Web 担当者
問い合わせを CV にしているので、それだとちょっと弱いです。ヘッダ右上に問い合わせボタンを常に出して、その横にメニューのアイコンを置く形にしてもらえますか。電話のタップも入れたいので、3つ並べる前提で組み直してください。
-
業者デザイナー
承知しました。CV ボタンはメニューの中に隠さず、外に出しておく方が安全ですね。
年配のお客様からメニューの場所が分からないと言われた場面
-
カスタマーサポート
年配のお客様から、メニューがどこにあるか分からない、という問い合わせが毎月数件あります。
-
Web 担当者
ハンバーガーメニューのアイコンに、MENU という文字を一緒に表示しましょう。三本線の記号だけだと、それがメニューだと気づけない方が結構いらっしゃるんです。アクセシビリティの評価にもプラスに働きます。