この記事をシェアする

【2016年最新】ハンバーガーメニューについてまとめ

board-1647322_1280-500x333

ハンバーガーメニューはスマートフォンやタブレット端末の小さな画面にたくさんのメニューを収めることができ、多くのサイトがかっこいいデザインとして採用してきました。近年ではハンバーガーメニューに対する否定的な意見が多く見られる一方、未だに多くのサイトなどで使われているのも現実です。そこで実際ユーザビリティ(UX)の観点からはどれほどの有用性があるのかみていきたいと思います。

そもそもハンバーガーメニューとは?

ハンバーガーメニュー(ハンバーガーボタンとも言う)とは、縦に3本の線が並んだアイコンで、クリックすると格納されたメニューがサイトを移行することなく、表示されるものです。その三本線をパン、ハンバーグ、パンに見立てて、ハンバーガーメニューと呼ばれています。

具体例として、下記にいくつか挙げてみます。

s0hgvgwjqjwikqi1473823841_1473823861xvqu7cwl_lt2je81473823891_1473823916

(参照サイト:ナイキ-Nike)                                     (参照アプリ:Amazon )

ハンバーガーメニューは使いにくい?

ハンバーガーメニューは使いにくいということは、多くのサイトで指摘されています。それらの記事が使いにくいと指摘する理由を2つにまとめてみました。

1、何をするアイコンなのか不明確

そもそもユーザーとしてはそれがなんなのか一目では分かりません。それをクリックしてみて初めて「あ、中にはこんなメニューがあるんだ!」と初めて分かります。それはユーザーとしては不便ですし、何より分かりにくい構造です。

2、格納することは効果的な策なのか

「これはハンバーガーメニューって言って、中には色んなメニューが並んでいるんだよ。」って知っていたとしても、まだ問題は解決されません。中を確認あるいは中にあるメニューをクリックしようと思うたびに開かなければなりません。つまり、中のメニューに用があるユーザーに対して無駄なワンステップを強いることになるのです。

実際のところ、どうなのでしょうか

海外で話題になった記事で、ハンバーガーメニューを含む四つのメニューアイコンでA/Bテストをしたものがあるので紹介します。                                                                      (詳しくはこちら→Mobile Menu AB Tested:Hamburger Not the Best Choice?)

期間は5日間で訪問者数約50,000人を対象に下記メニューアイコンで最もクリックされたのはどれかというものです。

1、ハンバーガーメニュー

baseline

2、MENUを線で囲ったもの

2-variation1

3、MENUとハンバーガーメニューを線で囲ったもの

2-variation2

4、MENUという文字だけ

2-variation3

結論としましては、2のMENUを線で囲ったものが最もクリックされていました。要因は文字によってMENUであることと線で囲うことでボタンであることがはっきりと認識できたということが大きいと考えられます。

hamburgertest2

(参照サイト:Mobile Menu AB Tested:Hamburger Not the Best Choice?

ハンバーガーメニューの先に広がる将来像

xmsxjd_oksuy7mg1473824949_1473825017

  • Facebook(メニューバーとハンバーガーメニュー+アイコン型)

Facebookはハンバーガーメニューからタブバーに移行することで、上記で指摘した問題を解決しました。また、メニュー数が多いが利用頻度は低いであろうものは右上のハンバーガーメニューに格納し、中に何があるかわかるように人の形のアイコンを加えることで、上記1、2の問題を解決しています。

(参照サイト:The Hamburger Menu Doesn’t Work

c_uqu9pyxvyg15u1473823942_1473823965

  • Adidas(ハンバーガーメニュー+ラベル型)

adidasのモバイルサイトでは現在もハンバーガーメニューが使われていますが、三本線の下に「メニュー」と記載することで、上記1の問題を克服しています。さらにadidasの場合ユーザーが頻繁に使うであろうメニューはタブバーで並べ、ハンバーガーメニューの中に格納されているメニューは利用頻度の低いメニュー(購入履歴、FAQなど)を入れているので2の問題に対しても対応していることが分かります。

(参照サイト:アディダス オンラインショップ-adidas)

y8h4qgyktcqdulr1473823613_1473823729・日本マクドナルド(ハンバーガーメニュー+縦型メニューバー)

日本マクドナルドのモバイルサイトではハンバーガーメニューが使われる一方で中に格納されているメニューと同じものがトップページに縦に並んでいます。ハンバーガーメニューが何かわからない人にとっては中のメニューをすぐに見つけられる仕様になっており、上記1の問題を克服しています。

(参照サイト:日本マクドナルド

h3masoqyd1ucpmg1473825358_1473825385

・トリップアドバイザー (タブバー+縦型タブバー)

トリップアドバイザーはハンバーガーメニューを使わず、縦横のタブバーを使うことによって、1,2の問題点を克服しています。画面下側のタブーを固定させ、メニューを作り、それぞれのメニューの中のさらに細かいメニューを縦のタブバーで並べており、ユーザーにとってはかなり使いやすい仕様になっています。メニュー数が多いコンテンツを扱う企業ではかなり有効な策でしょう。

(参照アプリ:トリップアドバイザー

2nwj58lbdvxtzjk1473827840_1473827860

・ホームズ(タブバー+縦型タブバー)

大枠としての構造はトリップアドバイザーと同じではありますが、ここで注目したいのはタブバーの中の特集という項目です。縦のタブバーで並べられたメニューには大きな画像が付いており、ビジュアル面での訴求力があります。また縦のタブバーを画面の上にあるボタンで「借りる」「買う」を切り替えることができ、的確なメニューの格納がなされています。上で指摘した問題点を両方克服しているといえるでしょう。

(参照アプリ:HOMES(ホームズ)

まとめ

ハンバーガーメニューをあまりよく考えずに使うことはユーザービリティ(UX)を損ねることが多いようです。ハンバーガーメニューを使う場合には、中に収めるメニューは使用頻度の低いものを入れるといいでしょう。ユーザーがよく使うメニューに関してはタブバーで並べるのが今のところ多く見られ、有効だと考えられます。ただメニュー数の多くなってしまうコンテンツを扱う場合には、タブバーだけでは対応しきれません。その時にはタブバーと縦型のタブバーの組み合わせが非常に有効でしょう。

参考

Mobile Menu AB Tested:Hamburger Not the Best Choice?

ハンバーガーメニューはゴミだ!!

The Hamburger Menu Doesn’t Work

君たちはそんなにハンバーガーメニューが好きなのかね?

スマホのハンバーガーメニューが驚くほど使われていない現実

ハンバーガーアイコンのUI問題6つの答え

Why and How to Avoid Hamburger Menus

The following two tabs change content below.
平松 育
8月からギャプライズに入社。現在はWalkmeを担当している。 大学では法律を専攻し、刑法ゼミに所属していた。
WalkMe(ウォークミー)

この記事をシェアする

フォローする