brandvm/webflow-audit

Webflow監査：検証済みの小さなステップで変更するライブサイト

ライブサイトには、訪問者、ランキング、そして他の人の未公開作業が含まれています。 ここでは何も新しく構築しません。すべての変更は測定から始まり、単独で公開され、いつでも取り消すことができます。

共有ルールが適用されます（webflow-build › rules.md：明示的なOKなしにコミット、プッシュ、リリース、またはDNS変更は行わないこと；チャットに認証情報を入れないこと；デザイナーを優先すること；スクリプトはリポジトリに置くこと）。そのチェックスクリプト（pnpm wf:*）が測定を行います。webflow-build.config.json の stagingUrl をステージングドメインに設定し、訪問者が見るものには --live を使用してください。

タグ：[Claude] Claudeが実行する · [Claude checks] Claudeが確認して報告する · [Person] 人間が実行する；Claudeは追跡できても、実行したと主張してはならない。

他のすべてのルールに優先する2つのルール：

• 公開はサイト全体に及ぶ。 公開すると、サイト上で保留中のすべてのもの（他の人の未完了の編集を含む）が送信されます。そのバッチに対して人物が publish という単語を入力するまで、ライブドメインに公開してはいけません。1回の「publish」は1つのバッチをカバーし、次のバッチはカバーしません。
• 書き込む前に読むこと。 監査はWebflowに何も書き込みません。

ドキュメント

リポジトリの docs/handoff/ にあり、作業の進行に合わせて最新の状態に保たれます：

ファイル	保持する内容
AUDIT.md	監査レポート：測定内容、数値、日付
STATUS.md	トラッカー：すべてのリクエストをクライアント自身の言葉で、状態とともに
DECISIONS.md	各決定事項、誰がいつ行ったか、その意味
ROLLBACK.md	ロールバックポイントと、すべてのカスタムコードをそのままの状態で一字一句
MANUAL-TODO.md	デザイナー内でのみ人間が実行できる手順

1. 読み取り専用の監査

このステップではWebflowに何も書き込まれません。次の順序で実行します。最初の2つはスキップすると後で取り戻せないものです。なぜなら、それらは変更前のサイトを説明するからです。

• [Claude] ビジュアルベースライン、ノイズフロア付き。 すべてのキーページで4つの幅で pnpm wf:baseline save --live を実行し、変更を加えずにすぐに compare を実行します。2回の未着手実行間で異なるもの（ビデオフレーム、スライダー、遅延読み込み画像）がノイズフロアです。それをページごとに記録します。ベースライン画像はgitの対象外にします（大きいため）：.webflow-build/ はこの理由で無視されます。
• [Claude] すべてのキーページの見出しアウトライン（pnpm wf:outline --live）、AUDIT.md に保存します。
• [Claude] 速度： pnpm wf:perf --live、モバイルとデスクトップ、各キーページ（ホームのみでなく）に対して5回実行の中央値とその範囲。
• [Claude] アクセシビリティ： pnpm wf:a11y --live --all-widths。
• [Claude] リンクとリダイレクト： pnpm wf:links --live --external；サイト設定からのリダイレクトリスト（CSVにエクスポート）；サイトマップ。Search Consoleが未発見と報告するURLを使用して、pnpm wf:redirects test --live --file <export>：どの古いURLが404、ループ、チェーン、またはホームページに着地するか。
• [Claude] 公開済みHTML： pnpm wf:html --live（デフォルトのフィールド名、ボタンの代わりとなるリンク、スタイルシートで定義されていないクラス）。
• [Claude] SEOとスキーマ： pnpm wf:seo --live --canonical：ページごとに、タイトル、説明、カノニカル、Open Graph画像、インデックス状態、JSON-LD（パースできるか；CMSフィールド内の引用符がそれを壊さないか）；サイト全体で、重複するタイトルと説明、404ページ、robots.txt。見出しアウトラインは webflow-launch › headings.md と照合します。
• [Claude] トラッキング： pnpm wf:tracking --live：どのタグがどこで読み込まれるか、ページビューが2回カウントされていないか、クッキー選択の前と拒否後に何が実行されるか、リダイレクトを通じたgclidとUTM。データリクエストはブロックされるため、監査はクライアントのアカウントに何も送信しません。
• [Claude] ドメイン： pnpm wf:domain：証明書、ドメイン更新日、レジストラとDNSホスト、httpおよびwwwリダイレクト。
• [Claude] インベントリ、コネクタを通じて読み取り：ページとフォルダ；フィールドタイプとアイテム数を含むCMSコレクション；コンポーネント；フォントとその読み込み方法；すべてのカスタムコード（サイトヘッドとフッター、各ページのコード、各埋め込みコード）とすべてのサードパーティスクリプト、それぞれの用途とともに（wf:tracking はページが読み込むサービスをリストします）；インタラクション、およびそれらに依存するページ；フォームとその送信先。
• [Claude] AUDIT.md にレポート：数値を伴う短いポイントとしての調査結果、それぞれ 測定済み または コードから読み取り とマークされ、何が得られるか、何が壊れる可能性があるかで並べ替えます。測定されなかった主張はその旨を明記します。ゲート： 人間がレポートを確認します。

2. 初日のトラッカー

• [Claude] ブリーフおよびクライアント自身のチェックリストを、その独自の言葉で STATUS.md に記述します。リクエストごとに1行：リクエスト、状態（未着手、進行中、ステージング中、公開済み、中止とその理由）、バッチ、日付。以前のサイトでは、トラッカーが遅れて作成され、クライアントのリストとは異なる言葉で書かれたためにリクエストが失われました。
• [Person] 不足がないことを確認します。ゲート。
• [Claude] 以降のすべてのレポートはトラッカーをチェックし、件数を報告します：「14件中9件が公開済み、2件がステージング中、3件が決定待ち」。

