ハンバーガーメニューとは?作成方法や記述例も紹介

Webサイト制作
サイト制作
2021.10.19
ハンバーガーメニュー

ハンバーガーメニューはスマホの普及とともに、見る機会が増えました。

実際に自分でサイト作成する際にも取り入れようと思った時、ハンバーガーメニューのメリットやデメリット、注意点、作成方法などについて理解しておくことが大切です。

今回はハンバーガーメニューについて詳しく紹介していきます。

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

ハンバーガーメニューとは、Webサイトのナビゲーションメニューに使われるデザイン手法のひとつです。

三本線「≡」のアイコンを使ったナビゲーションメニューで、タップ・クリックするとサイドメニューやナビゲーションドロワーが出現するものを指します。

形がハンバーガーに似ていることから、ハンバーガーメニュー・ハンバーガーアイコンと呼ばれています。

3本線で構成するのが一般的ですが、4本線や2本線で構成している場合もあります。

ハンバーガーメニューは通常のメニューに比べてコンパクトなので、画面がPCより小さなスマホでもその存在が煩わしくならないということで、2010年前後のスマートフォンが普及しはじめた頃からこのメニューが使われるサイトが増加しており、多くのスマホ対応サイトで取り入れられるようになりました。

また、最近ではレスポンシブデザインの普及によって、スマホだけでなくPCやタブレットなどで見る機会が増えてきました。

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

ハンバーガーメニューを作成するにあたってのメリットやデメリットについて、詳しく紹介していきます。

メリット

メニューを手軽に設置、変更ができる

ハンバーガーメニューの場合、ヘッダーには3本の線を設置するだけで複数のメニューを手軽に設置する事が可能です。

また、メニューの追加・削除など変更の際に、現在のデザインに大きな影響を与えることなく、手軽に変更することができるので、便利です。

省スペースなのでコンテンツエリアを広くとれる

三本線のみでたくさんのメニューを表示することが可能なので他の項目の表示領域を多く確保することができ、様々な見せ方やデザインが可能になります。

そのため、伝えたい事や見せたい情報を大きく表示する事ができ、結果ターゲットユーザーの興味や関心を引く事に繋がります。

多くのユーザーが感覚的に使用することができるUIである

スマートフォンの普及により、現在の検索デバイスの傾向はPCよりもスマホに移行してきています。

ハンバーガーメニューの操作性に大きな違いがないため、どのサイトでも同じように感覚的に使用することができるという点もメリットと言えるでしょう。

デメリット

押すまでメニュー項目が分からない

ハンバーガーメニューはメニューボタンをクリックしなければ中にどんな項目があるのかが分からないため、トップページなどでサイトコンテンツに興味を持ってもらえないとメニューを開いてもらえない可能性が高いというのは大きなデメリットの1つです。

目立ちにくいので見つけにくい恐れがある

普段からスマホやPCでウェブサイトを閲覧している人であれば、ハンバーガーメニューを押す=メニューが表示されるということはすぐに理解ができます。

しかし、普段からあまりウェブサイトを閲覧しない人は3本線が何を意味しているのか分からない場合もあります。

ハンバーガーメニューの普及率は高いですが、メニューだと分かりづらいユーザーも一定数います。

ですのでハンバーガーメニューだけに頼るのではなく、下記のように三本線の下に「メニュー」の文字を表示させることで、より多くの人に伝わりやすくなりますよ。

ハンバーガーメニューの作成方法や記述例

ハンバーガーメニューを実際に作成する際の作成方法や記述例について詳しく紹介していきます。

HTML


<!--▼グローバルナビ-->

<div id="a-top"></div>

<div id="global-nav">

<dl id="global-nav-in">

<dt class="btn-gnav"></dt>

<dd class="menu-wrap">

&nbsp;

<ul id="menu" class="menu">
<li id="menu-item-31" class="first menu-item menu-item-type-post_type menu-item-object-page menu-item-31 even" style="z-index: 1000;"><a href="https://pecopla.net/sample-page/">サンプルページ</a></li>

<li id="menu-item-2600" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2600 odd" style="z-index: 990;"><a href="https://pecopla.net/sample-page2/">サンプルページ2</a>

</li>

<li id="menu-item-2397" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-2397 even" style="z-index: 980;"><a href="https://pecopla.net/sample-page3/">サンプルページ3</a></li>

<li id="menu-item-3165" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3165 odd" style="z-index: 970;"><a href="https://pecopla.net/sample-page4/">サンプルページ4</a></li>

<li id="menu-item-2339" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2339 even" style="z-index: 960;"><a href="https://pecopla.net/sample-page5/">サンプルページ4</a></li>

</dd>

</dl>

</div>

</div>

CSS


/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/

#global-nav{

border-top: 0;

border-bottom: 0;

}

&nbsp;

#global-nav dt{

background: url(./images/icon/menu.png) 1em center no-repeat #99179c;

color: #fff;

font-size: 1.4em;

border-bottom: solid 1px #c43ec7;

background-size: 20px;

background-position: 95%;

}

&nbsp;

#global-nav #global-nav-in .menu-wrap{ display:none; }

&nbsp;

#global-nav #global-nav-in #menu{ margin-bottom: 0; }

&nbsp;

#global-nav #global-nav-in #menu,

#global-nav #global-nav-in #menu li{

width: 100%;

border: 0;

}

&nbsp;

#global-nav #menu li.first{ border-left: 0; }

&nbsp;

#global-nav #global-nav-in #menu li{

border-bottom: 1px solid #c43ec7;

background-color: #fff;

white-space: normal;

border-top: #6d116f solid 1px;

}

&nbsp;

#global-nav #global-nav-in #menu li.first{ border-left: 0; }

&nbsp;

#global-nav #global-nav-in #menu ul{

