Claude Code と Cloudflare Pages で LP を作成する

「ページが必要」から、LP を公開してリードを受け取るまでをカバーする手順書。ホスティングは Cloudflare Pages。無料、高速、HTTPS 自動、サーバーレスフォーム受信の Pages Functions 完備。

このスキルは非開発者向けです。あなた（Claude）がターミナルで作業を進め、各ステップを平易な言葉で説明します。人の操作（ログイン、設定画面、DNS）が必要な手順では、コマンドを一度にひとつずつ、コピペできる形で提示してください。

広告トラッキング（ピクセル、Conversions API、GA4、Google Ads タグ）はこのスキルの範囲外です。必要に応じて、LP 公開後に別途設定してください。

ユーザーとの進め方

書く前に計画を立てる。 LP のセクション構成と各セクションのテキスト、そのテキストの出典を提示します。「よし」がもらえてから初めて作成を開始します。
テキストはソースのみ。 価格、日付、時間数、講師名、保証、特典などはすべてユーザーから提供された資料（ブリーフィング、サイト、PDF、会話）から取得します。数字や約束をでっち上げることは絶対にしません。不足があれば質問します。
選択肢がある場合は推奨する。 （パス、レイアウト、ドメインなど）選択肢がある場合は、あなたならどれを選ぶか、その理由も含めて推奨します。
許可なく本番公開しない。 プレビューは可能です。公式アドレスへの公開や DNS 変更は、ユーザーの「公開していいですよ」の確認後にのみ行います。
Windows: PowerShell では、npx の代わりに npx.cmd を使い、コマンドは必ず cd でプロジェクトの絶対パスに移動してから実行してください。

0. パスを決める

LP に何が必要か、質問（または依頼から推測）して判断します。各パスは前のパスに追加で実装します。

パス	提供内容	参照先
1. シンプル LP	`<プロジェクト>.pages.dev` で公開、チェックアウト・WhatsApp・他サイトへのボタン	このファイル
2. 独自ドメイン	`lp.suamarca.com.br/<slug>/` で公開	`references/dominio.md`
3. フォーム付きリード獲得	リードを保存（D1）し、CRM に Webhook 送信、お礼ページも作成	`references/formulario.md`

併せて以下も収集します：

テキストの出典： ブリーフィング、サイト、PDF、シラバス、既存の LP など。
ブランド要素： カラー、フォント、ロゴ（ファイル）、写真（ファイル、使用権限確認済み）。
ボタンの遷移先： チェックアウト、WhatsApp（https://wa.me/55DDDNUMERO?text=...）、またはフォーム。
スラッグ： 短く、小文字、ハイフン区切り（例：curso-x、masterclass-y）。URL のパスになります。

1. マシンの準備（最初の一度だけ）

references/cloudflare-setup.md の手順に従ってください。Node のインストール、Cloudflare アカウント作成、wrangler login（ブラウザで実行）、Pages プロジェクトの作成。続行前に npx wrangler whoami で確認します。

2. プロジェクトを構築する

プロジェクトフォルダには、すべてのブランドの LP を保存し、各 LP はサブフォルダに格納します。一度のデプロイで全てが公開されます。

minhas-lps/
  _redirects        （ブロックと廃止 LP 用）
  _headers          （セキュリティヘッダー）
  wrangler.toml     （プロジェクト名とデータベース設定）
  schema.sql        （リードテーブル、パス 3 用）
  CLAUDE.md         （プロジェクトメモ：決定事項、公開状況）
  functions/
    lead.js         （フォーム受付、パス 3 用）
  obrigado/
    index.html      （フォーム送信後のお礼ページ、パス 3 用）
  <slug>/
    index.html      （LP）
    img/            （最適化された写真とロゴ）

まず、このスキル内の modelo/projeto/ フォルダをユーザーがプロジェクトを置きたい場所にコピーし、minha-lp/ をスラッグにリネームします。モデルには既にフォーム、プレビューロック、ブロック設定が含まれています。プロジェクトが既に存在する場合は、modelo/projeto/minha-lp/ をコピーして新しいサブフォルダを作成するだけです。フォーム不要の LP（パス 1）の場合は、フォームブロックを遷移先リンクボタンに置き換え、functions/、obrigado/、schema.sql を削除します。

黄金律：デプロイはフォルダ全体を公開します。 その中のファイルはすべてインターネットからアクセス可能になります（.claude/、CLAUDE.md、スプレッドシート、メモなど）。そのため：

