メニューデザインのチェックリスト:17のUXガイドライン

ユーザーはメニューを使ってコンテンツを見つけたり、機能を利用したりする。このチェックリストを活用し、メニューがその役割を果たしているかを確認しよう。

紛らわしかったり、操作しにくかったり、見つけにくかったりするメニューにユーザーが苦労している様子を目にすることは少なくない。ユーザブルなナビゲーションメニューを作成するための以下のガイドラインに従い、よくある間違いを防ごう。

ナビゲーションが見えるようにする

1. 大きな画面ではナビゲーションを表示する

これは、(ナビゲーションカテゴリーを1つのメニューの下に入れる)ハンバーガーメニューは、デスクトップのウェブサイトやアプリには適していないことを意味する。「視野の外は意識の外」ということだ。ただし、ハンバーガーメニューは、小さな画面では必要悪である。画面が小さいと、限られた画面領域内でコンテンツとナビゲーションのバランスを取る必要があるからだ。しかし、メニューを表示するスペースが十分にある場合は、メニューを非表示にすべきではない

ナビゲーションには、目的地までの道案内以外にも役割がある。ユーザーがサイト上のリソースやコンテンツの全体像を把握しやすくするのである。ナビゲーションが非表示になっていると、ユーザーはそうしたコンテキストとなる手がかりを得られず、そのサイトがどのようなサイトで、何を提供しているのかわからなくなってしまう。

❌ Metropolitan Operaのデスクトップサイト:十分なスペースがあるにもかかわらず、ページ上部の白いバーに配置された目立たないハンバーガーバーメニューの下にナビゲーションが隠されている。このメニューは、多くのユーザーに見逃される可能性が高い。

2. メニューをユーザーが期待する場所に配置する

メニューはそれぞれ、画面上のある特定のエリアに表示されるものとユーザーは考えている。このユーザーの期待をうまく利用しよう。

ユーティリティナビゲーション、グローバルナビゲーション、ローカルナビゲーション、フッターナビゲーションを備えたウェブサイトのワイヤーフレーム
メニューの種類期待される位置
プライマリーナビゲーションメニュー (訳注:上の画像ではglobal navigation)ウェブサイト:ヘッダー アプリケーション:画面の左側
ユーティリティナビゲーション画面の最上部、プライマリーナビゲーションと検索の上
ローカルナビゲーションデスクトップトップサイトでは左側
フッターメニュー画面の最下部

フッターには優先度の低いペルソナ向けの付加的なカテゴリー(投資家情報、求人情報など)を記載するとよい。

3. リンクテキストは背景とコントラストの強い色にする

メニューリンクは、背景とすぐに区別でき、見つけやすくする必要がある。

コントラストのガイドラインを無視するデザイナーのなんと多いことか。デジタル空間を移動するだけでも迷いやすいのに、メニューを読み取るために目を細める必要まであるとすれば困ったことである。

❌ Gus Modernのナビゲーションは、背景の回転するカルーセルに重なってほとんど見えない。

4. 大きな画面ではメニューで画面を覆わない

大きな画面では、メガメニュー(またはサブメニュー)が開いたときに画面全体が覆い隠されないようにしよう。メニューの可視性や読みやすさは重要だが、開いたメニューが画面全体を占領してはならない。開いたメニューは、コンテンツの上に表示される、動的で一時的なUI要素であり、独自のURLを持つページとは異なるからだ。

ユーザーによっては、一瞬どこにいるかわからなくなり、メニューを開いたのではなく、誤って新しいページに移動してしまったと勘違いすることもありうる。また、サイト内で自分の現在地を認識するのに苦労するユーザーも出てくるだろう。

(ただし、このガイドラインは、モバイルデバイスでは必要に応じて適用されないこともある。)

❌ Ideoのハンバーガーメニューを開くと、それが画面全体を覆い、ユーザーは一瞬自分がどこにいるのかわからなくなるし、その下のページも見えなくなる。このデザインは、サイト内でユーザーが自分の現在地を把握できるようにするというナビゲーションの主な目的の1つに背くものである。

現在地を伝える

5. ユーザーの現在地をメニューで示す

今、自分はどこにいるのか」というのは、ユーザーがウェブサイトを適切に移動するために答えを出さなければならない基本的な質問の1つである。ユーザーは、メニュー(およびパンくずリストなどの他のナビゲーション要素)からの視覚的な手がかりを頼りに、この重要な質問の答えを見つける必要がある。

