local-business-rebuild

地元企業のウェブサイト再構築

スクレイピングしたコンテンツとブランド要素を活用して、地元企業の見込み客向けに世界最高水準のウェブサイトを構築します。これが中核となる価値提供です。再構築したサイトは現在のサイトより圧倒的に優れており、事業主が価値をすぐに実感できるものでなければなりません。

このスキルの仕組み

これは、投機的な地元企業への提案向けに簡略化した、完全版 /website-rebuild スキルの改訂版です。

• 削除: フェーズ11a／11b（競合ツールの調査と構築）、フェーズ12（ツールのQA）
• 統合: 3回のQAラウンドを1回の統合QAラウンドに
• 完全な内容を維持: 再構築計画、コピーの最適化、すべてのデザインルール、アクセシビリティ
• 出力先: ~/prospect-pipeline/sites/<slug>/（モノレポ構成）

入力

~/prospect-pipeline/prospects/<slug>/ から読み込みます。

• info.json — 事業の詳細、カテゴリ、連絡先情報
• audit-report.md — 現在のサイトの問題点
• original-site/content-inventory.json — スクレイピングしたすべてのコンテンツ
• original-site/assets/ — ロゴ、画像など

技術スタック — 厳守。変更禁止。

フレームワーク: Astro 5.x — 静的サイトジェネレーター。デフォルトではJavaScriptを使用せず、SEOに最適です。 スタイリング: Tailwind CSS v4（Viteプラグイン経由） 画像: astro:assets の Astro <Image> コンポーネント（組み込みの最適化機能、WebP／AVIF） SEO: @astrojs/sitemap インテグレーションと手動の JSON-LD ビュートランジション: Astro View Transitions（組み込み、JavaScript不要のページ遷移） パッケージマネージャー: npm（pnpmでもyarnでもなく、npmのみ）

初期化 — 以下のコマンドをそのまま実行

cd ~/prospect-pipeline/sites/
npm create astro@latest <slug> -- --template minimal --no-install
cd <slug>
npm install
npx astro add tailwind --yes
npx astro add sitemap --yes
npm install -D prettier

以上でプロジェクトの準備は完了です。Reactを追加しないでください。ビルドでインタラクティブ性が必要となる場合（地元企業のサイトではまれです）を除き、ほかのインテグレーションも追加しないでください。

ビルド中に問題が発生した場合

コードを修正してください。以下の操作はしないでください。

• Nodeのバージョンを切り替える
• パッケージマネージャーを切り替える
• フレームワークを再インストールする
• ReactやほかのUIフレームワークを追加する
• プロジェクト構成を変更する

npm create astro が失敗した場合は、Node.jsが利用可能であることを確認して、もう一度試してください。2回失敗したら、エラーを報告してください。別のフレームワークは試さないでください。

Astroのファイル構成

src/
  layouts/
    BaseLayout.astro     ← shared HTML shell, <head>, nav, footer
  pages/
    index.astro          ← homepage
    about.astro          ← about page
    services.astro       ← services page
    contact.astro        ← contact page
    404.astro            ← custom 404
  components/
    Header.astro         ← navigation
    Footer.astro         ← footer
    Hero.astro           ← hero section (reusable)
    ...                  ← section components as needed
  styles/
    global.css           ← @import "tailwindcss"; + CSS custom properties
public/
  images/                ← all downloaded images go here
  favicon.svg            ← favicon

今回のビルドで使うAstroの基本

.astro ファイルは、先頭のフロントマターのスクリプト領域（---）と、その下のHTML風テンプレートで構成されます。

---
import { Image } from 'astro:assets';
import BaseLayout from '../layouts/BaseLayout.astro';
import heroImage from '../assets/images/hero.jpg';
---

<BaseLayout title="Home" description="Meta description here">
  <section class="relative h-[80vh]">
    <Image src={heroImage} alt="Descriptive alt text" class="object-cover w-full h-full" />
  </section>
</BaseLayout>

React／Next.jsとの主な違い：

