サイトアップグレード (Site Upgrade)

組み立てられただけのように見えるサイトを、オーナーが誇りに思えるサイトに変えるための手法です。実際に出荷され、オーナーやそのチームから高評価を得た実際のアップグレード案件（モバイルアプリのマーケティングサイト、2つの全く異なる方向性で進められたB2Bクラウド企業のサイト、ゼロから構築されたヘルプセンター）から抽出されました。方法、レシピ、および落とし穴を再利用してください。見た目を再利用してはいけません。すべてのサイトは、自身のブランド、製品、およびオーディエンスから方向性を導き出します。

「完了」の定義

以下のすべてが満たされた場合にのみ、アップグレードは完了とみなされ、それ以前ではありません。

サイト上のすべての主張が、名前を挙げられる情報源（製品コード、法的テキスト、課金システム、またはオーナーからの書面による回答）に遡れること。
デザインがブランド自身の素材から来ており、そのアイデアが競合他社テストに合格すること (direction.md)。
訪問者が見たり実行したりする1つまたは2つのシグネチャーモーメントがあること。それ以外はすべて規律正しくあること。
モーションがなくても見えるものが必要ないこと。モーション削減設定では、最終状態が表示されること。
実際のブラウザで、1440px、1920×710px、390px、320pxの各幅、すべてのテーマ、モーション削減設定で、プロダクションビルドに対してチェックされていること。
あなたの書面による批評が、9/10以上のスコアを付けているか、またはレポートがどこが不足しているかを明確に述べていること (critique.md)。
チームがレビューできるPRとして納品され、チームがコピー＆ペーストできる短いアップデートが添付されていること。

基本ルール

デザインよりも真実を優先する。 すべての機能、数値、価格、提供開始日、および社会的証明は、情報源に遡らなければなりません。製品自体のオンボーディングやペイウォールのコピーは、多くの場合、過剰に約束します。コードで確認してください。「不明」は有効な回答です。そのスロットをオプションにして質問し、もっともらしい数字で埋めてはいけません。捏造された証拠は削除してください。
ブランドが見た目を決定する。 パレット、タイポグラフィ、およびシグネチャーデバイスは、ブランド自身の素材（ロゴ、名前、製品UI、動画、場所）から導き出します。生成物であると見なされるデバイス (tells.md) は、ブランドの素材またはオーナーがそれをそこに置き、方向性契約がそれを明記している場合にのみ許可されます。
製品が主役である。 実際のUIと実際のアーティファクトは、アイコン、ストック3D、抽象表現よりも優れています。デモは実際のもののように見えます。実際のA4インベントリ、実際のレンダリングされたテンプレート、実際のカタログです。
ウェブサイトであって、スライドデッキではない。 それぞれがフェードインする、中央揃えの見出しと画像ブロックの積み重ねは避けてください。コンポジション、固定スクロールストーリー、レイヤードデプス、インタラクティブデモ、ステート駆動型モーションを使用してください。
モーションの背後にコンテンツを隠さない。 決して発火しないリビールは、空白のページを残します。prefers-reduced-motion を尊重し、最終状態を表示してください。
オーナーはループ内に、邪魔にならないように。 フルビルドの前に方向性を示してください。最初にホームページを行い、承認されたら他のページに広げてください。未解決の質問はそれぞれ1回、選択肢とともに尋ね、その周りで構築を続けてください。
設定は値を保持する。 環境変数はURL、ID、またはトークンを運びます。オン/オフスイッチやハードコードされた定数は運びません。依存する値はそれらから導き出します。.env.example のみをコミットしてください。
ターゲットリポジトリに従う。 そのREADME、CONTRIBUTING、AGENTS.md、commitlint設定を読んでください。そのパッケージマネージャーを使用してください。そのフレームワークのバージョン（Next 14 vs 16、Tailwind 3 vs 4、React 18 vs 19）に合わせてください。
秘密情報と内部情報は外部に出さない。 オーナーが貼り付けたトークンを印刷、コミット、またはエコーしてはいけません。公開コミットとPRには、クライアント名、非公開価格、または未修正のセキュリティギャップを含めないでください。
9/10未満で完了と呼んではいけない。 報告する前に、スクリーンショットから作業をスコアリングしてください。「完了」後に提供された6または7の自己評価は、作業がスキップされた証拠です。

