ハンバーガーメニューとは?スマホに適したメニューデザインを紹介

サイト制作

ハンバーガーメニューとは?スマホに適したメニューデザインを紹介

近年のWebデザインは、スマホ(スマートフォン)の爆発的な普及により、閲覧する端末のサイズに応じてサイトを表示する「レスポンシブデザイン」が主流となっています。

レスポンシブデザインを行うにあたって障壁となることのひとつが、メニューのUI(ユーザーインターフェース)をどのように設計するかという点です。
PCサイトであれば大きな画面に合わせてメニュー等の構成要素を配置できるものの、スペースの限られたスマホでは、同じような配置をすることができません。

そこで登場した技術が、「ハンバーガーメニュー」と呼ばれるナビゲーションメニューです。
今回は、ハンバーガーメニューの概要やメリット・デメリット、さらにハンバーガーメニューに代替する最新のUIまでを解説します。

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

ハンバーガーメニューとは、主に画面上部に表示する3本線のアイコンのことです。
3本線のアイコンのデザインが、ハンバーガーをシンプル化した形に見えることから「ハンバーガーメニュー」と称されています。
クリックすると、中に格納されたメニュー項目が表示される仕組みです。

WebサイトのUIによく利用されている技術のひとつで、スマホ画面の特性をカバーしてメニューを配置できることから、多くのスマホ用サイトで活用されています。
シンプルなデザインでスペースを取らず、メニューを格納することができるため、メインコンテンツの表示を阻害せず広く使うことができることが特徴です。

また、ハンバーガーメニューは「ドロワーメニュー」とも言われています。
ドロワーメニューは、ハンバーガーメニューを押すと画面外から引き出されるメニューのこととも言われており、諸説あります。
いずれにしても、スマホ用サイトで活用されるナビゲーションメニューです。

2.ハンバーガーメニューの種類

ハンバーガーメニューの基本となるデザインは3本線のアイコンです。
近年では、このシンプルなデザインをアレンジしたアイコンも存在します。
ハンバーガーメニューによく見られる種類を、以下に紹介します。

○3本線アイコン

本来のハンバーガーメニューのアイコンが、3本線アイコンです。
メニューアイコンとしての認知度も高いことから、最も多くのサイトで使用されています。
アイコンはシンプルな3本線で、カーソルを重ねたりタップしたりした際にアクションを付けるというアレンジが主に行われています。

○3点アイコン

3本線アイコンを3つの点で表した、更にミニマルなデザインのハンバーガーメニューです。
デザインをスッキリと見せたいサイトや、シンプルな構成のサイトによく利用されています。
また、メインメニューだけではなく、サブメニューに該当する部分にも使われることがあります。

○イラストや画像

ハンバーガーメニューには、上記以外にも以下のようなさまざまなデザインがあります。

  • 3本線+テキスト(Menu等)
  • 3点+3本線
  • 3本線+カラー
  • ハンバーガーを模したイラスト etc…

派生したデザインのアイコンも、同様の機能を有している場合はハンバーガーメニューに分類されます。
ハンバーガーメニューは本来シンプルなデザインのアイコンであるため、過剰にデザインを施すとユーザーからメニューであることを認識されない可能性があります。
そのため、ハンバーガーメニューにアレンジをする際は、若干のアクセントを付ける程度に留めましょう。

3.ハンバーガーメニューのメリット・デメリット

ハンバーガーメニューは多くのWebサイトに導入されていますが、メリットだけではなく当然デメリットも存在します。
特性をきちんと理解して設定しなければ、サイトのユーザビリティーをかえって損ねてしまう可能性もあるため、注意が必要です。

ここでは、ハンバーガーメニューの主なメリット・デメリットについて解説します。
両側面を把握して、ハンバーガーメニューの効果的な実装に役立ててください。

3-1.【メリット】ナビゲーションメニューをコンパクトに表示できる

ハンバーガーメニューはシンプルで小さなアイコンであるため、ナビゲーションメニューをコンパクトに表示できる点が最大のメリットです。

通常のヘッダーナビゲーションであれば、画面を大きく占有してしまいます。
一方、ハンバーガーメニューであればメニューを内部に格納しているため、メインコンテンツの表示を阻害することなく使うことが可能です。

また、後からコンテンツが追加されてもナビゲーションメニューの変更が容易であることもメリットと言えます。

これらのメリットは、特に画面の小さいスマホにおいて優位に働くため、多くのスマホ用サイトのナビゲーションの主流として活用されています。

3-2.【デメリット】コンテンツがユーザーに気づかれにくい

ハンバーガーメニューは、画面の隅に3本線のアイコンが表示されているだけのシンプルなUIです。
ミニマルでデザイン性に優れていることは大きなメリットではあるものの、メニューを表示するアイコンであることをユーザーに認識してもらえない場合もあります。

特に、スマホやタブレット端末に不慣れな方やハンバーガーメニューについて知見のない方は、アイコンからメニューを開くことができないケースがあります。
また、「メニューがない使い勝手の悪いサイト」として認識される可能性もあります。

