website-rebuild

Webサイト全面再構築エージェント

既存のWebサイトのURLを受け取り、ゼロから驚くほど優れた、本番環境に対応したWebサイトを再構築します。成果物は、2万ドル以上の制作費をかけたエージェンシー制作のように見えるものにしてください。視覚的に優れ、コンバージョンに最適化され、完全にアクセシブルで、SEO対策も完了している必要があります。

このスキルの仕組み

このスキルは、厳密な順序で14のフェーズを実行します。各フェーズでは、次に進む前にドキュメントを作成します。フェーズを省略したり、順序を入れ替えたりしないでください。ユーザーがURLを指定すれば、あとはすべて行います。

入力： WebサイトのURL（再構築するサイト） 出力： Vercelにデプロイされた稼働中のWebサイト＋GitHubリポジトリ＋ドキュメント11件

技術スタック — 厳守してください。変更しないでください。

フレームワーク： Astro 5.x — 静的サイトジェネレーター。デフォルトでJavaScriptはゼロなので、SEOに最適です。 スタイリング： Tailwind CSS v4（Viteプラグイン経由） 画像： Astro <Image> コンポーネント（astro:assetsから）。最適化機能を標準搭載し、WebP／AVIFに対応しています。 SEO： @astrojs/sitemap インテグレーション＋手動のJSON-LD ページ遷移： Astro View Transitions（標準搭載、JavaScript不要のページ遷移） ブログ／コンテンツ： MDXを使用したAstro Content Collections。Frontmatter：title、date、description、author、tags、featuredImage。 デプロイ： GitHub経由のVercel（mainにプッシュすると自動デプロイ） パッケージマネージャー： npm（pnpmでもyarnでもなく、npmのみ） リンティング： 最初からESLint＋Prettier

初期化 — 以下のコマンドをそのまま実行してください

npm create astro@latest <project-name> -- --template minimal --no-install
cd <project-name>
npm install
npx astro add tailwind --yes
npx astro add sitemap --yes
npx astro add mdx --yes
npm install -D prettier

以上です。プロジェクトの準備ができました。

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

コードを修正してください。次のことはしないでください。

• Nodeのバージョンを変更する
• パッケージマネージャーを変更する
• フレームワークを再インストールする
• インタラクティブなツール（フェーズ11b）で特に必要な場合を除き、Reactやその他のUIフレームワークを追加する
• プロジェクトの構成を変更する

Astroのファイル構成

src/
  layouts/
    BaseLayout.astro       ← shared HTML shell, <head>, nav, footer
    BlogPostLayout.astro   ← blog post template
  pages/
    index.astro            ← homepage
    about.astro            ← about page
    services.astro         ← services page
    contact.astro          ← contact page
    blog/
      index.astro          ← blog listing
      [...slug].astro      ← dynamic blog post pages
    tools/                 ← interactive tools (Phase 11b)
    404.astro              ← custom 404
  components/
    Header.astro           ← navigation
    Footer.astro           ← footer
    Hero.astro             ← hero section
    ...                    ← section components as needed
  content/
    config.ts              ← content collection schema
    blog/
      *.mdx                ← blog posts
  styles/
    global.css             ← @import "tailwindcss"; + CSS custom properties
  assets/
    images/                ← optimized images (processed by Astro)
public/
  images/                  ← static images (served as-is)
  favicon.svg
  robots.txt

このビルドで使うAstroの基本事項

.astro ファイルは、先頭のfrontmatterスクリプトフェンス（---）と、その下の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です。
• インタラクティブなツール（フェーズ11b）にはAstro Islandsを使います。JavaScriptが必要なコンポーネントに client:load を追加してください。
• 画像：最適化には src/assets/images/ からインポートするか、静的ファイルには public/images/ を参照してください。
• CSSカスタムプロパティは src/styles/global.css に記述すると、どこからでも利用できます。
• ページ遷移：スムーズなページ遷移を実現するには、BaseLayoutの <head> に <ViewTransitions /> を追加してください。JavaScriptは不要です。

Google Fonts

@fontsourceパッケージ経由で読み込みます（セルフホスト型で、外部へのリクエストはありません）。

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

次に、レイアウトのfrontmatterでインポートします。

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

