LP制作フロー
ANTIGRAVITY 使用前提 ／ 受注〜納品まで
制作モードへ
1
クライアントフォルダを作成する
  • VSCode で site/client-work/ 内に XX_クライアント名/ フォルダを作成
  • 番号は連番（例：05_yamada/）
  • 中に最低限 index.html と style.css を作成（既存テンプレートからコピーが早い）
  • Antigravityには「フォルダ作成しました。テンプレートはType-Eをベースにします」のように伝える
📁 テンプレートカタログ → site/templates/type-X/ から丸ごとコピーするのが最速
2
Antigravityにヒアリング内容を共有する AI

以下の情報をまとめてAntigravityに伝える：

  • 業種・会社名（例：建設業・堀田建設）
  • ターゲット（例：未経験の20代・地元就職希望者）
  • CTA（例：LINEで応募・フォームで問い合わせ）
  • デザイン方向（例：信頼感重視・ダークトーン）
  • 参考サイト・競合があれば共有
  • テンプレート番号と納期
💡「09_coding_rules を読んで作業してください」と一言添えると、ルール違反を防げる
3
Antigravityでセクションごとにコーディング AI
  • 一度に全部頼まず、セクション単位（ヒーロー→基本情報→先輩の声→…）で依頼する
  • 提案書の完全再現： Figmaや提案FVがある場合、Google FontsのURLや letter-spacing などの微細なフォント設定は「品質の要」となるため、絶対に省略せずそのまま移植させる
  • 1LP = 1CSS の原則：新しいCSSファイルを追加しないよう指示する
  • モバイルファースト：スマホで確認しながら進める
  • 画像は images/ フォルダに入れ、ファイル名は英語小文字
⚠️ Antigravityが「新しいCSSファイルを作ります」と言ったら止めて、既存 style.css に追記させる
4
Go Live でローカル確認 確認
  • VSCode 右下の「Go Live」でローカルサーバー起動（ポート変更不要）
  • PC：Chrome で全セクションをスクロール確認
  • スマホ（DevTools）：F12 → デバイスモードで iPhone SE / iPhone 14 確認
  • 実機確認：ローカルIPでスマホからアクセスし、LINE IABも確認
  • PageSpeed Insights は本番デプロイ後に計測
5
?v= バンプ → git commit → git push Git
  • CSS を修正したら必ずバージョン番号を上げる：
    index.html の style.css?v=1.0.0 → style.css?v=1.0.1
  • PowerShell（&& は使わず2行に分ける）：
    git add .
    git commit -m "feat: complete hero section"
    git push origin main
  • Cloudflare Pages が自動でデプロイ（約1〜2分）
❗ ?v= を上げないと、スマホ・LINE IABで古いCSSが使われ続ける
6
本番確認・修正対応・納品 確認
  • 本番URL（web-tsukuru.jp or Cloudflare Pages URL）で全体を再確認
  • クライアントに確認URLを共有（必要に応じてシークレットモードで確認依頼）
  • 修正が出たら → 修正 → ?v= バンプ → push → 再確認 のループ
  • 最終確認後：GA4 計測コード挿入、Search Console 設定
  • 納品完了：URL・ログイン情報をクライアントへ引き渡し