AIでマーケティングサイトを作る方法｜WebflowでLPを仕上げる

WebflowでAIを使ってLPやマーケティングpageを作るなら、AI Site Builderで土台を作り、AI Assistantで必要なsectionを追加しながら、CTA・form・copyを人が仕上げる流れが実務的です。G789がsite全体の初期構築なのに対し、G790はconversion pageの仕上げに焦点を当てます。

先に結論：LPはConversion Pathから逆算して仕上げる

表は横にスクロールできます

Section	役割
Hero	誰向け・何が得られるか
Proof	信頼できる理由
Offer	何を提供するか
Objection	不安・条件を解消
Form / CTA	次Actionを実行する場所

G789がサイト全体の初期構築を扱うのに対し、この記事では1つのConversionを成立させるLPの仕上げへ絞ります。

GoalとHeroを固定する

LPのGoalを1つに決める

問い合わせ、demo予約、資料download、signupなど、最終actionを固定します。AIへ「marketing page」とだけ伝えるより、visitorに何をしてほしいかまで定義します。

AI Site Builderで土台を作る

新規siteであればAI Site Builderからpage structureとthemeを作れます。LPだけでなく、必要ならAboutやContactなど周辺pageも最初に設計します。

HeroとCTAを先に固める

誰向けの何のofferか、何が得られるか、CTAは何かをHeroで伝えます。AI生成copyをそのまま使わず、実際のサービス・条件・実績に置き換えます。

Proof・Offer・Formを組み立てる

AI Assistantでsectionを追加する

Webflow AI Assistantはsite contextに合わせてsectionのデザイン案を生成します。2026年10月10日に確認した公式Helpではpublic betaで、一部の無料templateとAI Site Builderで作ったsiteに限定されます。画像やdynamic dataは生成せず、既存classを更新する機能でもありません。

ProofとOfferを整理する

case study、customer quote、feature、pricingなどを必要な範囲だけ配置します。AIが架空のtestimonialや実績を作った場合は削除し、確認済みの情報だけ残します。

Formを実装する

Form blockを配置したら、後半の「Formを送信可能な状態にする」で必要項目、送信先、Success / Error stateを設定し、Stagingで実受信まで確認します。

MobileとStagingでConversionを確認する

MobileとLoadingを確認する

LPはsection数が多くなりやすいため、Phone表示でCTA位置、form幅、画像、animationを確認します。見た目の豪華さより、読める・押せる・送信できる状態を優先します。

Staging→Productionの順で公開する

まずwebflow.ioのstaging環境で確認し、その後production domainへ公開します。公開後は実データを見てheadlineやCTA variationを改善します。

AIものさしの判断

WebflowでAI LPを作るなら「Goal→site土台→Hero/CTA→AI section生成→Proof→Form→mobile QA→staging→publish」というWorkflowが基本です。AIはsection制作を速くできますが、conversion設計と事実確認は人が持つ必要があります。

LPを作る前に決めるConversion Contract

LPはページの見た目より先に、誰が何をしたら成功かを決めます。例えば無料相談の申込が目的なら、対象者、相談で扱う範囲、所要時間、申込後の連絡方法、申込フォームの送信先を定義します。資料downloadなら、提供する資料と取得後の連絡、必須で集める情報を分けます。これらが決まらないまま「問い合わせを増やすLP」とAIへ指示しても、一般的なsectionの並びができるだけです。

表は横にスクロールできます

質問	決めること	LP上で確かめる場所
誰に届けるか	対象者と対象外	Hero・対象条件
何を提供するか	Offerと提供範囲	Offer・詳細
なぜ信頼できるか	根拠として使える事実	Proof・事例
どんな不安を解消するか	価格、条件、期間、手順	Objection・FAQ
次に何をしてもらうか	CTAを1つに絞る	Hero・最終CTA・Form

最終CTAが「資料請求」なのに、ページの途中で「無料相談」「購入」「メルマガ登録」を同じ強さで並べると、訪問者が選ぶ負担が増えます。関連する別actionが必要でも、Primaryを一つ決め、補助actionは優先度を下げて配置します。CTA文言は「詳しく見る」ではなく、押した後に起きることが想像できる表現にします。Offerが変わるなら、FormやSuccess messageも同じ約束へ合わせます。

PromptからLP案へつなげる

Prompt例：「対象は、採用サイトの改善を検討している従業員50〜300人の人事責任者。目的は30分の相談予約。Heroでは何を相談できるかと対象を伝える。続けて、対象条件、提供範囲、導入までの流れ、確認済みの支援実績、よくある質問、予約Formを置く。架空の顧客名、導入実績、数値、保証表現を作らず、不足情報はplaceholderにする。CTAは相談予約に統一する。」