ナビゲーションメニューの最も重要な役割の1つは、ユーザーの現在地を示すことである。ユーザーはトップページ以外のページからアクセスすることがよくあるからだ。現在地の表示を怠るというのは、おそらく我々がサイトメニューで最もよく目にする一般的な間違いの1つである。

❌ Anthropicでは、ユーザーがサイトの情報アーキテクチャ上のどこにいるのかが明確に示されていない。(トップページ経由ではなく)このページに直接アクセスしたユーザーは、自分の位置を把握するのに苦労するだろう。
✅ Whirlpool:パンくずリストは、現在地を示し、流入したユーザー訪問者を方向づけるのに役立つ。目に見える情報を文脈化することは特に重要だ。探していたページに近いが、少し違う異なるページにユーザーがたどり着いた場合、ユーザーはナビゲーションの階層の1つ上のレベルにすぐに移動して、別の選択肢を試すことが簡単にできるからだ。

6. 関連するコンテンツに関するローカルナビゲーションメニューを提供する

ユーザーが関連する製品を比較したり、1つのセクション内で複数のタスクを完了しようとすることが多い場合は、そのような関連ページをローカルナビゲーションメニューで表示し、ユーザーが階層を上下に「ポゴスティッキング」しなくてすむようにしよう。

✅ ニューヨーク市都市計画局:左側にローカルナビゲーションを配置することで、横に移動するだけで、関連する要素が集まった1つのエリアを見て回るように各セクションを閲覧できる。このデザインは、探索的な閲覧を促進するだけでなく、目的の情報に近いが完全には一致しない内部ページにユーザーがたどり着いた場合にも有用である。

利用可能な選択肢を伝える

7. リンクラベルには明確で具体的かつ馴染みのある表現を使う

ユーザーが何を求めているかを把握した上で、ユーザーにとって馴染みがあり、関連性のあるカテゴリーラベルを使用しよう。メニューは、造語や社内向けの専門用語、抽象的な大分類など、気取った表現を使う場所ではない。コンテンツや機能、リソースを明確に説明する言語表現に徹すべきである。

8. リンクラベルは流し読みしやすくする

垂直メニューでテキストを左寄せにし、重要な語句を先に配置することで、ユーザーがメニューを読む時間を短縮することができる。

9. 大規模なウェブサイトではサブメニューで複数の階層を表示する

階層を複数掘り下げて閲覧される傾向がある場合は、メガメニューを採用すると、ユーザーは1つ(または2つ)の階層をスキップでき、時間の節約になる。モバイルデバイスの場合は、シーケンシャルナビゲーションを使用することで、ユーザーが深い階層構造を効率的にたどりやすくなる。

✅ トヨタは、モバイルではシーケンシャルメニューを採用して、ユーザーが深い階層にも比較的すばやくアクセスできるようにしている。また、画像を使って情報の匂いを感じさせる工夫もしている。アコーディオンメニューでは、こうしたことを実現するのは容易ではないだろう。

10. 長いメニューには視覚的な手がかりを使用する

(シグナルを追加するためのオプションとしての)視覚的な伝達手段で長いメニューの情報の匂いを強めよう。画像やアイコンを追加したり、一部に色を付けると、見慣れない選択肢の理解(または区別)や、流し読みしやすさの助けになる。ただし、重要なのは、これらはあくまで補助的な追加要素であり、明確なテキストラベルに置き換わるものではないということだ。また、アクセシビリティとユーザビリティの観点からも明確なテキストのオプションを提供することが求められる

✅ Control Voltageは、小さな画像を使用して、複数あるメニューカテゴリーの情報の匂いを強め、カテゴリー同士を区別しやすいようにしている。しかし、これらの画像は非常に小さい上に細かすぎるし、やや似通っているため、改善の効果は限定的である。シンプルなアイコンのほうがはるかに効果的だろう。いずれにしても、明確なテキストラベルも表示することが重要である。

操作を容易にする

11. メニューリンクはタップやクリックをしやすい大きさにする

リンクが小さすぎたり、互いに近すぎたりすると、モバイルユーザーにとって大きなフラストレーションの要因となる。また、大画面の場合は不必要に使いにくくなってしまう。

❌ Teenage Engineering:このナビゲーションメニューにある文字のリンクは、フォントが小さいし、リンク同士が近すぎるため、デスクトップサイトでもクリックしにくい。さらに、テキストのコントラストが低すぎて読みづらく、アクセシビリティも悪い。

