スマホのハンバーガーメニューってどうなの?!ユーザーの現状

以前から気になっていた、スマホサイトのハンバーガーメニューについて。スマホユーザーが増えてきた今、使い方に注意しないと「特にショップでは」コンバージョンを下げてしまうことにもなります。

スポンサーリンク

ハンバーガーメニューとは

ハンバーガーメニューとは、スマホやタブレットでよく見られる、グローバルメニューをコンパクトに格納した3本線のメニューのことです。

ハンバーガーメニュー

3本線の形がハンバーガーのように見えることから、こう呼ばれるようになったそうです。タップ(スマホでタッチすること)すると、何らかのメニューが出てきます。

このハンバーガーメニューは、見た目はカッコいいのですが、ユーザーにとってはわかりにくいものではないか、という意見がネットでもよく取り上げられています。実際のUX(ユーザにとっての使いやすさ)について、紹介された記事もあります。

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

私もこのメニューはあまり好きではなく、ショップには取り入れていませんでした。(ショップできすぎくんの場合は、自動で作成されます。)

実際にユーザーに聞いてみた

そこで、私も身近な友人に「ショップに表示されているハンバーガーメニュー」について聞いてみました。聞いたのは主に女性。かつスマホでよくお買い物をしたり、検索もする、という人たちです。(12人だけですが。。)

その答えがこちら。

  • サイト全体の情報を見たい時にタップしてみる(8)
  • 何か入ってるのは分かるけど、あまりタップしない (2)
  • 何かの設定をする時に使うんだよね?(1)
  • 何のボタンか分からないので、タップしたことがない(1)

他にもいろいろな意見はあると思いますが、私が聞いた中では、多くの方がハンバーガーメニューの中には会社概要やお問い合わせ・お買い物ガイドなど、サイト全体に関する何らかの情報が入っていると思っているようです。

驚いたのは、これほどスマホサイトが浸透しているにも関わらず、このメニューに関しては「何のボタンかわからない」と答えた人がいたということ。

これはかなり稀な例でしょうが、やはり3本線だけでは視覚的な訴求力が足りないのでしょうね。

ハンバーガーメニューがタップされやすいケース

ファーストビュー(最初にスクロールせずに見える画面)に目立つコンテンツ(タップしたくなるようなコンテンツ)がある場合は、まずそちらに目が行きます。そうなると、ハンバーガーメニューの存在は薄くなってしまうでしょう。

けれど、ファッションやグルメなど、画像をダイナミックに見せたいサイトの場合は少し違ってきます。美しい画像の中に、ポツンとハンバーガーメニューを表示させると効果的。タップできるのはハンバーガーメニューしかないので、そのメニューの中に何が入っているかをあらかじめ認識させておくことができます。

ハンバーガーメニュー

ファーストビューがこんな感じだと、まずはハンバーガーメニューをタップしてしまいますね。

見てほしい項目はハンバーガーメニューに入れない

ショップの場合は、小さい画面の中で何を表示させていくかが重要。

たまに、ハンバーガーメニューをタップすると「わ!ここを見たらよかったんだ」というような項目が入っていることがあります。

ということは、重要なコンテンツはハンバーガーメニューの中には入れない方がいいことになります。

たとえばカテゴリ一覧。

商品数が多いショップの場合、カテゴリ分けをきっちりしておくと、商品を選びやすいですよね。その一覧がハンバーガーメニューの中に入ってしまっているのは、かなりもったいない!

できることなら、3本線の下に「カテゴリ」というテキストを入れるか、不細工でも「カテゴリ一覧」というボタンをしっかりとページ上部に表示してあげるのがいいでしょう。

ちなみに、ショップできすぎくんのハンバーガーメニューの中には「お買い物の流れ」「サイト運営者」などのガイド的な情報が入っています。

サイト設計の時点で気をつける

一般的には、グローバルナビに設定したメニューがハンバーガーメニューに組み込まれます。ということは、どんなコンテンツをグローバルナビに入れるか、サイト設計の時点で真剣に考えることが大事。

また、グローバルメニューはSEOやコンバージョンにも関わる重要なメニューです。気をつけてくださいね。

> SEOに重要!ショップのグローバルメニューとスマホサイトでの落とし穴

ユーザーの頭の中に「?」が出ないサイト作りが大事

最近では、「3本線だけ」のハンバーガーメニューを使っているサイトはかなり減ってきています。「MENU」などのテキストと合わせて使っている事例や、一切ハンバーガーメニューを使ってないサイトも多いですね。

ユーザーにとって見やすいサイトを作るということは、「この次に進むにはどこをタップしたらいいんだろう」「この情報はどこで見たらいいんだろう」という疑問(?)を作らないことです。

少しでも疑問があると、ユーザーは離れていきます。「このサイトはわかりにくい」というレッテルを離れてしまったらおしまい!別の検索からたどって来てくれたとしても、「あ、あのわかりにくいサイトだ」となり、見てもらえなくなってしまいます。

三本線のデザインは、見た目にはおしゃれなのですが、大事なのは「分かりやすい」ということ。それに徹したショップを作っていきましょう。

最後に

まだまだ、この名称は一般のユーザーには浸透していません。「ハンバーガーメニューをクリックして見てね」といっても通用しない方の方が多いでしょう。

ちなみに、ページ上部にある「ショップのロゴ画像」をクリックすると、たいていの場合はトップページにジャンプします。これは、WEBの世界では常識ともいえることですが、これも知らない人がまだかなりいらっしゃいます。

私たちの常識でサイト作りを進めないように、ですね。

スポンサーリンク