生成されたsectionを採用する前に、実際に公開してよい情報かを確認します。AIが作ったTestimonials、受賞歴、導入件数、価格、効果保証は、根拠がなければ削除します。会社に実績がない場合は、無理にProofの見た目を埋めず、担当者の専門性、作業範囲、進行手順など説明可能な根拠へ置き換えます。情報が足りないsectionを空のまま残す判断もできます。

AI Assistantができること・できないこと

2026年10月10日に確認したWebflow公式Helpでは、AI Assistantによるpage design生成はpublic betaで、一部の無料templateとAI Site Builderで作ったsiteが対象です。WorkspaceでWebflow AIを有効にする必要があり、section生成はAI creditsを消費しないと案内されています。ただし画像、Component、dynamic dataは生成されず、個別要素だけを作る用途ではありません。既存classを再利用・追加できますが、既存class自体は更新しません。AIが生成したsectionを見た目どおり採用する前に、classや既存design systemとの整合をDesignerで確認してください。

対象siteで機能が表示されない場合、それを操作ミスと決めつけず、siteの作成方法、template、WorkspaceのWebflow AI設定を確認します。Public betaは対象が限られ、今後条件が変わる可能性があります。この記事は最新の条件を記していますが、使う時点の公式HelpとWorkspace画面を再確認してください。

Formを送信可能な状態にする

Form Blockを配置しただけでは申込フローは完成しません。WebflowのFormには標準のSuccessとError stateがあり、送信後に見せる内容、通知先、データの保存先を設定できます。Labelは入力欄の目的を伝えるため残し、placeholderだけに頼らないようにします。聞く情報を増やすほど入力負担が増えるので、予約・資料提供に必要な項目だけを残します。

送信先はWebflow、email notification、webhook、連携App、custom actionなどから選べます。New FormはWebflow保存とemail notificationが初期設定ですが、実際のForm設定で確認します。Custom actionはWebflowまたはemail notificationと同時に使えないため、外部処理へ直接送るなら組み合わせ条件を確認してください。無料Starter Site planのemail通知は受信者数などの制限があるので、担当者全員に届くと決めつけず現行planの条件を見ます。

Stagingで1件だけ送信テストする

公開前に、入力欄・Required条件・送信先・Success message・Error messageを確認します。テスト用の氏名とメールを使い、実際に送信して保存先に届いたか、通知が送られたか、返信先が意図した設定かを確認してください。テスト後はテストデータを見分けられるようにし、実顧客の個人情報を使って検証しません。送信後に画面でSuccessが見えても、担当者の受信箱やWebflow submissionへ届いたかは別に確認します。

Formが送信できない場合は、まずFormがForm wrapper内にあるか、Fieldに正しいNameがあるか、必須値が埋まっているかを見ます。次に、Webflow保存・email notification・Webhook・custom actionのどこへ送る設定か確認します。Error stateに連絡方法がない場合は、送信できない利用者のための代替連絡先を案内します。

MobileとStagingで最後の確認

390px相当のPhone表示で、Heroの主張が折り返して読めるか、CTAを押しやすいか、FormのLabelが見えるか、エラー説明が入力欄と結び付いているかを確認します。固定CTAが画面を覆う、同じCTAが短い間隔で繰り返される、長いProofで申込まで遠すぎる場合はsectionを削るか順番を変えます。Desktopでは大きな空白や複数列の比較が読みやすくても、Mobileでは縦に長くなるので優先順位を整理します。

Stagingではナビゲーション、form、リンク、読み込み、Success / Error stateを一通り試します。CV率の改善を保証する方法ではなく、目的に沿ったページとして機能するための動作確認です。公開後に計測を使う場合は、同じconversion定義を維持し、確認期間や変更内容を記録してから改善します。テスト送信に成功しないままProductionへ公開しないでください。

AI生成を人が持ち直す場所

AIはsectionの初稿を速く作れますが、顧客に何を約束するか、どの証拠を示すか、入力データを誰が扱うかは人が決めます。Pricingや導入条件が変わる場合は、本文の説明、CTA、formの確認事項、送信後の案内を同時に直します。「問い合わせ後に営業から連絡します」と表示するなら、実際にその運用が可能か確認します。

各sectionについて、読者の問い、回答、根拠、次actionの対応を確認すると、見栄えだけで必要性のないsectionを削れます。例えば「価格はいくらか」という問いへ直接回答できない場合、一般的なベネフィットを増やすより、価格の決まり方と見積条件を示す方が判断に役立ちます。情報が確定するまで保留する箇所は、placeholderのまま公開しないようにします。