ハンバーガーメニューについて考えてみよう！

デビュー当時、脚光を浴びたハンバーガーメニュー

スマホやアプリが一般的になってくると、多くのWebデザイナーにもこれらのデザインの案件がやってくるようになりました。そのときに、課題になったことが「メニューをどのように表示させるか」です。当時は、PCサイトがメインだったため、Webデザイナーやディレクターにとって、画面幅が狭いスマホでどのように表示させるかは本当に大きな課題でした。この課題を一気に解消してくれたのが、ハンバーガーメニューです。ボタン一つでメニューを表示・非表示させることができ、スペースも取らないということで、まさに救世主のように一気に広まっていきました。一時は、大半のスマホやアプリのデザインでハンバーガーメニューが採用されていたのではないでしょうか。

本当にわかりやすいデザインなの？？

しかし、一方でこのような批判・指摘が徐々に登場してきます。

「あの3本線がメニューってユーザーは本当にわかるの？」

この指摘は多くのWebディレクター、Webデザイナーをハッとさせたのではないでしょうか。普段から馴染みのある、もしくはそれが何か知っている人にとっては、メニューだと分かっても、そうではない人には何のボタンか分からない。まさに「デザインとしては致命的」とも言える指摘がされたのです。この頃より、スマホメニューには様々な意見やパターンが生まれてきました。

進化したハンバーガーメニュー

このような指摘からハンバーガーメニューには様々な改善が見られるようになってきました。例えば、次のような「文字付き」のハンバーガーメニューです。

メニューという表記があれば、このボタンが何なのかを伝えることができます。一方でハンバーガーメニューの特徴であった省スペースという特徴は弱くなっているとも考えられます。
また、ボタンを押すと画面全体にメニューが広がったり、アイコンの形を変える、メニュー表示時は「Close」が表示されるなど様々な工夫が登場してきました。

一方で、このような考え方もできるのではないでしょうか。すでにスマホが普及して10年近くが経っている。普及率も80%を超えている。つまりは、多くのスマホユーザーが「ハンバーガーメニューをメニューだと既に認識しているのではないか？」という仮説です。この仮説を元にすれば、当初の指摘は解消されることになります。

しかし、実はもう一つ大きな課題がハンバーガーメニューにはあります。それは、「クリック、タップをしなければユーザーはメニューの中身を見ることが出来ない」ということです。

ハンバーガーメニューとは別のアプローチ方法

これらの点から、現在では様々なメニュー表示方法が登場してきています。

Yahoo!では、複数列でのボタン表示やカルーセルメニューを採用しています。このように表示させることで、ユーザーはクリックやタップをせずに主要メニューやニュースを確認することができます。

ユニクロのように、ページ下部にハンバーガーメニューと主要メニューを並べて表示させるデザインもあります。よくユーザーが利用する内容をハンバーガー外に配置することで、ユーザーはクリック・タップせずにその内容を確認することができます。
また、ハンバーガーメニューも同時活用することで、それ以外のメニューを格納することができます。

これらに該当することは、幅広い世代のユーザーが閲覧する、ユーザーの動向をしっかりと設計しているということです。つまりは、どの世代のユーザーが見ても困らない設計を心掛けているため、上記のような機能を採用していると考えられます。

大切なことは、「ユーザーにとって何が最適か」を考えること

ハンバーガーメニューは今でも多くのWebサイトに採用されいているデザインであり、非常に画期的かつ多くの人に恩恵をもたらしたと思っています。むしろ、ハンバーガーメニューが存在しなければ、スマホやアプリのメニューについて議論が起きるということすら無かったかもしれません。そのような議論の末に、Yahooやユニクロのようなメニューデザインも登場してきたのだと考えられます。

大切なことは、「ユーザーにとって何が最適か」ということです。制作するWebサイトやアプリのユーザーをしっかりと考え、最適なメニューをデザインすることが、今のメニューデザインには求められているのだと思います。スマホだから、反射的に「ハンバーガーメニュー」を採用するということはNGです。なぜ、ハンバーガーメニューを採用したのか。これをしっかりと説明できるようにしなければいけませんね。

コラム カテゴリ

コラム一覧