デザイン — 専門スキルに委ねる

ビジュアルデザインに関するすべての判断は、専用のデザインスキルが担当します。静的なルールに基づいてデザインを決めず、必ずスキルを呼び出してください。

必須のデザインスキル（フェーズ5およびフェーズ6で呼び出すこと）：

1. frontend-design-anthropic — カラーパレット、タイポグラフィ、レイアウト構成、モーション、コンポーネントのスタイリングなど、ビジュアルデザインに関するすべての判断にこのスキルを使います。CSSを書く前、またはビジュアルの方向性を決める前に、このスキルを読み込んでください。美的な方向性の決定、フォント選定、カラーシステム、余白、アニメーションの方針を担当します。

2. web-design-guidelines — 専門的なWebデザイン基準に照らして、デザインの判断を検証するためにこのスキルを使います。主要なページを構築するたびに実行し、コンプライアンス上の問題、アクセシビリティの問題、デザイン上のアンチパターンがないか確認してください。

ビルドプロセスでの使用方法：

• フェーズ 5（再構築計画）： デザインの方向性を決める前に、frontend-design-anthropic を呼び出し、デザインテイスト、カラーパレット、タイポグラフィの組み合わせ、コンポーネントのパターンを定めます。これらの選択を REBUILD_PLAN.md に記録します。
• フェーズ 6（構築）： frontend-design-anthropic のデザインシステムを、すべてのコンポーネントとページに適用します。すべてのビジュアル上の判断に使用し、一般的な Tailwind のデフォルト設定に頼らないでください。
• フェーズ 8～10（QA）： 各ページに対して web-design-guidelines を実行し、デザインの品質を検証します。次に進む前に、指摘された問題を修正します。

このスキルが引き続き担当する内容（デザイン以外）：

• 技術スタックの決定（Astro + Tailwind）
• @fontsource を使用したフォントのセルフホスト（デザインスキルが使用するフォントを選択します）
• CSS カスタムプロパティのアーキテクチャ
• パフォーマンス目標（Lighthouse 95+）
• Astro の <Image> コンポーネントを使用した画像の最適化

アクセシビリティとコントラスト（重要）

完全な仕様については、accessibility-spec.md をお読みください。

コントラストの最小値（WCAG AA）

テキストの種類	最小値	目標値
通常の本文（< 18px）	4.5:1	7:1
大きなテキスト（>= 18px または >= 14px の太字）	3:1	4.5:1
UI コンポーネント、境界線、アイコン	3:1	4.5:1
入力欄のプレースホルダーテキスト	4.5:1	7:1
フォーカスインジケーター	3:1	4.5:1

検証

• QA 中に preview_eval を使用し、各ページで CDN 経由の axe-core チェックを実行します
• 次に進む前に、すべての CRITICAL および SERIOUS の違反を修正します
• すべての色の組み合わせのコントラスト比を検証し、global.css にコメントとして記録します
• 見た目だけの確認を決して信用しないでください

避けるべきよくある問題

• 白地に薄いグレーのテキスト（#FFF に対して #595959 より薄いグレーはすべて不合格です）
• 淡いブランドカラーのボタン上の白いテキスト
• 暗いヒーロー背景上の暗いテキスト
• コントラストを低下させるホバー／フォーカス状態
• 十分な不透明度のない画像上のオーバーレイテキスト
• 最も明るい部分でコントラスト基準を満たさないグラデーションテキスト

14 のフェーズ

次の順序を厳守して実行してください。省略や順序の変更はしないでください。各フェーズの詳細な手順は phase-details.md に記載されています。

フェーズ 1：ビジュアルの確認とブランド要素の抽出

Chrome ブラウザーで URL を開き、すべてのページを確認します。ロゴをデザインの基準とし、ブランドカラー（hex）、タイポグラフィの特徴、ビジュアルのトーンを抽出します。ロゴファイルをダウンロードします。 出力： BRAND_BRIEF.md

フェーズ 2：データのスクレイピングとコンテンツの分類

スクレイピングスクリプトを作成して実行します。すべてのテキスト、画像、リンク、ナビゲーション構造、連絡先情報、フォーム、メディア、メタタグ、お客様の声、構造化データを抽出します。再利用必須と変更／置換可能に分類します。 出力： CONTENT_INVENTORY.md

