mcpField
W
website-structure

website-structure

github.com/kostja94デザイン・UI1.1k1.3k 回インストール2 日前に更新
リポジトリ

website-structure について

ウェブサイトのページ構成と優先度を計画し、UX、SEO、成長目標との整合を図るスキルです。汎用テンプレート、計画手順、構成の指針を提供します。

主な機能

  1. 01ページ種別と優先度の枠組み
  2. 02汎用サイト構成テンプレート
  3. 03成長戦略とURLの対応付け
  4. 04ページ計画と一覧出力の手順
  5. 05ナビゲーションとクロール性の原則

活用シーン

  1. 01新規サイトのページ階層の計画
  2. 02開発するページの優先順位付け
  3. 03既存サイトへの成長チャネル追加

インストール

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

$npx skills add https://github.com/kostja94/marketing-skills --skill website-structure

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

詳細

戦略:ウェブサイト構造

ウェブサイトの構造計画をガイドします。作成するページ、ページの優先順位、そして構造が UX、SEO、成長をどのように支えるかを扱います。構造とは、ページの整理とつながりのことです。ユーザーのナビゲーション、コンテンツの重要度に関する Google の理解、クロール可能性、SERP でのサイトリンクに影響します。サイトリンクと SERP 最適化については、serp-features を参照してください。

呼び出し時:初回の利用時は、このスキルの内容と重要性を1~2文で簡潔に説明してから、主な出力を提示するとよいでしょう。2回目以降の利用時、またはユーザーから省略するよう求められた場合は、すぐに主な出力を提示してください。

初期評価

プロジェクトのコンテキスト: ルートに contextus.md がある場合は読み込み、このタスクに関連するモジュールだけを読み込んでください。Contextus がない場合は、利用可能なプロジェクト資料またはユーザーから提供された情報を使い、不足している情報を確認してください。並行するコンテキストシステムを作成しないでください。

以下を特定してください。

  1. ウェブサイトの種類:プロダクト/SaaS、B2B、Eコマース、ポートフォリオ、フォーラム、ディレクトリ
  2. 段階:新規サイト(ゼロから計画)か既存サイト(拡張または監査)か
  3. 成長戦略:アフィリエイト、教育、多言語、コミュニティ、B2B、開発者
  4. 制約:チーム規模、予算、技術スタック

ページの優先順位付けフレームワーク

開発スケジュールに合わせて、ページを優先順位別に計画します。ページの種類とウェブサイトの種類ごとの対応については、skills-reference §2 Page Taxonomy を参照してください。

優先度ページ備考
必須ホーム、プロダクト/機能、料金、ブログ、会社概要、プライバシー、利用規約、お問い合わせ信頼の構築とコンバージョンに不可欠です。料金:セルフサービスの場合はナビゲーションに公開ページを設置します。エンタープライズ専用の場合は、代わりに「営業に問い合わせる」を使用できます。pricing-page-generator の「表示と配置」を参照してください
あるとよいお客様の声、FAQ、サイトマップ(HTML)、404、返金/返品UX と SEO を支援します
任意検索結果、ニュース、採用情報、開示事項状況に応じて追加します
トラフィックに応じて追加カテゴリ/コレクションページコンテンツ量の多いサイトや E コマース向けです。カテゴリとタグが必要です

汎用テンプレート構造

SaaS、ツール、コンテンツサイトに適用できます。使用しないノード(API がない場合は API など)を削除し、業界や地域などの固有のモジュールを追加して調整してください。

セクション一般的なパスページスキル
ルート/, /features, /pricing, /demo, /contacthomepage-generator, features-page-generator, pricing-page-generator
ツール/tools, /free-tools;ハブ+ツールごとのページtools-page-generator;リード獲得には無料ツールを活用します。多くの場合 SPA で、プログラマティックに生成します。programmatic-seo を参照してください
リソース/blog, /changelog, /glossary, /faq, /tutorialsblog-page-generator, changelog-page-generator, glossary-page-generator, faq-page-generator
パートナーシップ/affiliate, /startups, /ambassadorsaffiliate-page-generator, landing-page-generator
法務/terms, /privacy, /careersterms-page-generator, privacy-page-generator, careers-page-generator
競合/alternatives, /compare, /migratealternatives-page-generator, migration-page-generator
独立ページ/dashboard, /login, /signup, /docs, /api, /status, /supportsignup-login-page-generator, docs-page-generator, api-page-generator, status-page-generator

成長戦略 → 構造のマッピング

構造には成長戦略が反映されます。サブディレクトリはチャネルを示します。

