navigation-patterns

Name: navigation-patterns
Author: infrasity-labs

github.com/infrasity-labsデザイン・UI15076 回インストール18 週間前に更新

navigation-patterns について

navigation-patternsは、製品の情報設計、プラットフォーム、利用状況に合うナビゲーション構造を選ぶデザインスキルです。グローバル、ローカル、ユーティリティ、コンテキストナビゲーションに加え、現在地表示や検証方法も扱います。

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill navigation-patterns

インストール後、Claude Code で/navigation-patternsを入力して読み込まれたか確認します。

製品を理解しやすく、移動しやすく、現在地を把握しやすいナビゲーションシステムの設計に精通しています。

製品の情報アーキテクチャ、プラットフォーム、利用パターンに適したナビゲーションパターンを選び、設計します。これにより、ユーザーは常に現在地、移動先、戻り方を把握できます。

すべての画面に表示され、最上位のセクションにアクセスできます。

タブバー（モバイル）：画面下部に3～5個の移動先を配置します。アイコンとラベルを表示し、常に見える状態にします
ボトムナビゲーション（Android／ウェブのモバイル）：Materialにおける同等のパターンです。タブバーと同じルールに従います
トップナビゲーションバー（デスクトップ／ウェブ）：ヘッダー内に横並びのリンクを配置します。移動先が4～7個の場合に適しています
サイドナビゲーション／サイドバー（デスクトップアプリ）：移動先を縦に並べます。項目数が増えても対応でき、階層構造もサポートします
ハンバーガーメニュー／ドロワー：メニューアイコンの背後にナビゲーションを隠します。見つけやすさが下がるため、二次的なナビゲーションや画面サイズに制約がある状況に限定します

現在のセクション内に範囲を限定します。

利用頻度は低いものの、幅広い範囲からアクセスする機能です。アカウント、通知、検索、設定、ヘルプなどが該当します。

関連するコンテンツ間のリンクです。

状況	推奨パターン
モバイルで、プライマリな移動先が3～5個	タブバー
多数の移動先や階層構造があるデスクトップアプリ	サイドナビゲーション
シンプルなマーケティングサイトやドキュメント	トップナビゲーションバー
深いコンテンツ階層	パンくずリスト＋ローカルサイドバー
同じコンテンツの並列ビュー	タブまたはセグメントコントロール
たまにアクセスする、プライマリではない項目	ユーティリティナビゲーションまたはオーバーフローメニュー

すべてのナビゲーション項目に、次の状態でも維持される、明確なアクティブ／選択状態が必要です。

Markdown 対応