3. 決定事項を1つずつ

• [Claude] 決定事項を1つずつ尋ね、それぞれに平易な言葉でその意味を添えます：訪問者にとって何が変わるか、コストはいくらか、何が問題になる可能性があるか、推奨事項。
• [Claude] 決定が行われたら、それぞれを DECISIONS.md に記録します。
• 新しい顧客向けコンテンツ（コピー、画像、レイアウトの変更）のみが承認のためにクライアントに送られます。内部構造（スクリプトの読み込み方法、CSSの配置場所など）はチームの判断に委ねられます。

4. 最初の書き込みの前のロールバックポイント

• [Claude] 公開されているものと一致するコミットにgitタグを付けます。
• [Claude] ROLLBACK.md には、現在のすべてのカスタムコードを一字一句保持します：サイトヘッドとフッターコード、各ページのコード、各埋め込みコード。
• [Person] Webflowバックアップ（サイト設定 › バックアップ）を日付付きで作成し、リポジトリのデフォルトブランチにブランチ保護を設定します。
• [Claude checks] ロールバック手順が書き出され、それぞれが実行可能であることを確認します：コードブロックを復元し、ローダーを古いリリースに戻し、バックアップを復元します。ゲート： 人間によって確認されます。

5. 同等性リリース（内部構造が変更される場合）

サイトをテンプレートに移行すると、コードの配信方法が変わります。その変更は最初に、単独で、訪問者が見えるものは何もなく公開されます。

• [Claude] 既存の動作をそのまま移植します。このステップでは書き換えや改善は行いません。それらは後続のバッチ（それぞれ測定されます）で行います。
• [Claude checks] すべてのキーページで4つの幅における同等性：計算されたスタイルとジオメトリをベースラインと比較します（pnpm wf:baseline compare、差異はノイズフロア内のみ）。
• [Claude checks] 読み込み時間の同等性も確認します（pnpm wf:film）：落ち着いたページは一致しても、最初の1秒が変動する可能性があります。最終状態だけでなく、読み込みプロセスも比較します。
• その後、他のバッチと同様に以下のバッチ手順に進みます。

6. バッチ：リスクの低いものから順に

最も安全で確実な改善が最初に行われ、各バッチが単独で評価できるように作業を順序付けます。1バッチ = 人間が一文で説明できる1つの変更。それぞれに対して：

1. 準備をリポジトリで行います（pnpm check && pnpm build && pnpm test）；Webflowで何が変わるか、訪問者が何に気づくかを説明します。
2. 承認後にWebflowで適用します。次に「デザイナーをリロードしてください」と、何が公開されていないかを伝えます。
3. ステージングのみに公開します。
4. ステージングで検証します： バッチ独自のチェックに加え、baseline compare、html、および影響を受けるページのコンソールを4つの幅で確認します。
5. 他に公開されるものがあるか尋ねます。 [Person] サイトに他の保留中の変更（自分または同僚の）がないか確認します。Claudeは誰が何を変更したかを見ることはできません。その旨を伝えて待ちます。
6. 人物が「publish」と入力します。 その後、ライブドメインに公開します。
7. 本番環境を検証します --live を使用：同じチェックと、バッチの数値（速度、エラー、リンク）を再測定します。
8. トラッカーとクライアントのチェックリストを更新します； 結果を AUDIT.md の該当する調査結果の隣に記録します。

• CMSアイテムの編集（タイプミス、新しいアイテム）は直接公開しても構いません：アイテムの公開はサイト全体の公開にはなりません。ページとサイトの変更は常に8つのステップを経由します。
• Webflowではサイトの公開頻度に制限があります：1つのバッチで1回のステージング公開と1回のライブ公開で済むようにチェックをグループ化します。

7. 測定された改善のみを維持する

• [Claude checks] 改善前と改善後は、両方とも同じ回数実行の中央値です。範囲内の差異はノイズです。
• [Claude] 数値を動かさなかった変更、または別の数値を悪い方向に動かした変更は元に戻され、トラッカーにその旨が記録されます。本来あるべき効果に基づいて変更を維持することはありません。

8. 終了

• [Claude] 改善前/改善後レポート：トラッカーからの各リクエストとその数値結果；中止されたものとその理由；残っているもの。
• [Claude] ROLLBACK.md を新しい状態に更新します；古いタグは保持します。
• [Claude] テンプレートに教訓を提供します（webflow-build › rules.md › Contributing）。

小規模な作業（ライブサイトの1回の修正）

壊れたリンク、停止するカルーセル、送信されないフォーム。同じ注意を払い、5つのステップで行います：

1. ライブサイトで再現し、それが発生する正確な条件（ページ、幅、ブラウザ、手順）を述べます。
2. 修正可能な最小の場所で修正します。まず GOTCHAS.md と教訓を読みます：通常は以前に発生しています。
3. リポジトリにその領域のテストがある場合は回帰テストを行い、気付かれずに戻ってこないようにします。
4. デスクトップとスマートフォン幅でステージング；pnpm wf:html と該当ページのコンソールを確認します。
5. 停止。 何が間違っていたか、何が変更され、どのようにチェックされたかを報告し、プッシュ、タグ、公開の前に承認を待ちます。以前のリリースタグを保持し、ローダーをそこに戻せるようにします。ライブ公開には、人物が他の保留中のものを確認した後、依然として「publish」という単語が必要です。