デモWebサイト

デモWebサイト は何をしますか？

1回の実行で、見込み客を「はい、見てみたいです」という段階から、ライブの再デザインとDraftsフォルダに待機する返信まで導きます。ユーザーはURLまたは名前を入力するだけで、それ以外はすべて自動で見つけ出され、質問されることはありません。クリエイティブの方向性は実行全体にわたって委任されます。インタビューの回答や承認を待つために停止することはありません。

参考ビルド: 一度満足のいくデモを出荷したら、それを参考として保存してください。その BRIEF.md を読み、その構造（site.css、site.js、pages.css、home.css、home.js、lab/）を開始時のスケルトンとしてコピーします。そのデザインをコピーしてはいけません。フィンガープリントゲートがそれを禁止しています。

すべてのデモにおける固定ルール

• 保持するもの: ロゴ、すべての写真、すべてのコピーの文言、すべてのページと各ページ内のセクションの順序。誤字はそのまま残します。ナビゲーションラベルはそのまま。CTAラベルもそのまま。
• 変更するもの: 視覚的なものすべて。レイアウト、書体、色使い、動き、インタラクション。
• すべてのページが再デザインされる ホームページだけでなく。元のページごとに1つのHTMLファイル、同じスラッグ（cleanUrls により /services が機能し続ける）。
• 許可される追加: 最小限のUIマイクロコピーのみ（フォームのステータス行、入力プレースホルダー、ariaラベル）。新しいマーケティングテキストや架空の数字は禁止。
• ハウスルールはどのような参考よりも優先されます（このリストを自分の好みに合わせて編集してください）：ライトパレットにクライアント自身のアクセントカラー、ブランド＋オーナー写真＋すべてのサービスがヒーローに表示される、スティッキーヘッダーが常に表示される、ロゴクリックでトップに戻る（ホームページではスムーズスクロール）、サイドレールなし、emダッシュはどこにも表示しない、クライアント自身の写真のみ使用（ユーザーが依頼しない限り生成しない）。
• Vercelプロダクションにデプロイし、確認なしでコミットします。メールは下書きのみです。

ステップ0 · 見込み客の特定

1. ユーザーがURLではなく名前を入力し、CRMを保持している場合：CRMで見込み客を検索し、Webサイト、都市、言語、アウトリーチを送信したメールボックス、返信状態を確認します。見込み客がCRMにない場合は、URLから作業を進め、何も質問しません。下書きのステップで必要なメールボックスが示されます。
2. スラッグ：ドメインの語幹、例：acmecoaching。ビルドフォルダ：demos/<slug>-scrollcraft/。Vercelプロジェクト：<slug>-redesign。デモURL：https://<slug>-redesign.vercel.app（ハイフン、ドットは不可。ドット付きサブドメインは存在せず、デッドリンクはこのパイプラインで最もコストのかかるミスです）。
3. メール用のファーストネーム：見込み客のメール署名、サイトのアバウト/コンタクトページ、またはドメイン（"janecoaching" → Jane）から取得。本当に不明な場合は省略します（"Bonjour," / "Hi,"）。

ステップ1 · 既存サイト全体のキャプチャ

すべてを <build>/_src/（生アセット）と <build>/lab/（メモ、スクリーンショット）に保存します。

1. ホームページをフェッチし、ナビゲーション＋フッターのリンクを読んですべてのページをリストアップします。各ページをフェッチします。
2. ページごとに、順番に抽出：セクション、見出し、段落（太字/斜体スパンを含む）、リスト、ボタンとそのターゲット、画像（フル解像度のURL。Squarespaceの場合は ?format=2500w を追加、Wixの場合は /v1/fill/... 変換を削除）、フォーム（フィールドラベル、必須フラグ、送信ラベル、成功メッセージ）、埋め込みビデオ。Squarespaceはフォーム定義を data-block-json / formFields に保持しています。
3. ロゴ（すべてのバリアント：ダーク、ライト、ファビコン）、すべての写真、すべてのテクスチャをダウンロードします。単純な幾何学ロゴは、そのアルファチャンネル上で cv2.findContours + approxPolyDP を使用してSVGにベクター化します。複雑なマークの場合はPNGを保持します。
4. ブランドトークン：サイトのCSS変数からのアクセント/インク/背景色、見出しと本文のフォントフェイス。Typekitやカスタムフォントの場合は、最も近いGoogle Fontを選択します。
5. すべてのライブページのフルページスクリーンショット（scripts/full.mjs <live-url> 1440 900 lab/live <pages>）を撮り、それらを読み取ります。それがあなたが保持しなければならない構造です。

