ハンバーガーメニューとは何かと基本構造やメリットを初心者向けに徹底解説【実装例付き】

Webサイトやアプリのデザインで「ハンバーガーメニュー」という言葉を目にしたことはありませんか？スマートフォンで閲覧されるWebサイトの約80%が、この三本線アイコンを取り入れているほど、現代のネット体験に欠かせないUI要素となっています。

一方で、「訪問者がメニューに気付かず、重要なページへの導線を逃してしまう」「PCとスマホでデザインが崩れやすい」「設置方法が分からず困っている」といった悩みや不安も多く寄せられています。【Google Maps】や【Adidas公式サイト】など、世界的なサービスがどのようにハンバーガーメニューを活用しているのか、その“設計思想”や“最適な使い方”は意外と知られていません。

実際、ハンバーガーメニューは誕生から30年以上が経ち、ドロワーメニューやミートボールメニューなど多様な派生デザインも登場。適切に設計すればクリック率やCVRに明確な差が生まれることも実証されています。

「自分のWebサイトやアプリに本当に効果的なのか？」「導入時にありがちな失敗を避けるには？」と迷っているあなたへ。本記事では、基礎知識からデザイン実例・最新のUXトレンドまで、現場の知見と信頼できるデータを交えて“使えるハンバーガーメニュー”を徹底解説します。

迷いを解消し、すぐに役立つ情報が満載です。続きをご覧ください。

ハンバーガーメニューとは何か？基礎知識と名称の由来

ハンバーガーメニューの名前の由来と歴史的背景

ハンバーガーメニューは、三本線のアイコンが特徴的なナビゲーションUIです。この三本線が、バンズとパティで構成されるハンバーガーの形に似ていることから「ハンバーガーメニュー」と呼ばれるようになりました。元々は1981年にゼロックスのUIデザイナーが考案し、その後スマートフォンやウェブサイトのデザインで急速に普及しました。モバイルファーストの流れが定着し、画面スペースを有効活用する必要性から多くのwebサイトやアプリで標準的に使われています。

ハンバーガーメニューの概要	内容
アイコンの形	横向き三本線
名称の理由	ハンバーガーの断面に似ているため
初登場	1981年 ゼロックス社のUI
現在の用途	スマホ・PCのサイトやアプリで幅広く利用

類似UIとの違い（ドロワーメニューやミートボールメニューとの比較）

ハンバーガーメニューと混同されやすいUIに「ドロワーメニュー」や「ミートボールメニュー」がありますが、それぞれ用途やデザインが異なります。

• ハンバーガーメニュー：ナビゲーションメニューを隠す三本線のアイコン。クリックやタップでメニューが表示される。

• ドロワーメニュー：画面外からスライドする形でナビゲーションが現れるUI。ハンバーガーメニューと併用されることが多いですが、ドロワー自体は表示手法を指します。

• ミートボールメニュー：縦三点（⋮）や横三点（…）のアイコンで、追加オプションや操作を示す。主に個別機能のアクションをまとめるために使用されます。

アイコン	主な用途	代表的な場所
三本線（ハンバーガー）	ナビゲーションの開閉	サイトのヘッダー・アプリ上部
三点（ミートボール）	詳細・追加オプションの表示	各カード・リスト右端
下からスライド（ドロワー）	公開・非公開のナビゲーション	サイドバー

上記のように視認性や用途、設計意図に合わせて使い分けが必要です。

ハンバーガーメニューの派生デザイン例と現代の使われ方

ハンバーガーメニューは進化し、多様な派生形が登場しています。

• ミートボールメニューやドットメニュー：ハンバーガーの三本線に対し、点で表現されるアイコン。これらは一部の操作やオプションに多く使われます。

• カスタムアニメーション付きメニュー：従来のスライド表示だけでなく、展開時にバウンドやフェードのアニメーションを加え、操作ストレスを減らす工夫が進んでいます。

• レスポンシブデザイン対応：PCとスマホで表示方法を変えるなど、ユーザー体験を損なわない柔軟な実装が主流です。

現代のwebサイトやアプリでは、ハンバーガーメニューはユーザーの行動導線を妨げず、必要な時だけすぐアクセスできるナビゲーション手法として不可欠な存在です。今後も用途や見た目を進化させながら、多様なデザインの一部として利用され続けるでしょう。