フェーズ 3：包括的な SEO 監査

テクニカル SEO（速度、モバイル、URL、サイトマップ、robots.txt、HTTPS、canonical、404、リダイレクト）。ページ内 SEO（タイトル、説明、見出し、代替テキスト、内部リンク、キーワード）。コンテンツ戦略（ブログの不足、ローカル SEO、スキーママークアップ）。 出力： SEO_AUDIT.md

フェーズ 4：デザインと UX/UI の監査

ビジュアルデザイン（デザインテイスト、色、タイポグラフィ、余白、階層）。UX（ナビゲーション、CTA、モバイル、フロー、信頼性を示す要素）。コンバージョン最適化（CTA の配置、価値提案、ソーシャルプルーフ）。 出力： DESIGN_AUDIT.md

フェーズ 5：再構築計画

フェーズ 1～4 の内容を統合します。サイトアーキテクチャ、デザインの方向性（タイポグラフィ、カラーパレット、レイアウトの方向性について frontend-design-anthropic スキルを呼び出す）、画像戦略（維持／強化／置換／作成）、コピー戦略、SEO 実装計画、ツール調査用のプレースホルダー、技術計画、アクセシビリティ目標をまとめます。すべてのカラーパレットは WCAG AA のコントラスト検証に合格する必要があります。 出力： REBUILD_PLAN.md

フェーズ 5b：DESIGN.md を生成する

再構築計画の作成が完了したら、design-system-generator スキルを使用して、プロジェクトのルートに DESIGN.md ファイルを生成します。これは、フェーズ 6 で使用する機械可読なデザインシステムです。

1. 必須の 9 セクション構成を確認するため、00-design-references/design-md-format.md を読みます。
2. 00-design-references/design-md-index.md を参照し、選択した美的方向性に合う参考用 DESIGN.md ファイルを 1～2 件選びます。構成の参考として、それらを読みます。
3. フェーズ 5 で決定したデザインと frontend-design-anthropic スキルの呼び出し内容を基に、9 セクションすべてを埋めたプロジェクトの DESIGN.md を生成します。
4. すべての色に、16 進値、セマンティックな役割、想定される背景色に対する WCAG コントラスト比を含めます。
5. タイポグラフィには、完全な階層テーブル（役割、ファミリー、サイズ、ウェイト、行の高さ、文字間隔）を含めます。
6. コンポーネントのスタイルには、ボタンの状態、カードのパターン、入力欄のスタイルを正確な CSS 値で定義します。
7. REBUILD_PLAN.md の「Design Direction」セクションで、DESIGN.md ファイルを参照します。「完全なデザインシステムについては DESIGN.md を参照してください」という文言と、3 行の要約を記載します。

出力： プロジェクトのルートに DESIGN.md

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

視覚的なコードを書く前に、プロジェクトの DESIGN.md を読みます。 global.css の CSS カスタムプロパティにはセクション 2（Color Palette）を、フォントのインポートとタイポグラフィのスケールにはセクション 3（Typography）を、ボタン、カード、入力欄、ナビゲーションのコンポーネント実装にはセクション 4（Component Stylings）を使用します。シャドウトークンにはセクション 6（Depth & Elevation）を使用します。DESIGN.md を唯一の信頼できる情報源とし、DESIGN.md で値が指定されている場合は、汎用的な Tailwind のデフォルト値を使用しないでください。

視覚的なコードを書く前に、frontend-design-anthropic スキルを呼び出します。構築手順：

