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

ある案件で「スマホサイトのメニューがクリック率が悪いので調査してほしい」という依頼がありました。

 

詳しくヒアリングすると、コチラの記事を見てサイトのメニューのクリック率を確認したら、著しく悪かったので「メニューのデザインに何か問題があるのではないか」と考えているとのことでした。

 

この依頼者は役職ある立場にもかからわず、いつも僕のソリューションを楽しみにしてくれるので、快く引き受けたのですが、相談を受けた時は、

 

メニューはタップすることがゴールではないので、別に気にしなくてもいいのでは？

 

と漠然と思ってしまいました。

 

それだと話が終わってしまうので持ち帰ったのですが、改めて考えてみると「スマホのメニューってなんでハンバーガーアイコンなんだっけ？」という疑問が頭に浮かび、それに対する答えを持っていなかった自分がいました。

 

つまり、根拠もないのにハンバーガーメニューが最適だと盲信していたのです。

 

現在、Webはモバイルファーストと言われスマホをメインとした最適化が重要視されていますが、まだPCほど設計が確立していないというのも現実なので、偏見を捨てて、

 

そもそもスマホのメニューはどうあるべきか

 

という視点で考えてみたところ、面白いことがわかりました。

 

そこで、本日はスマホサイトのメニューのあるべき姿について触れてみたいと思います。

 

なぜWebサイトにメニューを設置するのか

スマホのメニューについて考える前に、まずWebサイトのメニュー（ここではグローバルナビゲーションについて言及）について考えてみます。

 

Webサイト設計の際、

 

グローバルナビゲーションはどこに配置するべきか

 

と考えることに、何ら違和感を感じることは無いと思います。

 

最近はUX/UIという言葉が浸透しており、さらに画面設計するにあたっての便利ツールとしてワイヤーフレームのテンプレートなるものが公開され、簡単に手に入れることができます。

 

そのテンプレートには当たり前のようにナビゲーションのエリアとして、グローバルナビゲーションやローカルナビゲーションが定義されています。

 

でも、なぜグローバルナビゲーションを設置するのか理由を答えられますでしょうか。

 

大きくは、以下の理由からグロバールナビゲーションを設置します。

1. ユーザーを目的のコンテンツページへ導く
2. サイト全体のコンテンツ構成を分かりやすくする

 

Webサイトの設計の経験者であれば、おそらく1つ目は言えた方も多いのではないかと思います。

ここでは体型だてて説明するにあたり、それぞれ説明していきます。

 

1.ユーザーを目的のコンテンツページへ導く

ユーザはいろいろな理由を持ってサイトに訪れます。

 

単純に何かわからないことがあれば理解するために検索したり、何か課題を持っていればその解決案を求めたりなど、何かしら目的を持ってサイトに訪れます。

 

それ以外の情報はノイズになるので、できるだけ早い時間で目的のコンテンツにアクセスさせてあげるべきです。

 

つまり、ユーザは目的の情報を得るための最短距離を導出するためにグローバルメニューを利用するのです。

 

例えば、「この会社の従業員数を知りたいな」と思っている人がサイトにアクセスし、「サービス概要・会社概要・採用・社長ブログ・お問い合わせ」というグローバルナビゲーションを見たら、自分のほしい情報は「会社概要」にあるだろうと理解できる、といった具合です。

 

2.サイト全体のコンテンツ構成を分かりやすくする

一般的なPCサイトは、グローバルナビゲーションには5〜7個の項目が表示されていて、項目を見るだけで、ある程度中身がわかるようになっています。

 

例えば、教育系のポータルサイトでにおいて、「中学受験・高校受験・大学受験」などとあれば、受験勉強向けに細分化されて情報がまとまっているのだとわかります。

 

また、英語学習サイトにおいて「初心者向け、中級者向け、上級者向け」とあれば、英語のスキルに合わせてコンテンツがわかれているということがわかります。

 

 

グローバルナビゲーションの存在理由について理解できたかと思います。

それでは、この考えをスマホのハンバーガーメニューにあてはめた時に、どういう課題があるのか見ていきたいと思います。

 

ハンバーガーメニューのダメな点

ハンバーガーメニューは、「ハンバーガーアイコン」「ハンバーガーボタン」などと呼ばれ、クリック（タップ）するとメニューがドロップダウンやオーバーレイ、またスライドインなどのインタラクションで表示されるものです。

 

そのため、先に説明したグローバルナビゲーションとしての機能が不足しているわけではありませんが、1つ欠点があります。

 

それは、

 

アイコンをタップしないとそれがメニュー（グローバルナビゲーション）だとわからない

 

ということです。

 

ハンバーガーメニューは、リテラシーの高いユーザーであれば他サイトからの経験でそれが何かを理解できますが、何も知らない人が見れば「3つの横棒が並んでいる」だけです。

 

当然、それがメニューであると認知されなければ、「なんだこれ？」とった興味本位でタップされることはあると思いますが、肝心の「メニューを使いたい」というユーザにタップされることはありません。

 

つまり、そもそも使ってもらうことはできないという致命的な課題があるのです。

 

なぜ、このような懸念があるにもかかわらずハンバーガーメニューが使われてきたのかを考察してみます。

 

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

WebサイトはもともとPC（デスクトップ・ノートパソコン）といったデバイス向けに考えられてきたので、スマホサイト・アプリの設計はPCのサイト設計がベースになって考えられています。

 

ところが画面サイズからわかりとおり、スマホはPCと比べると圧倒的に表現できるエリアが小さいです。

 