3-3.【デメリット】開くまで中身が分からない

ハンバーガーメニューは内部にメニューを格納しているため、外から見てもただの3本線のアイコンにしか見えません。
メニューの内容を確認するためには、一度アイコンをタップしてメニューを開く必要があり、少なからずユーザーの手間をかけさせてしまう点がデメリットです。

また、ハンバーガーメニューから各コンテンツへ到達するためには、「メニューを開く>コンテンツへのリンクをタップする」といった2段階の操作が必要となります。

実際に近年では、「ハンバーガーメニューは認識されにくい点や操作性が悪くなる点がUX(ユーザーエクスペリエンス)を低下させる可能性がある」と指摘されています。
不明瞭なハンバーガーメニューは、検索エンジンからの評価を下げる可能性がゼロではないことを念頭に置いておきましょう。

4.ハンバーガーメニューに代わるナビゲーションメニューの紹介

ハンバーガーメニューは有用性の高さから重宝されていますが、かえってUXを阻害する場合もあるとの意見から、近年ではUXを重視したハンバーガーメニューに代替する新しいUIが登場しています。

ここからは、ハンバーガーメニューに替わるナビゲーションメニューを4つ紹介します。

4-1.ボトムナビゲーション

ボトムナビゲーションとは、全ページに共通するナビゲーションを画面下部に常時表示するナビゲーションです。
画面下部に位置することでコンテンツの閲覧を阻害せず、操作性にも優れている点が優れています。

一方で、メニューが多くなるとレイアウトも難しくなる点や、アイコンとテキストをセットで表示しなければ認識しにくい点がデメリットです。
これらのデメリットをカバーできる、シンプルかつわかりやすいUI設計を行うことが重要となります。

4-2.タブメニュー

タブメニューとは、タブをクリックするだけで、ページを切り替えることなくタブ内に格納されている内容を表示させられる(中身が切り替わる)メニューです。

タブメニューを活用することで、ユーザーはコンテンツ全体の把握やコンテンツの切り替えが容易となるというメリットがあります。
さらに、隠れたページの見出しも表示されているため、目的のコンテンツへ到達しやすいという特徴も持っています。

また、ハンバーガーメニューが持っているような、「タップをしなければメニューの内容・中身がわからない」というデメリットもありません。
タブ数が多すぎるとUXが低下する点がデメリットではあるものの、利便性が高いことから現在では活用事例が増えつつあるUIです。

4-3.横スクロールナビゲーション

横スクロールナビゲーションとは、ページ上部にあるナビゲーション部分のみをスクロールさせることによって、より多くのメニューを表示させるナビゲーションです。

スクロール操作は必要となるものの、常時アイコンのボタンが見えておりわかりやすく、メインコンテンツの視認性も損ねることがないシンプルなレイアウトを可能にします。

メニューに多くの項目を表示させるトレンドサイトや、ニュースサイトでは活用事例が多く見られます。

4-4.「もっと見る」表示

「もっと見る」表示とは、多くのメニュー・長いテキストコンテンツを表示するメディアサイトやECサイトでよく見られるUIです。
ユーザーがより多くのメニューやコンテンツを閲覧したい場合にタップすると、更に一覧メニューの続きが表示される仕組みとなっています。
メニューやコンテンツが表示されている画面の下に「もっと見る」というボタンが表示されているページを見たことがあるという方も多いでしょう。

膨大なコンテンツをスマートに収納できる点と、情報の表示/非表示をユーザーに委ねることができる点が、「もっと見る」表示の優れた特徴です。
コンテンツ量が多い現在のWebサイトやWebメディアにおいて、快適なコンテンツ閲覧を提供できることから、積極的に導入されつつあります。

まとめ

ここまで、ハンバーガーメニューの種類やメリット・デメリット、さらにハンバーガーメニューの代わりとなるUIまでを紹介しました。

ハンバーガーメニューは、デザイン性と利便性の高さから、WebサイトのUIの選択肢としては無くてはならないものです。
しかし、視認性や操作性を検討したうえで実装しなければ、かえってUXを損なうこともあります。
そのため、ハンバーガーメニューの特性をよく理解して、ユーザーの目線を踏まえてUIを設計することが大切です。

今回紹介したさまざまなUIも参考に、ぜひWebサイトのUI/UXにおける最も良い方法を模索してみてください。

【急速に進むcookie規制対応】担当者が行うべきSEO・1stPartyData・広告配信の重要ポイント 初心者でも使いこなせるSEO一元管理ツールGRAN SEARCH

RANKING

TOTAL
WEEKLY
【急速に進むcookie規制対応】担当者が行うべきSEO・1stPartyData・広告配信の重要ポイント

無料診断

会社名
お名前
電話番号
メールアドレス
診断を希望するサイトURL
その他お問い合わせ内容
上部へ戻る
GRAN SEARCH

300分かかる競合分析が1分で可能に無料で分析してみる

  • 分かりやすい操作で簡単に分析
  • SEOに必要な機能がAll in One
  • ずっと無料で使い続けられる
GRAN SEARCHを無料で試す
GRAN SEARCH