Service Website Generator (サービスウェブサイトジェネレーター)
数百のローカルSEOページを持つ、完全なサービス事業者向けウェブサイトを1つの自動化ワークフローで構築します。
スタック: NextJS 14 + TypeScript + Tailwind CSS + PostgreSQL + Prisma ORM + Jina AI + Unsplash
クイックスタート
ステップ0: ユーザー入力の収集（必須）
作業を開始する前に、以下の入力を収集してください：
- サービスニッチ: どのサービス業種ですか？（例：「配管工」「高圧洗浄」「HVAC」）
- サービスエリア: 主要都市/地域（例：「ポートオレンジ、フロリダ」「ゴールウェイ、アイルランド」）
- ビジネス名（任意）: パーソナライズ用（例：「マーフィー配管サービス」）
- Jina APIキー: リサーチとUnsplash画像収集に必須
- HTML/CSS/JSデザイン（任意）: ユーザー提供 または システム生成
以下の確認が完了するまで進めないでください: サービスニッチ、サービスエリア、Jina APIキー
ステップ1: デザイン生成
重要: デザイン生成時は frontend-aesthetics スキルのガイドラインに従ってください！
ユーザーがデザインを提供しなかった場合:
Invoke: design-generator agent
Input:
- サービスニッチ
- ターゲットオーディエンス（地域の顧客）
- 必ず frontend-aesthetics スキルガイドラインに従う:
- タイポグラフィ: 特徴的なフォントを使用（Plus Jakarta Sans、Space Grotesk、Cabinet Grotesk）
- カラー: 業界固有のパレット、紫色のグラデーションは不可
- モーション: 見た目を楽しくするCSSアニメーション
- 背景: レイヤーグラデーション、繊細なパターン
- Tailwind v4: space-x-* ではなく gap-* を使用、カスタムCSSリセットは禁止
Output: /design/index.html、/design/styles.css、/design/script.js
ユーザーがデザインを提供した場合:
デザインを /design/ フォルダに保存します。
ステップ2: ロケーション発見
Invoke: location-generator agent
Input: サービスエリア、サービスニッチ、Jina APIキー
Output: /locations.json（メタデータ付き20～50以上のロケーション）
サービスの到達範囲（通常、地理条件に応じて15～50マイル）内のすべての町、郊外、近隣を発見します。
ステップ3: サービススキーマ作成
Invoke: service-schema-creator agent
Input: サービスニッチ、Jina APIキー、サンプルロケーション
Output: /service-schema-template.json（包括的なスキーマを持つ5～15のサービス）
ステップ4: データベース設定
Invoke: database-agent agent
Input: プロジェクトディレクトリ、サービスニッチ、サービスエリア
Output: PostgreSQL + Prisma ORM 設定完了
作成されるテーブル: ContactForm、QuoteRequest、CallbackRequest、PageView、EmailSubscriber、ServiceAreaLead
ステップ5: ページ生成戦略の計算
総ページ数 = サービス数 × ロケーション数
必要なエージェント数 = 総ページ数 ÷ 12（エージェントあたりの平均ページ数）
例: 15サービス × 48ロケーション = 720ページ → 60エージェント
ステップ6: ページジェネレーターの起動（並列）
重要：すべてのエージェントを同時に起動し、順次実行しないでください！
Invoke: service-page-generator agents（Nエージェントを並列実行）
Input per agent:
- サービススキーマテンプレートのパス
- 割り当てられたサービス+ロケーションの組み合わせ（10～15ページ）
- Jina APIキー（Unsplash画像スクレイピング用）
- サービスニッチのコンテキスト
Output: /pages/*.json（エージェントあたり10～15ファイル）
各エージェントは：
- Jina経由でUnsplashを検索し、関連画像を取得
- サービスの説明、メリット、プロセス、FAQを生成
- すべてのデータと画像を含む完全なJSONファイルを作成
ステップ7: NextJSサイトビルド
Invoke: nextjs-builder agent
Input: デザインファイル、全JSONページ、サービススキーマ、ロケーション
Output: /website/ フォルダ（完全なNextJSアプリ）
作成されるもの：
- サービス概要を表示するホームページ
- メインのサービスページ
- メインのロケーションページ
- 個別のサービス+ロケーションページ（例：/emergency-plumber-athenry）
- サービスカテゴリページ
- ロケーションページ
- クリック・トゥ・コール機能
- 信頼シグナルとCTA
ステップ8: Playwrightテスト
# 開発サーバーをバックグラウンドで起動
cd [プロジェクト]/website && npm run dev &
# playwright-tester エージェントを呼び出し
# すべてのページをテスト、SEOを検証、画像をチェック
# テスト終了後に開発サーバーを停止
kill [PID]
ステップ9: GitHubデプロイ
cd [プロジェクトディレクトリ]
git init
git add -A
git commit -m "Initial commit: [サービスニッチ] in [サービスエリア] website"
gh repo create [リポジトリ名] --public --source=. --push
gh CLIが利用できない場合は、手動での手順を提供します。
利用可能なエージェント
| エージェント | 目的 | 呼び出しタイミング |
|---|---|---|
business-researcher | 特定のビジネスを調査（名前が提供された場合） | 1回、ステップ1 |
design-generator | HTML/CSS/JSデザインを生成 | 1回、ステップ1 |
location-generator | サービスエリア内のロケーションを発見 | 1回、ステップ2 |
service-schema-creator | サービスリストとスキーマを作成 | 1回、ステップ3 |
database-agent | PostgreSQL + Prismaを設定 | 1回、ステップ4 |
service-page-generator | 画像付き10～15ページを生成 | Nエージェント、並列 |
nextjs-builder | 完全なNextJSウェブサイトを構築 | 1回、ステップ7 |
playwright-tester | 全ページと機能をテスト | 1回、ステップ8 |
デザインとスタイルのガイドライン
重要： frontend-aesthetics スキルに従い、「AIスロップ」を回避してください！
タイポグラフィ（frontend-aestheticsより）
- 使用禁止: Inter、Roboto、Open Sans、Lato、Arial、システムフォント
- 推奨: Plus Jakarta Sans、Space Grotesk、Cabinet Grotesk、Outfit、Bricolage Grotesque
- 極端な差を活用: 100/200のウェイトと800/900のウェイト、サイズ差は3倍以上
サービス別カラースキーム
- 高圧洗浄/クリーニング: 強めの青 (#1e40af) + オレンジ (#ea580c) + グリーン (#059669)
- 配管工: 水色 (#0284c7) + 緊急赤 (#dc2626) + エコグリーン (#16a34a)
- HVAC: クールブルー (#0369a1) + 暖かみのあるオレンジ (#ea580c) + グリーン (#059669)
- 電気工事: イエロー (#eab308) + プロフェッショナルブルー (#1e40af) + レッド (#dc2626)
- 造園: ナチュラルグリーン (#15803d) + アースブラウン (#92400e) + ブルー (#0284c7)
- マーケティング/B2B: ネイビー (#0A66C2) + パープルアクセント (#8B5CF6) + サクセスグリーン (#10B981)
Tailwind v4互換性（重要）
- 使用禁止:
space-x-*、space-y-*（v4で削除されました） - 常に使用: flex/gridコンテナでは
gap-* - 追加しない: カスタム
* { margin: 0 }リセット（mx-autoを壊します） - 追加する: 設定ファイルを使用する場合、CSSに
@config "../tailwind.config.ts"を追加
サービスウェブサイトの要件
- 強力なCTA（今すぐ電話ボタン、見積もりフォーム）
- モバイルでのクリック・トゥ・コール機能
- 信頼シグナル（資格認定、保証、レビュー）
- 地元の電話番号を目立つように表示
- サービスエリアの範囲を明確に表示
- Before/After画像ギャラリー
- ページ読み込みとインタラクションのモーション/アニメーション
ファイル構成
project-root/
├── design/
│ ├── index.html
│ ├── styles.css
│ └── script.js
├── pages/
│ └── [service]-[location].json（200ファイル以上）
├── website/
│ ├── app/
│ │ ├── [slug]/page.tsx
│ │ ├── services/page.tsx
│ │ ├── locations/page.tsx
│ │ └── ...
│ ├── components/
│ └── package.json
├── prisma/
│ └── schema.prisma
├── locations.json
├── service-schema-template.json
└── business-profile.json（ビジネス名が提供された場合）
ワークフロー例
ユーザー: 「ポートオレンジ、フロリダの高圧洗浄サービスサイトを作って」
- 入力を収集（ニッチ: 高圧洗浄、エリア: ポートオレンジFL、Jinaキー）
- 信頼シグナル、CTA、青/オレンジのカラースキームでデザインを生成
- 15マイル圏内の48のロケーションを発見
- 15の高圧洗浄サービススキーマを作成
- 6つのリードキャプチャテーブルを持つPostgreSQLを設定
- 計算: 15 × 48 = 720ページ → 約60のエージェントを起動
- Unsplash画像付きのすべてのサービス+ロケーションJSONファイルを生成
- 214以上のページを持つNextJSサイトを構築
- Playwrightテストを実行（目標: 80%以上の合格率）
- GitHubにプッシュ
- 報告: リポジトリURL、実行手順、デプロイ手順
重要なルール
必ず行うこと:
- 開始前にすべての入力を収集する
- デザインが提供されていない場合は最初に生成する
- ページを作成する前にロケーションを発見する
- ページを生成する前にサービススキーマを作成する
- すべてのページ生成エージェントを同時に起動する
- デプロイ前にPlaywrightでテストする
- 明確なデプロイ手順を提供する
絶対にしないこと:
- 入力収集フェーズをスキップする
- Jina APIキーなしで進める
- エージェントを順次実行する（並列であること！）
- 全ページの準備ができる前にNextJSサイトを構築する
- Playwrightテストをスキップする
- ユーザーを次のステップなしで放置する
成功基準
- デザインが存在する（生成されたもの、またはユーザー提供）
- 20～50以上のロケーションが発見された
- スキーマに5～15のサービスが含まれる
- 200以上のサービス+ロケーションページが生成された
- すべてのページにUnsplash画像がある
- NextJSウェブサイトが構築され、動作している
- Playwrightテストに合格（80%以上の合格率）
- コードがgitにコミットされている
- ユーザーにデプロイ手順が提供されている