ハンバーガーメニューの基本構造と技術的仕組み

HTMLとCSSによる基本的なハンバーガーメニュー実装

ハンバーガーメニューは、主に三本線のアイコンで表現され、タップやクリックでナビゲーションメニューを表示する仕組みを持っています。HTMLとCSSのみでも実装が可能で、特にスマホやレスポンシブ対応Webサイトでは欠かせない存在です。基本のHTML構造は次の通りです。

要素	役割
nav	メニュー全体の領域を定義
input/label	チェックボックスとラベルで三本線を形成
ul/li	メニュー項目リスト

このようにシンプルな構造をCSSで装飾することで、ユーザーに直感的な操作性を提供します。モバイル表示では非表示、クリックやタップで展開される仕組みが主流です。ユーザビリティやSEO観点からも必要なナビゲーションはHTMLで用意し、スタイリングや動作をCSSで制御します。

シンプルでおしゃれなCSSハンバーガーメニューコード集

デザイン性と操作性を追求したハンバーガーメニューは、CSSだけで多彩な表現が可能です。近年では、アイコン自体のおしゃれさや開閉アニメーションも重視されており、工夫次第で自由度が広がります。以下は人気の実装パターンです。

• 三本線アニメーション：三本線が閉じるときに「×」に変形し、視認性と遊び心をプラス

• 横からスライド表示：メニューが右や左からスライドし、動きのあるUIを実現

• ドロワーメニュー風：画面全体を覆うことで、集中してナビゲートできる

実装には媒体ごとのレスポンシブ対応を考慮し、メディアクエリを活用します。細かなデザインや配色の調整でブランドイメージも表現できます。

JavaScriptやjQuery活用による機能拡張とアニメーション効果

ハンバーガーメニューをよりリッチで使いやすくするためにはJavaScriptやjQueryの導入が有効です。クリックやタップ時の開閉アニメーション、スクロール位置に応じた固定表示、キーボード操作のサポートなどUX向上の機能が追加できます。

特にアニメーション効果では、CSSのトランジションと組み合わせてスムーズな変化を実現できます。例として、「メニューがふわっと出現する」「背景をぼかす」といった演出が人気です。加えて、操作しやすいタップ領域やアクセシビリティの確保も重要です。

実装手法	できること
JavaScript	高度な動作制御、ユーザー入力の対応
jQuery	クロスブラウザ対応と短い記述

ユーザー行動データを取得する場合もJavaScriptが活躍します。よりインタラクティブなサイト体験を目指す際におすすめです。

スマホやPC両対応のレスポンシブ設計ポイント

ハンバーガーメニューを導入する際、スマホだけでなくPC画面への最適化も欠かせません。画面幅ごとにメニュー自体を切り替える設計は、ナビゲーションの分かりやすさやアクセス性向上に直結します。主要なポイントを以下にまとめます。

• メディアクエリ活用：一定幅以下でハンバーガーメニュー、それ以上は通常ナビ

• タップしやすいサイズ：スマホでは指先でも正確に操作できるように配慮

• PCではホバーも活用：PC操作ではホバーメニューとの組み合わせで効率up

また、ユーザーが迷わず操作できる位置・表示タイミングも工夫ポイントです。アクセシビリティを考慮し、aria属性を使って案内することも推奨されます。こうした細かな対応が、あらゆるデバイスでの高品質なUXにつながります。

ハンバーガーメニューのメリットと課題（デメリット）

ハンバーガーメニューの主なメリット

ハンバーガーメニューは、WebサイトやアプリにおいてスマートフォンやPC問わず多く使われています。主な利点は以下の通りです。

• 画面スペースの節約

ハンバーガーメニューは、メニュー項目を三本線のアイコン（通称：ハンバーガーアイコン）に集約することで、コンテンツを広く表示できます。とくにスマートフォンなど小さい画面では有効です。

• シンプルかつ直感的な操作性

視覚的な負担を減らし、ユーザーは必要に応じてメニューを展開できます。デザインをすっきり保ちつつ、ナビゲーション機能を維持します。

• 多様なデバイスで利用可能

PC、スマホ、タブレットなど幅広いデバイスで同じUIを実装できるため、レスポンシブデザインとの相性も抜群です。

