UIXHERO
#526
情報設計・ナビゲーション
#526

なびげーしょん

ナビゲーション

別名・表記:Navigationナビメニュー回遊導線

UIXHERO Definition

UIXHEROでは、ナビゲーションを「情報構造をユーザーが移動できる形にした、UI上の仕組みと表示の総称」と定義する。

概要

ナビゲーションが答えるべき問いは、古くから3つに整理されている。

  1. ここはどこか: 現在地が分かること
  2. 何があるのか: 選べる行き先が見えること
  3. どこへ行けるか: 次の一手が判断できること

このうち「現在地」は見落とされやすい。検索エンジンから直接下層ページに着地するユーザーは、サイト全体の構造を知らないまま到着する。

UXでの活用

  • 情報の匂い(Information Scent): ラベルが目的地の内容を予測させるかどうかが、クリック率と迷いの量を決める。抽象的なラベルは回遊を止める。
  • カードソーティングとの接続: メニュー項目とその分類は、ユーザーの分類感覚を調べた上で決めると精度が上がる。
  • ツリーテストによる検証: 見た目を作る前に、構造だけでたどり着けるかを検証できる。

誤用・混乱

  • IAとの混同: 「ナビゲーションを改善する」という依頼の多くは、実際には分類の見直し(IA)を必要としている。
  • 項目数を減らせば良くなる、ではない: 選択肢を減らすと1階層あたりの判断は楽になるが、階層が深くなる。浅く広いか、深く狭いかはトレードオフであり、正解は文脈による。
  • ハンバーガーメニューは万能ではない: 隠すことで画面は広くなるが、隠れた項目の利用率は下がる傾向が報告されている。何を隠すかの判断が必要。

💡 使いどころ

「目的のページにたどり着けない」という課題を扱う時。情報構造そのものの問題か、構造の見せ方の問題かを切り分ける前提として使う。

⚠️ 注意点・誤用

ナビゲーションと情報アーキテクチャ(IA)は別物である。IAは情報の分類と関係の設計、ナビゲーションはその一部をUIとして提示する手段にあたる。分類が破綻している場合、メニューの見た目を変えても解決しない。

具体例

  • グローバルナビゲーション、パンくず、サイドバー、フッターリンク
  • 検索、フィルタ、関連リンクといった探索の導線
  • 現在地を示すアクティブ表示
出典・参考文献:
  • Information Architecture for the World Wide Web (Louis Rosenfeld, Peter Morville)
  • Don't Make Me Think (Steve Krug)
作成: 2026年7月29日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: