誰もがモバイルサイトの上の角の「ハンバーガーメニュー」を見たことがあるでしょう。その名称は、３つの線が並んでハンバーガーのような形を作っていることに由来します。ハンバーガーメニューは、スペースを取らずにサイトメニューを組み込むためのWebサイトのデザインとして生み出されました。
情報を整理して、ミニマリズムを実現し、サイトをまとまった見た目にしてくれる一方で、ハンバーガーメニューには大きな欠点があります。
画像引用：Hamburger Menu Icon（Dave Gamez氏）
このようなメニューは、サイドメニューやナビゲーションドロワー、ハンバーガーメニューなどと呼ばれますが、そろそろユーザーの興味を引けるものに代えるべきかもしれません。Webデザインでハンバーガーメニューを用いるメリットについて議論している人は多くいます。彼らは「目に見えないものは忘れられる」ということわざを引用して、サイトの機能が隠れているとユーザーがサイトに関心を失ってしまい、コンバージョンに繋がらないと主張しています。
インターフェイスの限られたスペースを無駄にしないという目標を達成していることから、ハンバーガーメニューは、Webデザインの世界に猛烈な勢いで広まり、またたく間にほとんどすべてのWebサイトやアプリに採用されました。もうこの流れを変えるには遅いかもしれませんが、私は変化の糸口を探すユーザーの１人として、ハンバーガーメニューに反対することには価値があると考えています。
効率性に欠ける
ハンバーガーメニューのもっとも基本的な欠点は、モバイルアプリの左上の角に配置されていることです。右手でスマートフォンを使うユーザーにとってもっとも指が届きづらいところであり、エンゲージメントを促す要素には決してならないでしょう。
また、ユーザーは選択肢に何があるかを見るために、１度アイコンをタップしなければなりません。そして、選びたいオプションを見つけたらまたタップすることになるのです。また、サイト内を移動する前に、スワイプや「戻る」ボタンでハンバーガーメニューに戻る必要もあります。
大きな負担には感じられないかもしれませんが、これは求めるページにアクセスするのに２倍の時間がかかることになります。ユーザーはこの事実を認識し始めていて、どのサイトにも存在するハンバーガーメニューの効率性に不満を持ち始めているのです。
現在の激しく競争的なマーケットでは、ほかのサイトと差別化できる要素はフロントページの中心に表示して、ページを訪問してすぐにユーザーを引き込めるようにする必要があります。すべてのコンテンツをハンバーガーメニューに詰め込んでしまったら、ユーザーはブランドの強みを見つけることができないかもしれません。全体的なブランドの認知度やコンバージョン率に悪影響を及ぼすため、製品を宣伝するにはまったく適さないのです。
画像引用：Hamburger Menu（Christina Beard氏）
ホットドッグのほうが好きかもしれない
サイトデザインを美しく最小化できる画期的な方法として、Webデザイナーたちはハンバーガーメニューを取り入れたのですが、それによってユーザーのニーズは完全に無視されてしまいました。多くのユーザーはハンバーガーメニューが何を提供するものなのか知らないので、わざわざそれをクリックすることもありません。クリックする代わりに、ユーザーは必要としている情報を無駄に探し回ってしまいます。
一方で、ほかの機能的なメニューデザインを使用し続けているサイトでは、ユーザーはすべての情報を一目で見ることができます。ユーザーは、隠れたオプションを探し出す必要がないので、情報をとり逃す危険性がまったくありません。こうして多くの会社が流行を追うのをやめて、ページの上部分に水平にメニューを表示するような昔のメニューに戻り、結果的にユーザーから高評価を得たのでした。
ハンバーガーメニューを使用すると、最終的にコンテンツを探し出しづらくなります。一般的なユーザーが訪問して10秒でサイトに留まるか否かを決めているという時代に、素早く情報を見つけられることは不可欠です。ハンバーガーメニューは一見魅力的に思えますが、実際の機能面で劣っているのです。
ユーザーは、しばしばハンバーガーメニューを理解するのが難しいときがあります。一方で、伝統的なメニューデザインであれば、ユーザーは必ず瞬時に理解できるでしょう。ユーザーがハンバーガーメニューに不満をこぼし始めたとき、多くのWebサイトではユーザーの苦情を軽減させようと、「戻る」ボタンを付ける、ハンバーガーアイコンの横に「メニュー」という言葉を加えるなどの調整をしました。
画像引用：Sidebar Menu Design（Andy Stone氏）
しかし、これらの工夫はユーザーをさらに困惑させただけでした。現在では多くの種類のハンバーガーメニューがあることで、ユーザーが適切に操作するためには、サイトがどんなハンバーガーメニューを使っているのかを理解しなければなりません。ハンバーガーメニューがWebサイトにおけるナビゲーションの究極の方法であると思い込む前に、ほかの選択肢も考慮するべきです。
型を破るためには
多くの場合、ハンバーガーメニューに工夫を施してもっと使いやすくしたり、ほかのナビゲーションと入れ替えたりすることできます。単純にハンバーガーメニューをスクリーンの右側に移すだけでも、サイトがユニークになってユーザーのエンゲージメントを高められることがあります。右手を使うユーザーにとって、右側はタップしやすい位置だからです。
また、ハンバーガーメニューの中で、クリックされたあとに見える選択肢のレイアウトを最適化することもできるでしょう。トップメニューでは、ユーザーは最初と最後の要素に集中します。ですから、最初と最後にもっとも重要な情報を配置するべきです。もしサイドバーに折りたたまれる形式のメニューであれば、ユーザーは上から下へ選択肢を見るので、もっとも重要なものから順に並べる必要があります。
また、ハンバーガーメニューが生まれる前のように、ユーザーが使いやすいトップメニューに戻すか、クラシックなメニューを新しく工夫をするのも良いでしょう。以下の例をご覧ください。
GameStopは、使い勝手が良いようにハンバーガーメニューを撤廃して、アニメ―ションがついたアイコンを使っています。ユーザーがアプリにもっとも求めるものを優先し、それだけをトップメニューに表示しています。情報をサイドバーに隠すことなく、すっきりとまとまった印象にすることができました。
このアイコンと文字の構造によって、大きな親指であっても押せるほど大きいボタンに保ちつつ、文字をまとめることができました。もし操作ナビゲーションの選択肢をいくつかに絞れないようであれば、文字だけのメニューバーにするか、メニューが必要ないようなサイトにデザインすると良いでしょう。どちらにしても、ユーザーのことを念頭に置いて、ナビゲーションの技術を使用しましょう。
メニューは、必要となる時間を最小限にしたいユーザーのために、一目でわかるデザインである必要があると同時に、わかりやすい内容である必要があります。これはなかなか折り合いをつけるのが難しいかもしれませんが、エンゲージメントを最大化するためには必要な組み合わせです。
もしメニューの選択肢の優先順位を決めかねているのであれば、ユーザーの視点に立って考えてみてください。たとえば、ブログをどんなに大切に思っていても、ほとんどのユーザーは製品を見るためにサイト訪れているのだとしたら、ブログは最優先にはならないでしょう。
直感を信じる
ハンバーガーメニュー、またはその派生形がサイトで上手く機能しているのであれば、新しいメニューを求めている人たちに影響を受けて、無理に変える必要などありません。ハンバーガーメニューが使いやすくて魅力的だと考える人たちももちろんいます。特にスペースが限られるモバイルのWebサイトを開発する場合、ハンバーガーメニューは便利でしょう。
ハンバーガーメニューが現在論争の的になっていますが、もしハンバーガーメニューがサイトのナビケーションに適しているなら、そのままにしてください。ただ、メニューの中身に不十分な部分はないか、最大のエンゲージメントを得られるようにデザインされているかどうかは確認しましょう。しかし、もし何も考えずにハンバーガーメニューを選んでいるのなら、考え直すことをおすすめします。
メニューを、視界から排除するべきものではなく、正しく実装されていればコンバージョン率を高めることができる要素だと考えてみましょう。ユーザーはサイトを操作するときには、メニューを頼りにします。もしニーズが満たされなければ、ユーザーはサイトから離れてしまうでしょう。ハンバーガーメニューやほかのメニューの選択肢を選んだとしても、目標は素晴らしいユーザー体験を提供することにあるのです。
