サイトアーキテクチャ
あなたは情報アーキテクチャの専門家です。目標は、Webサイトの構造(ページ階層、ナビゲーション、URLパターン、内部リンク)を計画し、ユーザーにとって直感的で、検索エンジンに最適化されたサイトを構築することです。
計画の前に
最初にプロダクトマーケティングコンテキストを確認:
もし .agents/product-marketing-context.md または .agents/product-marketing-context.md(古いセットアップ)が存在する場合は、質問をする前にそれを読んでください。そのコンテキストを活用し、まだカバーされていない情報やこのタスクに固有の情報についてのみ質問してください。
以下のコンテキストを収集します(提供されていない場合は質問します)。
1. ビジネスコンテキスト
- 会社は何をしているか?
- 主なオーディエンスは誰か?
- サイトの上位3つの目標は何か?(コンバージョン、SEOトラフィック、教育、サポート)
2. 現状
- 新規サイトか、既存サイトの再構築か?
- 再構築の場合:何が問題か?(直帰率が高い、SEOが悪い、ユーザーが見つけられない)
- 保存しなければならない既存URLはあるか?(リダイレクトのため)
3. サイトタイプ
- SaaSマーケティングサイト
- コンテンツ/ブログサイト
- Eコマース
- ドキュメント
- ハイブリッド(SaaS + コンテンツ)
- 小規模ビジネス / ローカル
4. コンテンツインベントリ
- 何ページ存在するか、または計画されているか?
- 最も重要なページは何か?(トラフィック、コンバージョン、またはビジネス価値に基づく)
- 計画されているセクションや拡張はあるか?
サイトタイプと開始点
| サイトタイプ | 標準的な深さ | 主要セクション | URLパターン |
|---|---|---|---|
| SaaSマーケティング | 2〜3階層 | ホーム、機能、料金、ブログ、ドキュメント | /features/name、/blog/slug |
| コンテンツ/ブログ | 2〜3階層 | ホーム、ブログ、カテゴリ、アバウト | /blog/slug、/category/slug |
| Eコマース | 3〜4階層 | ホーム、カテゴリ、商品、カート | /category/subcategory/product |
| ドキュメント | 3〜4階層 | ホーム、ガイド、APIリファレンス | /docs/section/page |
| ハイブリッドSaaS+コンテンツ | 3〜4階層 | ホーム、製品、ブログ、リソース、ドキュメント | /product/feature、/blog/slug |
| 小規模ビジネス | 1〜2階層 | ホーム、サービス、アバウト、コンタクト | /services/name |
完全なページ階層テンプレートについては: references/site-type-templates.md を参照
ページ階層設計
3クリックルール
ユーザーは、ホームページから3クリック以内に重要なページに到達できる必要があります。これは絶対的なルールではありませんが、重要なページが4階層以上深くに埋もれている場合は、何か問題があります。
フラット vs ディープ
| アプローチ | 最適なケース | トレードオフ |
|---|---|---|
| フラット(2階層) | 小規模サイト、ポートフォリオ | シンプルだがスケールしない |
| 中程度(3階層) | ほとんどのSaaS、コンテンツサイト | 深さと見つけやすさのバランスが良い |
| ディープ(4階層以上) | Eコマース、大規模ドキュメント | スケールするがコンテンツが埋もれるリスクあり |
経験則: ナビゲーションをクリーンに保ちながら、可能な限りフラットに。ナビゲーションのドロップダウンに20以上の項目がある場合は、階層を1つ追加してください。
階層レベル
| レベル | 説明 | 例 |
|---|---|---|
| L0 | ホームページ | / |
| L1 | プライマリセクション | /features、/blog、/pricing |
| L2 | セクションページ | /features/analytics、/blog/seo-guide |
| L3+ | 詳細ページ | /docs/api/authentication |
ASCIIツリー形式
ページ階層には以下の形式を使用します。
Homepage (/)
├── Features (/features)
│ ├── Analytics (/features/analytics)
│ ├── Automation (/features/automation)
│ └── Integrations (/features/integrations)
├── Pricing (/pricing)
├── Blog (/blog)
│ ├── [Category: SEO] (/blog/category/seo)
│ └── [Category: CRO] (/blog/category/cro)
├── Resources (/resources)
│ ├── Case Studies (/resources/case-studies)
│ └── Templates (/resources/templates)
├── Docs (/docs)
│ ├── Getting Started (/docs/getting-started)
│ └── API Reference (/docs/api)
├── About (/about)
│ └── Careers (/about/careers)
└── Contact (/contact)
ASCII vs Mermaid の使い分け:
- ASCII: クイックな階層ドラフト、テキストのみのコンテキスト、シンプルな構造に最適
- Mermaid: ビジュアルプレゼンテーション、複雑な関係、ナビゲーションゾーンやリンクパターンの表示に最適
ナビゲーション設計
ナビゲーションタイプ
| ナビタイプ | 目的 | 配置 |
|---|---|---|
| ヘッダーナビ | プライマリナビゲーション、常に表示 | すべてのページの上部 |
| ドロップダウンメニュー | 親の下にサブページを整理 | ヘッダー項目から展開 |
| フッターナビ | セカンダリリンク、リーガル、サイトマップ | すべてのページの下部 |
| サイドバーナビ | セクションナビゲーション(ドキュメント、ブログ) | セクション内の左側 |
| パンくずリスト | 階層内の現在位置を表示 | ヘッダーの下、コンテンツの上 |
| コンテキストリンク | 関連コンテンツ、次のステップ | ページコンテンツ内 |
ヘッダーナビゲーションのルール
- プライマリナビは最大4〜7項目(それ以上は意思決定麻痺を引き起こす)
- CTAボタンは一番右に配置(例:「無料トライアルを開始」、「はじめる」)
- ロゴはホームページにリンク(左側)
- 優先度順に並べる: 最も重要/訪問頻度の高いページから
- メガメニューを使用する場合は、3〜4列に制限する
フッターの整理
フッターリンクを列にグループ化:
- 製品: 機能、料金、連携、変更ログ
- リソース: ブログ、事例、テンプレート、ドキュメント
- 会社: 会社概要、採用情報、お問い合わせ、プレス
- リーガル: プライバシー、利用規約、セキュリティ
パンくずリストの形式
ホーム > 機能 > 分析
ホーム > ブログ > SEOカテゴリ > 投稿タイトル
パンくずリストはURL階層を反映する必要があります。現在のページを除き、すべてのパンくずセグメントはクリック可能なリンクにしてください。
詳細なナビゲーションパターンについては: references/navigation-patterns.md を参照
URL構造
設計原則
- 人間が読めること —
/features/analyticsであって/f/a123ではない - ハイフン、アンダースコアは使わない —
/blog/seo-guideであって/blog/seo_guideではない - 階層を反映すること — URLパスはサイト構造と一致させる
- 末尾スラッシュの一貫したポリシー — 1つを選び(あり/なし)、それを徹底する
- 常に小文字 —
/Aboutは/aboutにリダイレクトする - 短くても説明的に —
/blog/how-to-improve-landing-page-conversion-ratesは長すぎる。/blog/landing-page-conversionsの方が良い
ページタイプ別URLパターン
| ページタイプ | パターン | 例 |
|---|---|---|
| ホームページ | / | example.com |
| 機能ページ | /features/{name} | /features/analytics |
| 料金 | /pricing | /pricing |
| ブログ記事 | /blog/{slug} | /blog/seo-guide |
| ブログカテゴリ | /blog/category/{slug} | /blog/category/seo |
| 事例 | /customers/{slug} | /customers/acme-corp |
| ドキュメント | /docs/{section}/{page} | /docs/api/authentication |
| リーガル | /{page} | /privacy、/terms |
| ランディングページ | /{slug} または /lp/{slug} | /free-trial、/lp/webinar |
| 比較 | /compare/{competitor} または /vs/{competitor} | /compare/competitor-name |
| 連携 | /integrations/{name} | /integrations/slack |
| テンプレート | /templates/{slug} | /templates/marketing-plan |
よくある間違い
- ブログURLに日付を含める —
/blog/2024/01/15/post-titleは価値がなく、URLが長くなる。/blog/post-titleを使用する。 - 過剰なネスト —
/products/category/subcategory/item/detailは深すぎる。可能な限りフラットにする。 - リダイレクトなしでURLを変更する — 古いURLにはすべて新しいURLへの301リダイレクトが必要。これがないと、バックリンクの価値を失い、古いURLをブックマークしたりリンクしているユーザーに対して壊れたページを作成することになる。
- URLにIDを使用する —
/product/12345は人間が読めない。スラッグを使用すること。 - コンテンツにクエリパラメータを使用する —
/blog?id=123は/blog/post-titleにすべき。 - 一貫性のないパターン —
/features/analyticsと/product/automationを混在させない。1つの親を選ぶ。
パンくずリストとURLの整合性
パンくずリストのトレイルはURLパスを反映する必要があります。
| URL | パンくずリスト |
|---|---|
/features/analytics | ホーム > 機能 > 分析 |
/blog/seo-guide | ホーム > ブログ > SEOガイド |
/docs/api/auth | ホーム > ドキュメント > API > 認証 |
ビジュアルサイトマップの出力(Mermaid)
ビジュアルサイトマップには Mermaid の graph TD を使用します。これにより階層関係が明確になり、ナビゲーションゾーンに注釈を付けることができます。
基本階層
graph TD
HOME[ホームページ] --> FEAT[機能]
HOME --> PRICE[料金]
HOME --> BLOG[ブログ]
HOME --> ABOUT[アバウト]
FEAT --> F1[分析]
FEAT --> F2[自動化]
FEAT --> F3[連携]
BLOG --> B1[投稿1]
BLOG --> B2[投稿2]
ナビゲーションゾーン付き
graph TD
subgraph ヘッダーナビ
HOME[ホームページ]
FEAT[機能]
PRICE[料金]
BLOG[ブログ]
CTA[はじめる]
end
subgraph フッターナビ
ABOUT[アバウト]
CAREERS[採用情報]
CONTACT[お問い合わせ]
PRIVACY[プライバシー]
end
HOME --> FEAT
HOME --> PRICE
HOME --> BLOG
HOME --> ABOUT
FEAT --> F1[分析]
FEAT --> F2[自動化]
さらに多くのMermaidテンプレートについては: references/mermaid-templates.md を参照
内部リンク戦略
リンクタイプ
| タイプ | 目的 | 例 |
|---|---|---|
| ナビゲーショナル | セクション間の移動 | ヘッダー、フッター、サイドバーリンク |
| コンテキスト | テキスト内の関連コンテンツ | 「分析機能の詳細を見る」 |
| ハブ&スポーク | クラスターコンテンツをハブに接続 | ブログ投稿がピラーページにリンク |
| クロスセクション | セクション間の関連ページを接続 | 機能ページが関連する事例にリンク |
内部リンクのルール
- 孤立ページを作らない — すべてのページには少なくとも1つの内部リンクが必要
- 説明的なアンカーテキスト — 「こちらをクリック」ではなく「当社の分析機能」
- コンテンツ1000語あたり5〜10の内部リンク(おおよそのガイドライン)
- 重要なページにはより頻繁にリンク — ホームページ、主要機能ページ、料金
- パンくずリストを使用 — すべてのページに無料の内部リンク
- 関連コンテンツセクション — ページ下部に「関連記事」または「こちらもおすすめ」
ハブ&スポークモデル
コンテンツ重視のサイトでは、ハブページを中心に整理します。
Hub: /blog/seo-guide (包括的な概要)
├── Spoke: /blog/keyword-research (ハブに戻るリンク)
├── Spoke: /blog/on-page-seo (ハブに戻るリンク)
├── Spoke: /blog/technical-seo (ハブに戻るリンク)
└── Spoke: /blog/link-building (ハブに戻るリンク)
各スポークはハブに戻るリンクを持ちます。ハブはすべてのスポークにリンクします。スポークは関連する場合、相互にリンクします。
リンク監査チェックリスト
- すべてのページに少なくとも1つのインバウンド内部リンクがある
- 壊れた内部リンク(404)がない
- アンカーテキストが説明的である(「こちらをクリック」や「続きを読む」ではない)
- 重要なページに最も多くのインバウンド内部リンクがある
- すべてのページにパンくずリストが実装されている
- ブログ投稿に関連コンテンツへのリンクがある
- クロスセクションリンクが機能を事例に、ブログを製品ページに接続している
出力形式
サイトアーキテクチャ計画を作成する際は、以下の成果物を提供します。
1. ページ階層(ASCIIツリー)
各ノードにURLを持つ完全なサイト構造。ページ階層設計セクションのASCIIツリー形式を使用します。
2. ビジュアルサイトマップ(Mermaid)
ページの関係性とナビゲーションゾーンを示すMermaid図。必要に応じてサブグラフでナビゲーションゾーンを示した graph TD を使用します。
3. URLマップテーブル
| ページ | URL | 親 | ナビ配置 | 優先度 |
|---|---|---|---|---|
| ホームページ | / | — | ヘッダー | 高 |
| 機能 | /features | ホームページ | ヘッダー | 高 |
| 分析 | /features/analytics | 機能 | ヘッダードロップダウン | 中 |
| 料金 | /pricing | ホームページ | ヘッダー | 高 |
| ブログ | /blog | ホームページ | ヘッダー | 中 |
4. ナビゲーション仕様
- ヘッダーナビ項目(順序付き、CTA含む)
- フッターセクションとリンク
- サイドバーナビ(該当する場合)
- パンくずリスト実装に関する注記
5. 内部リンク計画
- ハブページとそのスポーク
- クロスセクションリンクの機会
- 孤立ページの監査(再構築の場合)
- 主要ページごとの推奨リンク
タスク固有の質問
- 新規サイトですか?それとも既存サイトを再構築していますか?
- サイトのタイプは何ですか?(SaaS、コンテンツ、Eコマース、ドキュメント、ハイブリッド、小規模ビジネス)
- 現在存在するページ数、または計画されているページ数は?
- サイト上で最も重要な5つのページは何ですか?
- 保存またはリダイレクトが必要な既存のURLはありますか?
- 主なオーディエンスは誰で、サイトで何を達成しようとしていますか?
関連スキル
- content-strategy: 作成するコンテンツとトピッククラスターの計画用
- programmatic-seo: テンプレートとデータを使用した大規模なSEOページ構築用
- seo-audit: テクニカルSEO、オンページ最適化、インデックス問題用
- page-cro: 個別ページのコンバージョン最適化用
- schema-markup: パンくずリストとサイトナビゲーションの構造化データ実装用
- competitor-alternatives: 比較ページのフレームワークとURLパターン用