ux-navigation

ナビゲーションスキル

このスキルの動作(最初にお読みください)

これは生成的スキルです。デフォルトの失敗モードは次のとおりです: 習慣によるパターン適用(情報アーキテクチャの深さ、広さ、プラットフォームに関係なくハンバーガー付きのトップバーを置くこと)、本質的なものの隠蔽(主要セクションがアイコンの背後に埋もれること)、道案内の欠如(「現在地」を示すシグナルがなく、検索から直接流入したユーザーが迷子になること)。ナビゲーションは、コンテンツの構造とユーザーがそれをどのように移動するかによって選ばれるべきであり、モダンなサイトがどのように見えるかによって選ばれるものではありません。このスキルは次の項目をゲートします:

1. 情報アーキテクチャの形とプラットフォームを確定する — これらが主にパターンを決定します。
2. 常に当てはまるコアを適用する — システムの階層化、道案内のシグナル、見える形での本質的な要素、インタラクションの基本。
3. パターンの決定を明らかにする(トップバー vs. サイドバー、ハンバーガー、メガメニュー、タブ、パンくずリスト、ページネーション vs. 無限スクロール)と、それぞれのトレードオフを示します。

その後、ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit に引き継ぎ、さらにマルチスクリーン構造として ux-information-architecture-audit にも引き継ぎます。

---

ステップ 0 — 設計前にコンテキストを確定する

不明な場合は質問してください。回答なしで進める場合は前提を明示してください:

• 情報アーキテクチャの形 — トップレベルのセクションはいくつあるか、階層はどのくらい深いか、そして今後増える見込みがあるか?(広さや成長は縦型ナビゲーションとメガメニューへと導きます。浅くて安定している場合はトップバーやタブが適します。)
• プラットフォーム — デスクトップ、モバイル、レスポンシブのどれか?モバイルではデフォルトが反転します: 主要な目的地にはボトムナビゲーション、単一のパンくずリスト、OS の慣習に応じたハンバーガーの配置。
• コンテンツ中心かタスクベースか? コンテンツアプリ(ニュース、動画)はクロームを最小化し、二次的なナビゲーションを隠すことができます。タスクアプリ(予約、フィットネス)には常時表示される永続的なナビゲーションが必要です。
• エントリーポイント — ユーザーは検索やリンクから深い階層に直接流入しますか?その場合、道案内のシグナル(パンくずリスト、タイトル、URL)はホームページ経由の導線よりもはるかに重要です。

---

常に適用されるコア(ほぼすべてのケースで正しい)

ナビゲーションシステムを階層化する — それぞれに役割がある

グローバル(主要セクション、すべてのページで一貫)・ローカル(セクション内。グローバルを上部に置いた逆 L 字型)・コンテキスト(コンテンツ内またはコンテンツ後の関連リンク)・ユーティリティ(ログイン、検索、言語、アカウント — 右上隅、馴染みのあるラベル、国旗ではなくテキストの言語名)・フッター(法的情報、サイトマップ、連絡先、ソーシャル。リッチな二次ナビゲーションを担う「ファットフッター」も可)。ある階層に別の階層の役割を担わせないでください — パンくずリストがグローバルナビゲーションの代わりになることは決してありません。

常に「今どこにいるか?」に答える

• ナビゲーション内の選択状態 — 現在のセクションが視覚的に示されている(色、下線、オフセット)。アクティブなタブと現在のページネーションページも同様です。
• 深い階層にはパンくずリスト(仕様を参照)を用意し、検索エンジンからの流入にコンテキストを与えます。
• 説明的な HTML タイトルとクリーンで読みやすい URL(/blog/how-to-bake-cookies であり、/page1 ではない)— ブラウザのクロームもナビゲーションの一部です。
• ロゴは左上、常にクリック可能、常にホームページへ — 万能のリセットボタンです。中央揃えや右揃えのロゴはナビゲーションを測定可能なほど損ないます。
• テストする: 誰かに深いページをいきなり見せて「このサイトのどこにいますか?」と尋ねてください。答えられないなら、シグナルが subtle すぎます。

本質的な要素を見える状態に保つ

• スペースがあるのに主要セクションをハンバーガーの背後に埋めないこと。 隠れたナビゲーションは発見されにくくなります。ハンバーガーは本当に二次的な項目のためのものです。
• 見える選択肢は隠れた選択肢にすべての規模で勝ります: 数が許すなら、ドロップダウンよりも露出したタブやリンクを優先してください。

インタラクションの基本 (妥協不可)