特徴	詳細
画面スペースの有効活用	本コンテンツ領域を優先できる
操作のシンプルさ	メニュー表示が一定で分かりやすい
デザインの統一性	各デバイスで一貫性を持たせやすい

上記のように、ハンバーガーメニューは現代のWebデザインにおいて、限られたスペースでも多くの情報を整理して表示する方法として重宝されています。

発見性の低下をはじめとしたデメリットと具体的リスク

一方で、ハンバーガーメニューには注意すべき課題も存在します。

• メニューが見つけづらい

画面上にナビゲーションの入口が目立たず、ユーザーがどこからアクセスすればよいか迷いやすくなります。

• 機能や情報が隠れてしまう

メニューを展開しないと全体像が分からないため、重要な情報に気付かれにくいです。

• ユーザー離脱の原因になることも

操作に慣れないユーザーや高齢者にとっては使いにくく、目的のページにたどり着けず離脱につながることがあります。

以下は課題とリスクを整理したものです。

課題・リスク	内容
発見性の低下	アイコンだけでは直感的に分かりにくい場合がある
情報へのアクセス性低下	重要ページが隠れて回遊率が下がることがある
慣れない操作への不安	UXを損なう可能性がある

Webサイトを設計する際は、これらのリスクを理解し、利用シーンやターゲットを慎重に考慮することが重要です。

SEOやアクセシビリティ面での考慮ポイント

ハンバーガーメニューを導入する際はSEOやアクセシビリティにも配慮する必要があります。

• Googleのクロール性を確保する

CSSやJavaScriptで生成されたメニューは、正しく構造化されていない場合、検索エンジンがリンク先を認識しにくくなります。HTMLのnav要素を使用し、aタグで内部リンクを設置することが推奨されます。

• スクリーンリーダー利用者への対応

aria-labelやrole属性を設定するなどして、音声読み上げツールでもメニュー内容が分かりやすくなるよう設計しましょう。

• PC・スマホ両対応のHTML/CSS設計

レスポンシブ対応のcss、シンプルな構造、明確なボタン表示でアクセシビリティとSEO効果を高めます。

チェック項目	推奨される対応例
クローラビリティ	HTMLでナビゲーションを記述する
スクリーンリーダー対応	aria-labelやalt属性を正しく設定する
レスポンシブ設計	CSSメディアクエリでPC・スマホに最適化する

こうした点を押さえることで、ハンバーガーメニューによるユーザビリティとSEO効果を最大限に活かすことができ、より多くのユーザーがストレスなくサイトを利用できる環境を実現できます。

ハンバーガーメニュー最適化のためのUXデザインと検証方法

配置・サイズ・色など視認性を高めるデザインの工夫

ハンバーガーメニューは、ユーザーが直感的に操作しやすいことが重要です。特にスマホやPCなど端末ごとの最適な配置やデザインが鍵となります。配置では画面右上に設置するケースが多く、親指で押しやすい位置を意識しながら、他のUI要素とのバランスも考慮しましょう。

サイズについては、画面サイズやタッチ領域（少なくとも40×40ピクセル以上が理想）を確保することで、操作ミスを防ぎ、ストレスのないUXに繋がります。色使いでは、背景色と十分なコントラストを持たせた配色を意識し、アクティブ時の変化もわかりやすく工夫しましょう。

ユーザー心理に配慮した以下のようなデザイン工夫がおすすめです。

• 特徴的な三本線アイコンを使用して認識されやすくする

• ホバーやタップで色が変化するなどリアクションを設ける

• 「メニュー」などの補足テキストを一時的に表示して初回訪問者にも配慮する

デザインの細部まで考えることで、Webサイトのナビゲーションの使いやすさを最大限に高められます。

ABテストやユーザーテストによる効果検証方法

ハンバーガーメニューの改善には、客観的なデータの取得と検証が不可欠です。ABテストでは、現状のメニュー（Aパターン）と新しいデザイン（Bパターン）を同時に公開し、クリック率や遷移率を比較します。

ユーザーテストでは、実際のユーザーに操作してもらい、目線の動きや操作の流れ、課題点を観察するのが効果的です。ヒートマップやクリック解析ツールを用いれば、ユーザーがどこで迷い、どの部分に注目しているか一目で確認できます。

テストの設計ポイントは以下の通りです。

• 操作手順ごとに事前の仮説を立てる

• 目標指標（KPI）を決めて計測する（例：メニュー利用率、滞在時間）

