便利?不便?ハンバーガーメニューって?


みなさんハンバーガーメニューって聞いたことあるでしょうか?
「ハンバーガーアイコン」、「ハンバーガーボタン」とも呼ばれています。
マクドナルドやハンバーガー屋さんの店頭に置いてあるメニューではなくて、スマートフォンサイトやタブレットサイト、PCサイトでもちらほら見かける三本線のナビゲーションメニューです。

なぜハンバーガーメニューと呼ばれるのかというと、三本の線がハンバーガーに見える事からこう呼ばれるようになったそうです。
前まではドロワーメニューと呼ばれていたそうです。

どうしてハンバーガーメニューが生まれたのか

WebサイトはもともとPC(デスクトップ・ノートパソコン)といったデバイス向けに考えられてきたので、スマホサイト・アプリの設計はPCのサイト設計がベースになって考えられています。
そのためPCサイトにて左右の2カラムでエリアを定義したものを、同じようにスマホで再現しようとすると、必然的に縦に配置するしかないのです。

この限られたエリアの中で要素を配置するためには、要素を小さくするか削除する必要がありました。
そのアイデアのひとつとして、要素のアイコン化が考えられました。
それでこの三本線のメニューが生まれたのです。

最近多くのサイトやアプリがハンバーガーメニューを使っていて三本線はメニューという認識が浸透しているのでUIとしては正解だと思います。

ハンバーガーメニューの
長所と短所を挙げてみましょう。

長所

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

短所

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

ハンバーガーメニューは、リテラシーの高いユーザーであれば他サイトからの経験でそれが何かを理解できますが、何も知らない人が見れば「3つの横棒が並んでいる」だけです。
興味本位でタップされることはあると思いますが、肝心の「メニューを使いたい」というユーザにタップされることはありません。ひと目でメニューとわかるデザインでなければいけないです。

ちなみにリテラシーとは読み書き能力。
また、与えられた材料を理解し活用する能力という意味です。

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

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

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

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

デザイン次第では文字だけにする、つまりハンバーガーのアイコンがなくても成立します。

しかし欠点があり、タップしないと中身が見えません。
PCのように画面を広く使えれば、メニューの中身を表示させてサイト構造を伝えられるのですが、これがこの案の限界ですね。

ヘッダー・フッターにメニューを配置する。

この解決策は、さっきの文字を添える案の欠点だった「タップしないと中身が見えない」も解消しているので、ひとめでメニューとわかり、かつサイト構造を伝えられるのでメニューの目的を果たす意味では一番最適かと思います。

ただし、こちらの案にも「メニューが多い場合配置できない」という欠点があります。もともとメニューの数は多すぎてもNGで、人間が一瞬で視認できる数である、7±2個にすべきなので
多くても9個ほどかと思いますが、スマホの場合、表示できても5個くらいかと思います。

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

トップページにメニューを配置する案です。
こちらは、トップページをサイトの入口としての役割に特化させる考え方です。

しかしこちらも欠点があり、ファーストビューがメニューだけになってしまいます。
また、トップページのコンテンツ部分に配置されるので、下階層へ移り変わるとメニューがなくなってしまいます。

そのため、ユーザはどこか気になるページに移った後に別ページに移動したい場合、メニューのあるトップページに戻ってからサイトを回遊するという動きになります。
また、ハンバーガーメニューにおいて、文字の有無や枠線の有無でクリック率の検証をしているサイトがあるので紹介します。

https://ferret-plus.com/2672

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

まとめ

安易にどんなサイトでも使うのではなく、ユーザーがサイトを利用した時にどれだけ親切な構造であるかが一番大事な事です。担当するサービスの目的、ターゲットユーザのUXをしっかり考え、最適なグローバルナビゲーションを導き出していただければと思います。

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

筆者

Y.Morishita

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

筆者が最近執筆した記事