はじめに

制作会社の方と話していると「ハンバーガーメニュー」という言葉、出てきますよね？

たぶんあれだろうなぁ、、、と思いつつ、確信の持てないまま、分かったふり、したことないでしょうか？

この記事ではハンバーガーメニューとは何かについて明確に答えます。

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

結論、あなたの予想、たぶん正解です。

スマホでのメニュー表示方法が、三本線アイコンをクリックした際に隠れたメニューが現れるあのアイコンをハンバーガーメニューと言います。スマホ画面の右上か左上にある、あの三本線です。ハンバーガーに似ているからでしょうね。

ハンバーガーメニューは、ホームページのナビゲーションとして使われるデザイン手法の1つです。スマホの登場とともに、多くのアプリでナビゲーションを呼び出すためのデザインとして取り入れられ始めました。その後ホームページにもハンバーガーメニューを取り入れるケースが増え、現在では多くのスマホ版のホームページで採用されています。割合的にはスマホで見ることの方が圧倒的に多いですが、PCでも見かけることがあります。

かつてはひどく批判する人も

スマートフォンユーザーが増えるとともにハンバーガーメニューが多くのホームページで採用も広まりました。その広まっている途中でさえ、ハンバーガーメニューに関し、批判的な意見を述べる人がいました。その主な理由は、ハンバーガーメニューには下記のようデメリットがあるためです。

理由その1：見つけにくい

PCやスマホの操作に慣れ親しんでいて、日常的にさまざまなホームページにアクセスする人であれば、ハンバーガーメニューを押したらメニューが表示されることはすぐイメージできます。しかし、初見の人、スマホを使い慣れない人には三本の線が何を意味しているのか分からない場合があります。

理由その2：押すまでメニュー項目が分からない

PCのグローバルナビゲーションにはこのホームページにはトップページの関連ページがいくつあり、どんな内容か分かります。また、カーソルを当てればさらにその下層にあるページのタイトルも分かる場合もあります。しかし、ハンバーガーメニューは押さないと中にある項目を知ることはできません。企業のホームページを見てもどんな事業があり、どんな商品、サービスを展開しているのかハンバーガーメニューを押して開かなければ分かりません。

しかしすでに市民権を得た

たしかにハンバーガーメニューに対して批判的な声はありました。しかし、スマートフォンは爆発的な速さで普及し、それに対応したホームページではナビゲーションメニューとしてハンバーガーメニューが多く採用され、批判の声はあっても市民権を得てしまいました。また、現在に至ってもハンバーガーメニューに代るナビゲーションメニューは登場していません。たとえばAdobeのFlashというソフトはかつては様々なホームページで採用されていましたが、スマホでは再生できないため、スマホ版でもPC版でも採用するホームページは見なくなりました。同様にハンバーガーメニューがユーザーにとって使いにくく親切でないのであれば、クレームを受けたくない企業はだんだんと使われなくなるものですが、ハンバーガーメニューは今なお様々なホームページで採用され続け、PCでもグローバルナビゲーションではなく、ハンバーガーメニューが採用されるケースさえ増えています。欠点はありつつも、それを上回るデザインがない、と言うと負け惜しみのようですが、実際すぐれたデザインということですね。

ハンバーガーメニューが優れている点

確かにハンバーガーメニューは欠点もありますが、それでもハンバーガーメニューは多くのホームページのデザインで使われていますが、実際どういった所が優れたデザインだと言えるのでしょうか。具体的にご説明していきます。

コンテンツ表示エリアを広く使える

グローバルナビゲーションのようなメニューを画面に設置してしまうと、それだけで重要なコンテンツ部分の表示エリアを占有することになってしまいます。ハンバーガーメニューは画面右上、または左上の小さなスペースに設置できます。そのため、コンテンツ表示エリアを広く使うことができます。

シンプルで分かりやすい

ハンバーガーメニューはたった3本の線が表示されているだけです。そして押すとナビゲーションメニューが表示されます。非常にシンプルで分かりやすいものです。確かにスマホではじめてブラウザを開くという人にとってはどのような動作をするかイメージできないかもしれませんが、すでにスマホは広く普及し、日常的にスマホで様々なホームページを見るというのは多くの人が行っています。どのホームページでも似た動きをするため、推測で操作できてしまいます。

項目数に制限がない

ヘッダーにナビゲーションメニューを並べると、スペースの制限により表示できる数に限界があります。文字サイズを小さくすると項目数を増やすことはできますが、今度はボタンが押しづらくなってしまいます。

ハンバーガーメニューであれば、縦に並べ、スクロールできるようにしておけば多数のメニューを表示可能です。アコーディオン状に開閉できるようにしておけば必要ないときは折りたたんでおくことができ、スペースを取ることもありません。

また、メニューが追加になった時も新たなスペースを探す必要なく、簡単に追加できる点で、拡張性が高いと言えます。

まとめ

この記事ではハンバーガーメニューの意味と、その優れたデザイン性について説明しました。制作会社に依頼されるときの参考にしてください。

合同会社中丸屋でももちろん、ハンバーガーメニューを用いたデザイン設計を行っています。

制作会社にこういう要求をしても良いのかな、こういくことできるかな、とお悩みの方はご相談いただけます。気軽にお問合せください。