• JSXはありません。HTMLを使います。className= ではなく class=、htmlFor= ではなく for= を使います。
• useState や useEffect、クライアント側の状態管理はありません。ページは静的なHTMLです。
• 画像：最適化する場合は src/assets/images/ からインポートします。最適化しない静的ファイルの場合は public/images/ を参照します。
• CSSカスタムプロパティは src/styles/global.css に記述すると、どこからでも利用できます。
• ビュートランジション：スムーズなページ遷移を実現するには、BaseLayoutの <head> に <ViewTransitions /> を追加します。JavaScriptは不要です。

Google Fonts

BaseLayoutの <head> に <link> タグを追加するか、@fontsource パッケージを使って読み込みます。

npm install @fontsource-variable/playfair-display @fontsource/dm-sans

次に、レイアウトのフロントマターでインポートします。

---
import '@fontsource-variable/playfair-display';
import '@fontsource/dm-sans';
---

デザインの理念 — 忘れられないものにする

AIっぽさの判定: 公開前に、自分に問いかけてください。「このサイトを見た人に『AIが作った』と言ったら、すぐに信じるだろうか？」答えが「はい」なら失敗です。答えが「いいえ」になるまでデザインをやり直してください。

詳細な仕様については、design-rules.md をお読みください。以下は、具体的な代替案を含む譲れないルールです。

コード作成前の設計コミットメント（フェーズ 4.5 — 必須）

コードを1行でも書く前に、平易な英語で以下を説明してください。

1. デザインの方向性 — 次の中から1つだけ選びます：ダークでムーディーなエディトリアル、温かみのあるオーガニックな手作り感、クリーンでラグジュアリーなミニマル、力強くインダストリアル、レトロモダン、またはこのビジネスならではの独自の方向性。方向性を明確に決めてください。
2. ホームページの各セクション — レイアウト構成（「3列グリッド」ではなく）、カラムの比率、視覚的な仕掛け（重なり、傾斜、テクスチャ、全面表示など）、直前のセクションとの違いを説明します。
3. 「驚き」の瞬間 — 優れたサイトには、スクロールを止めさせる要素が1つあります。このサイトでは何ですか？（視差効果のあるヒーロー、アニメーション付きカウンター、重なり合う推薦カード、斜めのセクション区切りなど）

.astro ファイルに手を加える前に、これを REBUILD_PLAN.md に記述してください。

タイポグラフィ

• Google Fonts または @fontsource の、美しく個性的なフォントを使用します。
• 使用禁止： Inter、Roboto、Arial、Helvetica、システムフォント、Space Grotesk、Lato、Open Sans、Source Sans Pro
• 代わりに使用： 個性的なディスプレイフォントと洗練された本文用フォント。Fraunces、Playfair Display、Clash Display、Cabinet Grotesk、General Sans、Satoshi、Plus Jakarta Sans。
• タイポグラフィの全域を活用します。ヒーローの見出しは 56-80px 以上（可変になるよう clamp を使用）にし、ウェイトに極端なコントラストを付けます（400 と 600 ではなく、300 と 800）。
• 本文は最小 16px、行の高さは 1.5-1.65 にします。
• 見出しには text-wrap: balance、数字には font-variant-numeric: tabular-nums を使用します。

色

• global.css で、すべての色の値に CSS カスタムプロパティを使用します。
• ロゴやブランディングをもとに、主役となる色を1～2色と、鮮明なアクセントカラーを1色選びます。
• 使用禁止： 白地に紫のグラデーション、ありきたりな企業向けのブルー、配色に統一感のない虹色、純黒（#000）、メイン背景としての純白（#fff）、暗い背景にシアンを組み合わせた「開発者向けの見た目」、グラデーションテキスト
• 代わりに使用： ニュートラルカラーにブランドカラーの色味を加えます。oklch() または温かみのあるグレーを使用します。オフホワイトの背景（#faf9f6 など）と、ほぼ黒のテキスト（#1a1a2e など）を使います。鮮やかで彩度の高いアクセントカラーを際立たせます。
• すべての色の組み合わせで WCAG AA のコントラスト基準を満たします（本文テキストは 4.5:1、大きなテキストは 3:1）。

モーションとアニメーション