1. Astro プロジェクトを初期化する： 上記の Tech Stack セクションに記載された正確なコマンドを使用します。
2. デザインシステムを最初に構築する： global.css に CSS カスタムプロパティ、コンポーネントのプリミティブ、レイアウトパターンを定義します。すべての色の組み合わせの横に、コメントとして WCAG コントラスト比を記録します。
3. サイトアーキテクチャに沿ってすべてのページを構築する： 洗練された 404 ページも用意します。各ページを大幅に改善します。
4. 画像に対応する： KEEP→Astro <Image> で最適化、ENHANCE→Nano Banana、REPLACE→Unsplash（ローカルにダウンロード）。すべての画像はローカルファイルとし、外部 URL は使用しません。
5. 包括的な SEO： メタタグ、JSON-LD スキーマ、サイトマップ（@astrojs/sitemap 経由）、robots.txt、canonical、セマンティック HTML。
6. ファビコンを生成する： ロゴから完全なファビコン一式を作成します。
7. アクセシビリティ： WCAG AA に準拠していることを確認します。キーボードナビゲーション、フォーカスインジケーター、ARIA、コンテンツへスキップするリンクを用意します。
8. パフォーマンス： 大部分は Astro が処理します（JavaScript ゼロ、静的 HTML）。フォントは @fontsource を使ってセルフホストします。Lighthouse 95+ を目標にします。

ビジュアル品質の基準： 圧倒的な仕上がりにします。単に良いだけではなく、圧倒的な仕上がりを目指します。Apple、Stripe、Linear を参考にしてください。

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

価値提案は 5 秒以内に伝わるようにします。すべてのページに、スクロールせずに見える、メリットを明確にした CTA を設けます。メリットを先に伝え、懸念に対処し、具体的な数値を使い、中学 2 年生が読めるレベルにします。フック → 課題 → 解決策 → 根拠 → 行動の流れにします。 出力： COPY_CHANGES.md

フェーズ 8：QA 第 1 ラウンド — 機能とコンテンツ

ローカルで実行して Chrome で開き、すべてのページを確認します。モバイル、タブレット、デスクトップで、リンク、画像、フォーム、インタラクティブ要素をチェックします。コントラスト比を確認し、重大および深刻なアクセシビリティ違反をすべて修正します。 出力： QA_ROUND_1.md + ACCESSIBILITY_AUDIT.md を更新

フェーズ 9：QA 第 2 ラウンド — コピーとメッセージング

初めて訪れる顧客の視点で、サイト全体を読みます。ビジネスの内容を 5 秒で理解できますか？ 信頼できますか？ 次に何をすればよいか分かりますか？ 最終的なコピーを調整します。 出力： QA_ROUND_2.md

フェーズ 10：QA ラウンド 3 — 最終的なビジュアルと仕上げ

すべてのページを、すべてのビューポートサイズで確認します。各ページに対して web-design-guidelines スキルを実行します。アニメーションは滑らかですか？ タイポグラフィに独自性がありますか？ 余白のバランスは取れていますか？ 色に一貫性がありますか？ アクセシビリティの最終確認を行います。業界最高水準と比較し、それを上回る品質にします。 出力： QA_ROUND_3.md

フェーズ 11a：競合ツールの調査スプリント

ここは重要です。調査をせずにツールを作ることはありません。予算の前提：無制限。

1. ウェブ検索で、競合上位 10～15 社と、業界最高水準のサイトを特定します。
2. Chrome で各サイトを訪問し、インタラクティブツール、計算機、クイズ、コンフィギュレーター、見積もりツールをすべて記録します。
3. より広範なウェブ検索を行います：「[industry] calculator/estimator/tool」、Product Hunt、G2、業界ディレクトリを検索します。
4. 調査結果をまとめます：競合の一覧、業界最高水準の事例、ギャップ分析、優先順位付き候補リスト（価値 × コンバージョン × 独自性 × 実現可能性）、そして最終的に 2～5 個のツールを選定します。 出力： TOOLS_RESEARCH.md

フェーズ 11b：クライアント向けツール — 構築

TOOLS_RESEARCH.md で承認されたツールのみを構築します。/tools または /resources セクションを作成します。

クライアントサイド JavaScript が必要なインタラクティブツールには、Astro Islands を使用します。

• お好みの UI フレームワーク（React、Preact、Svelte、またはバニラ JS）でコンポーネントを作成します。
• .astro ページでコンポーネントを使用する際に、client:load または client:visible ディレクティブを追加します。
• ツールに React を使用する場合：npx astro add react --yes（このフェーズに進むまでは、React を追加しないでください）
• 各ツールに、タイトル、説明、インタラクティブツール、CTA を含む専用ページを用意します。
• モバイル対応にし、デザインシステムとの一貫性を保ち、アクセシビリティを確保します。

フェーズ 12：QA ラウンド 4 — ツールの QA

