スマートフォンのハンバーガーメニューがわからない!?そんな場合はこんなメニューを作ろう。

もう生活になくてはならないモノとしてスマートフォンが君臨して、どれぐらいたつでしょうか。

今ではガラケー一筋の方も限りなく少なくなっていて、60歳台以降の方でもスマートフォンを持ち歩いてネットショップをするのが当たり前となってきました。

となると5年以上前に比べても、スマートフォンのサイトにおいて「このナビゲーションはわからない。」というのが少なからずなくなってきていると思うのですが、まだまだ顧客層によってはその理解も少しずれているようでして。

それが今回取り上げるスマートフォンのメニューボタンとなるハンバーガーメニューについて。

このハンバーガーメニューで作っていたところ「ウチのお客さんはそのボタンでメニュー開くの多分わからない。」と仰られたのが今回の話の始まりとなります。

そもそもスマートフォンのハンバーガーメニューって何のこと?

スマートフォンなのに、なぜ食べ物のハンバーガーの名前が？何ハンバーガーメニューって？とお思いの方。

そうです。この名前がまだ認知されていないことにも、WEB製作者側は気づかないといけないんですよね。このハンバーガーメニュー押せば、誰でもメニューが全部出てくるってわかるでしょという誤解から。




スマートフォンでサイトを見ると、こんな感じのメニューを見たことはありませんか。

押すとスライドして他のページへのリンクが出てきますよね。

このメニューの形がハンバーガーのようだからハンバーガーメニューと名付けられました。今では数多くのサイトに採用されているこのハンバーガーメニュー。

ですが、もしこのボタンを推してスライドされてメニューが出てくることをわからないとしたら…。

あれ、どこに他のメニューへのリンクあるの・・・。

わからないし、もう閉じよう。

となる可能性が抜群に高いです。なぜならそのページから他のページへ行く方法がわからないのですから。

ハンバーガーメニューを使いつつ、メニューというのがわかる形式に。

ですがサイトによってはこのハンバーガーメニューの下に小さく「メニュー」という文字、または「MENU」という文字を入れています。

こうすれば、さすがにメニューという状態はわかります。これを押せばメニューが出てくるんだろうなと。

ただこれよりも圧倒的にわかりやすいWEBサイトのスマートフォンのナビゲーションを今回は作ってみました。これは圧倒的だろうと…。




それがこちら。成約を生むお問い合わせに関する項目のリンク、トップページ、そしてメニューのリンクを付けたこのサイト。


実際の利用ユーザーからもわかりやすいと好評頂き、現在では弊社が制作した他のサイトでも応用してつけてみました。

文字という情報が乗っかるだけでやはりわかりやすさは格段に変わるものです。

実はハンバーガーメニューをやめて、他のメニューにするとわかりやすいという結果も‥。

これは滋賀県のWEBサイトにかぎらず、ハンバーガーメニューをやめてもっとわかりやすいメニュー構成にしたことでよりユーザーが見やすくなったという情報が出てきています。


代表的なのはやっぱり！ ハンバーガーメニューをやめたらPVも再訪問も劇的に改善！の記事。

すると、次のような劇的な改善が見られたとのことである。

月間アクティブユーザーのPVが2桁増加
月間アクティブユーザーの再訪が2桁近く増加
アプリ内の重要機能の利用が2～3桁増加
ネガティブなフィードバックがゼロに

日本の実例ではありませんが、ハンバーガーメニューをやめてサイト下部にナビゲーションメニューをつけたことで、訪れるユーザーのPVが二桁増加、再訪がニ桁近く増加とかなり良好な結果を生み出しています。

今やこのハンバーガーメニューはスマートフォンサイトだけではなくPCサイトでも取り入れられるようになっていますが、ハンバーガーメニューというだけで欠点が一つあるんですよね。

それは一度クリックする手間を増やすということ。

今回弊社で制作したメニューの場合、項目は限られますが重要なリンクであれば最初に表示させることでメニュークリック→ページリンククリックという手間を省き、ページリンクに直接クリックさせることができます。

ハンバーガーメニュークリックなので、読み込む時間が不要ではあるのですがそれでもワンクリックはワンクリック。

またそのサイトの利用者を考えた時に「ハンバーガーメニューだと、多分これわからないぞ。」という方は今回のようにあえて文字形式でメニューを作ってみるというのもありかもしれません。

WEBユーザビリティに関してはどのサイトでもこれが正解！というのがあるわけではなく、サイトによって検証を行いどれが一番正しかったかを測定する必要があります。そしてそれを重ねることでよりよいサイト作り、見込み客からの問合せにつながっていきますのでもしスマートフォンサイトでハンバーガーメニューを採用していて、なおかつ直帰率が高い…とかいう場合は取り入れてみるといいですよ。

ではでは。