みなさまが「ハンバーガーメニュー」という言葉を聞いて思い浮かべるものはなんでしょう？思わずハンバーガー屋さんに置いてあるメニューを思い浮かべてしまいそうですが、もちろんそのことではありません。ハンバーガーメニューとは、スマホサイトをより使いやすくするために大変便利なナビゲーションメニュー のことです。

ハンバーガーメニューとはどのようなものなのか、そのメリットやデザインのポイントなどについてまとめてみました。機能性の高いスマホサイトを作りたい方、必見です！

ハンバーガーメニューとは？

ハンバーガーメニューとは、タップによってメニューが出てくるスタイルの機能 です。以前は「ドロワー」 と呼ばれていましたが、アイコン部分の形が水平の三本線でハンバーガーに見えることから、ハンバーガーメニューと呼ばれるようになりました。

スマホはPCに比べて画面が非常に小さく、表示される面積が限られています。そのため、見やすくする工夫が必要不可欠です。本来であればPCサイトのように、メニュー内に下層の入り口をまとめて表示させて、すぐにそのページに飛べるようにしたいところですが、スマホでそれをやってしまうと、ディスプレイが小さい分かなり幅を取られてしまい、かえって見づらくなってしまいます。

そこで、スマホサイトの場合は下層コンテンツの入り口をハンバーガーメニューの中に格納することにより、小さい画面を有効活用できる ようになりました。スマホサイトをよく見てみると、ほとんどのメジャーなサイトはこの機能を使っていることが分かります。

ハンバーガーメニューデザインのポイント

ハンバーガーメニューは、水平の三本線（≡）のアイコンでサイトの最上部に設けられているケースが多い です。しかし、この三本線をクリックするとメニューを閲覧できることを知らないスマホユーザーは多く、このシンプルすぎるデザインが問題視されています。このアイコンだけ見ても、それをクリックすると何が起こるのかがまったく予想できないため無意味であるという声もあります。

しかし、三本線だけで表現できるハンバーガーメニューは、工夫次第ではサイトの機能性を抜群にアップさせることができる便利なものです。例えば、三本線の下に小さく「menu」と表示する など、アイコンのデザインにひと工夫を加えてみましょう。それだけでそのアイコンが何を意味するのかをユーザーに分かりやすく知らせることができ、アイコンをクリックするユーザーが増えることは間違いないといえるでしょう。

ハンバーガーメニューだけに頼らない

Webサイトをより使いやすくするためには、ハンバーガーメニューの存在だけに頼らず、ユーザーにとって親切な構造を作り上げる ことが大切です。そのためには、重要なコンテンツはハンバーガーメニューの中だけに組み込むのではなく、コンテンツエリアに入り口を作る ことをおすすめします。特にユーザーのアクセスが多いコンテンツをピックアップし、常時表示されるナビゲーションに置くようにしましょう。カートやマイページなどもそのようにすると、使いやすさが大幅にアップします。

まとめ

スマホサイトでよくみる「ハンバーガーメニュー」デザイン。大変便利な機能ですが、メニューを隠してサイトのデザイン性を上げられるかではなく、ユーザーが検索しやすいかどうかが最も大切です。それを踏まえた上でハンバーガーメニューアイコンを効果的に使い、Webサイトの見やすさを高める工夫をすることが、利用者数増加やユーザー満足度アップにつながるのではないでしょうか。ぜひたくさんのサイトを見てハンバーガーメニューがどのように採用されているかを研究し、使いやすいWebサイト作りに挑戦してみましょう！

Tweet