有効な入力、端のケース（ゼロ、非常に大きな数値、空欄）、モバイルビューポートで、Chrome を使って各ツールをテストします。計算、入力検証、エラー、表示、CTA を確認します。すべてのツールページでアクセシビリティを確認します。 出力： QA_ROUND_4.md

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

チェックリストのすべての項目を確認します。SEO、パフォーマンス、アクセシビリティ、コントラスト、機能、コンテンツ、ビジュアル、デザインシステム、ファビコン、ドキュメントを網羅した完全なチェックリストは、phase-details.md を参照してください。

フェーズ 14：デプロイ

git、.gitignore、README.md（プロジェクト概要、技術スタック、実行方法、ブログ投稿の追加方法、構成）を初期化します。新しい GitHub リポジトリにコミットしてプッシュします。Vercel に接続し、ビルド設定を構成します（Astro は Vercel によって自動検出されます）。Chrome で公開 URL を開き、すべてを抜き取り確認します。公開 URL に対してアクセシビリティの最終スキャンを実施します。

Nano Banana による画像の補正

チームや人物の写真を補正する場合は、OpenRouter API を使用します。スクリプトのテンプレートは nano-banana.md を参照してください。実行前に、モデル文字列とエンドポイントが最新であることを docs.openrouter.ai で確認してください。

ブログのインフラストラクチャ

Astro Content Collections と MDX を使用して設定します。新しい投稿は、フロントマター（title、date、description、author、tags、featuredImage）を記述した .mdx ファイルを src/content/blog/ に作成し、main にプッシュして追加します。ブログ一覧には新しい投稿が自動で取り込まれ、日付順に並びます。個別の投稿には、美しい長文向けのタイポグラフィ、長い投稿向けの目次、ソーシャル共有ボタン、ページ下部の CTA を含めます。

最終成果物

#	成果物
1	稼働中の Vercel ウェブサイト — 美しいアニメーション、レスポンシブ対応、SEO 最適化、WCAG AA 準拠、調査に基づいて検証されたツールを搭載
2	GitHub リポジトリ — 整理されたコード、ブログの手順を記載した README、プッシュ時の自動デプロイ
3	BRAND_BRIEF.md
4	CONTENT_INVENTORY.md
5	SEO_AUDIT.md
6	DESIGN_AUDIT.md
7	REBUILD_PLAN.md
8	TOOLS_RESEARCH.md
9	ACCESSIBILITY_AUDIT.md
10	COPY_CHANGES.md
11	QA_ROUND_1.md ～ QA_ROUND_4.md
12	DESIGN.md — すべてのトークン、タイポグラフィ、コンポーネント、シャドウを含む、体系的なデザインシステム仕様書

基本原則

• スピードより品質を重視します。 すべてのフェーズが重要です。次へ進む前に問題を修正してください。
• 目を見張るビジュアルは必須です。 魅力的なビジュアル、繊細なアニメーション、美しいタイポグラフィ、意図的な余白を取り入れ、躍動感のある上質なデジタル体験を実現してください。
• 卓越したデザインは妥協できません。 15万ドル以上の予算をかけたエージェンシー品質を目指してください。ビジュアルに関するすべての判断で frontend-design-anthropic スキルを使用してください。web-design-guidelines で検証してください。
• フェーズ 5 からアクセシビリティを組み込みます。 色を確定する前にコントラスト比を計算してください。すべての QA 段階で検証してください。WCAG AA は最低基準です。
• SEO は後付けではなく、最初から組み込みます。 URL 構造、見出し、代替テキスト、コンテンツ戦略など、すべてを最初から SEO に基づいて考慮してください。
• コピーでユーザーの心を動かす必要があります。 これは販売ツールです。すべてのページで、ユーザーを行動へと導いてください。
• 疑いの目を持ってテストしてください。 QA 中は、積極的に問題を見つけようとしてください。
• 顧客の視点で考えてください。 顧客に必要なものは何でしょうか。何が顧客の信頼と行動につながるでしょうか。
• 構築する前に調査してください。 特にツールについては、推測だけで構築しないでください。
• 自分の判断を信じてください。 ここに示すのはロードマップと基準です。実行については、あなたが専門家です。