• CSS アニメーションとトランジションのみを使用します。JavaScript のアニメーションライブラリは使用しません。
• 使用禁止： バウンス／弾性イージング、transition: all、幅／高さ／マージンのアニメーション（レイアウトの再計算を頻発させるため）、すべてのセクションで同じ fadeInUp を使うこと
• 代わりに使用： 指数関数的なイージング（ease-out-expo には cubic-bezier(0.16, 1, 0.3, 1)）。animation-delay による段階的な表示。ページ読み込み時に一連の動きを演出します。60fps を維持できるよう transform と opacity のみを使います。
• サイトごとに最低3種類の異なるアニメーションを使います。どこでも fadeInUp を使うだけでは不十分です。例：左からスライドイン、スケール表示、clip-path によるワイプ、カウントアップ、テキスト分割表示、控えめな視差効果
• 少なくとも2つのセクションに、スクロールに応じて表示するアニメーションを実装します（Astro の小さな <script> タグで Intersection Observer を使用）。
• @media クエリで prefers-reduced-motion に対応します。
• ページ間のアニメーションには Astro View Transitions を使用します。

レイアウト — グリッドを崩す

• 禁止事項： すべてのセクションを max-w-7xl mx-auto で中央揃えにすること。同じ3列のカードグリッド。すべてのセクション見出しを text-center max-w-2xl mx-auto mb-14 にすること。すべてのセクションで均一なパディングを使うこと。すべてを角丸カードとドロップシャドウで囲むこと。

• 代わりに： 次の具体的なレイアウトパターンを使います（ホームページでは少なくとも4種類を選んでください）。

  パターン A — 非対称の分割： 均等な列ではなく、grid-cols-[2fr_1fr] または grid-cols-[1fr_2fr] を使います。一方には大きな画像、もう一方には簡潔なテキストを配置します。50/50にはしません。

  パターン B — フルブリードのアクセント： 少なくとも1つのセクションはコンテナからはみ出させます。全幅の画像、端から端まで続く色付きの帯、または CSS の clip-path を使った斜めのセクション区切りなどを使います。

  パターン C — 要素の重なり： 負のマージン（-mt-16、-ml-8）または translate を使って、画像を隣接するセクションに重ねます。ボックスモデルを崩します。

  パターン D — Bento／メイソングリッド： 同じ大きさのカードではなく、サイズに変化をつけます。大きな注目カードの周囲に小さなカードを配置します。注目アイテムには grid-row: span 2 を使います。

  パターン E — 段違い／オフセット： セクションごとに画像を左・テキストを右、テキストを左・画像を右と交互に配置します。項目の縦位置をずらし、平坦なグリッド上に並ばないようにします。

  パターン F — プルクオート／コールアウト： お客様の声や統計情報をテキストの流れから外して配置します。大きな文字、異なる背景、わずかな傾き、または隣接するコンテンツとの重なりを使います。

• ルール： 連続する2つのセクションで、同じ列構成やビジュアルパターンを使ってはいけません。

ビジュアルの奥行きと雰囲気

• 禁止事項： ほかに何もない単色のセクション背景。何も工夫のない白いセクション。空間にテキストだけが浮かんでいるセクション。
• 代わりに： サイトごとに、次のうち少なくとも2つを使ってビジュアルに奥行きを加えます。
  • 控えめなノイズ／粒状感のオーバーレイ（CSS の background-image: url("data:image/svg+xml,...") または小さな PNG）
  • セクション背景のグラデーションメッシュまたは放射状グラデーション
  • セクションの区切りや背景要素として使う装飾用 SVG シェイプ（ブロブ、波、斜線）
  • 色味をつけた box-shadow（グレーだけにしない）
  • 控えめな背景パターン（ドット、線、アウトドア関連の事業には地形図）
  • 要素を意図的に重ねるレイヤー状の z-index 構成

コンポーネントアーキテクチャ

• 必須： 見た目の異なるホームページの各セクションを、src/components/ 内の個別の .astro コンポーネントにします。これにより、パターンをコピー＆ペーストするのではなく、各セクションを個別に設計できます。
• ホームページに必要なコンポーネントの最小数：Hero.astro、About.astro、Services.astro、Testimonials.astro、CTA.astro — これに加えて、グローバルな Header／Footer。
• これは任意ではありません。250行のモノリシックな index.astro は、デザインの失敗です。

