MENU

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

目次

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

おもにスマホやタブレットなど縦長のデバイス表示で、Webサイトのナビゲーションメニューに使われるデザイン手法のひとつです。
スマホやタブレットでこの記事を読んでいる方は、既に右上にハンバーガーメニューが表示されています。

横線三本が並んだアイコンデザイン「≡」が、ハンバーガ―のように見えることからそのように呼ばれるようになりました。「折りたたみメニュー」と呼ばれることもあります。
スマホの台頭によりハンバーガーメニューが登場し、瞬く間に世界中のWebサイトに使われるようになりました。時代の流れを見ると、近年ではレスポンシブデザインの普及により、スマホ用やタブレット用だけでなくPCサイズのデザインでも見る機会が増えてきました。

日本と欧米ではハンバーガーメニューの主流が逆?

ちなみに、日本発のWebサイトでは右上にハンバーガーメニューが来るものが多いですが、逆に欧米発のWebサイトでは左上や下側に表示されているものが多いです。UIデザインの際に利き手を考慮しているのかもしれません。

ちなみにFacebookのアプリではハンバーガーメニューは右下にあります。(2022年10月現在)

ハンバーガーメニューのメリットとデメリット

メリット

スマホやタブレットなど表示領域が小さいデバイスにおいても、すっきりとシンプルにメニューを表示できる点がメリットの一つです。
また、昨今ではPC以上にスマホやタブレットからのアクセスが主なサイトが多くなってきていますし、いわゆる「モバイルフレンドリー」なサイトにアップデートしていく必要があります。
モバイルフレンドリーにするには必然的にスマホでの閲覧に適したWebデザインにする必要があります。

モバイルフレンドリー
2015年4月21日にGoogleが全世界で実装したアルゴリズムです。モバイルフレンドリーアップデートとも呼ばれます。スマートフォンでの閲覧に適していないページの順位を引き下げる仕組みです。

デメリット

デメリットを挙げるなら、初期状態ではハンバーガーメニュー自体が隠されているため、ユーザーがグローバルメニューの存在に気づきにくい、という点です。

ハンバーガーメニュー自体の表示領域の中にも凝ったデザインを加えることは可能ですが、気づいてもらえなければ意味がありません。

ハンバーガーメニューの陳腐化への対応

上記のデメリットの項目でも挙げたように、ハンバーガーメニューの内部である「メニュー」自体に気づいてもらえない場合や、デザインの陳腐化により、現在では更に洗練されたデザインも出てきています。

Webメディアの形態にもよりますが、コンテンツの量やデザインによっては、「脱・ハンバーガーメニュー」をしてみるのもありかもしれません。
ここでは近年よく見るようになってきたWebメニューの事例をご紹介します。

横スクロールナビゲーション

WeatherNewsのiOSアプリ
(2022年10月現在)

赤枠で囲っているところを横にフリックスクロールできます。

セグメントコントロール

ZOZO TOWNのiOSアプリ
(2022年10月現在)

セグメンテーションされた項目をごく少数に絞って目立つ位置に配置しています。

ボトムメニュー

TwitterのiOSアプリ
(2022年10月現在)

画面下部にグローバルメニューをせっch意しています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

肩書:Webプログラマー兼Webライター
名前:ゆいちゃん
経歴:ライド株式会社ではコーポレートエンジニアとしてWebサイトの開発・保守・運用を行う。
   ホテルマン、総合商社で勤務していた経験から顧客との対話は大切にしている。
   IT系と育児系の情報収集が得意。
保有資格:ITパスポート
使用言語:HTML/CSS, PHP
好きな言葉:Done is better than perfect.

目次