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

A hierarchical map of every page or view. Use indentation to show nesting. Include the URL pattern for each.

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

## Navigation Model

Describe the navigation system:
- **Primary navigation**: What appears in the main nav? Maximum items.
- **Secondary navigation**: Sidebar, tabs, or contextual links within sections.
- **Utility navigation**: Account, settings, help, and anything outside the main content hierarchy.
- **Mobile navigation**: How navigation adapts. Hamburger, bottom tabs, or something else.

## Content Hierarchy

For each major page or view, define the content priority:

### [Page Name]
1. [Highest priority content] -- Why this comes first
2. [Second priority] -- Why this comes second
3. [Third priority] -- Rationale
4. [Below the fold / secondary]

## User Flows

The critical paths through the product. Each flow is a sequence of steps with decision points noted.

### [Flow Name] (e.g., "New user onboarding" or "Create a project")
1. User lands on [page]
2. User sees [content/prompt]
3. User takes action: [action]
   - If [condition A] -> [outcome]
   - If [condition B] -> [outcome]
4. User arrives at [destination]

## Naming Conventions

A glossary of terms used in the interface. Consistency matters. Pick one word and use it everywhere.

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

## Component Reuse Map

Which structural components (layouts, containers, navigation elements) are shared across pages.

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

## Content Growth Plan

Which sections of the site will accumulate content over time and how the IA accommodates that growth (pagination, filtering, search, archive patterns).

## URL Strategy

Rules for URL construction:
- Pattern: [e.g., `/section/subsection/item-slug`]
- Dynamic segments: [what is parameterized]
- Query parameters: [filtering, sorting, pagination]