- 公開日： 最終更新日：
ハンバーガーメニューとは？作り方とおしゃれなWebデザイン
多くのホームページで採用されているのがハンバーガーメニューです。シンプルなデザインで画面を広く使えることから、モバイルサイトを中心に利用されています。
このページでは、ハンバーガーメニューの基本やメリット・デメリット、作り方、おしゃれなデザイン例を紹介します。ホームページ制作をする上で、ハンバーガーメニューを導入したい方に役立つ内容です。
目次
ハンバーガーメニューとは
ハンバーガーメニューは、PC・スマートフォン・タブレットなど、さまざまなデバイスで利用されるナビゲーションの一種です。中でもモバイルサイトでは、限られた画面スペースを有効に使えることから多く採用されています。
こちらは、当サイトのハンバーガーメニューになり、三本線（≡）のアイコンをタップするとメニューが開閉する仕組みで、限られたスペースを有効活用できます。ホームページ制作において、モバイル対応を考える上で欠かせないデザイン要素の一つです。
ハンバーガーメニューの名称は、三本線の形がハンバーガーのバンズと具材を重ねたように見えることから名付けられました。もともとは1980年代にゼロックス社で考案されたアイコンですが、スマートフォンの普及に伴い、多くのホームページで標準的なナビゲーションとして採用されています。
特に、コンテンツを優先してシンプルなデザインを維持したいホームページや、限られたスペースを効率的に使いたいホームページに適しており、現在ではPCサイトでも導入が増えています。
ハンバーガーメニューのメリット
スマートフォンやタブレット向けのホームページでは、限られたスペースを有効活用することが求められます。そこで、多くのホームページ制作で採用されているのがハンバーガーメニューです。ここでは、ハンバーガーメニューを導入することのメリットを紹介します。
三本線のアイコンだけでメニューと理解できる
ハンバーガーメニューの大きなメリットは、三本線のアイコンがメニューであると認識されていることです。
つまり、スマートフォンユーザーの間では、このアイコンが標準的なナビゲーションとして定着しており、ホームページを訪れた際に迷うことなく操作できます。
画面を広く使える
Webデザインにおいて、コンテンツの見やすさは重要な要素です。
従来のメニューバーを常時表示するレイアウトでは、ナビゲーションが画面の一部を占めてしまい、コンテンツの表示領域が狭くなることがありました。
ハンバーガーメニューを採用すると、ナビゲーションをアイコンのみにまとめ、必要なときだけメニューを開くことができるため、画面のスペースを最大限に活用できます。特に、画像や動画をメインにしたホームページでは、コンテンツの魅力をより引き出せるレイアウトを実現できます。
メニューの変更・追加が簡単
ハンバーガーメニューは、メニューの項目が折りたたまれているため、メニューの数が増えてもデザインが崩れにくいという特徴があります。これにより、新しいページを追加したり、メニューの内容を変更したりする際の調整が比較的容易になります。
また、CSSやjQueryを活用することで、アニメーションを加えたり、表示方法をカスタマイズしたりすることも可能です。ホームページの成長に合わせてナビゲーションを柔軟に対応させられる点も、ハンバーガーメニューの大きなメリットの一つです。
ハンバーガーメニューのデメリット
ハンバーガーメニューは、モバイルサイトに適したナビゲーションとして広く採用されていますが、利用する際には注意が必要です。ここでは、ハンバーガーメニューの代表的なデメリットを紹介します。
メニューを開かないと内容が分からない
ハンバーガーメニューは、アイコンをタップしないとメニューの項目が表示されないため、ユーザーがサイト内の構成を直感的に把握しにくいという課題があります。
特に、情報量の多いホームページでは、ユーザーが目的のページをすぐに見つけられず、離脱につながる可能性があります。
ユーザーによっては気づきにくい
ハンバーガーメニューは、スマートフォンやタブレットに慣れているユーザーにとっては一般的なUIですが、普段スマホでインターネットを利用しない人にとっては、メニューがあることに気づかない可能性があります。
そのため、ナビゲーションがないと勘違いをされてしまい、目的のページへアクセスできず、離脱を招いてしまう恐れがあります。
ハンバーガーメニューの作り方
ハンバーガーメニューは、HTML・CSS・jQueryを組み合わせて作成するのが一般的です。ここでは、ハンバーガーメニューの作り方を紹介します。
HTMLの記述
ハンバーガーメニューのHTML構造は、メニューボタンとメニューリストの2つの要素で構成されます。
<span class="nav_toggle">
<i></i>
<i></i>
<i></i>
</span>
<nav class="nav">
<ul class="nav_menu_ul">
<li class="nav_menu_li"><a href="#">Top</a></li>
<li class="nav_menu_li"><a href="#">About</a></li>
<li class="nav_menu_li"><a href="#">Blog</a></li>
<li class="nav_menu_li"><a href="#">Contact</a></li>
</ul>
</nav>
- <span class="nav_toggle">：ハンバーガーメニューのボタン部分
- <i></i>：三本線を表現
- <nav class="nav">：ナビゲーション全体
- <ul class="nav_menu_ul">：メニューリスト
この構造をもとに、CSSとjQueryでデザインや動きを追加していきます。
CSSの記述
ハンバーガーメニューのスタイルを設定し、クリック時にメニューが開閉するようにします。
ボタンのスタイル（クリック前）
.nav_toggle {
display: block;
position: relative;
width: 1.75rem;
height: 1.5rem;
}
.nav_toggle i {
display: block;
width: 100%;
height: 2px;
background-color: #333;
position: absolute; transition: transform .5s, opacity .5s;
}
.nav_toggle i:nth-child(1) { top: 0; }
.nav_toggle i:nth-child(2) { top: 0; bottom: 0; margin: auto; }
.nav_toggle i:nth-child(3) { bottom: 0; }
ボタンのスタイル（クリック後）
.nav_toggle.show i:nth-child(1) {
transform: translateY(10px) rotate(-45deg);
}
.nav_toggle.show i:nth-child(2) {
opacity: 0;
}
.nav_toggle.show i:nth-child(3) {
transform: translateY(-12px) rotate(45deg);
}
- .nav_toggle.show：クラスが追加されたとき、ボタンのデザインが×に変化
- .nav_toggle i:nth-child(2)：真ん中の線を非表示にし、上と下の線を回転させる
メニューのスタイル（クリック前）
.nav {
position: fixed;
top: 3rem;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
opacity: 0;
visibility: hidden;
transition: opacity .5s, visibility .5s;
}
メニューのスタイル（クリック後）
.nav.show {
opacity: 1;
visibility: visible;
}
- .nav.showクラスが追加されたときに、メニューが表示されるようにする
jQueryの記述
ハンバーガーメニューをクリックしたときの動作を設定します。
$('.nav_toggle').on('click', function () {
$('.nav_toggle, .nav').toggleClass('show');
});
- .nav_toggleがクリックされたとき、.nav_toggleと.navにshowクラスを追加・削除
- showクラスが追加されると、CSSで指定したアニメーションが適用され、メニューが開く
ハンバーガーメニュー実装時の注意点
ハンバーガーメニューは、スマートフォン向けのナビゲーションとして広く採用されていますが、実装時には注意すべきポイントがあります。ここでは、ハンバーガーメニューを適切に実装するための注意点を紹介します。
ハンバーガーメニューの三本線のアイコンは、Webに慣れているユーザーには認識されやすい一方で、すべての人が直感的に理解できるとは限りません。特に、インターネットにあまり慣れていないユーザーにとっては、これがメニューであることに気づかない場合があります。
そのため、三本線のアイコンだけではなく、Menuやメニューといったテキストを併記することで、より分かりやすいデザインにすることが重要です。テキストを加えることで、視認性が向上し、ユーザーがメニューを開く際の迷いを減らすことができます。
メニュー数を増やしすぎない
ハンバーガーメニューは、画面スペースを節約しつつ多くのメニューを格納できる便利なUIですが、項目が多すぎると逆に使いづらくなることがあります。
スマートフォンの小さな画面では、長すぎるメニューはスクロールが必要になり、目的のページを見つけにくくなります。また、指が届きにくい位置にメニューが配置されると、操作しづらくなり、ユーザーのストレスにつながることもあります。
そのため、メニューの項目数はできるだけ厳選し、必要なものだけを表示するようにすることが望ましいです。特に、重要なリンクは別の場所に配置することで、ハンバーガーメニューの利便性を保ちつつ、ユーザーが迷わずに目的のページへアクセスできるようになります。
おしゃれなハンバーガーメニューのWebデザイン
ハンバーガーメニューは、Webデザインにおいて重要な要素となっています。ここでは、おしゃれなハンバーガーメニューのWebデザインを紹介します。
上からメニューが表示されるハンバーガーメニュー
東ソーのホームページでは、ハンバーガーメニューをクリックすると、ヘッダーの下からメニューが展開されるデザインを採用しています。
このアプローチにより、メニューを表示している間もヘッダーが常に表示されており、ユーザーは検索アイコンへすぐにアクセスできます。
特に、ページ数が多いホームページにおいて、ユーザビリティを高める参考になるデザインです。
横からメニューが表示されるハンバーガーメニュー
Perfumeの公式サイトでは、ハンバーガーメニューをクリックすると、画面の横からメニューがスライドインするデザインを採用しています。
メニューはページ全体を覆う形で表示され、ユーザーの操作を一時的にナビゲーションに集中させる構成です。
このような横からのスライドインは、画面遷移を感じさせずにメニューを展開できるため、サイト全体のテンポを損なわずにスムーズな操作体験を実現できます。
フェイドインで表示されるハンバーガーメニュー
黒川温泉にある源流の宿「帆山亭」のホームページでは、ハンバーガーメニューをクリックすると、メニューがフェイドインするデザインを採用しています。
この滑らかなアニメーション効果により、ユーザーに洗練された印象を与えています。
また、メニュー数が多いにもかかわらず、PC画面とスマホ画面でレイアウトを工夫し、まとまりのあるメニューを実現しています。
まとめ：ハンバーガーメニューで使いやすいホームページを実現しよう
ハンバーガーメニューは、PC・スマートフォン・タブレットなど、あらゆるデバイスで使われる定番のナビゲーションです。
特にモバイルサイトでは、限られたスペースを有効に使い、コンテンツをすっきり見せられる点が大きな魅力です。一方で、メニューが隠れているためユーザーが気づきにくいなどの課題もあります。
実装する際には、Menuといったテキストを併記する、メニュー項目を整理する、アニメーションやデザインの一貫性に配慮するなど、使いやすさを意識した工夫が重要です。
ホームページの目的やターゲットに合わせて設計すれば、ハンバーガーメニューはデザイン性と操作性を両立できる強力なUIになります。おしゃれでストレスのないWeb体験を実現するために、適切にハンバーガーメニューを取り入れてみましょう。
