ハンバーガーメニューとは?多様な表示方法の中で、どの表示がユーザーの利便性が高いのか

記事公開日:2018.05.24

最終更新日:2018.05.29

666 PV


ハンバーガーメニューを知っていますか?モバイル、PCサイトで見かける三本線のナビメニューです。
三本線がハンバーガーに見えるため、ハンバーガーメニューと呼ばれていて、ドロワーメニューとも呼ばれていました。

ハンバーガーメニューはなぜ誕生?

Webサイトは、もともとPC(デスクトップ・ノートパソコン)といったデバイス向けに考えられてきたので、スマホサイト・アプリの設計は、PCのサイト設計がベースになって考えられています。

上記のため、PCサイトにて左右の2カラムでエリアを定義したものを、同じようにスマホで再現しようとすると、必然的に縦に配置するしかないのです。

スマホという限られたコンテンツエリアの中で要素を配置するためには、要素を小さくするか削除する必要がありました。

メニューのアイコン化が、アイデアのひとつとして考えられました。そして三本線のメニューが生まれたのです。

最近多くのサイトやアプリが、ハンバーガーメニューを使っています。下記画像のような「三本線はメニュー」という認識が世の中で浸透しているので、UI(ユーザーインターフェース)としては正解だと思います。

ハンバーガーメニューの長所と短所

長所

  • コンテンツの表示エリアを大きく獲得できる。
  • ボタン自体は小さくできて文字も必要ないので、どんな画面デザインでもあまり邪魔にならない。
  • Webデザインが大幅に崩れたりしない。

短所

  • スマホを持ったばかりの人は、メニューだとわからず離脱してしまう可能性がある。
  • 下層コンテンツの入り口がメニューの中にあり2、タップの操作が必要になるので、面倒くさいと思われてしまう。

ハンバーガーメニューは、リテラシーが高いユーザーだとメニューとわかりますが、何もわからない人から見れば、ただ3つの棒が並んでいるだけです。リテラシーとは読み書き能力。また、与えられた材料を理解し活用する能力という意味です。

興味本位でハンバーガーメニューをタップする人はいると思いますが、「メニューを使いたい」というユーザーにタップされることは少ないと思います。ひと目でメニューとわかるデザインでなければいけないです。

解決策は考えられる限り、以下の3つかと思います。

  • ハンバーガーメニューにラベルをつける。
  • ヘッダー・フッターにメニューを配置する。
  • コンテンツ内にメニューを配置する。

ハンバーガーメニューに文字をつける

先ほども言った通り「3つの横棒が並んでいる」だけなので、3本線アイコンが何を示しているのかを補足するというものです。どのような方法で示しましょう?
ハンバーガーアイコンに「メニュー」「MENU」という文字列を添えるだけです。

デザイン次第では文字だけにする、つまりハンバーガーのアイコンがなくても成立します。
しかし欠点があり、タップしないと中身が見えません。
PCのように画面を広く使えれば、メニューの中身を表示させてサイト構造を伝えられるのですが、スマホでは中身を表示させてサイト構造を伝えられません。

ヘッダー・フッターにメニュー配置

解決策は、ハンバーガーメニューに文字をつける案の欠点だった、「タップしないと中身が見えない」も解消しているので、ひとめでメニューとわかり、かつサイト構造や情報を的確に伝えられるのでメニューの目的を果たす・タスクを果たすという意味では、一番最適かと思います。
しかし、上記の案にも、メニューが多いと配置ができない、という欠点があります。

メニューの数は多すぎてもだめで、7±2個である5個か9個程度が、人間が一瞬で視認できる数なので、5〜9個程度におさめましょう。

コンテンツ内にメニューを配置する。

トップページにメニューを配置する案です。トップページにメニュー配置案は、上記の案にもメニューが多いと配置ができない、という欠点があります。

メニューの数は多すぎてもだめで、7±2個である5個か9個程度が、人間が一瞬で視認できる数なので、5〜9個程度におさめましょう。

しかし欠点があり、ファーストビューがメニューだけになってしまいます。ファーストビューがメニューだけだと、ユーザーの離脱につながる可能性があります。

また、トップページのコンテンツ部分に配置されるので、下階層へ移り変わるとメニューがなくなってしまいます。
上記のため、ユーザはどこか気になるページに移った後に別ページに移動したい場合、メニューのあるトップページに戻ってからサイトを回遊するという動きになります。

ハンバーガーメニューに、文字や枠線があるとどれくらいクリックされるか、クリック率の検証をしているサイトがあります。

上記記事の検証結果を見る限り、3つの横棒に文字と枠線をつけたものが一番クリックされるようです。

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

サイトに訪れた検索ユーザーに、どれだけ親切な構造であるかがとても大切です。
サービスの目的やターゲットユーザーのUXをちゃんと考え、ユーザーのことを考えたグローバルナビゲーションを作っていきましょう。

このエントリーをはてなブックマークに追加

筆者

Y.Morishita

Bigmac inc. 制作部所属 所属。2017年4月にBigmac inc.に入社。 主にコーディングを担当しています。 一人前にはまだまだ程遠いひよっこですが、早く一人前になるために勉強の日々です。 これからもっともっと知識を増やし、周りに頼られるような存在になりたいです。 趣味は、音楽鑑賞でライブやフェスが生きがいです。 この前行ったフェスでは、左足を負傷したけどとても充実した二日間でした。漫画も大好きです。

筆者が最近執筆した記事