生成AI用 詳細仕様依頼書｜WordPress複数テーマ対応版 トップページ改修依頼書

この文書は、WordPressで運営している複数ジャンルのサイトに対して、SEO評価の向上と回遊率改善を目的とした「案内所型トップページ」を生成AIへ依頼するための詳細仕様書です。

この依頼書の目的は、トップページを単なる記事一覧や新着一覧ではなく、「そのサイトが何の専門サイトかを一目で伝え、ユーザーを目的別・カテゴリ別・テーマ別・用途別に迷わず案内する総合案内ページ」として再設計することです。

1. 依頼の目的

現状のサイトは、カテゴリや記事数が十分に存在していても、トップページが単なる新着記事一覧やカテゴリ一覧になっていることで、以下の課題が発生しています。

• サイト全体のテーマや専門性が伝わりにくい
• ユーザーがどこから入ればいいか分かりにくい
• SEO上、トップページが親ハブとして機能していない
• カテゴリ資産や下層記事が活かしきれていない
• 回遊率が伸びにくい
• テーマごとの差異により、実装後にレイアウト崩れや装飾崩れが起きやすい

このため、トップページを「記事一覧型トップ」ではなく「総合案内所型トップ」へ改修したいです。

2. このトップページで実現したいこと

• サイトの専門テーマが一目で伝わること
• 初心者でも迷わずカテゴリや記事へ進めること
• 目的別・カテゴリ別・テーマ別・用途別に自然に回遊できること
• 既存カテゴリページや主力記事への内部リンクを強化できること
• SEO観点でトップページがサイト全体の親ハブとして機能すること
• WordPressの複数テーマでも壊れにくく実装できること
• ブロックエディタ・クラシックエディタのどちらでも運用しやすいこと
• テーマ依存の特殊クラスに頼りすぎないこと

3. 前提条件

対象CMS

• WordPress

想定テーマ

• Cocoon
• SWELL
• AFFINGER
• JIN / JIN:R
• SANGO
• THE THOR
• 賢威
• Lightning
• 独自テーマ
• 将来的に別テーマへ変更する可能性があるサイト

想定エディタ

• ブロックエディタ（Gutenberg）
• クラシックエディタ
• カスタムHTMLブロック
• 固定ページ本文
• ウィジェット / テーマ独自トップ用エリア

4. AIに求める役割

4-1. SEOコンサルタント

トップページを親ハブとして機能させ、カテゴリ・下層記事の評価を底上げする。

4-2. UX設計者

ユーザーが迷わず次に進める導線を設計する。

4-3. セールスライター

読者が「自分の悩みが解決できそうだ」と感じる導入文や導線文言を作る。

4-4. WordPress実装設計者

テーマ依存を最小限にし、複数テーマでも壊れにくいHTML/CSS構造を設計する。

5. サイト情報の入力項目

毎回以下の情報を差し替えて使用してください。

サイト名：
サイトURL：
サイトジャンル：
サイトの主テーマ：
主なカテゴリ一覧：
主なサブカテゴリ一覧：
特に強化したいカテゴリ：
狙いたい検索意図：
想定ユーザー像：
既存トップページURL：
既存トップページの問題点：
参考にしたい改善後ページURL：
使用WordPressテーマ：
使用エディタ：
実装場所：
追加CSSを入れられるか：
サイトカラーやブランドカラー：
デザイン上の希望：
避けたい表現・デザイン：

6. 基本方針

6-1. トップページは「記事一覧」ではなく「案内所」にする

新着記事や投稿一覧を主役にしないでください。トップページの役割は、サイトのテーマを伝え、最適なカテゴリやコンテンツへ案内することです。

6-2. SEOのためにトップページを親ハブ化する

カテゴリや特集記事に対し、意味のある内部リンク導線を持たせてください。

6-3. ユーザーの悩み起点で導線を設計する

カテゴリ名だけを並べるのではなく、「何を解決したいか」で入り口を作ってください。

6-4. WordPressの複数テーマで壊れにくい実装にする

• テーマ独自クラスに依存しすぎない
• JavaScript前提にしない
• HTML + CSSで成立する
• カスタムHTMLブロックに貼っても崩れにくい
• 固定ページ本文に入れても扱いやすい

6-5. 見出しの中にリンクを入れる設計は避ける

テーマや目次生成機能、ブロック変換処理の影響で、見出し内リンクは削除・変換・装飾崩れを起こすことがあります。

そのため、リンク設計は以下のいずれかを優先してください。

• カード全体リンク
• 見出しの下に専用リンクボタンを配置
• 説明文ごとリンク化
• ボックス全体を a タグ化

7. 生成してほしいトップページ構成

7-1. H1

サイト全体の主テーマが一発で伝わる見出し。

例：
- 〇〇の選び方総合ガイド
- 〇〇おすすめ比較ガイド
- 〇〇を快適・便利にする総合情報サイト

7-2. 導入文

3段落構成で作成してください。

必ず含める要素：

• このサイトが何を扱うサイトか
• どんな悩みを持つ人に役立つか
• 初心者・買い替え・見直しにも役立つこと
• 用途別・カテゴリ別・テーマ別に探せること

7-3. 目的別で探す

ユーザーの悩み・目的ベースでカテゴリや特集へ導線を作ってください。

例：
- 快適にしたい
- 安全性を高めたい
- 音質を良くしたい
- 時短したい
- コスパ重視で選びたい
- 初心者向けから探したい

7-4. 人気カテゴリから探す

主要カテゴリをカード型またはボックス型で見せてください。リンクはカード全体に付ける形式を優先してください。

7-5. テーマ別 / 用途別 / 車種別 / 悩み別で探す

ジャンルに応じて最適な切り口を選んでください。

