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

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

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

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

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

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

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

モバイルユーザビリティとは？エラーの原因と対処法

モバイルユーザビリティは、Google Search Console（サーチコンソール）で提供されているサービスであり、モバイルフレンドリーテストツールでも確認できます。モバイルユーザビリティのエラー表示の対処法を原因ごとに解説します。

モバイルSEOとは｜最適化するためのポイント8つ

モバイルSEOとは、スマートフォンによる検索結果を最適化する施策です。Googleのモバイルファーストインデックスにより、モバイルSEOの必要性は高まっています。モバイルサイトを運営している場合は、モバイルSEOのポイントを押さえましょう。

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

○3本線アイコン

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

○3点アイコン

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

○イラストや画像

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

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

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

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

ユーザビリティとは？アクセシビリティとの違いや測定方法・改善策も

当記事では、ユーザビリティとは何かを詳しく説明します。また、ユーザビリティを測る方法や高めるための改善策、アクセシビリティとの違いについても紹介するため、Webサイトを運用している人や企業の担当者は、ぜひ参考にしてください。

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

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

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

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

グローバルナビとは？作成時のポイント・デザインの参考例

グローバルナビは、グローバルメニュー・ヘッダーナビゲーションとも呼ばれるホームページの要素です。ホームページにおけるグローバルナビの役割から、作成時のポイント、パソコン・スマホ別のグローバルナビのデザイン例を紹介します。

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

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

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

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

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

UI/UXがSEOに与える影響とは？設計時のポイントや改善方法も

当記事では、WebサイトにおけるUI/UXの概要や、それぞれがSEOに与える影響について解説します。また、UI/UXの設計する際のポイントも紹介するため、Webサイトの評価を上げたい人は、ぜひ参考にしてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レスポンシブ対応の概要と重要性｜実装方法もSTEP別に解説！

この記事では、レスポンシブ対応の概要と重要性について解説します。スマホが普及している現在、レスポンシブ対応は欠かせない工程です。実装方法も紹介するため、Webサイトの管理や運用を担当している人は参考にしてください。