10のフェーズ

厳密に順番どおりに実行します。各フェーズが重要です。

フェーズ1：ブランドの抽出

スクレイピングしたコンテンツとアセットを使って、次の作業を行います。

• ロゴを分析します（original-site/assets/ にダウンロード済み）。
• ブランドカラー、タイポグラフィの個性、ビジュアルのトーンを抽出します。
• 明るい背景と暗い背景のどちらに適しているかを判断します。 出力： 内部メモ（別ファイルにはせず、REBUILD_PLAN.md にまとめます）

フェーズ2：SEO監査

スクレイピングしたメタデータと監査レポートを使って、次の作業を行います。

• 見つかった SEO 上の問題をすべて記録します。
• この事業と所在地を対象とするキーワードを特定します（例：「Coeur d'Alene の配管工」）。
• ローカル SEO 戦略を計画します（Google Business の schema、NAP の一貫性、地域キーワード）。
• コンテンツ戦略を計画します（どのページにどのキーワードが必要か）。 出力： REBUILD_PLAN.md の SEO セクション

フェーズ3：デザインと UX の監査

/prospect-audit で作成済みの監査レポートを使って、次の作業を行います。

• 現在のデザインの問題点を要約します。
• 実施する具体的な改善策を特定します。
• デザインの方向性を定めます（この事業にはどのようなスタイルが適しているか）。 出力： REBUILD_PLAN.md のデザインセクション

フェーズ 4：再構築計画

すべてを具体的な計画にまとめます。

1. サイトアーキテクチャ — ページ一覧、ナビゲーション構造、URL 構造

2. デザインの方向性 — カラーパレット（WCAG コントラスト比を事前に確認済み）、タイポグラフィの選定、コンポーネントのスタイル、全体的な印象

3. 画像戦略 — 画像ごとに KEEP / ENHANCE / REPLACE を指定

4. コピー戦略 — 書き換える内容と維持する内容、トーン、主要メッセージ

5. SEO 計画 — ページごとのターゲットキーワード、スキーマタイプ、メタ戦略

6. 技術計画 — 特別な統合、フォーム、マップなど

7. アクセシビリティ目標 — 重大または深刻な違反をゼロにする

8. 画像のダウンロード — 以下の画像選択プロトコルに従い、コンポーネントコードを書く前にすべての画像をダウンロードします。

   mkdir -p ~/prospect-pipeline/sites/<slug>/public/images
   # Download each planned image:
   curl -sL -o ~/prospect-pipeline/sites/<slug>/public/images/hero.jpg "https://images.unsplash.com/photo-XXXXX?auto=format&fit=crop&w=2400&q=85"
   

   画像が存在することを確認してから次に進みます：

   ls -la ~/prospect-pipeline/sites/<slug>/public/images/
   

   ディレクトリには最低限、ヒーロー画像、概要セクションの画像、サービス画像を少なくとも1枚含める必要があります。含まれていない場合は、今すぐダウンロードします。

DESIGN.md を生成します： 上記のデザインの方向性を定義した後、design-system-generator スキルを使用して、構造化された DESIGN.md ファイルにまとめます。

1. 9 セクション形式について、00-design-references/design-md-format.md を読みます。
2. デザインの方向性に合う参考用 DESIGN.md ファイルを、00-design-references/references/by-aesthetic/ から1～2個選びます。
3. 9 セクションすべてを含む DESIGN.md を生成します。平易な英語で記述したデザイン上の取り組み方を、第1セクション（Visual Theme）と第7セクション（Do's and Don'ts）に記載します。
4. REBUILD_PLAN.md の Design Direction セクションには「完全なデザインシステムについては DESIGN.md を参照してください」と記載します。

出力： プロジェクトのルート（REBUILD_PLAN.md と同じ場所）に DESIGN.md

出力： ~/prospect-pipeline/prospects/<slug>/REBUILD_PLAN.md

フェーズ 5：ウェブサイトを構築する

コードを書く前に、プロジェクトの DESIGN.md を読みます。 第2セクションを CSS カスタムプロパティに、第3セクションをフォントのインポートとタイポグラフィのスケールに、第4セクションをコンポーネントの実装に、第6セクションをシャドウトークンに反映します。すべてのビジュアル実装において、DESIGN.md を唯一の参照元とします。