position: static;

width: auto;

padding-left: 10%;

}

&nbsp;

#global-nav #global-nav-in #menu ul li{ width: 100%; }

&nbsp;

#global-nav #global-nav-in #menu ul li:last-child{ border-bottom: 0; }

&nbsp;

/*メニューのデザイン*/

#global-nav #global-nav-in #menu li a:link,

#global-nav #global-nav-in #menu li a:visited,

#global-nav #global-nav-in #menu li a:hover,

#global-nav #global-nav-in #menu li a:active{ background: url(./images/icon/icon-arrow04.png) 1em 1em no-repeat #99179c; }

&nbsp;

#global-nav #global-nav-in #menu ul li a{ width: auto; }

&nbsp;

#global-nav .btn-gnav{

display:block;

padding: 0.2em;

cursor: pointer;

}

&nbsp;

#main-image .catch-copy{ font-size: 1.4em; }

&nbsp;

/* スマホスタイル調整新規 */

/* nav */

dl#global-nav-in {

width: 100%!important;

margin: 0!important;

box-sizing: border-box;

padding-left: 0;

}

#global-nav {

position: relative;

height: auto;

}

#global-nav img {

width: 70px;

position: absolute;

left: 5px;

top: 5px;

}

#global-nav .menu-wrap{

padding: 0;

}

#global-nav .btn-gnav {

display: block;

padding: 0.2em;

cursor: pointer;

height: 28px;

}

#global-nav #menu li a {

border-left: none;

}

.pc{

display: none;

}

.sp{

display: block;

}

}

ワードプレスで簡単にハンバーガーメニューを設定する方法

上記方法でハンバーガーメニューは作成しますが、HTMLやCSSの知識がないと作成できません。

ただ、ワードプレスで作成する場合は、「WP Responsive Menu」というプラグインが用意されています。
このプラグインを使うことで、簡単にしかもスマホ版にだけハンバーガーメニューを表示することが出来ます

WP Responsive Menuのインストールはこちらから

まずは有効化する

WP Responsive Menuをインストールしたら、「有効化」しましょう。このプラグインは、インストールしただけでは、
意味がなく、機能を使う場合は、必ず有効化する必要があります。

プラグインの有効化

メニューを作成する

デフォルトでは何もメニューが用意されていないので、[here]をクリックしてメニューを作成します。
クリックしたら、メニュー名を入れて「メニューを作成」ボタンを押し、ハンバーガーメニューを作成します。

ハンバーガーメニューの作成画面へ
ハンバーガーメニューの作成画面

メニュー表示が被らないように調整

作成したものと、メニューが被らないように、「Elements To Hide On Mobile」の項目を「#header」や「#menu」などテーマに合わせて入力します。これをすることで、スマホメニューのみにハンバーガーメニューが表示されます。

ハンバーガーメニューの作成画面

ハンバーガーメニュー表示例

ハンバーガーメニューを利用する際の注意点

ハンバーガーメニューの注意点を3つ紹介します。

ユーザーに分かりやすいよう工夫をする

デメリットでも紹介した通り、「三」のマークだけでメニューだとわからない人もいます。

そのため、囲いを付けてボタンだとわかりやすいようにしたり、「Menu」などの併記をするなど、ユーザーにメニューボタンであるということが伝わりやすいよう工夫を行いましょう。

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

ボタンの中に複数のメニューを設置することができるのはメリットの1つですが、メニューが多すぎるとメニューの中で迷子になってしまう可能性があります。

そのため、情報を整理して必要な項目だけをメニューに採用することが大切です。

表示位置に配慮する

一般的にハンバーガーメニューは右上に表示されることが多いです。

そのため、メニューを見てもらうことを目的としている場合は右上に設置することがおすすめです。

一方で、買い物サイトなどでは買い物カートボタンを右上に設置し、ハンバーガーメニューは左上に設置するパターンもあります。

サイトの目的に合わせて、ハンバーガーメニューをどこに設置するのかについて考えることが大切です。

ハンバーガーメニューの例

実際にハンバーガーメニューを活用しているサイトを3つ紹介します。

ユニバーサルスタジオジャパン


出典:https://www.usj.co.jp/web/ja/jp

右上にハンバーガーメニューを表示させる一般的なサイトです。

青と白を基調としたサイトデザインの邪魔にならないようなデザインになっています。

無印良品


出典:https://www.muji.com/jp/ja/store

ショッピングサイトなので、買い物カートを右上、ハンバーガーメニューを左上に表示させています。

サイトの雰囲気に合わせてシンプルなデザインで表示しています。

ロッテリア


出典:https://www.lotteria.jp/

こちらも一般的な右上に表示されていますが、ファストフード店ということもあり、ハンバーガーメニューをハンバーガーにする遊び心が取り入れられています。

囲いを付けることで、ハンバーガーメニューだということが伝わりやすくなっています。

まとめ

ハンバーガーメニューとは、ウェブサイトのナビゲーションメニューに使われるデザイン手法の1つ

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

  • 手軽に設置・変更できる
  • コンテンツエリアを広くとれる
  • 多くの人が感覚的に使用することができる

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

  • 押すまでメニュー項目が分からない
  • 見つけにくい恐れがある

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

  • 分かりやすいような工夫をする
  • メニュー数を増やしすぎない
  • 表示位置を配慮する

 

ハンバーガーメニューを活用することで、画面サイズの小さなスマホでも、コンテンツエリアをしっかりと確保しながらメニューを作成することが出来ます。

ハンバーガーメニューを作ったから良しとするのではなく、よりわかりやすいように「メニュー」と文字でもアピールしたり、ボタンだとわかりやすいデザインにするなど工夫をするで、多くの人にメニューボタンであることを伝えることができます。

SEOやWEB制作に関する情報を検索する

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)