ステキなUX、損するUX

ハンバーガーメニューのユーザビリティはいいのか?

ハンバーガーメニューとはもちろんハンバーガーのメニューのことではなくスマートフォンサイトのナビゲーションメニューのことだ。ほとんどのサイトの右上にハンバーガーメニューと言われるメニューがある。スマートフォンのメニューはこれだ、これしかないんだと言わんばかりにどこのサイトにも置かれているハンバーガメニューだが、これが果たして良いのだろうか。

ハンバーガーメニューのメリット

PCとは異なり、スマートフォンでは表示できる画面領域が少ない。そのためPCで表示させているナビゲーションメニューをそのまま表示してしまうとナビゲーションで画面の大部分が占められてしまう。それをメニューというアイコンだけ表示させ、タップするとナビゲーションメニューが出てくるようにする。そうすることでナビゲーションエリアの領域をできる限り小さくし、コンテンツエリアを表示しようという意図なのがこのハンバーガーメニューだ。

ハンバーガーメニューのデメリット

ユーザーはナビゲーションを見たいのではなく、コンテンツを見に来ている。だからナビゲーションよりもコンテンツを見せようというのは正しいことだ。

しかし、メニューのアイコンとして表示しているために、どのような項目がナビゲーションに含まれているかユーザーは分からない。知っているサイトの場合や、もしくは特定のコンテンツを探している場合(探さないとコンテンツが見つからないのはそれは問題とも言えるが)ならメニューをタップすることはあるだろう。だがそれ以外の場合、わざわざメニューを押してみようなどユーザーは思わない。メニューを見ることはないのである。それはせっかくいいコンテンツを用意していても見られることはないということだ。

スマートフォンを重視したサイトへ

BtoCのほとんどのサイトではスマートフォンからの閲覧が増えてきている。スマートフォンの方が閲覧数が多いことも珍しくなくなってきた。ファッションサイトなどでは大多数がスマートフォンからとなってきている。

スマートフォンからの閲覧の方が多くなると、当然のようにスマートフォンからの閲覧を重要視したサイトにすることになる。モバイルファーストやスマートフォンファーストなどと言われる考え方だ。

ファーストビューに何を置くか、1ページのコンテンツボリュームはどれくらいが適切かなどスマートフォンからの閲覧を最優先に考えてサイトを作る。このスマートフォン重視の考え・作り方は多くのサイトで見られるようになってきた。

ナビゲーションもスマートフォンファーストになってる?

では、ナビゲーションについてはスマートフォンに最適化されているのだろうか。
ハンバーガーメニューを利用するメリットは先程説明した通り、PCのメニューをスマートフォンで表示しようと思うと、画面がナビゲーションで占められてしまうためだ。だが、これはPCのメニューをスマートフォンで表示しようとした場合の話だ。

スマートフォンファーストならナビゲーションもスマートフォンに最適化したナビゲーションを配置するべきである。PCのナビゲーションをベースに考えるのではなく、スマートフォンに適したナビゲーションとして考えるのである。それは、多くの場合、内容が隠れてしまうハンバーガーメニューが良いということにはならないだろう。数は多く置けないが、当初からナビゲーションの内容を表示させていた方がよいということになるだろう。

ハンバーガーメニューはデメリットがあるナビゲーションだ。ユーザーにとって(提供する側にとっても)あまりよいナビゲーションではない。スマートフォンに適したサイトを用意するならば、ハンバーガーメニューを当たり前のように置くのではなく、ユーザーにとって最適なナビゲーションを考えて配置するべきだ。

中東 優

執筆者

中東 優(UXデザイナー / インフォメーションアーキテクト)

> プロフィール

最近のコラム

集客やコンバージョン、Webサイトについて相談してみたいことはありませんか?

コンバージョンを増やしたい、集客を増やしたい、Webサイトを作りたい・リニューアルしたいといったご要望に14年にわたり応え続けてきました。
まずは話をしてみたい、どんなことができるのか聞いてみたいといったことでも大歓迎です。お気軽にご相談ください。