• 実験期間は十分に確保し、一定数のデータが集まってから判断する

テスト結果はデータ分析で視覚化し、改善施策の優先順位を決定しましょう。

スマホを中心としたレスポンシブでの最適デザイン

スマートフォンの普及により、ハンバーガーメニューはレスポンシブWebデザインの定番となりました。スマホでは画面幅が限られるため、省スペース化しつつ、どのデバイスでも統一した操作感を保つことが大切です。

端末依存型の調整方法を表にまとめました。

端末	配置の最適例	操作性向上の工夫
スマホ	画面右上	タップ領域拡大、シンプルなボタン
タブレット	画面右上・サイドバー併用	アイコン・テキスト併用で視認性向上
PC	ヘッダー右端やサイドに固定	マウス操作に最適、ホバー効果追加

レスポンシブ設計では、CSSメディアクエリを活用し、windowサイズに合わせて自動でハンバーガーメニューの表示方法が切り替わるようにしましょう。端末ごとのユーザー行動を考慮して最適化することで、すべての利用者にやさしいWebサイトを実現できます。

ハンバーガーメニューの導入事例と業種別活用法を実例で学ぶ

国内外主要サイト・アプリの利用例分析

多くの有名サイトやアプリでハンバーガーメニューは広く導入されています。たとえば、Google Mapsではスマートフォンの画面で三本線のアイコンから各種メニューを効率的に表示でき、必要な項目へすぐアクセス可能です。Adidasの公式サイトもグローバルで導入しており、ブランドイメージを損なわず多言語対応も実現しています。

SNSではInstagramで左上、または右上に設置される例が一般的です。アプリごとの配色とアイコンの形状や透過デザインの微調整が特徴となっており、ブランド体験と操作性の両立が図られています。

下記テーブルは、実際の導入例とその特徴をまとめたものです。

サイト名	導入場所	主な特徴	業種
Google Maps	スマホ	三本線アイコン、大項目一覧表示	テクノロジー
Adidas	PC/スマホ	多言語対応、グローバルデザイン	アパレル
Instagram	アプリ	透明感ある配色、認知度の高さ	SNS
楽天	スマホ	ユーザーごとのカスタマイズメニュー	EC

PC版とスマホ版のデザイン比較と最適パターン

ハンバーガーメニューはPCとスマホ両方で導入が進んでいますが、最適なパターンは業態ごとに異なります。

• PCではメインナビゲーションを上部に展開しつつ、サブ項目やアカウント情報をハンバーガーメニューに格納するケースが多いです。

• スマホでは画面スペースを最大限活用するため、全メニューを三本線に収納し、クリックやタップでスライド表示する設計が主流です。

業界別の成功パターンとしては、

1. ECサイトは商品一覧やキャンペーン情報を素早く呼び出せる構造が求められます。
2. 情報サイトやニュース系では記事カテゴリを階層化し、一覧性と階層性の両立が重視されます。
3. サービス系（サブスクやアプリ）では会員ページやヘルプなど、頻度の高い動線を固定配置とハンバーガーメニュー両方に用意するのが効果的です。

このように、業種やユーザーニーズに応じたカスタマイズが成果向上のカギとなっています。

成功の要因分析と効果検証データ

ハンバーガーメニューの導入によって実際にどのような成果が出ているのか、信頼性のあるデータで検証します。

主な分析・指標

• クリック率：各ナビゲーション項目のタップ率は最大で従来ナビゲーションの1.5倍となった事例も存在します。

• 使いやすさ：アンケートでは簡単操作への好評価が目立ち、特にスマホでは「目的の情報にすぐ届く」との意見が70％以上を占めます。

• 離脱率：デザイン改善後にナビゲーション経由の離脱率が25％改善したレポートもあり、UX向上に寄与していることが示されています。

導入時のベストプラクティス

• アイコンの視認性を高めることでクリック率アップ

• タップ領域を広くとることで操作ミス防止

• 最上部または下部への固定設置で機能の迷子を防止

これらの対策により、多様な業界でハンバーガーメニューは使いやすいサイト体験を支える重要な要素として評価されています。

ハンバーガーメニュー実装時によくあるトラブルと対処法

設置やカスタマイズの一般的な疑問と解決策