例：
- 車系サイト → 車種別
- 美容系サイト → 悩み別・部位別
- PC系サイト → 用途別・パーツ別
- DIY系サイト → 作業目的別
- キッチン系サイト → 調理目的別
- ペット系サイト → 犬猫別・悩み別

7-6. 比較・選び方の基準を説明するブロック

E-E-A-Tの補強として、「このサイトでは何を基準に比較・評価しているか」を明確に記載してください。

7-7. 必要に応じておすすめ記事または注目記事

新着記事ではなく、導線として意味のある厳選記事を配置してください。ただし、トップページの主役にならないようにしてください。

8. HTML/CSS設計ルール

8-1. HTML設計ルール

• セマンティックで読みやすい構造にする
• section, div, p, h1, h2, h3, a, span を中心に構成
• テーマ独自クラス名には依存しない
• 見出し内リンクは原則使わない
• カード全体リンクを優先する
• 不要な script は使わない
• 不要な inline style は極力避ける
• ただし、テーマ競合が強い場合は最小限の inline style は許容
• カスタムHTMLブロックへ貼っても壊れにくい構造にする

8-2. CSS設計ルール

• 汎用クラス名を使用する
• テーマ依存セレクタに頼りすぎない
• 文字色・背景色・リンク色を明示し、テーマ上書きに負けにくくする
• モバイル表示を考慮する
• ボックス、カード、タグリンク、導線ボタンの見た目を整える
• 白文字・背景同化事故を防ぐ
• !important は必要最小限で使う
• WordPressテーマごとの基本装飾に潰されにくい設計にする

9. デザイン方針

• 派手すぎない
• 余白があり読みやすい
• 情報整理が優先
• スマホでも崩れにくい
• ボタンやカードが押しやすい
• 絵文字は補助的に使用してよいが最小限
• 意味が分かるラベルを使う
• 装飾より導線の分かりやすさを優先する

10. 並び順の決め方

導線の順番は、必ず理由をつけて決めてください。以下を基準に並べてください。

• 需要の広さ
• 初心者の入りやすさ
• 悩みの顕在化のしやすさ
• 売れ筋または重点カテゴリ
• 回遊率の上がりやすさ

並び順の理由も説明してください。

11. 実装形式についての出力条件

A. 汎用版

• WordPress固定ページ本文に貼りやすい
• テーマを選ばず使いやすい
• カスタムHTMLブロック推奨

B. テーマ競合対策版

• 文字色やリンク色がテーマに上書きされにくい
• h2/h3が白飛びしにくい
• リンク色が消えにくい
• 必要なら追加CSSで補正しやすい

C. 保守重視版

• 管理者が後から文言だけ変えやすい
• セクション単位で差し替えしやすい
• コード量を抑える

12. 出力してほしい内容

1. 改善方針まとめ
2. セクション構成案
3. 完成HTML全文
4. 追加CSS全文
5. SEOタイトル案（3案）
6. メタディスクリプション案（100〜140文字で2案）
7. 並び順の理由
8. 実装時の注意点
9. 公開後に見るべき指標

13. 禁止事項

• 新着記事をトップの主役にすること
• 見出しの中にリンクを入れることを前提にすること
• JavaScript前提の複雑なUI
• テーマ独自ショートコード前提の設計
• Cocoon専用、SWELL専用などテーマ限定の実装しか出さないこと
• 「詳しくはこちら」など意味の薄い導線の多用
• カテゴリ一覧をただ並べるだけ
• デザイン優先で導線が弱くなること

14. 参考思想

今回の改修で有効だった思想は以下です。これを他サイトにも応用してください。

• H1でサイトの役割を明示
• 導入文を3段落にして検索意図を広く受ける
• 目的別導線を先頭寄りに置く
• 人気カテゴリはカード全体リンク化する
• テーマ別 / 用途別 / 車種別導線を用意する
• 比較基準を説明してE-E-A-Tを補強する
• トップページを「案内所」として仕上げる

15. 毎回使える短縮版プロンプト

あなたはSEOに強いWebディレクター兼UI/UX設計者兼セールスライター兼WordPress実装設計者です。
以下のサイトのトップページを、「記事一覧型」ではなく「総合案内所型トップページ」に再設計してください。

目的は、SEO評価の向上と回遊率改善です。
トップページで、サイトの専門テーマが一目で伝わり、ユーザーが目的別・カテゴリ別・テーマ別・用途別に迷わず遷移できる構成にしてください。

【対象サイト情報】
サイト名：
URL：
ジャンル：
主なカテゴリ：
特に強化したいカテゴリ：
対象ユーザー：
使用テーマ：
使用エディタ：
実装形式：
追加CSS利用可否：

【必須要件】
- H1
- 導入文（3段落）
- 目的別で探す
- 人気カテゴリから探す
- テーマ別 / 用途別 / 車種別 / 悩み別で探す
- 比較ポイント説明ブロック
- カード全体リンクを優先
- 見出し内リンクは避ける
- 複数WordPressテーマでも崩れにくいHTML/CSS
- スマホ対応

【出力内容】
1. 改善方針
2. セクション構成案
3. 完成HTML全文
4. 追加CSS全文
5. SEOタイトル案
6. メタディスクリプション案
7. 並び順の理由
8. 実装時の注意点
9. 公開後に見るべき指標

【重要】
- トップページは案内所として設計すること
- 新着記事を主役にしないこと
- テーマ依存の実装にしすぎないこと
- 見出し内リンクは避けること
- 導線の順番には理由をつけること
- HTML/CSSは保守しやすく壊れにくい形にすること

16. 補足

この依頼書は、車系サイトだけでなく、美容、PC、DIY、キッチン、ペット、音楽など、カテゴリ資産が多いアフィリエイトサイトや比較サイトにも横展開しやすいように設計されています。