wayfinding-navigation について
認知や記憶に困難のある人を支援するナビゲーション設計スキルです。現在地、移動先、戻り方を把握しやすくするパターンと、情報設計の評価項目を示します。
主な機能
- 01階層を示すナビゲーションパターン
- 02重要な操作への短い経路
- 03検索・閲覧・ショートカット
- 04長文コンテンツの分割方法
- 05ナビゲーション評価リスト
活用シーン
- 01深い階層のページにパンくずを追加
- 02複数ステップの進捗表示と後戻りを改善
- 03長いページを見出しや目次で整理
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ owl-listener/ inclusive-design-skills --skill wayfinding-navigationインストール後、Claude Code で/wayfinding-navigationを入力して読み込まれたか確認します。
詳細
道案内とナビゲーション
認知や記憶に困難のある人が、記憶に頼ることなくコンテンツを見つけ、自分がどこにいるかを把握し、元の場所に戻れるようにナビゲーションを設計します。
基本原則
ユーザーが次の3つの質問に、いつでもすぐに答えられるようにします。
- 今いる場所はどこですか?
- どこに行けますか?
- どうすれば戻れますか?
いずれかの答えを考えるのに1秒以上かかる場合、ナビゲーションは機能していません。
デザインパターン
道しるべパターン
- 階層が2段を超える場合はパンくずリストを表示する
- 複数のステップがあるフローではステップインジケーターを表示する(「全4ステップ中2ステップ目」)
- ナビゲーションでは現在のセクションを強調表示する
- ページタイトルは、ユーザーがこのページに移動するきっかけとなったリンクと一致させる
最短経路パターン
- 重要なアクションには、どの画面からでも1~2回のクリックでアクセスできるようにする
- 階層を深くするよりも幅を広げ、深い階層をフラットにする
- よく使うコンテンツへのショートカットを用意する
- 「直前にいた重要な場所に戻る」手段を常に利用できるようにする
複数経路パターン
- 重要なコンテンツには、検索、閲覧、ショートカットのすべてを用意する
- 目的地への経路を1つだけに限定しない
- 長いページには「移動先」リンクを用意する
- 最近訪れたセクションやよく使うセクションにアクセスできるようにする
チャンク化パターン
- 長いコンテンツは見出し付きのセクションに分ける(各セクションは最大3~5段落)
- 3画面を超えるページには目次を用意する
- 詳細情報は段階的に表示する
- 関連するフォーム項目はラベル付きのフィールドセットにまとめる
評価チェックリスト
- すべてのページに、明確で説明的なタイトルがある
- すべてのページでナビゲーションが一貫している(同じ位置、同じ順序)
- 現在の場所が常に視覚的に示されている
- 階層内にパンくずリストまたは戻るリンクがある
- 複数ステップのフローでは進行状況が示され、前のステップに戻れる
- すべてのページで検索を利用できる
- 重要なアクションには2回以内のクリックでアクセスできる
- 見出しはコンテンツの内容を説明している(カテゴリ名だけではない)
- リンクテキストは移動先を説明している(「ここをクリック」は使わない)
出力形式
レビュー時は、ナビゲーション上の問題箇所を具体的に示し、推奨する修正を提示します。設計時は、認知アクセシビリティに関する注記を付けて情報アーキテクチャを提示します。
コメント
Markdown 対応