コードを書く前に、画像がダウンロード済みであることを確認します：ls ~/prospect-pipeline/sites/<slug>/public/images/。空の場合は、フェーズ 4 のステップ 8 に戻ります。

~/prospect-pipeline/sites/<slug>/ で構築します：

1. Astro プロジェクトを初期化します — 上記の Tech Stack セクションに記載されたコマンドをそのまま使用します。

2. デザインシステムを設定します：

   • すべてのブランドカラー、タイポグラフィ、間隔の CSS カスタムプロパティを含む src/styles/global.css を作成します
   • 各カラーの組み合わせの横に、WCAG コントラスト比をコメントとして追加します
   • @fontsource パッケージまたは <link> タグを使用してフォントをインポートします

3. BaseLayout を構築します（src/layouts/BaseLayout.astro）：

   • <html>、メタタグ、OG タグ、フォント、グローバル CSS を含む <head>
   • ページ間のスムーズな遷移のために <ViewTransitions /> を追加します
   • 共通の Header/Nav コンポーネントと Footer コンポーネント
   • 最初にフォーカス可能な要素として、コンテンツへのスキップリンクを追加します
   • JSON-LD 構造化データ用のスロット

4. REBUILD_PLAN.md のアーキテクチャに従って、すべてのページを構築します：

   • 各ページは src/pages/ に .astro ファイルとして作成します
   • 洗練された 404.astro を含めます
   • 各ページを、その事業者の現在のサイトより大幅に優れたものにします
   • すべてのヒーローセクションには CSS グラデーションではなく、実際の写真を使用します
   • 可能な場合は、画像の最適化に Astro の <Image> コンポーネントを使用します 重要 — 画像上のテキストのコントラスト（QAで常に問題になります）： ヒーロー画像や写真の上にテキストを配置する場合：
   • 明るいテキストの背後には、必ず暗いオーバーレイを追加します：bg-black/50 または bg-gradient-to-t from-black/70 to-black/30
   • 暗いテキストの背後には、必ず明るいオーバーレイを追加します：bg-white/60 など
   • 明るい写真や輝度の高い写真の上に、白いテキストを直接配置するのは絶対に避けます
   • 暗い写真の上に、暗いテキストを直接配置するのは絶対に避けます
   • 頭の中で確認します：画像の大部分が空や雲（明るい）なら、暗いオーバーレイが必要です。画像の大部分が影や暗い部分なら、白いテキストにはさらにオーバーレイが必要です。
   • オーバーレイは細い帯だけでなく、テキスト領域全体を覆う必要があります
   • ヒーローの見出しには、追加の保険として text-shadow: 0 2px 4px rgba(0,0,0,0.5) を追加します
   • 使用例：

     <section class="relative h-[80vh]">
       <img src="/images/hero.jpg" class="absolute inset-0 w-full h-full object-cover" />
       <div class="absolute inset-0 bg-black/50"></div> 
       <div class="relative z-10 flex items-center h-full">
         <h1 class="text-white text-5xl font-bold" style="text-shadow: 0 2px 4px rgba(0,0,0,0.5)">
           見出しテキスト
         </h1>
       </div>
     </section>
     

   これは、テキストを写真の上に配置するすべてのセクションに適用されます。ヒーロー、概要、お客様の声、CTA バナー、ページヘッダーなどが該当します。例外はありません。

5. 画像 — すべてのサイトに最低限、次の画像が必要です：

   • ヒーロー画像（全幅で、雰囲気を醸し出し、サイトの印象を決めるもの）
   • 概要／ストーリーセクションの画像（ビジネス、作業スペース、またはチーム）
   • チーム写真（サイトに掲載されている実際の写真）
   • 主要なコンテンツセクションごとに、少なくとも画像を1枚
   • パスで参照します：public/ ファイルの場合は /images/filename.jpg、最適化する場合は src/assets/ からインポートします
   • 画像がないサイトや、CSS グラデーションだけを使用したサイトは認められず、QA に合格しません。

