navigation-patterns

Name: navigation-patterns
Author: owl-listener

github.com/owl-listenerデザイン・UI3.1k1.9k 回インストール8 週間前に更新

navigation-patterns について

製品の情報設計、プラットフォーム、利用方法に合うナビゲーションパターンを選ぶデザインスキルです。画面をまたいで、行き先や階層、現在位置を明確にするための指針を提供します。

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

$npx skills add https://github.com/owl-listener/designer-skills --skill navigation-patterns

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

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

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

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

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

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

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

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

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

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

Markdown 対応