パスワード、トークン、Webhook URL などをフォルダ内のファイルに保存しない（シークレットは wrangler pages secret put を使用。詳細は references/formulario.md）。
モデルの _redirects は既に CLAUDE.md、.claude/*、wrangler.toml、schema.sql、package*.json をブロックしています。ルートに新しいファイルを追加する場合：公開してよいファイルか、デプロイ前にブロック行を追加する必要があります。

3. LP を書く

セクション計画を、各セクションのテキストとともに提示します。コンバージョンしやすい順序：
1. トップ：明確な約束、対象者、日時と形式、ボタン。
2. 証明：教える人や利用者の実績（実際の写真、資格、検証可能な数字）。
3. 得られるもの：3〜6 の具体的なメリット。
4. 対象者（対象でない人も）。
5. 内容またはプログラム：概要を表示、詳細はクリックで開く <details> タグ内。
6. 特典：価格、条件、内容、保証（存在する場合のみ）。
7. よくある質問（<details> タグ内）。
8. 最後のボタンとフッター（ブランド、連絡先、個人情報を収集する場合はプライバシーポリシー）。
モバイルファースト。 トラフィックの大部分はモバイルからです。CSS は 375px 幅を基準に書き、大きな画面に拡張します。テキストはスキャンしやすく：短い文、ブロックごとに見出し、テキストの壁を作らない。
ボタンは常に目に見える場所に：トップに配置し、意思決定ブロックの後に繰り返し配置します。
画像は軽量に： JPG または WebP、1 枚あたり最大 200KB、<img> に width と height を指定、トップ以外は loading="lazy"。トップ画像には fetchpriority="high" を指定。
メタデータ： <title>、description、og:image（1200×630）、ファビコン。これらはリンクを WhatsApp で共有したときに表示されます。
重い依存関係は使わない。 LP には生の HTML、CSS、JS で十分です。Google フォントを使う場合も display=swap を最大限に活用します。

モデルの色とフォントは <style> の先頭（:root）の変数で定義されています。そこを変更すればブランドのアイデンティティが一括で適用されます。

4. ローカルプレビュー

npx wrangler pages dev .

http://localhost:8788/<slug>/ で開き、Functions も動作します。ブラウザで 375px と 1280px で確認：テキスト、画像、ボタン、フォーム、コンソールにエラーがないこと。埋め込みブラウザがあるアプリを使っている場合はそれを使い、スクリーンショットをユーザーに送ります。

5. オンラインプレビュー（承認用）

npx wrangler pages dev . --project-name=<プロジェクト名> --branch=previa --commit-dirty=true

previa.<プロジェクト>.pages.dev という本番とは別のアドレスで公開されます。ユーザーにリンクを送り、スマートフォンで承認してもらいます。モデルはこのアドレスではフォームをロックする（CRM に偽のリードを送らない）設定になっています。

6. 公開

「公開していいですよ」の確認後にのみ実行：

npx wrangler pages deploy . --project-name=<プロジェクト名> --branch=main --commit-dirty=true

公開後に確認：

LP が公式アドレスで 200 を返すこと（curl -sI https://<アドレス>/<slug>/）。
ブロックしたファイルが 301 を返すこと（/CLAUDE.md、/wrangler.toml）。
フォームがある場合、テストリードが送信先に届くこと（パス 3）。

完全なチェックリストは references/checklist.md にあります。

7. 記録

プロジェクトの CLAUDE.md を更新します：新しい LP（スラッグ、プロダクト、日付）、ボタンの遷移先、登録したシークレット（名前のみ、値は絶対に記載しない）、デプロイ ID。次の会話がこれを読み、何も壊さないようにするためです。プロジェクトが git を使用している場合は、LP のファイルのみをコミットします。

変更後の対応

テキストや価格の変更： 編集 → プレビュー → 公開。同じ情報をすべての場所（トップ、特典、FAQ、お礼ページ、メタデータ）で更新します。
同一商品の複数 LP（例：トラフィックソース別）：内容は同一に保ち、両方を同じデプロイで変更します。CLAUDE.md に LP 間で異なってもよい項目をメモします。
LP の廃止： 慌ててフォルダを削除しないでください。_redirects に 301 リダイレクト行を追加します（/slug-velho /slug-novo/ 301 と /slug-velho/* /slug-novo/ 301）。古い広告、リンク、メールはそのまま機能し続けます。
新しいシークレットまたは変更したシークレット： 新しいデプロイ後にのみ有効になります。

既知の落とし穴

フォルダに残したファイルがパブリックになる。 設定ファイルにアクセスキーが書かれたままインターネットに公開された事例があります。wrangler pages deploy は .assetsignore を尊重しません。_redirects でブロックしてください。
シークレットを登録したのに変更が反映されない： secret put の後にデプロイが必要です。
シークレットの値が不完全： https:// なし、またはキーのみで登録された Webhook は Invalid URL エラーになります。完全な URL を登録してください。
アクセント付きの文字が %C3%A9 のようにエンコードされて届く： お礼ページで decodeURIComponent を使ってパラメータをデコードします。モデルでは既に行っています。
オンラインプレビューでフォームが「何もしない」： プレビューロックが動作しています。localhost または本番環境でテストしてください。

Cloudflare ランディング