6. 包括的な SEO：

   • ページごとに固有の <title> と <meta name="description">
   • Open Graph と Twitter Card のメタタグ
   • NAP データを含む JSON-LD スキーマ（LocalBusiness タイプ）
   • @astrojs/sitemap によるサイトマップ（インストール済み）
   • public/robots.txt
   • 正規 URL
   • 全体を通じたセマンティック HTML（適切な見出し階層、ランドマークなど）

7. ファビコンの生成 — ロゴから必要な一式を作成します（最低限、public/ に favicon.svg を用意）

8. アクセシビリティ：

   • すべてのテキストと背景の組み合わせで WCAG AA のコントラストを確保します
   • 特に、画像上のテキストのコントラストを確認します — 背景に写真を使うヒーロー、バナー、CTA セクションには、必ずオーバーレイを追加します（明るいテキストには暗いオーバーレイ、暗いテキストには明るいオーバーレイ）。これはビルドで最も多いアクセシビリティ上の不備です。
   • 視認できるフォーカスインジケーターを備えた、完全なキーボード操作
   • ネイティブ HTML のセマンティクスでは不十分な場合に限り、ARIA ラベルを使用します
   • すべてのアニメーションを prefers-reduced-motion メディアクエリで囲みます
   • メインコンテンツへのスキップリンク

9. パフォーマンス — Astro がほとんどを自動的に処理します：

   • 静的 HTML 出力（デフォルトでは JS はゼロ）
   • <Image> コンポーネントによる画像の最適化
   • @fontsource によるフォントの最適化（セルフホスト、外部リクエストなし）
   • 目標：Lighthouse 95+（Astro サイトなら簡単に達成できます）

画像選定プロトコル

重要な理由： キーワードに合う最初のストック写真を使うと、恥ずかしい結果になります。女性専用のサロンのサイトに、男性のひげを整えている写真が掲載されていたことがあります。ダークでインダストリアルな雰囲気のブランドの「会社概要」ページに、明るく真っ白な内装の写真が使われていたこともあります。すべての画像を慎重に選んでください。

このプロトコルは、すべての業種に適用されます。特定の業界に限ったものではありません。

ステップ 1：画像を選ぶ前に、ビジネスについて深く理解する

スクレイピングしたコンテンツ、サービス、チーム情報、Google のレビュー、監査結果を読み込み、ビジネスの全体像を把握します。

• このビジネスは、日々実際に何をしているのでしょうか？
• 顧客はどのような人たちでしょうか？（住宅所有者、ほかの企業、家族、専門職の人など）
• どのような雰囲気でしょうか？（高級感、現場仕事・勤勉、家族向け、臨床的・専門的、創造的・芸術的）
• 実際の空間はどのような見た目でしょうか？
• 経営者がウェブサイトで見せることを誇りに思えるものは何でしょうか？

配管業者のサイトには、清潔でプロフェッショナルな仕事ぶり、きちんとした制服、玄関先で感じよく対応する技術者が必要です。白い背景にレンチを置いた写真ではありません。 会計事務所のサイトには、信頼と専門性が必要です。「街並みを背に握手する」ストック写真ではありません。 建設会社には、実際の建設現場、完成したプロジェクト、作業中のチームが必要です。ヘルメットのクリップアートではありません。

ステップ 2：文章を読んでから、画像を選ぶ

画像の各枠について、まず周囲の文章を読みます。画像は、テキストで伝える内容を補強するものでなければなりません。

• 「家族経営で20年」→ 温かみのある、個人的な雰囲気。人柄が感じられるチームや作業スペース
• 「精密さと細部へのこだわり」→ 技術力が伝わる作業のクローズアップ
• カスタマーサービスのセクション → 機材だけでなく、人々がやり取りしている様子
• お客様の声 → そのお客様の声が表現する気持ちを想起させるもの

ビジネスの業種で Unsplash を検索し、最初に出てきた画像をそのまま使ってはいけません。

ステップ 3：まず実際の写真を使い、ストック写真は最後の手段にする

優先順位：

1. 実際のチーム写真（original-site/assets/team/ から）。チームや「会社概要」のセクションでは必ず使用します。実在する人物の名前が出ている場合、ストック写真の人物は絶対に使いません。
2. 実際の作業・プロジェクトの写真（スクレイピングしたもの）。オフィス、店舗、完成したプロジェクトなどを使用します。
3. Google マップ／ビジネスの写真（Apify からダウンロード可能）。内観、外観の写真です。
4. 慎重に選んだストック写真。補助的・装飾的な枠に限って使用します。

