チラシやSNSで集客しても、飛び先のキャンペーンページが「なんとなく作ったもの」のままでは、反応が良いのか悪いのかさえ判断できません。見出しを少し変えたいだけなのに、制作会社へ依頼して数日待つ運用では、改善はいつまでも回り始めません。店舗ビジネスのLP制作とABテストをClaude Codeで進めると、ページの作成と見出し・CTAの複数案づくりを短時間で行え、人は内容の正確さと結果の解釈に集中できます。弊社の進め方をもとに、GA4とCloudflare Pagesを使った流れを解説します。
Claude CodeでキャンペーンLPを作る方法とは
Claude Codeは、ターミナル上で日本語の指示を出すとHTML・CSS・JavaScriptのファイルを直接作成・修正してくれるコーディング支援ツールで、キャンペーンLPの土台づくりに向いています。
たとえば美容室が「新規限定クーポン」のLPを作る場合、担当者が渡すのは対象のお客様、価格、期間、予約方法、使いたい写真といった素材です。指示は「スマホで見やすい1カラム、ファーストビュー、メニュー表、お客様の声、予約ボタンの順で」といった程度の日本語で足ります。HTMLの知識がなくても、出来上がったファイルをブラウザで確認しながら「ボタンをもっと目立たせて」と会話で直していけます。
ページは、サーバー側の処理が不要な1ページ完結の静的ファイルにしておくのがコツです。静的ファイルであればCloudflare Pagesにそのまま公開でき、無料プランから始められます（プランの上限や条件は変わるため、公式情報で確認してください）。コードをGitHubに置いておけば、更新を反映するたびに自動で公開され、ブランチごとに確認用のURLも発行されるため、本番を触らずに仕上がりを見られます。
価格・期間・対象条件などの事実情報は、AIに考えさせず、担当者が確定した文章としてあらかじめ渡すことが、LP制作でいちばん事故を減らす手順です。AIは魅力的に書こうとして、「今だけ」「どこよりもお得」のような根拠のない表現を足すことがあります。素材の段階で事実を固定しておけば、AIの役割は構成とコードに絞られます。
初稿が出るまでの時間は、素材が揃っていれば数十分が目安です。ただし、写真の差し替えや文言の確認を含めると、実務では半日ほど見ておくと現実的です。
ABテストでは何を変え、GA4とCloudflare Pagesでどう測るのか
テストで変えるのは見出しとCTA（ボタンの文言）に絞り、1回のテストで変更点を1つだけにして、GA4のイベントで「どちらが多く押されたか」を比べます。
GA4には、以前のGoogle Optimizeのような標準のABテスト機能がありません。そのため、案の出し分けは自前の仕組みで行います。方法は大きく2つあり、案Aと案BをURLで分けて広告やQRコードごとに割り当てる方法と、JavaScriptでアクセスごとにランダムに出し分ける方法です。同じ媒体からの流入を半々に分けるほうが、客層の違いが混ざらず比較しやすくなります。
Claude Codeには、見出し3案とCTA3案の作成、出し分けのスクリプト、GA4へのイベント送信までまとめて依頼できます。送るイベントは、ページ表示と、予約ボタンのクリックの2種類に、どの案を見たかを示すパラメータを付けた形が基本です。このパラメータはGA4の管理画面でカスタムディメンションとして登録しないとレポートに出ず、反映まで時間がかかることがあるため、公開の前に済ませておきます。
見出しとボタンを同時に変えると、どちらが効いたのか二度と分からなくなるため、まず見出し、次に勝った見出しでCTAという順に1つずつ検証してください。
期間は、曜日による偏りを避けるために最低でも1〜2週間を目安にします。金曜に始めて月曜に結論を出すような運用は避けたほうが安全です。
AIに任せる範囲と担当者が確認する範囲はどこまでか
コード生成とバリエーション作成はClaude Codeに任せ、訴求内容の正確さと結果の解釈は担当者が担う「機械チェック＋人間の最終確認」の半自動が、現実的で安全な線引きです。
AIに任せて効果が出やすいのは、レスポンシブ対応のコード、見出しやCTAの言い換え案、イベント送信の記述といった作業です。機械的に確認できる部分は、リンク切れ、スマホでの表示崩れ、GA4のリアルタイムレポートやDebugViewでイベントが届いているかの確認までで、ここは手順化して繰り返せます。
一方、担当者が必ず見るべきは、価格、期間、対象条件、特典の内容です。加えて、業種ごとの表示ルールも見落とせません。たとえば「地域No.1」「業界最安」といった表現は、根拠を示せないと使えない場合があります。美容・医療・士業・飲食などは特に注意が必要で、迷う表現は専門家や所管の案内に照らして確認してください。
全自動で公開まで流すのではなく、公開ボタンを押す前に、人がすべてのバリエーションを実際に読む工程を必ず残してください。AIが作った複数案のうち1つだけ、期間が古いまま残っていた、という事故は、案が増えるほど起きやすくなります。
運用面でも、Claude Codeに本番環境へ直接公開させず、確認用URLで担当者が見てから反映する流れにしておくと安心です。
ABテストの結果はどう読み、費用はいくらかかるのか
結果はクリック率の差だけでなく、予約・電話・LINE追加といった最終成果まで見て判断し、費用はツール面では抑えられるものの、人の確認時間が実質的なコストになります。
たとえば、案Aが200訪問で10クリック（5%）、案Bが200訪問で14クリック（7%）だったとします。数字の上ではBが勝っていますが、差は4クリックで、偶然でも起こりうる範囲です。小規模な店舗では、このように決着がつかないことがむしろ普通です。各案でクリックが数十件以上集まるまで待つのが一つの目安ですが、集まらない場合は「差はなかった」と判断して、次の仮説に進んで構いません。
クリック数が多い案が、予約数も多いとは限りません。ボタンは押されたのに予約が増えないなら、問題はボタンの文言ではなく、料金の見せ方や予約フォームにある可能性があります。GA4で予約完了までのイベントを設計しておくと、この切り分けができます。
ABテストの目的は勝ち負けを決めることではなく、「このお客様には何が響かないか」を一つずつ減らして、次の施策の精度を上げることです。
費用については、Cloudflare PagesとGA4は小規模なら無料枠で始められます。Claude Codeは契約プランや利用量で変わるため、最新の料金は公式で確認してください。自社で回すのが難しい場合は、弊社のWeb制作・再構築やメディア運用・コンテンツ（分析改善）で計測設計から支援でき、どこから手を付けるか迷う段階ではAIアドバイザリーでの整理もご利用いただけます。
よくある質問
GA4だけでABテストはできますか？
GA4には標準のABテスト機能がないため、案の出し分けは別途スクリプトやURL分けで行い、GA4は結果の計測に使います。どの案を見たかをパラメータで送れば、案ごとのクリックや予約を比較できます。
プログラミング未経験でもClaude CodeでLPは作れますか？
日本語で指示してファイルを作ってもらえるため、未経験でも初稿づくりは可能です。ただし、価格や期間などの事実確認と公開前のチェックは担当者が行う必要があります。
ABテストはどのくらいの期間、続ければよいですか？
曜日による偏りを避けるため、最低でも1〜2週間を目安にします。アクセスが少ない店舗では、差が出ないまま終わることもあるため、その場合は次の仮説に進みます。
Cloudflare Pagesの費用はかかりますか？
小規模なLPであれば無料プランから始められます。上限や条件は変更されることがあるため、利用前に公式情報で確認してください。
関連記事
「自分の業務は、どこまでAI化できるのか」を無料で診断します
ここまで読んで、「うちのあの作業もできるのかな」と一瞬でも頭に浮かんだ作業があるなら、それを教えてください。「見積書の作成に毎回1時間かかっている」「契約書のチェックに毎回悩む」「発信を続ける余力がない」——そんな一文で十分です。
私たちは診断だけで終わらせません。業務フローを可視化してAIを組み込む「AI実装・業務設計」、どこからAIを入れるべきかROIを見立てる「AIアドバイザリー」、信頼感のあるサイトを構築する「Web制作・再構築」、そしてAIを活用して記事・SNS発信を続ける「メディア運用・コンテンツ」まで、実績をもとに一気通貫でお任せいただけます。
まずは診断から。送っていただいたら、実運用の経験をもとに、その作業を「AIに任せられる部分」と「人が確認すべき部分」に分解した診断結果を、1〜3営業日以内にメールでお返しします。
- 診断まで完全無料です（費用が発生する場合は、必ず事前にお見積りを出し、納得いただいてからです）
- 診断の結果、AI実装・アドバイザリー・Web制作・メディア運用のいずれかでお手伝いできそうな場合は、進め方と費用の目安もあわせてご提案します。不要ならそのまま終了で大丈夫です（しつこい連絡はしません）