12. サブメニューにはキャレットまたは矢印アイコンで明確なシグニファイアを付ける

こうしたシグニファイアは、直接新しいページに遷移するメインナビゲーションの項目と、サブメニューに展開される項目を区別するのに役立つ。カテゴリー名がクリック(またはタップ)できるように見えないと、ユーザーはサブメニューが存在することにすら気づかない恐れがある。

✅ スタンフォード大学は、サブメニューで展開可能なメニュー項目の横にシンプルなキャレットアイコンを表示し、ページに直接リンクされるメニュー項目(「Research(研究)」など)とサブメニューが開く項目(「Programs(コース)」など)を区別しやすくしている。

❌ メニューの背景に画像を使用すると、コントラストが低下する(その結果、読みにくくなる)ので気をつけよう。

13. サブメニューは(マウスオーバー起動ではなく)クリック起動にする

マウスオーバー方式は万人向けではない。タッチスクリーンユーザーや主にキーボードで操作するユーザーは、マウスオーバーしないと表示されないコンテンツにはアクセスできないからだ。もしメニューがマウスオーバーで表示されるようになっている場合は、そうしたユーザーのために別のアクセス方法も用意する必要がある。

デバイスや入力方法を問わず、一貫性があり、信頼性の高い操作パターンを提供することが望ましい。また、マウスオーバーで表示されるメニューは、誤って起動(または終了)してしまうことがあり、これはすべてのユーザーにとってフラストレーションの原因となる。

14. 階層が複数あるカスケードメニューは避け、代わりにメガメニューやランディングページを設置する

シンプルなドロップダウンメニューは1階層のナビゲーションには適しているが、2階層になるとユーザーにフラストレーションをもたらす。さらに、3階層以上になると、ユーザーが誤って別のサブカテゴリーを選択したり、メニュー全体を閉じてしまうリスクが高まるため、極力避けるべきである。

サブメニューに複数の階層がある場合は、メガメニュー(2~3階層の情報にうまく対応できる)を使用するか、追加の選択肢を備えたルーティングページにユーザーを誘導するほうがよい。

❌ R Studioは、複数の階層を持つカスケード式ドロップダウンメニューを使用している。このようなメニューは実際に操作するのが難しく、ユーザーがメニューの範囲から「外れて」しまったり、メニューを完全に閉じてしまったり、誤って間違った項目を選択してしまうなどのエラーが起こりやすい。

15. 長いページにはスティッキーメニュー(または部分的なスティッキーメニュー)を検討する

長いページの一番下までスクロールすると、ページ上部のメニューに戻るのに延々と退屈なスクロールを強いられることがある。スクロールしてもビューポートの上部にメニューが常に表示されていれば、この問題は解決するし、特に画面が小さい場合は重宝されるだろう。

16. よく使うコマンドはアクセスが楽になるように最適化する

これは、ドロップダウンメニューの場合は、ドロップダウンを起動するリンクターゲットの近くに最もよく使われる項目を配置することを意味する(ユーザーのマウスや指の移動距離を短くするためだ。というのも、フィッツの法則によると、ターゲットまでの移動時間はその距離に依存するからだ)。

17. ナビゲーションには目新しいデザインや奇をてらったパターンは使用しない

メニューをデザインする際、かっこいいエフェクトでユーザーを感嘆させようとすることを優先事項にすべきではない。クライアントやステークホルダーは斬新なメニューデザインに一時的には感心するかもしれないが。素晴らしいコンテンツが魅力的に表現され、そこに使い慣れたメニューからすぐアクセスできるようになっているほうがユーザーははるかに感心してくれるものだ。

❌ AdobeのCXMのサイトは、標準的なナビゲーションがまったく存在せず、代わりにカルーセルコントロールによって、ユーザーをページ内の任意の場所にジャンプさせるようになっている。ユーザーはどこに遷移されることになるのかわからないため、クリックしようという気になりにくい。

もちろん、新しいタイプのメニューがユーザーエクスペリエンスを向上させる場合もある。(ハンバーガーメニューは、この好例である。)あるいは、新しいテクノロジーがあまりにも革新的な場合には、今回のガイドラインが当てはまらないこともあるだろう。しかし、そのようなケースはまれだ。したがって、ほとんどのインタフェースは、この17の原則に従うことで、より使いやすくなるだろう。

無料ダウンロード