• タッチターゲットは 44×44px 以上、リンクテキストは 16px 以上、リンク間には十分な間隔を確保します。
• メニューはクリックで起動し、ホバーのみに頼らない — ホバーはタッチスクリーンやキーボードでは機能しません。ホバーを使う場合 (メガメニュー): 意図遅延 0.5 秒、表示 0.1 秒。
• キャレット/矢印アイコンでサブメニューを示す; 利用不可のオプションは削除せずグレーアウトします。
• アイコンはラベルに添えるものであり、置き換えるものではない — アイコンのみのナビゲーションは無視されるか誤読されます。
• 頻繁に訪れる目的地は手の届く範囲に (フィッツの法則 — 実際の使用状況に基づいてメニュー項目を並べます)。
• 長いページではヘッダー/メニューを固定 して、ナビゲーションのために上へスクロールし直す必要をなくします — ビューポートを圧迫しないようコンパクトに保ちます。

---

コンテキスト依存の判断 (表面化させ、自動適用しない)

判断	適用する場合	避ける / 適応させる場合	デフォルトの推奨
トップバー vs. 縦型サイドバー	トップバー: 7 個以下の安定したセクション、コンテンツ重視のサイト。サイドバー: 多数/増加中のカテゴリ、B2B/エンタープライズ/政府、アプリ — スキャンしやすく (注意は左に傾く)、モバイルでも変わらず収まる	サイドバーは小さな画面で水平方向のスペースを奪う — ブレークポイントを計画する	浅く安定した構造にはトップバー; 広く成長する IA には左サイドバー
ハンバーガーメニュー	二次的なオプション; モバイルのスペース制約	主要セクションを隠すこと; 表示する余地のあるデスクトップ	必須項目は可視化 + 残りはハンバーガー; Android では左上、それ以外はプラットフォームごと
メガメニュー	2 次元でスキャン可能なカテゴリパネルを必要とする大規模カタログ	カテゴリが少ない場合 (プレーンなドロップダウンのほうが落ち着く); 制御されないホバートリガー	中程度の粒度のグループに分割し (カードソートに基づく)、簡潔なラベル、ページを覆わない
タブ	短いラベルを持つ 2〜9 個の並列コンテンツカテゴリ、同じ階層レベル	逐次的なステップ (プログレストラッカーを使用); タブが 1 行を超える場合 (行を積み重ねない)	デスクトップでは固定タブ; モバイルでカテゴリが多い場合はスクロール可能なタブ
ボトムナビ (モバイル)	片手で届く必要のある 3〜5 個のグローバルな目的地	5 個を超える場合 (煩雑); 二次的なアクション	トップレベルアプリナビゲーションのモバイルでのデフォルト
パンくずリスト	深い階層 (E コマース、ドキュメント、大規模ブログ); ユーザーがサイト途中にランディングする場合	フラットなサイト (1〜2 レベル) — 純粋なノイズ	深さ 3 以上で追加; モバイルでは単一の「1 レベル上へ」リンク
ページネーション vs. 無限スクロール	ユーザーが項目を再発見し、比較し、進捗を感じる必要がある場合 (カタログ、検索結果、アーカイブ) — 有限のページは意思決定とコンバージョンを助ける	純粋な娯楽フィード	目標志向のブラウジングにはページネーション; 無限スクロールは受動的な消費のみ
ジェスチャーナビゲーション	オンボーディングの手がかりを伴う魅力的なモバイルパターン (スワイプアクション)	機能への唯一の経路として (発見不可能)	ジェスチャーは可視のコントロールの上に重ねるアクセラレーターとして
クイックリンク	頻繁に必要とされる、または見つけにくいコンテンツをサイト全体でプロモートする場合	グローバルナビがすでに公開しているものの重複	小さく厳選されたセット — 二つ目のメニューではない

---

コンポーネント仕様 (パターンを選択した場合)

ヘッダー — 左上にロゴ + 意味のあるセクションラベル + 最大1つの主要 CTA (右上)。詰め込みすぎないでください: メニュー、ロゴ、検索、CTA を1つずつ。高さはコンパクトに、テキストは16px以上、ターゲットは44px以上、要素が端に触れないようにパディングを確保、コンテンツとは視覚的に区別する (コントラストまたはボーダー)。レスポンシブ: 崩れないように折りたたみ、二次的な項目はハンバーガーメニューへ — 必須項目は決して入れないでください。

タブ — 見た目と動作を統一する; 選択中のタブは明確にハイライトし、かつそのコンテンツと視覚的につながっていること; 未選択のタブも表示される (無効に見えないこと); インタラクティブであることを示すホバー効果; 1行のみ; 縦の区切り線よりも余白を優先する; コンテンツの遷移方向はタブの方向と一致させる (親子関係の原則); 縦パディングは12px以上、タッチターゲットは44px; ラベルは簡潔に (「注文履歴」ではなく「注文」)。

パンくずリスト — 閲覧履歴ではなく階層を示す; ホームから始める; 現在のページは最後に置き、区別できるスタイルにしてクリック不可にする; それ以外の項目はすべて実際にクリック可能なページにする; 親しみのある区切り記号 (> / →); ページ上部、ヘッダーの下に配置し、左揃えにする (RTL では左右反転); 控えめなスタイルにする — これは二次的なナビゲーションである (ただしコントラストは4.5:1以上を維持する); 長いパンくずはオーバーフローメニューで切り詰める (最初と最後は表示したままにする); 長いラベルはツールチップで全文にアクセスできるようにして切り詰める。