ステップ 4：すべてのストック画像を目視で確認する

ストック画像を使う前に、次の点を確認します。

• 色温度がデザインシステムに合っていますか？
• 同じ地域・文化的背景に感じられますか？（田舎のアイダホ州の配管業者の背後にマンハッタンの街並みがあるのは不自然です）
• 経営者が「うん、うちらしいね」と言える画像ですか？
• 実際の顧客層に合った属性の人物ですか？
• 業界に何となく「関連している」だけではなく、セクションの文章と一致していますか？

すべてに「はい」と答えられない場合は、別の画像を選んでください。誤った具体的な写真より、適切に選んだ抽象画像やテクスチャのほうが優れています。

ステップ 5：制作を始める前に画像プランを作成する

IMAGE PLAN for [Business Name]:
- Hero: [description, source, why it fits]
- About section: [description, source, why it fits]
- Team - [Name]: [their actual photo from assets/team/]
- Services section: [description, source, why it fits]
- Contact section: [description, source, why it fits]

ステップ 6：QA 中に照合する

QA 中に preview_screenshot を使用して、各ページを目視で確認します。

• チーム写真には実際のチームメンバーが写っていますか？
• 画像はブランドのカラーパレットや雰囲気に合っていますか？
• 経営者は自分たちが表現されていると感じますか？
• 「何か違う」または汎用的に感じる画像はありませんか？あれば差し替えます。
• 画像の破損チェックを実行します（QA セクションを参照）。

ビジュアル品質の基準： 20,000ドル以上の制作費をかけたエージェンシー制作のような見た目にする必要があります。素晴らしいものを。良いだけではなく、素晴らしいものを。

フェーズ 6：コピーの監査と最適化

再構築したサイトの文章を、一語ずつすべて読み直します。

• サイトを開いてから5秒以内に価値提案が伝わりますか？
• 各ページに、スクロールせずに見える、メリットを訴求する CTA がありますか？
• メリットを先に伝え、懸念に対処し、具体的な数値を使っていますか？
• 8年生相当の読みやすさで、インパクトを出すために短い文を使っていますか？
• お客様の声は CTA や意思決定のポイントの近くに配置されていますか？
• 「フック → 課題 → 解決策 → 裏付け → 行動」の流れになっていますか？

すべての段落を推敲します。これは営業ツールです。

出力： ~/prospect-pipeline/prospects/<slug>/COPY_CHANGES.md

フェーズ 7：総合 QA

機能、コピー、ビジュアルを網羅する包括的なチェックを 1 回実施します。

1. preview_start を使ってサイトをローカルで起動します
2. すべてのページを開き、preview_screenshot でスクリーンショットを撮影します
3. 画像チェック（最初に実施）：
   • ホームページの画像数をカウントします：document.querySelectorAll('img').length
   • 画像が 3 枚未満の場合は、フェーズ 5 に戻り、続行する前に画像を追加します。
   • 次の点を確認します：ヒーローに実際の写真があること、概要セクションに実際の写真があること、サービスに画像があること。
   • 不足している画像があれば、適切な画像をダウンロードして追加します。
4. 機能： モバイルとデスクトップの両方で、すべてのリンク、画像、フォーム、インタラクティブ要素を確認します
5. コピー： 初めて訪れた顧客の視点で読みます。5 秒で理解できますか？信頼できますか？何をすべきかわかりますか？
6. ビジュアル： アニメーションは滑らかですか？タイポグラフィは美しいですか？余白のバランスは取れていますか？色に統一感はありますか？写真は美しく、内容に関連していますか？
7. アクセシビリティ： すべての配色のコントラスト比を確認します。キーボード操作が機能します。フォーカスインジケーターが見えることを確認します。
8. デザインシステムの一貫性： global.css のすべての CSS カスタムプロパティが、DESIGN.md で定義されたトークンに対応していることを確認します。孤立したトークンや不足しているトークンがないことを確認します。
9. 業界最高水準と比較します。それを上回る必要があります。