最初に、モードを選択する

訪問者が何をするために来たのかが、デザインがどこまで進んでよいかを決定します。1つのプロジェクトが異なるモードで複数のサーフェスを保持できます。それぞれに独自のモードを与えてください。

モード	サーフェス	訪問者	何がリードするか	読むべきもの
説得 (Persuade)	プロダクト、マーケティング、企業、キャンペーン、価格	決定し、行動する	製品がそれ自体を証明すること。最初の画面での実際のアクション	building-blocks.md
読む (Read)	ヘルプセンター、ドキュメント、チェンジログ、ブログ	何かを理解する	読者の質問。ブランドはフレームを所有し、読書コラムは所有しない	read-mode.md
体験 (Experience)	ポートフォリオ、ショーケース、ギャラリー	作品を探求する	作品自体。最初のビューポートから	building-blocks.md § 体験

プロダクトのマーケティングサイトは、アプリを表示していても「説得」モードです。そのヘルプセンターは、美しくても「読む」モードです。

ワークフロー

フェーズを順番に進めてください。各フェーズに到達したときに、対応するリファレンスを読んでください。それより前に読んではいけません。

フェーズ	作業	読むべきもの
0. キックオフ	デフォルトブランチからブランチを作成し、開発サーバーを起動し（実際のポートをメモ）、レポート用の「ビフォア」セットをキャプチャする	verification.md § 1
1. ディスカバリー	サイトを監査し、真実の情報源を見つけ、クレーム台帳とサブジェクトインベントリを作成し、ブランド素材を収集し、所見を報告する	discovery.md
2. 方向性	アイデアを見つけ、競合他社テストに合格させ、パレットとタイポグラフィを設定し、シグネチャーモーメントを選び、方向性契約を書き、それを示す	direction.md、tells.md
3. 静的に構築する	トークン、ヒーロー、実際のコンテンツを使った各幕、内部ページ。頭の中ではモーションをオフにする	building-blocks.md、media.md、read-mode.md
4. モーションとシグネチャー	1つの振り付けされたイントロ、ステート駆動型モーメント、シグネチャー。3Dは、その場所に値する場合のみ	motion.md、three-d.md
5. 問い合わせとコンバージョン	共有バリデーション、フォーム、エッジルート、デザインされた通知メール、予約またはリードの事前入力	contact-email.md
6. SEOと標準	サーバーレンダリング、メタデータ、ソーシャルカード、構造化データ、クローラーファイル、ヘッダー。それ自体の積み重ねられたPR	seo-standards.md
7. 検証と批評	すべての幅とテーマでのブラウザループ、スクリプト化されたチェック、プロダクションビルド、次にスコア付き批評（最大3ラウンド）	verification.md、critique.md
8. 出荷	コミット、PR、チームアップデート、ビフォア/アフターレポート、DESIGN.md、メモリーノート	delivery.md

何かが奇妙に動作するときは gotchas.md をチェックしてください。オーナーが反応したときは feedback.md を読んでください。オーナーの言葉（「スパイスが足りない」、「色のバランスが悪い」、「安っぽいレプリカ」）を、何を変更すべきかに変換します。

デザイン方向性スキル（frontend-design、impeccable、taste-skill）がインストールされている場合は、フェーズ2でそれをロードして追加の範囲を取得してください。このスキルはそれなしでも自立しています。

スタック。 レシピはNext.js、React、Tailwind、GSAPで出荷され、Cloudflare Pagesでホストされ、スニペットはそのスタックを示しています。方法、チェック、およびほとんどのスクリプトはそれに依存していません。Astro、SvelteKit、Nuxt、またはプレーンなHTMLでは、ルールを維持し、レシピをターゲットの独自のフレームワークとバージョンに変換してください。

スクリプト

ターゲットリポジトリのルートから実行します。<skill> はこのスキルのフォルダです。

