Design デザイン・UI

 
デザイン・UI

ハンバーガーメニューって知ってる?

ハンバーガーメニュー
お盆休みも終わり、まだまだ休みぼけから回復していない方も少なくないかと思います。
今回は、最近ちらほら聞くようになった「ハンバーガーメニュー」について、ご紹介したいと思います。

ドロワーメニューじゃなくてハンバーガーメニュー?

みなさん、ハンバーガーメニューって知ってますか?
ハンバーガー屋さんの店頭に置いてあるメニューではなくて、スマートフォンサイトやタブレットサイト、最近ではPCサイトでもちらほら見かける三本線のナビゲーションメニューです。

ハンバーガーメニュー

この赤枠で囲ったものが「ハンバーガーメニュー」と呼ばれるものです。三本の線がハンバーガーに見える事からこう呼ばれるようになったそうです。(僕にはハンバーガーには見えないですが・・)
ハンバーガーメニューはドロワー(Drawer)の名前が変わったものになります。(僕も最近知りました・・)

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

このメニューの長所は、やはりコンテンツの表示エリアを大きく獲得できる点です。
PCサイトでは、メニュー内にたくさんの下層の入り口をまとめて表示させる事ができましたが、ディスプレイサイズの小さいスマートフォンなどでは、このエリアは頭を痛めるところになります。そこで考え出されたのが、この三本線のメニューです。
自分のスマートフォンのアプリやサイト、デフォルト機能などを見てみると、メジャーなサイトやアプリケーションは、ほぼこのUIを使っていました。
これだけ多くのサイト、アプリケーションが使っていれば、三本線はメニューという認識が浸透しているのでUIとしては正解だと思います。

ですが、一方で、はじめてスマホを持ったばかりのユーザーなどは、それがメニューのボタンと認識できずに離脱してしまうかもしれません。
また、下層コンテンツの入り口がハンバーガーメニューの中に格納されている事で、2タップの操作が必要になります。この点もユーザーにとってはめんどうくさいと思われてしまう要因になります。
アプリ関連のニュースですが、A/Bテストをおこなったところ、ドロワーメニューを使うとユーザーエンゲージメントが半減するという調査結果も出ていました。

アプリUI/UXデザイナー必見!「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚

でも、どうすればいいの?

最近では、facebookもタブメニューへシフトチェンジし、より直感的なメニューになりました。
Facebookのように、タブメニューを採用するのも良いですが、Webサイトで採用するには、なかなかめんどうくさいと思います。
私がここ最近この問題の解決策としているのは、コンテンツエリアに代表的なメニューの入り口を作ってしまう方法です。

コンテンツメニュー

雑誌系サイトやEC系のサイトでは、サブカテゴリの数がかなり多く、ハンバーガーメニューを採用しても、そのメニュー内でサブメニューを探す必要があって、迷子になってしまう可能性があります。
そんな場合は、初心に戻って上のようなコンテンツエリアに、ユーザーのアクセスが多いコンテンツの入り口を設けることで解決します。
ちなみに、PCメニューにあったメニュー以外で重要なコンテンツ(カートやマイページ)も、このエリアに入り口を作ってあげるとUX向上につながります。

重要なのは本当に使う必要があるのか見極める事

非常に便利なハンバーガーメニューですが、安易にどんなサイトでも使うのではなく、ユーザーがサイトを利用した時にどれだけ親切な構造であるかが一番大事な事は皆さんもお分かりかと思います。
ハンバーガーメニューのデザイン的な工夫や、私のように、特に重要なコンテンツはコンテンツエリアに入り口を作って上げるなど、それぞれのサイトにあったサイト設計をする事がとても重要です。
次回、困った時に知っておくべきjQueryのメニュープラグインをご紹介します。

この記事を書いた人
高嶋 智也
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事