ハンバーガーメニューをWebサイトやアプリに設置する際、「どの位置に配置すればよいか」「アイコンのカスタマイズ方法が分からない」「CSSの競合で意図しない表示になる」といった悩みが多く見受けられます。
主な解決策は下記の表を参照ください。

よくあるトラブル	おすすめ対策
トップに配置する要素の選定	サイトブランドロゴや検索ボックスと重ならない左右端に配置
CSSが競合してデザイン崩れ	他の要素に影響しないクラス名で設計し、共通CSSを分離管理
メニュー内容の表示件数が多い	スクロールやアコーディオン式で対応し、全項目が見やすい設計
アイコンのカスタマイズ方法が不明	SVGやフォントアイコンを使うことで柔軟にデザイン変更が可能

チェックポイントリスト

• ボタンのタップ領域を十分に確保

• ラベルやアイコンにalt属性を設定し視認性・アクセシビリティを向上

• PCサイトでは必ずラベル表示や補助ナビゲーションと併用

動作不良や挙動不安定時の原因と対処法

ハンバーガーメニューが正常に動作しない場合、その原因の多くがJavaScriptエラーや媒体ごとのレスポンシブ対応の不備にあります。よく見られる不安定な挙動と解決ポイントは以下のとおりです。

症状	対処法
メニューがクリックで開かない	JavaScriptの記述ミスや読み込み漏れ、イベントの競合をチェック
表示がページ幅によって崩れる	@media queryとflexboxを利用し、レスポンシブCSSを最適化
モバイルだけで挙動が異なる	タッチイベントとクリックイベントを両対応させることが重要
スクロールしにくい／メニューが消える	positionやoverflowの指定とz-indexの調整を忘れずに設定

解消のための手順

1. ブラウザのデベロッパーツールでエラーを確認
2. コードの重複呼び出しやライブラリ依存の有無を見直す
3. ベンダープレフィックスやOS毎のデフォルト挙動に注意する

最新仕様変更やブラウザ対応アップデートの動向

ハンバーガーメニューの実装には、定期的な仕様変更やブラウザの更新が影響する場合があります。正しく保守・運用するうえで押さえておきたいポイントをまとめました。

更新対象	確認方法・対応策
HTML・CSSの新仕様	使用するナビゲーション要素やタグの最新構文を定期的にチェック
各ブラウザの挙動	Google Chrome、Safari、Microsoft Edge、Firefoxなどで動作検証を必ず実施
OS側のUI実装	iOSやAndroidのPWA仕様変更時の動作・スクロール対策も定期的に見直す

• 定期的なメンテナンス

主要ブラウザやOSアップデートのリリース情報に目を通し、実装コードやライブラリもアップデートすることが推奨されます。
また、PDFやインスタグラムの特殊な実装時には公式ドキュメントの最新内容も参考にしてください。

これらの対策を徹底しておくことで、PCやスマホなどあらゆるサイト環境でも安定したハンバーガーメニューの運用が実現します。

ハンバーガーメニューの未来：進化するナビゲーション設計とUXトレンド

新しいナビゲーションタイプとの共存と比較

近年、Webデザインでは多様なナビゲーション方式が登場しています。ハンバーガーメニューは画面スペースを有効に使える利点からスマホサイトを中心に広く採用されていますが、他にも以下のようなナビゲーションが利用されています。

ナビゲーション種類	特徴	利用シーン
ハンバーガーメニュー	三本線アイコンでメニューを格納 画面を広く使える	スマホサイト、レスポンシブWeb
ボトムナビ	画面下部にアイコンやテキストを固定配置	スマホアプリ、ECサイト
タブメニュー	画面上部や下部に複数項目の切替表示	情報量の多いWebサービス
横スクロールナビ	水平方向のスクロールで全メニュー表示	ポータルサイト、ニュース系

それぞれのナビゲーションはサイトの目的やユーザー層、デバイスの特性によって最適な使い分けが求められます。ハンバーガーメニューはシンプルなデザインを維持したい場合に適していますが、よく使うメニューへのダイレクトなアクセスが重要な場合は、ボトムナビやタブメニューとの併用が増えています。特にモバイルファーストデザインでは複数のナビゲーション方式を融合してUX向上を図るサイトが主流です。

アクセシビリティ向上と多様なユーザーニーズへの対応

