株式会社セブンデザイン 大阪市都島区のホームページ制作会社

  • 公開日： 最終更新日：

ハンバーガーメニューとは？作り方とおしゃれなWebデザイン例

スマートフォンを中心に、多くのWebサイトで採用されているのがハンバーガーメニューです。シンプルなデザインで画面を広く使えることから、モバイルサイトを中心に利用されています。

このページでは、ハンバーガーメニューの基本やメリット・デメリット、作り方、おしゃれなデザイン例を紹介します。ホームページ制作をする上で、ハンバーガーメニューを導入したい方に役立つ内容です。

ハンバーガーメニューとは

ハンバーガーメニューは、スマートフォンやタブレットなどのモバイルサイトでよく利用される便利なナビゲーションの一種です。

当サイトのハンバーガーメニュー

こちらは、当サイトのハンバーガーメニューになり、三本線（≡）のアイコンをタップするとメニューが開閉する仕組みで、限られた画面スペースを有効活用できます。ホームページ制作において、モバイル対応を考える上で欠かせないデザイン要素の一つです。

ハンバーガーメニューの名称は、三本線の形がハンバーガーのバンズと具材を重ねたように見えることから名付けられました。もともとは1980年代にゼロックス社で考案されたアイコンですが、スマートフォンの普及に伴い、多くのWebサイトで標準的なナビゲーションとして採用されています。

特に、コンテンツを優先してシンプルなデザインを維持したいWebサイトや、限られたスペースを効率的に使いたい場合に適しており、現在ではPCサイトでも導入が増えています。

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

スマートフォンやタブレット向けのWebサイトでは、限られた画面スペースを有効活用することが求められます。そこで、多くのホームページ制作で採用されているのがハンバーガーメニューです。ここでは、ハンバーガーメニューを導入することのメリットを紹介します。

三本線のアイコンだけでメニューと理解できる

ハンバーガーメニューの大きな利点は、三本線のアイコンが直感的にメニューであると認識されることです。

スマートフォンユーザーの間では、このアイコンが標準的なナビゲーションとして定着しており、Webサイトを訪れた際に迷うことなく操作できます。

画面を広く使える

Webデザインにおいて、コンテンツの見やすさは重要な要素です。従来のメニューバーを常時表示するレイアウトでは、ナビゲーションが画面の一部を占めてしまい、コンテンツの表示領域が狭くなることがありました。

ハンバーガーメニューを採用すると、ナビゲーションをアイコンのみにまとめ、必要なときだけメニューを開くことができるため、画面のスペースを最大限に活用できます。特に、画像や動画をメインにしたサイトでは、コンテンツの魅力をより引き出せるレイアウトを実現できます。

メニューの変更・追加が簡単

ハンバーガーメニューは、メニューの項目が折りたたまれているため、メニューの数が増えてもデザインが崩れにくいという特徴があります。これにより、新しいページを追加したり、メニューの内容を変更したりする際の調整が比較的容易になります。

また、CSSやjQueryを活用することで、アニメーションを加えたり、表示方法をカスタマイズしたりすることも可能です。Webサイトの成長に合わせてナビゲーションを柔軟に対応させられる点も、ハンバーガーメニューの大きなメリットの一つです。

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

ハンバーガーメニューは、モバイルサイトに適したナビゲーションとして広く採用されていますが、利用する際には注意が必要です。ここでは、ハンバーガーメニューの代表的なデメリットを紹介します。

メニューを開かないと内容が分からない

ハンバーガーメニューは、アイコンをタップしないとメニューの項目が表示されないため、ユーザーがサイト内の構成を直感的に把握しにくいという課題があります。

特に、情報量の多いホームページでは、ユーザーが目的のページをすぐに見つけられないと離脱につながる可能性があります。

ユーザーによっては気づきにくい

ハンバーガーメニューは、スマートフォンやタブレットに慣れているユーザーにとっては一般的な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で指定したアニメーションが適用され、メニューが開く

ハンバーガーメニュー実装時の注意点

ハンバーガーメニューは、スマートフォン向けのナビゲーションとして広く採用されていますが、実装時には注意すべきポイントがあります。ここでは、ハンバーガーメニューを適切に実装するための注意点を紹介します。