ステップ2 · scroll-craftでデザインする

デザインリサーチスキルをお持ちの場合はそれをロードし、次に scroll-craft（https://github.com/nateherkai/scroll-craft）をロードし、以下のオーバーライドでscroll-craftをエンドツーエンドに従います：

• ブリーフは明示的なクリエイティブ委任の下で自己作成されます（ユーザーの常設指示はこのスキルです）。BRIEF.md を以下の内容で作成：上記の固定ルール、ステップ1の証拠、作成された8つのトピック、実際の制約を持つ名前付きグラマー、フィーリングカーブ、1つのピーク、誰かに伝えるための文章、シグネチャームーブ、スコアテーブル、各内部ページの簡単な計画。
• あなたのscroll-craftワークスペース FINGERPRINTS.md に対してフィンガープリントゲートを実行します（すべての行に対して6項目中4項目）。各最近の行の「次のビルドが避けるべきこと」の行を読みます。シグネチャームーブはこのブランド（そのロゴ形状、そのタグライン、その写真）から来るものでなければならず、前回のビルドからのものではありません。
• 構造はクライアントによって固定されているため、グラマーとデバイスは同じセクションの動作を変更するものであり、どのセクションが存在するかを変更するものではありません。
• バニラエンジン（scrollcraft.js/.css をそのままコピー）、プレーンなマルチページHTML、ページローカルのJSで特注のシーンを実装。

ステップ3 · ビルド

• 共有：site.css（トークン、ヘッダー、メニュー、フッター、ボタン、フレーム、エントランス）、site.js（エンジンをマウント、ヘッダー状態、メニュー、ロゴからトップへ、エントランス、フォーム）、内部ページ用の pages.css、ホームページの特注シーン用の home.css/home.js。
• ワンショットスクリプトで内部ページをスキャフォールディングしても問題ありません。その後はHTMLファイルがソースです。BRIEF.md にその旨を記載します。
• お問い合わせフォーム：mailto: でクライアントのアドレスにハンドオフ、method="post"、バリデーション、およびメールアプリが開き、送信ボタンを押すまで何も送信されないことを平易に伝えるステータス行。成功を偽装してはいけません。
• ショップと予約ツール：クライアントの既存の製品/予約ページにリンクします。

すでにラウンドを費やした落とし穴

• [data-sc-stage] 要素に決して position を設定しないでください。 エンジンがそれを sticky にします。CSSでの position: relative はすべてのピンを黙って殺します。
• ピークはページ上で最大の data-sc-span を維持しなければなりません。ヒーローが大きくなる場合は、それに合わせてピークも大きくします。
• 1枚の写真からのレイヤードヒーロー：各シルエットをDPエッジパスでトレースし（まず粗いグラデーション、次に細かいもので洗練）、各プレートを次のシルエットの下に再構築します（空：フィットした垂直グラデーション、遠くの霞：フラットな列ごとの色、テクスチャのある斜面：鏡面タイル ~110px）、トレースした線の上の暗い斑点をクリアにし、次に最終的なスクロール位置を見ます：継ぎ目は移動の終わりにのみ表示されます。
• 人物の切り抜き：u2net_human_seg でrembg、マットを約2px収縮させ、エッジカラーをデコンタミネーションします。そうしないと元の壁がハローとして表示されます。前景の平面またはベースバンドが切り抜きを隠す場所でクロップします。
• グリッド内の white-space: nowrap は電話レイアウトを壊します。520px以下でボタンを折り返し、minmax(0, 1fr) を使用します。
• 斜めの装飾ブロックは電話のビューポートからはみ出します：そのセクションに overflow-x: clip を設定します。
• 置き換えられた画像は電話で1週間古いバイトを保持します（/assets キャッシュヘッダー）：新しいアートワークには新しいファイル名（-v2）を付けます。
• .prose p { margin: 0 } は .prose > * + * よりも優先されます。間隔ルールは .prose > * { margin: 0 } .prose > * + * { margin-top } と記述します。