ページネーション — 現在のページを明確に示す; 前へ/次へに加えて最初/最後 (« ») のコントロール; ページカウンター (「10ページ中3ページ」); 長いページリストのスマートな切り詰め (常に最初、最後、現在を表示する); データ量の多いリスト向けに、任意の手動ページ入力と1ページあたりの表示件数セレクター; コントロールはコンテンツの下部に配置し、クリック領域は広く、コントラストは4.5:1。

---

結果を検証する (オーケストレーション)

ハンドオフでは、各レンズをインストール可能なスキルの name で指定します。そのスキルがインストールされている場合にのみ呼び出してください。インストールされていない場合、このスキル自体のコアにすでにこれらのルールが含まれています — ブロックせずに、それなしで進めてください。

生成または修正した後、完了と宣言するのではなく、結果を監査レンズに渡してください。これらは候補のレンズです — 姿勢は docs/orchestration-policy.md によって設定されるか、全体を ux-design-review 経由でルーティングしてください。ここでは、heuristics と microcopy は Tier A (自動実行)、accessibility、aesthetics、information-architecture、mobile-responsiveness は Tier B (任意提供) です — 既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用状況に絞られます; mobile-responsiveness はモバイルの場合にのみ適用されます。ユーザーがこのスキルを特定の1つの目的で呼び出した場合は、その範囲を尊重してください。

• ux-heuristics-audit (Tier A) — システム状態の可視性 (選択状態)、メンタルモデルとの一致、一貫性、思い出させるのではなく認識させる。
• ux-accessibility-audit (Tier B — 任意提供; デザインシステムがある場合は絞る) — メニューのキーボード操作、タッチターゲット、コントラスト、ホバー依存、ナビゲーションを通したフォーカス順序。
• ux-aesthetics-audit (Tier B — 任意提供; デザインシステムがある場合は抑制) — ヘッダー/メニューの密度、余白のリズム、クロームがコンテンツを圧倒していないか。
• ux-microcopy-audit (Tier A) — セクション/タブ/パンくずのラベルの明瞭さと簡潔さ、説明的なタイトル。
• ux-information-architecture-audit (Tier B — 任意提供) — カテゴリ構造そのもの (グループ化、深さ、ラベル) がユーザーのメンタルモデルと一致しているか; このスキルはナビゲーションを配置し、IA が構造を所有します。
• ux-mobile-responsiveness-audit (Tier B — 任意提供; モバイルの場合にのみ適用) — コンテキストがモバイルの場合: ボトムナビゲーション、ブレークポイント、片手でのリーチ。

監査で矛盾が表面化した場合 (例: ブランドが最小限のアイコンのみのサイドバーを望む vs. 見つけやすさ)、主要なタスクに立ち返って解決してください: ユーザーは常に自分がどこにいるのか、ここに何があるのか、目的地へどう行くのかを知っていなければなりません。

---

一般的な do/don't パターン

❌ しない	✅ する
クリーンだからといって何でもハンバーガーメニュー	必須項目は表示し、ハンバーガーは副次的な項目にのみ使う
見た目でトップバーかサイドバーかを選ぶ	IA の広さ、成長、プラットフォームで決める
ユーザーのクリック経路を記録するパンくずリスト	サイト階層を反映するパンくずリスト
ホバー専用のドロップダウン	クリックで起動、ホバーは 0.5 秒の意図遅延を伴う拡張として
アイコンのみのナビゲーション項目	アイコン＋テキストラベル
タブが 2 列	1 列、スクロール可能なタブ、またはカテゴリの再構成
どこにも選択状態がない	現在のセクション、タブ、ページを常に明示
どこにもリンクしない中央寄せのロゴ	ロゴは左上、クリック可能、→ ホームページ
商品カタログの無限スクロール	ページネーション — ユーザーは再発見と比較を必要とする
言語セレクターとしての国旗	各言語の自称によるテキストラベル
確認せずに出荷	ヒューリスティクス＋アクセシビリティ＋美学＋マイクロコピーに引き継ぐ

---

出典レッスン (Uxcel)

• Types of Navigation Systems
• Common Navigation Patterns
• "You're Here" Navigation System
• Utility Navigation
• Best Practices for Vertical Navigation
• How to Design Tabs for Clear Navigation
• Best Practices for Designing Tab Navigation
• How to Design Breadcrumbs for Better Navigation
• Best Practices for Designing Breadcrumbs
• When & How to Use Headers in UIs
• Best Practices for Designing Headers
• Guide to Designing Pagination
• Best Practices for Designing Pagination
• Mobile Navigation Design