Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ

Post on:2017年2月14日

スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。

しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。

ハンバーガーメニューに代わる、スマホ向けのナビゲーションのまとめ

Great Alternatives to Hamburger Menus

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

01. タブ

タブ

タブはナビゲーション用の引き出しのように、カテゴリごとにコンテンツを整理するのに役立ちます。ユーザーはタブをどのように使うべきか知っているでしょう。タブはラベルやアイコンと組み合わせて使用します。

02. 下部に配置されたナビゲーション

下部に配置されたナビゲーション

下部に配置されたナビゲーションは、独自のカテゴリを配置したタブと言えます。このパターンはiOSとAndroidのどちらにも採用されており、常に表示されてラベルやアイコンで構成されています。ナビゲーションバーは、下もしくは上にスクロールした時に非表示・表示されることもあります。
Googleは非アクティブなアイコンにラベルを加えないことを推奨していますが、私はラベルを使用することに強く賛成します。そのアイコンが何をあらわすのかユーザーに考えさせない方がよいでしょう。

03. moreボタン

moreボタン

アイテムの選択肢が多い場合、moreボタンを使って、更に多くのアイテムを加えることができます。また、全部をあえて表示せずに、よく使うアイテムのみ（4つくらい）を最初に表示させて、あまり使わないアイテムをmoreボタンの中に隠すのも巧いアイデアです。ユーザーが必要な時に選択肢を増やすことができます。

04. スクロール可能なナビゲーション

スクロール可能なナビゲーション

moreボタンと同様に、スクロール可能なナビゲーションはアイテムが多い時のもう一つのアプローチです。ユーザーがナビゲーションを左右に移動できるようにスクロール可能にします。アイコンのみにするとパワーユーザーには操作しやすいですが、十分なテストが必要です。

05. インライン型ナビゲーション

インライン型ナビゲーション

Webサイトのトップページやメインアプリのハブに、上位カテゴリをレイアウトすることができます。これらのグループは、特有のヘッダーを持つリストとして配置できます。各カテゴリの中には簡単にアクセスできるように水平にスクロール可能なカード、または最も適したコンテンツを表示できます。

06. セグメントコントロール

セグメントコントロール

選択肢が限られている場合には、セグメントコントロールを使用することができます。ナビゲーションのアイテムはすべて一度に表示され、1回のタップでアクセスできます。

07. 検索を隠さない

検索を隠さない

制作者がハンバーガーメニューで隠すのはナビゲーションだけではありません。もし検索がアプリの重要な機能である場合、検索は常に見えている必要があります。検索を隠さないでください。
検索をスクリーンの上部に表示するか、検索モードになるための目に見えるリファレンスを表示させておくとよいでしょう。

終わりに: 常に実際のコンテンツでデザインする

ダミーテキストやダミー画像では魅力的にデザインすることができません。常に実際のコンテンツでデザインしてください。そうしないとハンバーガーメニューの中にはプレースホルダーとダミーテキストだらけになり、それら自身のコンテンツは意味をなしません、そしてコンテンツがないレイアウトは意味をなしません。

ハンバーガーメニューが悪い選択であるという事実は実際の数字で証明されており、アプリをリリースしているさまざまな会社によっても証明されています。クライアント、上司、マネージャーの誰かを説得しなければならない場合は、より分かりやすいナビゲーションに変えることをお勧めします。

ハンバーガーメニューについて学べる記事（英語）

配置するスペースがないアイテムをナビゲーション用の引き出しに隠さないでください。可能ならば考え直し、代替案を使用してください。分かりやすいということが常に望ましい選択肢です。

sponsors

top of page

©2025 coliss