ステップ4 · 検証

ローカルでサーブし（node <scroll-craft>/scripts/serve.mjs --root . --port 4610）、このスキルの scripts/snap.mjs / scripts/full.mjs を使用します。どちらも、実行するフォルダまたはその親フォルダから playwright-core を解決するため、プロジェクトルートで npm i playwright-core を1回実行すれば、その下のすべてのビルドをカバーできます。

• デスクトップ1440x900、各ピン留めされたアクト内のいくつかの位置、電話390x844および360x640、動きを減らした状態。各シートを読み、修正して再撮影します。
• すべての内部ページのフルページキャプチャを1440と390で：オーバーフローなし、テキストのクリップなし、空のグリッドセルなし。
• scroll-craftハーネス：デッドスクロールなし、コンソールエラーなし、失敗したリクエストなし。
• 画像上のテキストのコントラストを合成ピクセルで測定（テキストを非表示にし、その下のピクセルを読み取る）：本文4.5:1、大規模3:1。
• 機能：シグネチャインタラクションのエンドツーエンド、フォームバリデーションメッセージ、メニュー開く/Escape/フォーカス、ロゴからトップへ、ヒーローサービスからのアンカー。
• ビルド内のemダッシュとenダッシュ（U+2014、U+2013）をgrep：ゼロ表示。

ステップ5 · 出荷

1. vercel.json：cleanUrls、buildCommand: null、outputDirectory: "."、/assets に7日間のキャッシュ。.vercelignore：lab/ _src/ node_modules/ BRIEF.md。
2. vercel link --yes --project <slug>-redesign を実行し、次に vercel deploy --prod --yes を実行します。
3. 送信する正確なURLをスモークテスト：すべてのページが200、主要アセットが200、lab/ と BRIEF.md が404、ライブブラウザロードでコンソールエラーなし。
4. ビルド内にGitリポジトリを作成（git init -b main）、-F <file> でコミット（PowerShellのヒアストリングは使用しない）、gh repo create <github-user>/<slug>-redesign --private --source . --push、vercel git connect --yes。後で編集する場合：main にコミットしてプッシュすると、再デプロイされます。デモリポジトリはプライベートのままにします：見込み客のロゴ、写真、コピーが含まれています。
5. フィンガープリント行を作業スペースの FINGERPRINTS.md に追加します（6次元すべて、世界、ポート、パレット、タイプ、共有するもの、次のビルドが避けるべきこと）。

ステップ6 · 返信の下書きを作成

python scripts/draft_demo_reply.py <prospect-email> --mailbox <alias> --url https://<slug>-redesign.vercel.app --first-name <FirstName>

これにより、URLが応答することを確認し、アウトリーチメールボックス内の見込み客の最新メールを見つけ、連絡先の言語で「デモはこちら」テンプレートをレンダリングし（--lang fr|en）、そのメールボックスの署名を使用して、スレッド化された下書きをそのメールボックスのDraftsフォルダに保存し、それを読み返します。送信は決して行われません。スレッドについて何か異常がある場合は、最初に --dry-run で実行します。メールボックスは .env で設定されます（.env.example を参照）。

見込み客があなたが送信したアドレスとは別のアドレス（info@ ではなく個人のメールボックス）から返信した場合、--to <their-address> を渡します。返信はその送信者から検索され、下書きはそのアドレスに送られます。一部のIMAPサーバーは、完全なアドレスでの FROM 検索のみに一致します。ドメインフラグメントでは何も返されません。

CRMが接続されている場合（DEMO_CRM_DIR、READMEを参照）、<prospect-email> はCRMが解決する任意のものにでき、メールボックスと言語は連絡先から取得され、スクリプトは見込み客の返信とデモURLを記録します。

下書きテキストを最終メッセージに表示します。送信されたらユーザーに知らせるように伝え、デモが送信済みとしてマークできるようにします。

最終レポート（短く）

ライブURL（正確なもの）· 再構築されたページ数 · デザインのアイデア（2行で） · シグネチャムーブ（1行で） · いくつかのマイクロコピーの追加 · 検証されたものとされなかったもの（実際の電話、Safari） · 下書き（メールボックス、スレッド、全文） · ビルドフォルダのローカルパス。