information-architecture

このスキルはプロダクトやサイトの構造骨格を定義します。デザインブリーフと実装の間に位置します。ブリーフが書かれた後、タスクが作成される前に実行してください。

使用例

• 「ビルドを始める前にこのアプリの IA を計画してほしい」
• 「ナビゲーションとページ構造をマップアウトして」
• 「ドキュメンテーションサイトのコンテンツを整理する必要がある」
• 「オンボーディング体験のユーザーフローを定義してほしい」

プロセス

1. .design/*/DESIGN_BRIEF.md に既存のデザインブリーフがないか探します。複数のサブフォルダが存在する場合は、最後に更新されたものを使用するか、ユーザーに働いている機能を尋ねてください。ブリーフが存在しない場合は、ユーザーに何を構築しているのか、誰のために構築しているのかを尋ねてください。

2. 既存のコードベースを確認して、既に存在する構造を理解します:

   • ルーティング: Next.js の app/ または pages/ ディレクトリ、React Router の設定、Vue Router、SvelteKit ルート、または静的 HTML ページファイル
   • ナビゲーションコンポーネント: ヘッダー、サイドバー、ナビバー、パンくずリスト、フッターコンポーネント
   • レイアウトコンポーネント: ルートレイアウト、ネストされたレイアウト、ページラッパー、コンテナコンポーネント
   • ページディレクトリ: ファイルシステムで現在どのようにページが整理されているか
   • URL パターン: 既存のスラッグ、動的セグメント、クエリパラメータの規約
   • CMS またはデータレイヤー: コンテンツモデル、API ルート、データ取得パターン、MDX/コンテンツディレクトリ
   • 構造が既に存在する場合、このスキルはそれを拡張・改善します。既に構築されたものを無視する新しいアーキテクチャは提案しないでください。

3. 構造上の決定について、ユーザーにインタビューします。各質問に対して、推奨される回答を提供してください。

   最低限、以下をカバーしてください:

   • ユーザーが見つけたり、やったりする必要がある主要なもの は何ですか?頻度順にランク付けしてください。
   • ナビゲーションの深さは何レベルまで許容できますか?
   • 時間とともに成長するコンテンツと、固定的なコンテンツは何ですか?
   • 異なるエントリーポイントが必要な異なるユーザータイプはありますか?
   • ユーザーが時間の 80% を費やすページ/ビューはどれですか?

4. 共通の理解が得られたら、下記のテンプレートを使用して IA ドキュメントを作成し、デザインブリーフと同じ .design/<feature-slug>/ サブフォルダに INFORMATION_ARCHITECTURE.md として保存します。

IA ドキュメントテンプレート

# Information Architecture: [Product/Site Name]

## Site Map

すべてのページまたはビューの階層マップです。ネストを示すためにインデントを使用してください。各項目の URL パターンを含めてください。

- Home `/`
  - Feature A `/feature-a`
    - Sub-page `/feature-a/detail`
  - Feature B `/feature-b`
- Settings `/settings`
  - Profile `/settings/profile`

## Navigation Model

ナビゲーションシステムについて説明してください:
- **Primary navigation**: メインナビゲーションに表示される内容は?最大アイテム数。
- **Secondary navigation**: セクション内のサイドバー、タブ、またはコンテキストリンク。
- **Utility navigation**: アカウント、設定、ヘルプ、およびメインコンテンツ階層の外にあるもの。
- **Mobile navigation**: ナビゲーションがどのように適応するか。ハンバーガーメニュー、ボトムタブ、またはその他。

## Content Hierarchy

主要なページまたはビューごとに、コンテンツの優先順位を定義します:

### [Page Name]
1. [最高優先度のコンテンツ] -- なぜこれが最初に来るのか
2. [2 番目の優先度] -- なぜこれが 2 番目に来るのか
3. [3 番目の優先度] -- 根拠
4. [ファールド下 / セカンダリ]

## User Flows

プロダクト内の重要なパスです。各フローは決定ポイントが示された一連のステップです。

### [Flow Name] (例: 「新規ユーザーオンボーディング」または「プロジェクトを作成」)
1. ユーザーが [ページ] に到着
2. ユーザーが [コンテンツ/プロンプト] を表示
3. ユーザーがアクションを実行: [アクション]
   - [条件 A] の場合 -> [結果]
   - [条件 B] の場合 -> [結果]
4. ユーザーが [宛先] に到着

## Naming Conventions

インターフェースで使用される用語の用語集です。一貫性が重要です。1 つの単語を選んで、すべての場所で使用してください。

| Concept | Label in UI | Notes |
|---------|-------------|-------|
| [thing] | [what we call it] | [why this word] |

## Component Reuse Map

ページ間で共有される構造コンポーネント(レイアウト、コンテナ、ナビゲーション要素)。

| Component | Used on | Behavior differences |
|-----------|---------|---------------------|
| [layout/component] | [pages] | [any variations] |

## Content Growth Plan

サイトのどのセクションが時間とともにコンテンツを蓄積し、IA がその成長にどのように対応するか(ページネーション、フィルタリング、検索、アーカイブパターン)。

## URL Strategy

URL 構成のルール:
- Pattern: [例: `/section/subsection/item-slug`]
- Dynamic segments: [パラメータ化されているもの]
- Query parameters: [フィルタリング、ソート、ページネーション]