ウェブサイトやアプリのナビゲーション設計では、「すべてのユーザーが迷わず操作できること」が極めて重要です。ハンバーガーメニューも、デフォルトでは“隠れた”メニュー構造のため、アクセシビリティ向上の工夫が欠かせません。

• ラベル表示やテキスト併用

  単なる三本線アイコンだけでなく、「メニュー」などのテキストを追加し、視認性を高める。

• キーボード操作・スクリーンリーダー対応

  タブキー操作で展開しやすい構造や、aria属性によるメニュー説明を用意する。

• コントラストやタッチ領域の配慮

  ハイコントラスト配色や、ボタンサイズを十分に取ることで操作ミスを防止する。

【アクセシビリティ配慮の具体例】

取り組み内容	効果
アイコンとラベルを同時表示	直感的にメニューだと理解できる
aria-labelで説明を付与	読み上げ対応が充実
ボタン領域を大きく設計	タップミスが大幅に減る

多様なデバイスやユーザー層に対応するため、インクルーシブデザインの考え方も重視されるようになっています。たとえば高齢者・視覚障害者向けや、インスタグラムやGoogleなど多言語/多機能のサービスでも、個々のニーズに合わせた柔軟なナビゲーション設計が進んでいます。今後、PDFマニュアルやWindowsネイティブアプリでも一貫した操作性が求められる場面が増えていくでしょう。ハンバーガーメニュー自体も進化を続け、多様な使い方への最適解が模索されています。

ハンバーガーメニューを活かす設計のポイントと総合的なガイドライン

良いハンバーガーメニューを作るためのチェックリスト

ハンバーガーメニューを効果的に機能させるためには、いくつかの基本的なチェックポイントを押さえておく必要があります。視認性や操作性、SEOやユーザビリティに配慮した設計が不可欠です。以下のチェックリストを参考に、サイトに最適なハンバーガーメニューを目指しましょう。

• 視認性の高さ：三本線のハンバーガーアイコンはどのデバイスでも分かりやすく表示されていますか。

• クリック領域の最適化：タップ・クリックしやすい十分なサイズになっていますか。

• 位置の一貫性：全ページでハンバーガーメニューの配置が統一されていますか。

• アクセシビリティ対応：キーボード操作や読み上げにも配慮されていますか。

• SEO対策：メニュー構造がHTMLやCSSで検索エンジン向けにもきちんと組まれていますか。

• レスポンシブデザイン：PC・スマホ両方で快適な表示になっていますか。

主要なチェック項目を強調した上で、それぞれの観点から定期的に確認・改善を行いましょう。

ページ全体の情報構造と連動したメニュー設計のコツ

サイト全体の情報設計とメニューの連動は、ユーザー体験やSEOにおいて重要なポイントです。階層構造とナビゲーションの整合性を保ち、目的ページまで直感的にたどり着ける設計が求められます。

• 重要なコンテンツを優先表示：ユーザーが最もアクセスしたいページのリンクは、ハンバーガーメニュー内でも目立つ位置に配置してください。

• カテゴリー分けの明確化：多階層のWebサイトでは、カテゴリや階層ごとに分けて表示することが重要です。

• メニュー内容の整理：不要な項目は削除し、分かりやすいラベル名に変更することでクリック率が向上します。

情報構造を最適化すると、ユーザー満足度の向上と共にサイト全体の離脱率低下、検索エンジンからの評価向上にもつながります。

実装前後で確認すべき評価指標

ハンバーガーメニューの設計前後では、客観的なデータに基づき改善点を把握することが大切です。主な評価指標をテーブルで整理します。

評価指標	確認内容	改善に活用する方法
ユーザビリティテスト	メニュー操作の迷いやすさ、発見のしやすさ	問題箇所に補足ナビやガイド追加
クリック率	メニューアイコンや主要項目の利用率	アイコンの大きさ・位置を調整
離脱率・滞在時間	メニュー利用後のページ遷移、離脱の傾向	導線や項目配置の見直し
アクセス解析（Googleなど）	デバイス別の操作状況、直帰率や回遊状況	モバイル最適化やUI改良
検索エンジンのクロール状況	サイトマップやHTML構造の最適化	構造化データ・ラベルの見直し

実装後の定期的な評価とデータに基づく改善を行うことで、常に最新のユーザー需要とSEO要件に合ったハンバーガーメニューを維持できます。