目標パスの例ページ/チャネル
アフィリエイトのコンバージョン/affiliateaffiliate-page-generator
教育/学生向けプラン/education, /startups, /student-discounteducation-program, startups-page-generator
多言語対応/zh-CN, /jalocalization-strategy
コミュニティ/ambassadors, /showcasecreator-program, landing-page-generator
B2B/エンタープライズソリューション(業界優先)、ユースケース(シナリオ優先。サブページにすることも可能)、導入事例solutions-page-generator, use-cases-page-generator, customer-stories-page-generator
開発者向け製品/api, /docs, /statusapi-page-generator, docs-page-generator, status-page-generator
ユーザーからのフィードバックフィードバック、ロードマップfeedback-page-generator; 外部サービス(Canny、FeatureBase)
プラグイン/インテグレーション/integrations, /pluginsintegrations-page-generator, category-page-generator
プレゼント企画/コンテスト/giveawaycontest-page-generator

ドメイン構造(複数の製品)

複数の製品やブランドを計画する場合は、サブフォルダー、サブドメイン、独立ドメインの選択について domain-architecture を参照してください。このスキルでは、単一ドメイン内のページ構造を扱います。ドメインの初期選定(ブランド、PMD、EMD、TLD)については、domain-selection を参照してください。

計画ワークフロー

  1. テンプレートを選ぶ:一般的な構造から始め、ウェブサイトの種類を skills-reference §2 に対応付けます
  2. モジュールを絞り込む:不要なノードを削除します(例:API がなければ /api、/docs を削除)
  3. 固有の要素を追加する:業界別ページ、地域、製品のバリエーションを追加します
  4. URL を割り当てる:各ノードに割り当てます。url-structure に従い、小文字、ハイフン区切り、短く、キーワードを含む形式にします
  5. リストを出力する:開発スケジュール用に「ページタイプ+URL+優先度」をまとめます
  6. 技術スタック:ページタイプをサービス(DNS、認証、CMS、ステータスページなど)に対応付けます
  7. 反復する:新機能や新市場に合わせて拡張し、構造を明確に保ちます

構造の原則

原則ガイドライン
フラットな構造ホームページからどのページへも最大 4 クリックで到達できるようにします。クロールのしやすさとリンク評価の分配が向上します
早期の計画成長する前に構造を計画します。ドメインの購入後すぐに始められます
サイトリンク適切な構造+目次+信頼性の高い内部リンクにより、SERP に自然なサイトリンクが表示されます(スキーマで強制することはできません)。serp-features を参照してください
孤立ページの防止すべてのページに内部リンクが必要です。site-crawlability と internal-links を参照してください
機能とユースケース/features は機能優先、/use-cases はシナリオ優先です。コンテンツの切り口を分け、相互にリンクし、重複を避けます。features-page-generator と use-cases-page-generator を参照してください
わかりやすいナビゲーション明確な階層とナビゲーションにより、タスクの完了率が向上します。ユーザーは必要な情報をより早く見つけられます。navigation-menu-generator を参照してください
料金ページの配置マーケティングサイトでは、見込み顧客向けに /pricing をメインナビゲーションに配置します。アプリ内では、ログインユーザーのサブスクリプション管理用に、サイドバーの「設定 → 請求」に配置します。エンタープライズ限定の場合は、公開料金ページの代わりに「営業に問い合わせる」を設置することがあります。pricing-page-generator を参照してください

ホームページモジュールのリファレンス

一般的なモジュール(見出し、サブ見出し、CTA、メリット、ソーシャルプルーフなど)やナビゲーションの選択肢については homepage-generator を、ヒーローデザインについては hero-generator を参照してください。

出力形式

  • 優先度付きの ページリスト(必須/あるとよい/任意)
  • URL 構造(セクションごとのパス)
  • ウェブサイトの種類との適合性(skills-reference §2 に照らして、該当するページを示します)
  • 成長戦略との対応付け(各パスがどのチャネルを支えるか)
  • 次のステップ:URL のルールには url-structure、送信には xml-sitemap、監査には site-crawlability を使用します

参考資料

  • ウェブサイト構造のSEOガイド — Alignify:構造の重要性、ページの優先順位、汎用テンプレート、計画ワークフロー、成長マッピング、ホームページのモジュール
  • skills-reference §2 (docs/skills-reference.md#2-page-taxonomy) — ページタイプ、ウェブサイトタイプのマトリックス、コアと拡張の完全な一覧。ページの選定に使用します

関連スキル

  • seo-strategy:SEO ワークフローの順序。構造計画はテクニカルフェーズの前に行います
  • domain-selection:ドメインの初期選定。ドメインを選ぶ場合は、構造計画の前に行います
  • domain-architecture:サブフォルダー、サブドメイン、独立ドメインの選定。ドメインが未決定の場合は、構造計画の前に行います
  • url-structure:URL の最適化、階層、スラッグ。構造の定義後に適用します
  • site-crawlability:クロール可能性、孤立ページ、リダイレクト。既存の構造を監査します
  • internal-links:リンク戦略、ハブ・アンド・スポーク。ページの作成後に実装します
  • xml-sitemap:サイトマップの作成。計画済みの URL を含めます
  • breadcrumb-generator:階層構造のパンくずリスト。大規模サイトや E コマースで使用します
  • navigation-menu-generator:ナビゲーションの設計。メイン、フッター、モバイル向け
  • content-strategy:コンテンツクラスター、ピラーページ。構造計画を補完します

コメント