node <skill>/scripts/slop-scan.mjs [dir] [--json] [--strict] [--allow <rules>] [--list-rules]: 生成サイトの兆候、捏造された証拠、ジャンルコピー、デッドリンク、秘密情報、および既知の落とし穴についてソースをスキャンします。エラーがあると終了コード1で終了します（--strict の場合は警告でも終了します）。site-upgrade-allow: <rule> <reason> コメント（その下の行を次の空白行までカバーします）またはリポジトリルートの .site-upgrade-allow ファイルで、許可された例外を指定します。Node 18+、依存関係はありません。
<skill>/scripts/ssr-audit.sh <base-url> [path]...: ページごと（パスが指定されていない場合はすべてのサイトマップページ）に、ステータス、<h1> 数、JSON-LDブロック、カノニカル、ソーシャルイメージ、クライアントレンダリングベイルアウト、タイトルを確認。次にセキュリティヘッダーとクローラーファイルを確認します。ページが失敗すると終了コード1で終了します。プロダクションサーバーに対して実行してください。
<skill>/scripts/video-prep.sh <source> <out-dir> [name] [poster-second]: シーンカットをチャプター候補として出力し、各カットにキーフレームを持つサイレントWebエンコード、ポスター、および正方形のプレビュークリップを書き込みます。imageio_ffmpeg バイナリにフォールバックします。
<skill>/scripts/playwright/*.js: Playwright MCPの browser_run_code_unsafe ツール用です。MCPはワークスペース内のファイルのみを読み取るため、最初にコピーしてください（mkdir -p .playwright-mcp && cp <skill>/scripts/playwright/*.js .playwright-mcp/）。filename: ".playwright-mcp/<name>.js" を渡してください。.playwright-mcp/ をgitの管理下に置かないでください。
- reveal-scroll.js: スクリーンショットの前にすべてのリビールが発火するようにスクロールし、その後も非表示のテキストをリストします。
- page-audit.js: フレームを測定します。1つの <h1>、2行を超える見出し、小さなテキスト、小さなタップターゲット、名前のないコントロール、alt のない画像、タイトルのないセクション、テーマ設定されていないブラウザサーフェス。
- overflow.js: 320pxから1440pxの範囲で水平スクロールの原因を見つけ、最も外側の原因を特定します。
- console-scan.js: すべてのサイトマップURLを訪問し、コンソールエラー、ページエラー、失敗したリクエスト、4xx/5xx、CSP違反を報告します。

アセットとテンプレート

ターゲットリポジトリまたはスクラッチパッドにコピーして適応させてください。

assets/render-email.ts: エッジルート用に、react-dom/server を使わずにReact EmailテンプレートをHTMLにレンダリングします。
assets/JsonLd.tsx: 埋め込んでも安全なJSON-LDスクリプトタグ。
assets/ScrollTriggerRefresh.tsx: ページの高さが変わるたびにGSAPのスクロールトリガーを再測定します。
assets/templates/claims-ledger.md: 出荷済み、未出荷、不明、数値のそれぞれに情報源を付けて管理（フェーズ1）。
assets/templates/direction-contract.md: テーゼ、アイデア、独自の世界、最初のビューポート、シグネチャー、ブランド例外（フェーズ2）。
assets/templates/critique-round.md: スコア付き批評、ラウンドごとに1ブロック（フェーズ7）。
assets/templates/DESIGN.md: 構築されたデザインシステム。後続のエージェントがブランドを維持できるように、最後に記述（フェーズ8）。
assets/templates/team-update.md: チームチャット用のコピー＆ペーストアップデート（フェーズ8）。

オーナーチェックポイント

これらに依存するものを公開する前に確認してください。選択肢とともに一度尋ね、ビルドを停滞させないでください。

ローンチステータスとストアの利用可能性。環境フラグではなく、実際のストアリストから確認。
価格とプラン、およびその情報源。
誰もまだソースを特定できない数字（稼働時間、データセンター、顧客数）。誰かが承認するまで除外してください。
問い合わせ受信箱、およびオーナーがテスト用に読める受信箱。
リスト、カタログ、カルーセル内のまだリリースされていないアイテム。
法的な事業者名、住所、電話番号。表示されるすべての場所で同一であること。
訪問者データを受信する第三者（分析、埋め込み、フォント、メール）、およびそれに必要なプライバシーポリシーの行。
マスコット、3Dモデル、ビデオのソースファイル。再構築する前に入手してください。
すべてのプロダクション手順：ドメイン、DNS、デプロイ設定、移行。オーナーが実行または承認します。

サイトアップグレード (site-upgrade)