おすすめ情報

おすすめ情報

2016年11月26日

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

convenient?-inconvenience?-what-is-a-hamburger-menu?
みなさんハンバーガーメニューって聞いたことあるでしょうか?
「ハンバーガーアイコン」、「ハンバーガーボタン」とも
呼ばれています。
マクドナルドやハンバーガー屋さんの
店頭に置いてあるメニューではなくて、
スマートフォンサイトやタブレットサイト、
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をしっかり考え、
最適なグローバルナビゲーションを
導き出していただければと思います。

このエントリーをはてなブックマークに追加
メルマガ登録