そのためPCサイトにて左右の2カラムでエリアを定義したものを、同じようにスマホで再現しようとすると、要素を優先度順に縦に配置するしかできないのです。（以下のワイヤーフレーム参照）

 

PCサイト

 

スマホサイト

（ちなみにこの図は僕が過去にレスポンシブデザインの設計をした時に作ったものです）

 

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

 

今はもうあまり見ないかもしれませんが、ガラケー向けサイトでも、狭いエリアにどうやって要素を配置するかの解決案としてアイコン化する方法はよく使われていました。

 

ガラケーはスマホのようにドロップダウンメニューといったようなインタラクションは不可能だったため、サイトすべてのページ画面下にメニューエリアを配置し、アクセスキー（番号を押すとその処理ができるようになるもの、0だったらホーム、など）で操作できるにしていました。

 

いやー、懐かしいですね～。

ってもそんなに古い話じゃないんですけど。。。

 

もちろん、当時の設計者（※）たちも、探り探り設計していたとはいえ、「気づかないのでは」という意見も当然ありました。

※IA：Information Architectureですね。スマホがで初めの頃はまだUX/UIという言葉は日本では認知されていませんでした。

 

ところが、当時はその問題を「使っていくうちに自然とわかるようになる」というユーザの「学習性」に頼った理屈でクライアントに提案し、受け入れられたことで世に認知され始めました。

 

それが有名サービスなどで採用されるなどして普及しでからは「実績を挙げている競合他社も使っている」という理由で使われて来たのです。

 

スマホのメニューを再考する

さて、長かったですがようやく本題です（笑）

 

ハンバーガーメニューに「それが何かわからない」という課題があるのなら、当然それを解消させる必要があります。

 

それには、先に上げたメニューとしての役割を担いつつ、スマホというデバイス特性を鑑み、

 

ひと目でメニューとわかるデザインであること

 

という条件を追加して考慮する必要があります。

 

そうすると、解決案はさほど多くはありません。考える限りでは以下の3つかと思います。

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

 

それぞれの解決案をUIイメージと合わせて説明していきます。

 

ハンバーガーメニューにラベルをつける

ハンバーガーメニューとは先に上げたとおり「3つの横棒が縦に並んでいる」だけなので、このアイコンが何を示しているのかをラベルで補足するというものです。

 

具体的には以下のキャプチャの通り、ハンバーガーアイコンに「メニュー」「MENU」のいう文字列を添えるだけです。

 

 

デザイン次第では以下のサイトのように、ラベルだけにする、つまりハンバーガーのアイコンがなくても成立します。

 

ただ欠点があり、タップしないと中身が見えません。

PCのように画面を広く使えれば、メニューの中身を表示させてサイト構造を伝えられるのですが、これがこの案の限界ですね。

 

なお、ハンバーガーメニューにおいて、ラベルや枠線の有無でクリック率の検証をしているサイトがあるので紹介します。

https://ferret-plus.com/2672

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

 

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

言葉通りですね。PCで見慣れているので、一番イメージし易いかと思います。

 

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

 

ヘッダーにメニューを配置

 

スターバックスは画面上部に画面追従で、Facebook（Web版）は位置固定で追従してこないです。

また、Facebookのアプリ版はフッターナビゲーションになっています。

 

フッターにナビゲーションを配置

 

フッターにナビゲーションを配置する場合は、画面追従となります。

 

ただし、こちらの案にも「メニューが多い場合配置できない」という欠点があります。

 

もともとメニューの数は、多すぎてもNGで、人間が一瞬で視認できる数である、7±2個にすべきなので多くても9個ほどかと思いますが、スマホの場合、表示できても5個くらいかと思います。

 

6個入っているサイトがありましたので以下にキャプチャを貼っておきます。工夫すればもう少し入るかもしれません。

 

コンテンツ内に配置する

トップページにメニューを配置する案です。

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

 

 

こちらも欠点があり、ファーストビューがメニューだけになってしまいます。

 

また、トップページのコンテンツ部分に配置されるので、下階層へ遷移するとメニューがなくなってしまいます。

そのため、ユーザはどこか気になるページに遷移した後に別ページに移動したい場合、メニューのあるトップページに戻ってからサイトを回遊するという動きになります。

 

実はガラケーサイトでこのタイプの導線設計が多かったです。

僕は、この導線設計を勝手にタコ壺方式と読んでいました（笑）

 

最後に

ハンバーガーメニューを否定的に取り上げていますが、もちろん最適という場合もあります。

 

例えば、ツール系アプリなどは、利用するためにツールを熟知する必要があります。

イントラネット系のWebサービスであれば、利用者に説明会を実施することで「ハンバーガーのアイコンがメニューである」ことを意図的に学習させることができるので、この問題を解消し、他要素をエリアに配置することが可能になります。

 

そのため、何が最適かはケース・バイ・ケースだと思います。

 

つらつらと長らく書いてきましたが、僕がこの記事を通して伝えたかったのは、

 

何も考えずにハンバーガーメニューが最適だと思っていませんか？

 

です。

 

僕自身が、そのように盲信していたことに対しての戒めとして、本ブログを残すことにしました。

 

もし、自分が設計したサービスで根拠を説明できなければ、きちんと考えなおしましょう。

 

そして、今後は担当するサービスの目的、ターゲットユーザのUXをしっかり考え、最適なグローバルナビゲーションを導き出していただければと思います。