この記事のレベル
| 初心者 | （3.5） |
| 重要度 | （3.0） |
| 難しさ | （2.0） |
こんにちは、編集長のカワウソです！
「ハンバーガーメニューって何？」と悩んでいませんか？
仮にハンバーガーメニューのことを知っていても、設置する「位置」や「デザイン」に悩んでいる方は多いと思います。
そこで今回は、ハンバーガーメニューの基礎知識はもちろん、企業ホームページ事例8選を紹介します。
カワウソ
この記事は次のような人におすすめ！
- はじめて企業ホームページを作る人
- スマホサイトのデザインを検討中の人
- ハンバーガーメニューのメリットとデメリットを知りたい人
この記事を読めば、ハンバーガーメニューを最適化するコツも分かります。
それではどうぞ！
ハンバーガーメニューとは
ハンバーガーメニューとは、三本線のアイコン「≡」で表示されるナビゲーションメニューのことです。
「アイコンの形がハンバーガーに似ている」ことが、名前の由来となっています。
ハンバーガーメニューは、スマホサイトでよく用いられますよ。
参考に、弊社『エックスサーバー』のスマホサイトをご覧ください。
このように、三本線のアイコン「≡」をタップすると、メニューが展開します。
スマホサイトは、パソコンと比べて表示領域が狭いですよね。
ハンバーガーメニューを使えば、スマホサイトでも多くのメニューを設置することが可能です。
※ハンバーガーメニューのメリットは、のちほど詳しく解説します。
ハンバーガー以外にもあるアイコンの種類
ナビゲーションメニューのアイコンには、ほかにも種類があります。
一般的なのはハンバーガーメニューとはいえ、なかには以下を採用しているホームページもありますよ。
- ミートボールメニュー
- ケバブメニュー
- ドネルメニュー
- 弁当メニュー
ミートボールメニュー
ミートボールメニューは、「●」が横に3つ並んだナビゲーションメニューのことです。
ケバブメニュー
ケバブメニューは、「●」が縦に3つ並んだナビゲーションメニューのことです。
ドネルメニュー
ドネルメニューは、三本線が上から下に向かって順番に小さくなるナビゲーションメニューです。
弁当メニュー
弁当メニューは、「■」が3×3で並んだナビゲーションメニューのことです。
カワウソ
もし、どのアイコンにするか迷ったら、ひとまずハンバーガーを選んでおけば問題ないでしょう。
ハンバーガーメニュー3つのメリット
ここからは、ハンバーガーメニューのメリットを3つ解説します。
三本線だけでメニューの存在を伝えられる
ハンバーガーメニューのメリットは、三本線のアイコン「≡」だけで、メニューの存在を伝えられることです。
「MENU」や「メニュー」などの文字で表現しなくても、メニューの存在を伝えられるため、スタイリッシュなデザインのホームページを作りたいときに向いています。
実際に、当メディア（ https://www.xserver.ne.jp/bizhp/ ）でABテストしたところ、「MENU」より「≡」のほうが、クリック率は高かったです。
ホームページの特定の要素に対して、AパターンとBパターンを用意し、ランダムに表示することで、どちらがより高い成果が得られるのかを見極めるためのテストです。ホームページ以外にも、Web広告などでも実施されます。
| 表記 | セッション | クリック数 | クリック率 |
| 三 | 4,225 | 30 | 0.71% |
| MENU | 4,048 | 10 | 0.25% |
※スマホ＆新規ユーザーの16日間のデータです。
あくまでも当メディアの検証データです。ホームページの種類やターゲットユーザーによって、結果は異なるでしょう。詳しくは、このあと解説するデメリットの「一部のユーザーに気付かれないおそれがある」も併せてご覧ください。
メインビジュアルを大きく見せられる
ハンバーガーメニューを取り入れれば、メインビジュアルを大きく見せることが可能です。
主にファーストビュー（最初に表示される画面領域）に設置されるイメージ画像のこと。ホームページの第一印象を左右する重要な要素です。
ハンバーガーメニューを使わない場合、複数のメニューをそのまま並べなければいけません。
その結果、メインビジュアルとスペースを奪い合うことになるでしょう。
ハンバーガーメニューを設置すれば、三本線のアイコン「≡」だけで済みます。
表示領域に余裕ができれば、メインビジュアルを大きく見せることができますよね。
メインビジュアルを大きく表示できれば、ユーザーにインパクトを与えられるでしょう。
更新しても他の要素に影響を与えにくい
ハンバーガーメニューには、ページを更新しても他の要素に影響を与えにくいというメリットもあります。
なぜなら、ハンバーガーメニューに格納されたメニューは、別の領域として独立しているからです。
ハンバーガーメニューを使わない場合、メニューを追加もしくは削除する場合は、ヘッダー（最上部のパーツ）やメインビジュアルなどを、調整しなければいけないこともあります。
たとえばヘッダーにメニューを追加する場合、行数が増えると、メインビジュアルの表示領域が狭くなりますよね。
仮にファーストビューにメインビジュアルの全体を収めようとすると、サイズを小さくするしかありません。
ファーストビュー内のコンテンツの調整が不要になれば、メニューを更新するときの負担も軽減できるでしょう。
なお、ヘッダーについては、以下の記事で詳しく解説しています。
ハンバーガーメニュー2つのデメリット
次に、ハンバーガーメニューのデメリットを2つ解説します。
一部のユーザーに気付かれないおそれがある
ハンバーガーメニューの三本線のアイコン「≡」だけでは、メニューの存在に気付いてもらえないおそれがあります。
スマートフォンが普及しているとはいえ、使用頻度が高くないユーザーからしてみると、タップでメニューが展開することを、予想できないかもしれないためです。
そのため、ハンバーガーメニューに対してデザイン上のこだわりがなければ、「MENU」や「メニュー」などの文字を併記してもよいでしょう。
とはいえその判断は、自社ホームページのターゲットや世界観次第であることも事実。
詳しくは、記事の後半の「ハンバーガーメニューを最適化するコツ」で解説しています。
開かないと内容が分からない
開かないと内容が分からないのも、ハンバーガーメニューのデメリットの一つです。
そのため、できる限りユーザーに見てほしいものがあるなら、ハンバーガーメニューの外に設置するのもよいでしょう。
たとえば、電話やメールなど、コンバージョンにつながるボタン（アイコン）は、ハンバーガーメニューと横並びにして設置することも珍しくありません。
コンバージョンとは、ホームぺージの目標としている「特定のアクションをユーザーが起こしてくれた状態」を指します。分かりやすく言うと、ホームぺージ上の成果です。
一度ハンバーガーメニューの中で、重要なものがないか探してみてください。
ハンバーガーメニューの企業事例8選【スマホサイト】
ここからは、ハンバーガーメニューを導入した企業のスマホサイトを、以下の4つのカテゴリに分けて紹介します。
なお、パソコンでスマホサイトを確認するには、Google Chromeのデベロッパーツールがおすすめです。
以下、Google Chromeのデベロッパーツールの使い方を記載しておきます。
参考にしたいホームページにアクセスします。
調べたいページを右クリックし、「検証」の項目をクリックします。
ショートカットキーでは、【Ctrl+Shift+I（MacではCommand + Option + I）】もしくは【F12】キーで起動することが可能です。
スマートフォン（タブレット）のアイコンをクリックして完了です。
以上です。
それでは事例を見ていきましょう。
横からメニューがスライドするタイプ
まずは「横からメニューがスライドするタイプ」です。
奥養老ヴィレッジ
▲出典：奥養老ヴィレッジ
『奥養老ヴィレッジ』は、手ぶらでも楽しめるキャンプ場です。
ハンバーガーメニューのアイコンは、三本線「≡」だけのスタンダードな仕様。
タップすると、右から左にメニューが展開します。
展開後のメニューは、シンプルで見やすいですね。
CTAである右下の「予約」ボタンは、メニューを展開しても隠れず、タップすることが可能です。
Call To Actionの略称で、「行動喚起」と訳されます。
ユーザーが特定の行動をするように導く目的で設置される、テキストやボタンなどのまとまりのことです。
また、メニュー展開後は、三本線「≡」のアイコンが「×」に変わります。
これなら、「メニューを閉じられること」が明確に伝わってきますね。
なお、三本線「≡」のアイコンは、ページをスクロールしても追従してきます。
これなら、ユーザーはいつでもメニューを展開することが可能です。
株式会社LIXIL住宅研究所
▲出典：株式会社LIXIL住宅研究所
『株式会社LIXIL住宅研究所』は、新築事業を起点とする住宅フランチャイズ企業です。
ハンバーガーメニューは、丸いデザインのアイコンで存在感があります。
また、展開後のメニューには「アコーディオンメニュー」が採用されており、タップで下層ページへのリンクが出現しますよ。
▲出典：株式会社LIXIL住宅研究所
アコーディオンメニューとは、クリック（タップ）して開閉するメニューのことです。
操作したときの開閉する動きが、アコーディオンの蛇腹部分に似ていることから、アコーディオンメニューと呼ばれています。
なお、ハンバーガーメニューを含むヘッダーは追従仕様。
これならハンバーガーメニューの中に設置された、「資料請求」や「面談」などのCTAボタンも、ユーザーに見つけてもらいやすいですね。
株式会社 資生堂
▲出典：株式会社 資生堂
『株式会社 資生堂』は、1872年創業の化粧品メーカーです。
ハンバーガーメニューは、左上に設置されています。
それに合わせるように、アイコンをタップすると左から右にメニューが展開されますよ。
海外のホームページでは、左上にハンバーガーメニューを設置することも珍しくありません。
それは、英語など左から右に向けて読む言語においては、左上が最初に認識される位置だからです。
なお、グローバル企業である『株式会社 資生堂』のこのホームページには、日本語以外にも、英語と中国語のバージョンが存在しますよ。
中国語のホームページでは、右側にもハンバーガーメニューが設置されています。
ページをスクロールすると、この右側のハンバーガーメニューが追従するので、こちらがメインだと見受けられます。
カワウソ
ハンバーガーメニューの位置に正解はありません。位置に迷った場合は、ABテストをしてみるのもよいでしょう。
※ABテストについては、記事の後半「ハンバーガーメニューを最適化するコツ」で詳しく解説します。
上からメニューが降りてくるタイプ
次に、「上からメニューが降りてくるタイプ」のハンバーガーメニューを紹介します。
株式会社細田工務店
▲出典：株式会社細田工務店
『株式会社細田工務店』は、高耐震に制振性能をプラスした「ハイブリッドキューブ工法」の技術を持つ工務店です。
ハンバーガーメニューのアイコンは、三本線「≡」だけのスタンダードな仕様。
タップすると、上から下にメニューが展開します。
トップページと調和するように、展開後のメニューのデザインもかわいいですね。
SNSやコミュニティの豊富さも伝わってきます。
東ソー株式会社
▲出典：東ソー株式会社
『東ソー株式会社』は、クロル・アルカリ関連の製品や石油化学関連の誘導品を製造する会社です。
注目したいのは、メニューがヘッダーの下から展開される点です。
これなら、ハンバーガーメニューを展開したあとでも、ヘッダーが隠れないため、検索の「虫眼鏡アイコン」をタップできます。
ページ数が多いホームページを作る場合は、参考にしてみてください。
フェードインでメニューが表示されるタイプ
3つ目のハンバーガーメニューは、徐々に表示される「フェードインタイプ」です。
武野産商株式会社
▲出典：武野産商株式会社
『武野産商株式会社』は、プラスチックや紙など、あらゆる包装資材を取り揃える専門商社です。
ハンバーガーメニューのアイコンは、水色の背景に「MENU」と併記して設置されています。
ハンバーガーメニューのアイコンをタップしてみてください。
メニューがフェードインで表示されますよ。
フェードインは、優しく柔らかいイメージを与える効果が期待できるので、ぜひ参考にしてみてください。
しんみ歯科石神井台
▲出典：しんみ歯科石神井台
『しんみ歯科石神井台』は、東京都練馬区石神井台にある歯科です。
ハンバーガーメニューは、フェードインで展開し、上のリンクから順番にゆっくりと表示されるため、落ち着いた印象を受けます。
また、ホームページ全体を見ても、ホワイトとゴールドの組み合わせが上品で美しいですよね。
矯正や審美治療にも対応する歯科のホームページとして、説得力を感じます。
特殊なアニメーションを含むタイプ
4つ目は、特殊なアニメーションを含むタイプです。
株式会社美濃忠
▲出典：株式会社美濃忠
『株式会社美濃忠』は、業務用食品を「提案」および「届ける」食品卸販売企業です。
ハンバーガーメニューのアイコンは、青い背景で設置されていて、目立ちますね。
となりのCONTACTと同様に、MENUと併記されているので展開の有無が分かりやすいです。
また、展開後のメニューにはアニメーションが活用されており、「ABOUT」や「PRODUCT」などの文字の色が動きます。
このように視覚的な変化があると、思わず目を向けてしまいますね。
ホームページ全体で、効果的にアニメーションが活用されているので、併せてチェックしてみてください。
ハンバーガーメニューを最適化するコツ
ここでは、ハンバーガーメニューを最適化するコツを解説します。
それぞれ詳しく見ていきましょう。
ホームページのターゲットや世界観を考慮する
ハンバーガーメニューを実装するときは、ホームページのターゲットや世界観を考慮しましょう。
デメリットで解説したとおり、三本線のアイコン「≡」は、ユーザーによってはメニューの展開がイメージできないおそれがあります。
たとえば、首相官邸のホームページを見てください。
三本線のアイコン「≡」の下に、カタカナで「メニュー」と記載されていますよ。
▲出典：首相官邸
あらゆる属性のユーザーが閲覧する首相官邸のホームページだからこそ、この「メニュー」の併記に納得感を覚えますよね。
一方、ブランドサイトなど、洗練されたデザインのホームページを作るときは、要素をミニマム（最小量）に抑えることも少なくありません。
もし、「MENU」や「メニュー」を併記すべきか迷った場合は、自社のホームページが何を重要視するのか再認識したうえで、上記を参考に検討してみてください。
ABテストでユーザーの反応を確かめる
ハンバーガーメニューの位置やアイコンのデザインに迷う場合は、ABテストでユーザーの反応を確かめるのが手っ取り早いです。
いくら自分がよいと考えていても、ホームページはユーザーが見るもの。
であれば、ユーザーの反応をもとに決定したほうが、以後よい結果が得られそうですよね。
具体的には、AパターンとBパターンで、よりアイコンのクリック率が高いほうを採用します。
なお、ABテストは2週間以上を目安に実施しましょう。
期間が短いと、収集するデータの量が少なく、結果を判断するのには不十分になることも珍しくありません。
さらに、変更する要素は一つに限定しましょう。
たとえば、ハンバーガーメニューの「位置」とアイコンの「デザイン」を変更したとします。
仮によい成果が得られたとしても、どちらが要因なのかが判断できません。
誤った判断をしないためにも、一つずつ取り組んでみてください。
無料のABテストツールを紹介
▲出典：Googleオプティマイズ
『Googleオプティマイズ』は、Googleが提供する無料のABテストツールです。
ビジュアルエディタを使えば、実際のページを見ながら、特定の要素に対するBパターン（テストパターン）を作れます。
スマホやタブレット表示にも対応しているのもポイントです。
ただし、内容によっては、HTMLやCSSなどのコードの記述が必要な場合もあります。ご自身で対応が難しい場合は、専門家に相談してみてください。
※HTMLやCSSについては、以下の記事で解説しています。
『Googleオプティマイズ』は、2023年9月30日をもってサポートを終了します。サポート終了後は使えなくなるので、ほかのツールをご検討ください。
まとめ
今回の記事では、ハンバーガーメニューの基礎知識をはじめ、企業ホームページ事例8選を紹介しました。
- ハンバーガーメニューとは、三本線のアイコン「≡」のナビゲーションメニュー
- ハンバーガー以外にも、アイコンの種類は食べ物にちなんでいくつかある
- ハンバーガーメニューには、メリットとデメリットがある
- ハンバーガーメニューを最適化するなら、ABテストがおすすめ
ハンバーガーメニューは、スマホサイトでよく使われるナビゲーションメニューです。
スマホサイトを作るときは、ぜひ参考にしてみてください。
それでは、素敵なホームページの完成を願っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1※のレンタルサーバーであり、19万社の導入実績があります。
2024年5月7日12時まで、サーバー利用料金が最大30％オフとなる割引キャンペーンを実施中です！
今なら月額693円～とお得にホームページを開設できます！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2023年10月時点、W3Techs調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
カワウソ
当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。