画像の読み込みエラーチェック

デプロイする前に、すべての画像が読み込まれることを確認します。

1. preview_start で開発サーバーを起動します
2. すべてのページ（/, /about, /services, /contact）にアクセスします
3. 各ページで preview_eval を使って次を実行します：

   Array.from(document.querySelectorAll('img')).filter(img => !img.complete || img.naturalWidth === 0).map(img => img.src)
   

4. 画像の読み込みエラーが 1 つでもある場合：
   • 外部 URL → public/images/ にローカルでダウンロードし、src を更新します
   • パスの誤り → パスを修正します
   • 破損 → 再ダウンロードします
5. 見込み顧客の元のウェブサイトから画像を直リンクしないでください。 必ずローカルファイルを使用します。
6. 本番環境に外部の Unsplash URL を残さないでください。 すべてのストック画像をローカルにダウンロードします。
7. 修正後にチェックを再実行します。すべての画像が読み込まれるまでデプロイしないでください。

出力： ~/prospect-pipeline/prospects/<slug>/QA_REPORT.md

フェーズ 8：デプロイ前チェックリスト

すべての項目を確認します。

• SEO：固有のメタタグ、OG タグ、構造化データ、見出しの階層、代替テキスト、サイトマップ、robots.txt
• パフォーマンス：画像を最適化済み、フォントをセルフホスト済み、すべてのページが静的。Lighthouse 95+。
• アクセシビリティ：すべての色が WCAG AA に準拠。キーボード操作が機能。フォーカスインジケーターが見えること。
• 機能：すべてのリンク、フォーム、要素が機能。モバイルナビゲーションが機能。404 ページが機能。
• コンテンツ：プレースホルダーや誤字脱字がなく、すべての事業情報が正確。
• ビジュアル：あらゆるビューポートでデザインに一貫性があり、洗練されている。禁止されているフォントがないこと。

フェーズ 9：デプロイの準備

サイトは ~/prospect-pipeline/sites/<slug>/ に構築されています。次の準備を行います。

• .gitignore が適切であることを確認します（Astro の初期化時に生成されます）
• プロジェクトの概要とローカルでの実行方法を記載した README.md を作成します
• info.json の見込み顧客の status を "built" に設定します
• info.json に built_date を追加します
• pipeline.json を更新し、total_built を増分します

注：GitHub/Vercel への実際のデプロイは /prospect-deploy スキルが担当します。

フェーズ 10：概要

構築した内容を出力します：

LOCAL BUSINESS REBUILD COMPLETE
================================
Business:      Bob's Plumbing
Location:      Coeur d'Alene, Idaho
Category:      Plumber
Site Path:     ~/prospect-pipeline/sites/bobs-plumbing/
Framework:     Astro 5.x + Tailwind CSS v4
Pages Built:   7 (Home, About, Services, Gallery, Contact, FAQ, 404)
Design:        [brief description of aesthetic]
Key Features:  [list notable features]
SEO:           LocalBusiness schema, 8 target keywords, sitemap
Accessibility: WCAG AA, all contrast verified
Performance:   Static HTML, zero JS, Lighthouse 95+
Ready for:     /prospect-deploy

参考ファイル

このスキルは、メインの website-rebuild スキルからデザイン哲学を引き継いでいます。

• design-rules.md — 守るべきデザインルール
• accessibility-spec.md — WCAG AA 仕様

フルサイト再構築との主な違い

項目	フル再構築	ローカルビジネス再構築
フェーズ	14	10
ツールの調査	競合の詳細調査	なし
ツールの構築	2～5 個のインタラクティブなツール	なし
QA ラウンド	3 回に分けて実施	1 回にまとめて実施
コピーの監査	完全	完全（ユーザーの要望により維持）
再構築計画	詳細なドキュメント	完全（ユーザーの要望により維持）
デプロイ	個別の GitHub リポジトリ + Vercel	モノレポのパスのみ（デプロイは別スキル）
入力	ユーザーから提供された URL	prospect-scrape でスクレイピングしたコンテンツ
出力	デプロイ済みの公開サイト	モノレポ内に構築したデプロイ準備済みのサイト