三本線だけではなくMenuと記載

ハンバーガーメニューの三本線のアイコンは、Webに慣れているユーザーには認識されやすい一方で、すべての人が直感的に理解できるとは限りません。特に、スマートフォンやインターネットにあまり慣れていないユーザーにとっては、これがメニューであることに気づかない場合があります。

そのため、三本線のアイコンだけではなく、Menuやメニューといったテキストを併記することで、より分かりやすいデザインにすることが重要です。テキストを加えることで、視認性が向上し、ユーザーがメニューを開く際の迷いを減らすことができます。

メニュー数を増やしすぎない

ハンバーガーメニューは、画面スペースを節約しつつ多くのメニューを格納できる便利なUIですが、項目が多すぎると逆に使いづらくなることがあります。

スマートフォンの小さな画面では、長すぎるメニューはスクロールが必要になり、目的のページを見つけにくくなります。また、指が届きにくい位置にメニューが配置されると、操作しづらくなり、ユーザーのストレスにつながることもあります。

そのため、メニューの項目数はできるだけ厳選し、必要なものだけを表示するようにすることが望ましいです。特に、重要なリンクは別の場所に配置することで、ハンバーガーメニューの利便性を保ちつつ、ユーザーが迷わずに目的のページへアクセスできるようになります。

おしゃれなハンバーガーメニューのWebデザイン例

​ハンバーガーメニューは、ウェブサイトのデザインにおいて重要な要素となっています。​ここでは、おしゃれなハンバーガーメニューのWebデザイン例を紹介します。​

上からメニューが表示されるハンバーガーメニュー

東ソーのハンバーガーメニューの画像

東ソーのウェブサイトでは、ハンバーガーメニューをクリックすると、ヘッダーの下からメニューが展開されるデザインを採用しています。

​このアプローチにより、メニューを表示している間もヘッダーが常に表示されており、ユーザーは検索アイコンなどのヘッダー要素にすぐにアクセスできます。​特に、ページ数が多いウェブサイトにおいて、ユーザビリティを高める参考になるデザインです。

東ソーはこちら

横からメニューが表示されるハンバーガーメニュー

Perfume Official Siteのハンバーガーメニューの画像

Perfumeの公式サイトでは、ハンバーガーメニューをクリックすると、画面の横からメニューがスライドインするデザインを採用しています。

​このハンバーガーメニューは、ユーザーがコンテンツに集中している際にはメニューが表示されず、必要なときにのみメニューを呼び出すことができます。​これにより、全画面でコンテンツを閲覧でき、ユーザーエクスペリエンスを向上させています。

Perfume Official Siteはこちら

フェイドインで表示されるハンバーガーメニュー

帆山亭のハンバーガーメニューの画像

黒川温泉にある源流の宿 帆山亭のウェブサイトでは、ハンバーガーメニューをクリックすると、メニューがフェイドインするデザインを採用しています。​

この滑らかなアニメーション効果により、ユーザーに洗練された印象を与えています。​また、メニュー数が多いにもかかわらず、PC画面とスマホ画面でレイアウトを工夫し、まとまりのあるメニューを実現しています。

帆山亭はこちら

ハンバーガーメニューのまとめ

ハンバーガーメニューは、モバイルサイトでの利便性を向上させるナビゲーションとして、多くのWebサイトで採用されています。コンパクトなデザインで画面を広く使えるメリットがある一方、ユーザーによってはメニューの存在に気づきにくいというデメリットもあります。

実装する際は、HTML・CSS・jQueryを活用し、視認性や操作性を考慮した設計が重要です。また、Menuなどのテキストを併記する、メニュー項目を整理するといった工夫を取り入れることで、ユーザビリティの向上が期待できます。

ホームページ制作を行う際には、ハンバーガーメニューの特徴を理解し、サイトの目的やターゲットに適した形で活用することが大切です。適切なハンバーガーメニューを実装することで、使いやすくおしゃれなWebデザインを実現できます。

関連サービス

大阪のホームページ作成会社
おしゃれなハンバーガーメニューを提案する大阪のホームページ作成会社
記事一覧に戻る