スマートフォンやタブレット向けのWebサイトでよく用いられているハンバーガーメニューってご存知ですか？ マクドナルドやモスバーガーなどのチェーン店にある、注文用のメニューではありません。Webサイトで使われるハンバーガーメニューについて、その意味をご紹介します。また、ハンバーガーメニューのデメリットとメリット、効果的な取り入れ方についてまとめてみました。
そもそもハンバーガーメニューとは？
ハンバーガーメニューは三本の横線が重なった形のアイコンが用いられています。三本戦をそれぞれ、バンズとハンバーグに見立ててハンバーガーメニューと呼ばれるようになりました。本来はドロワーメニューと呼ばれるものです。
ハンバーガーメニューの特徴
Webサイトのナビゲーションに使われるメニュー方式で、画面上ではアイコン一つで占めるスペースが最小限で済みます。タップすることによってはじめてメニュー項目が表示されます。
また、メニュー項目の数には上限がなく、スクロールや階層化を用いることにより、かなり多くの項目をこのアイコン一つに詰め込むことが可能です。ミニマムデザインを意識したアプリケーションやサイトで取り入れられています。
マルチデバイスに対応
アイコン自体は画面上のごくわずかなスペースしか必要としないため、画面の狭いスマートフォンやタブレットでは特に効果的です。狭い画面をナビゲーションの文字でゴチャつかせず、スッキリとさせることができます。
画面デザインをシンプルにすることにより、一つの画面デザインでPC・スマートフォン・タブレットなどすべてのデバイスに対応することを可能にしました。
また、PCで表示する場合はタブメニューを、スマートフォンやタブレットの場合はハンバーガーメニューと使い分けることもできます。デバイスを問わないUIを実現させるためにも効果的です。
多くのメニュー項目もすっきり
ハンバーガーメニューは階層化することにより、理論的には無限の項目を設置することが可能です。
画面上に置くのはたった一つのアイコンのみで、驚くほど多くの項目を入れ込むことが可能になります。ミニマムデザインで、画面上をなるべくスッキリさせたい場合に、使用頻度の低いメニューをまとめておくのに向いています。
もちろんあまり項目数を増やしすぎるのはUIの面から見てもも、使いにくさにつながりますのでおすすめはできません。ナビゲーション項目をカテゴリーごとに分けて階層化することで、項目やカテゴリーの追加や変更も容易になります。
ハンバーガーメニューのデメリット
最近、「ハンバーガーメニューはもう古いのでは」などと取りざたされることも増えてきました。そこで、ハンバーガーメニューの一般的に言われているデメリットについてまとめてみました。
慣れないとアイコンの意味がわからない
スマートフォンが普及し、ハンバーガーメニューが世に出回り始めた頃、そこをタッチすればいいということに気がつくまで時間がかかった人も多いのではないでしょうか。
また、年配の人にスマートフォンの使い方を聞かれて説明している時、ここをタッチすればメニューが開きますと何度も繰り返し説明したのに、次回も同じことを聞かれたという経験はいかがでしょう。
ハンバーガーアイコンは見た目からそれがメニューアイコンであるということがわかりにくいという特徴があります。それがメニューアイコンであると理解していないと使えないという点が、考えなくても直感で操作ができるUIの観点からはデメリットと捉えられています。
階層が深くなりすぎると使いづらい
項目数に制限がないとはいえ、1行にあまり多くの項目を詰め込みすぎるとずっとスクロールでたどることになり使いづらくなります。その対策としてハンバーガーメニューは、カテゴリー分けしてメニューシートを階層化して用いることができます。
しかし、この階層も深くなりすぎると使いづらさにつながります。自分のしたい操作にたどり着くまでに、何度もメニュー項目を選び、なおかつどこに自分の必要な機能があるのかわかりません。毎回、自分の必要とする機能を求めて探し回るという煩雑さの元となりがちです。
開かないとメニュー項目がわからない
もう一つのデメリットが、タップして開いてみるまでそこにどんな項目があるのかわからないということです。
また、開いてみた先に色々な機能が詰め込まれているため、次に同じ操作をしようとした時どこにその機能があったか覚えきれません。何度もメニューをたどるという操作を繰り返す必要が出てきてしまいます。
それでもハンバーグメニューを使用するメリットは
デメリットであげた項目も、きちんと設計することである程度はクリアすることができます。ハンバーガーメニューを使うことのメリットをまとめてみました。
メニューがアイコン一つで済み場所をとらない
何と言っても、様々なメニュー項目をアイコン一つにまとめられるというのは、「省スペース」の観点からみて大きなメリットです。画面サイズに制約のあるスマートフォンでは特に「省スペース」の要素は重要です。
ただし、画面にポツンとハンバーガーアイコンだけがあるというのでは、ユーザーに操作を戸惑わせてしまうことになりかねません。主要機能のナビゲーションは別途設置するなど、デザイン性を考慮しながらの工夫が必要になります。
メニュー項目数に制限がない
メニュー項目数に制限がないため、必要な機能をすべて収めることができます。
縦にスクロールさせたり、カテゴライズして階層化することで多くのメニュー項目をスッキリと見せることもできます。
また、項目数が増えた場合も画面の印象を損なわずにメニューに追加するのみで済むので増設が容易です。
ただし、項目数の多さは先に書いたようにデメリットにもつながります。効果的に活かすためにはスッキリ見えるよう、項目の数や階層の組み合わせを精査する必要があります。
使用頻度が低い機能をまとめておける
効果的にハンバーガーメニューを活かすためよく用いられている方法は、使用頻度が低い機能だけを入れ込むというものです。主要な機能は画面上にナビゲーションを表示しておくので、直感的なUIは実現できます。
ハンバーガーメニューに入れる機能も絞ることができ、メニュー構成をスッキリさせることができます。また使用頻度が少ない機能なので、タップ数が増えてもよく使う機能ほどはストレスにはならないというメリットがあります。
ハンバーガーメニューはきっちり設計して効果的に取り入れよう
ハンバーガーメニューの特徴とメリット・デメリットについて解説してきましたがいかがでしょうか？
結局、メリットとして活かすのもデメリットにしてしまうのも設計次第ということがご理解いただけたと思います。シンプルなマルチデバイス対応の画面を考える時、ハンバーガーメニューは避けて通れないアイテムです。
きっちりと設計して効果的に取り込むには、やはりユーザビリティに精通した専門のWebデザイナーに依頼するのがおすすめです。ハンバーガーメニューを取り入れた、ミニマムデザインが得意なWebデザイナーを探すのはクラウドソーシングという選択肢はいかがでしょうか。