マーケ | LP作成AIの比較設計と制作の参考例

2026-10-09更新: 本文の根拠・説明条件と停止中のニュースレター案内を見直しました。個別の出典確認は本文に示す範囲で、AIの実行・効果を新たに検証したものではありません。

2026-10-08訂正: 旧稿に記載したモデル名・実行日・「実行／検証済み」という説明に対応する元ログを確認できていないため、それらの断定を撤回しました。以下のプロンプトと掲載例は、手順を検討するための参考資料です。特定モデルの実行結果や効果の実測値としては扱わず、利用する環境で再実行し、数値・出典を確認してください。画面の内容確認日は訂正を含む本文・表示の確認日を示し、モデルを実行して検証した日ではありません。

「lp作成 ai」で検索して比較記事を3本読んだのに、まだツールを決められない。よくある詰まり方です。原因は記事側にあります。各ツールが別々の題材で作った作例を並べても、ツールの差なのか題材の差なのか切り分けられないからです。

この記事では逆のやり方をとります。まず架空のBtoB SaaSを1つ設定し、LPのワイヤーフレームを1枚確定させる。コピーも共通素材として先に固定する。そのうえで同じワイヤー・同じコピーを4ツールに渡し、同じ評価軸で採点する。ワイヤー設計・コピー・HTMLの掲載例を示します。Claudeを含め、各ツールの実行記録・制作時間・性能の比較結果は確認できていません。そのぶん、評価軸と採点手順は誰でも追試できるレベルまで本文に書き切りました。プロンプトは2本とも全文掲載します。

既存の比較記事でツールを選べない理由

ツール比較で意思決定するには、題材・素材・評価軸の3つが揃っていないと判断材料になりません。既存の比較記事の多くは各ツールの公式作例や別々の題材のスクリーンショットを並べる型で、3つとも揃っていないことがほとんどです。

料理コンテストにたとえると、別々の食材で作った皿を並べて「どの包丁が良いか」を論じている状態です。包丁を比べたいなら食材を揃えるしかありません。LPツールなら、ワイヤーフレームとコピーを固定することがそれに当たります。

もう一つの問題は評価の粒度です。「デザインがきれい」「直感的」という感想は追試できません。この記事では、計測可能な4軸に絞って採点表を先に決めます。感想はその後です。

なお、LP以外も含めたマーケ業務全体のAI活用マップはマーケターのためのAIエージェント活用ガイドにまとめています。この記事はLP制作だけを深掘りします。

比較の設計: 同一ワイヤー・同一コピー・4つの評価軸

この比較は「ワイヤーとコピーを固定し、レイアウト再現・実装品質・手数だけをツール間で比べる」設計です。コピーの出来までツールに委ねると、文章生成の得手不得手がレイアウト評価に混ざるためです。評価軸は次の4つに固定します。

評価軸	測るもの	採点方法
制作時間	入力開始から公開可能な状態まで	ストップウォッチで「初回生成」「手直し」「公開設定」の3区間を分単位で記録
Lighthouseスコア	公開URLの表示性能と基礎品質	Performance / Accessibility / Best Practices / SEO の4値。計測手順は後述
ワイヤー再現度	指定した構成をどこまで再現したか	8セクション×2点（セクションの有無1点+指定要素の充足1点）の16点満点をチェックリスト採点
修正追従	公開後の直しがどれだけ通るか	共通の修正指示3件（後述）の達成可否と所要時間

素材の条件も揃えます。コピーは次のセクションの参考文案を共通素材として全ツールに入力し、画像はすべて単色のダミー矩形で代用します。写真素材の質で印象が変わるのを防ぐためです。

検証条件は次の通りです。

• 掲載範囲: ワイヤー設計・コピー・HTMLの参考例。モデル・実行日・実行記録は未確認
• 未実測: v0 / Framer / STUDIO での実作、全ツールのLighthouseスコアと制作時間
• 題材: 編集部が設定した架空のBtoB SaaS「セミナル」。実在の企業・製品とは無関係です

題材のワイヤーフレーム設計（プロンプト全文と出力）

ワイヤーフレームの参考例を示します。Claudeでの設計や編集部での採用を確認した記録はありません。題材は架空のウェビナー運営SaaS「セミナル」です。掲載するプロンプトの全文がこちらです。

あなたはBtoB SaaSのLP設計を専門とするマーケターです。以下の商材のLPワイヤーフレームを設計してください。

# 商材（架空です）
ウェビナー運営SaaS「セミナル」
- 対象: ウェビナーを月1回以上開催するBtoB企業のマーケ担当
- 機能: 申込ページ作成、リマインドメール自動配信、視聴ログのCRM連携、事後アンケート
- 価格: 月額3万円（配信回数無制限）、初期費用なし、14日間無料トライアルあり
- LPのゴール: 無料トライアル申込

# 出力形式
- セクション数は8つ以内。上から順に番号を振る
- 各セクションに「名前 / 目的 / 含める要素 / 文字量の目安」を書く
- 効果や実績の数字はすべて「（ダミー: 単位だけ指定）」と書き、具体値を作らない
- 画像はすべて「ダミー矩形」と書く

参考例（実行記録未確認）です。これをそのまま本比較の共通ワイヤーとします。

LPワイヤーフレーム「セミナル」全8セクション

1. ファーストビュー
目的: 3秒で「誰の何を解決するか」を伝え、トライアルへ誘導する
要素: ヘッドライン(30字以内)、サブコピー(60字以内)、CTAボタン「14日間無料で試す」、
      製品画面のダミー矩形、導入社数の実績帯（ダミー: 社数）
文字量: 100字以内

2. 課題共感
目的: 読者の現状の運用のつらさを言語化し、自分ごと化させる
要素: 見出し1本、課題カード3枚（申込管理・リマインド・事後フォロー）
文字量: 各カード60字以内

3. 解決策（機能紹介）
目的: 課題カード3枚に1対1で対応する機能を示す
要素: 機能ブロック3つ（見出し+説明+ダミー矩形）。課題と同じ並び順にする
文字量: 各ブロック80字以内

4. 導入効果
目的: 効果を数字で示す（本比較ではダミー値）
要素: 数値カード3枚（ダミー: 時間、%、件数）+ 注記「※数値は掲載時に実測値へ差し替え」

（中略: 5. 導入事例=実在・許諾を確認できる場合のみ。なければ省略、6. 料金=確認済み条件、7. よくある質問=4問）

8. クロージングCTA
目的: 迷いを残した読者に最後の一押しをする
要素: ヘッドライン再掲の言い換え、CTAボタン。カード登録条件は実際の申込仕様で確認してから記載
文字量: 60字以内

掲載例では実績の数値をダミーにしていますが、これはAIが制約を守ったことを実証する記録ではありません。実在の導入社数・効果・体験談が確認できない場合は、該当セクションごと外します。匿名の事例でも、実在性と掲載許可の確認が必要です。

ワイヤー設計の前段、つまり競合LPをどう調べて構成に反映するかは競合分析をAIで回す手順で扱っています。

比較する4ツールと料金の確認先（2026-10-09確認）

比較対象はClaude、v0、Framer、STUDIOです。料金と公開・生成の上限は別々に確認します。以下は公式ページで確認した範囲であり、制作性能の評価ではありません。

ツール	確認した条件	公式情報
Claude	プラン別の機能・利用上限を契約画面で確認。HTMLの配信環境は別途必要	料金
v0	Freeは1日7メッセージ。新規利用者の5ドルは一度限りのクレジットで、毎月5ドルではない。Plusは表示価格30米ドル/ユーザー/月、Businessは100米ドル/ユーザー/月（税別）	料金
Framer	Freeに試用500 AIクレジット。年払い表示でBasicは月10米ドル、Proは月30米ドル。追加編集者やオプション等は別に確認	料金
STUDIO	Freeは0円。年払い表示でMiniは月590円、Personalは月1,190円、Businessは月3,980円。月払い金額、税・追加条件は契約画面で確認	料金

AI機能の利用可否、生成上限、追加料金、商用利用、独自ドメイン公開、解約条件はそれぞれ確認してください。無料枠だけで比較工程をすべて完了できるとは限りません。

実作1: ClaudeでLPコピーとHTMLを生成する（プロンプト全文と出力抜粋）

Claude等で試す場合は、確定したワイヤーを渡し、コピーとHTMLの下書きを依頼します。1往復で完成することや、掲載例が再現されることは未検証です。コピーを人が確認してから、他のツールにも同じ素材として渡します。

先ほど確定したワイヤーフレーム全8セクションに沿って、LPのコピーとHTMLを書いてください。

# コピーの制約
- 各セクションの文字量の目安を守る
- 効果・実績の数字は「00」のダミー表記にし、コメントで「要実測値」と書く
- 「業界No.1」「必ず」「最安」など、根拠の示せない最上級・断定表現を使わない
- ヘッドラインは機能名でなく、読者の業務がどう変わるかで書く

# HTMLの制約
- 1ファイル完結（CSSは<style>にインライン、JSなし）
- 画像はすべてCSSの単色矩形で代用する
- セマンティックタグ（header/section/footer）を使い、見出し階層はh1→h2を守る
- viewport設定とmeta descriptionを含め、モバイル幅で崩れないようにする

参考例（実行記録未確認）から、コピーの一部とHTMLの冒頭を参考例として載せます。

まずファーストビューのコピーです。

ヘッドライン: ウェビナーの申込・通知をまとめて管理
サブコピー: 申込ページもリマインドも事後フォローも、セミナルがひとつで自動化。
           マーケ担当は企画と登壇準備に集中できます。
CTA: 14日間無料で試す
実績帯: 導入00社 <!-- 要実測値 -->

HTMLの構成を示すための参考例です。全体の行数や生成記録は確認できていません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ウェビナー運営SaaS「セミナル」。申込ページ作成からリマインド配信、視聴ログのCRM連携まで自動化。14日間無料トライアル。">
<title>セミナル | ウェビナーの裏方仕事を自動化するSaaS</title>
<style>
  :root { --main: #1a4fd6; --ink: #1f2430; --bg: #f6f8fc; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; color: var(--ink); line-height: 1.8; }
  .cta { display: inline-block; background: var(--main); color: #fff; padding: 16px 40px;
         border-radius: 8px; font-weight: 700; text-decoration: none; }
  .placeholder { background: #d5dcea; border-radius: 12px; width: 100%; aspect-ratio: 16 / 9; }
</style>
</head>
<body>
<header class="hero">
  <h1>ウェビナーの申込・通知をまとめて管理</h1>
  <p>申込ページもリマインドも事後フォローも、セミナルがひとつで自動化。マーケ担当は企画と登壇準備に集中できます。</p>
  <a class="cta" href="#trial">14日間無料で試す</a>
  <div class="placeholder" aria-label="製品画面のイメージ"></div>
  <p class="badge">導入00社 <!-- 要実測値 --></p>
</header>
（中略: セクション2〜8。課題カード・機能ブロック・料金表・FAQ・クロージングCTAが
実装時は自分で各セクションを作成・確認してください。掲載例と同じ出力の再現を保証するものではありません）
</body>
</html>

旧稿に記載したブラウザ表示確認、モバイル表示の評価、16点満点という採点は、確認記録が見つからないため撤回します。掲載HTMLを利用する際は、8セクションの順序と要素、複数画面幅での表示を新たに確認し、同じ基準で採点してください。

旧稿の「約25分」という制作時間は、計測記録が確認できないため撤回します。ワイヤー設計、HTML作成、表示確認、ホスティングはそれぞれ時間を記録し、公開URLでのLighthouse計測も別途行ってください。

検証方法の例（結果未掲載）: Claude生成HTMLを静的ホスティングに公開し、後述の手順でLighthouse4値を計測する。編集部での実施・結果を示すものではありません。

ファーストビューのヘッドラインをさらに詰めたい場合のプロンプト設計はキャッチコピーをAIで量産して選ぶ手順が使えます。今回の「機能名でなく業務の変化で書く」という制約も、その記事の考え方を流用したものです。

実作2〜4: v0・Framer・STUDIOでの実作手順

残り3ツールは、ここに書いた手順をそのまま実行すれば同条件の比較になるところまで手順を固定しました。実測値は計測しだい追記します。

共通の入力は2つです。前掲のワイヤーフレーム全8セクションのテキストと、前掲の参考コピー（生成記録未確認）。各ツールでの手順は次の通りです。

v0では、新規チャットにワイヤーとコピーを貼り、「このワイヤーの順序とコピーを変えずにLPを実装。画像は単色プレースホルダ」と指示します。生成後はツール内プレビューで8セクションを照合し、崩れの修正指示を出した回数と時間を記録。最後にVercelへデプロイして公開URLを得ます。無料プランは1日7メッセージ上限があるため、修正往復が上限に達した場合はその時点の状態で採点し、達しなかった場合との差も記録します。

検証方法の例（結果未掲載）: v0での制作時間3区間・ワイヤー再現度16点採点・Lighthouse4値。編集部での実施・結果を示すものではありません。

Framerでは、AI生成機能にワイヤーとコピーを入力してページを生成し、エディタ上で8セクションと照合します。AI機能はクレジット制のため、消費クレジット数も記録対象です。公開はFreeプランのframerサブドメインで行い、Lighthouse計測もそのURLで実施します。

検証方法の例（結果未掲載）: Framerでの制作時間3区間・消費クレジット・ワイヤー再現度・Lighthouse4値。編集部での実施・結果を示すものではありません。

STUDIOでは、編集部アカウントでSTUDIO AIまたはStudio.Assistant（Beta）が使えるかをまず確認します。使える場合はワイヤーとコピーを入力して生成、使えない場合は「AI生成が利用できなかった」と記録したうえで、近いテンプレートから手動でワイヤーを再現する所要時間を参考値として測ります。公開はFreeプランのstudioサブドメインです。

検証方法の例（結果未掲載）: STUDIOでのAI機能利用可否・制作時間3区間・ワイヤー再現度・Lighthouse4値。編集部での実施・結果を示すものではありません。

全ツール共通で、公開後に修正追従テストを行います。修正指示は「ファーストビューのヘッドラインを別案に差し替え」「セクション4と5の順序を入れ替え」「メインカラーを青から緑に変更」の3件で固定。それぞれ達成可否と所要時間を記録します。

検証方法の例（結果未掲載）: 4ツールでの修正指示3件の達成可否と所要時間。編集部での実施・結果を示すものではありません。

採点手順: Lighthouseと制作時間はこう測る

計測手順を固定しないとスコアは比較になりません。追試する読者もこの手順に合わせてもらえれば、編集部の追記値と突き合わせられます。

Lighthouseの計測手順は次の通りです。

• Chromeのシークレットウィンドウで公開URLを開く（拡張機能の影響を除外）
• DevToolsのLighthouseタブで、デバイスは「Mobile」、カテゴリは Performance / Accessibility / Best Practices / SEO の4つを選択
• 同一URLで3回計測し、Performanceは3回の中央値を採用。他3カテゴリは変動が小さいため1回目の値でよい
• 計測はすべて同じ回線・同じ時間帯にまとめて行い、計測日を記録する

制作時間は「初回生成」「手直し」「公開設定」の3区間に分けて記録します。合計だけだと「生成は速いが直しに1時間かかるツール」が見えなくなるからです。手直し区間には、ワイヤーとの照合チェックにかかる時間も含めます。

ワイヤー再現度は、8セクションそれぞれについて「セクションが存在するか(1点)」「指定要素が揃っているか(1点)」を採点し16点満点とします。要素の一部欠落は0.5点。採点は必ずワイヤー原文を横に置いて照合し、印象で加点しません。

注意点: 利用規約・商用可否・景表法

AI生成LPを公開する前に確認すべきことは、ツールの規約と広告表現の2系統です。どちらも見落とすと公開後に直せない問題になります。

まずツールの規約です。編集部は2026-08-11時点で各ツールの料金ページを確認しましたが、生成物の商用利用条件と権利の帰属については、料金ページだけでは判断できませんでした。ここは断定を避けます。契約前に各ツールの利用規約本文で、次の3点を確認してください。

• 生成されたコード・デザインの権利が誰に帰属するか、商用利用に制限がないか
• 無料プランでの商用利用が許可されているか（FramerのFreeはframerサブドメイン+ブランド表示、STUDIOのFreeは独自ドメイン不可のため、規約以前に実用面でも商用LPには不向きです）
• 入力したプロンプトや素材がAIの学習に使われるか、オプトアウトできるか（v0はBusinessプランで学習オプトアウトがデフォルトと料金ページに記載があります。他プラン・他ツールは規約で確認してください）

入力素材の側にも注意が要ります。ワイヤーやコピーに自社の未公開の価格戦略や顧客名を入れない運用は、LP制作でも変わりません。今回のように架空化・ダミー化してから入力するのが基本です。

次に景表法です。LPは広告なので、優良誤認（実際より著しく良く見せる表示）と有利誤認（取引条件を実際より有利に見せる表示）の規制対象になります。AI特有のリスクは、もっともらしい実績数字や「No.1」表現を平気で生成してくることです。今回の比較でプロンプトに「根拠の示せない最上級・断定表現を使わない」「数字はダミー表記にする」と入れたのはこのためで、実務でも同じ制約を必ず入れてください。ダミーの「00社」を実数に差し替えるときは、根拠資料をセットで保管する運用まで含めてLP公開フローに組み込むのがおすすめです。

よくある質問

結局どのツールを選べばいいですか？

実測前の現時点で言えるのは選び方の軸だけです。コードを自社で管理したいならClaudeやv0のようなコード生成型、非エンジニアがツール内で公開まで完結させたいならFramerやSTUDIOのようなデザインツール型が候補になります。採点する場合は、確認・修正を含む条件と結果を記録してください。

無料プランだけでこの比較を追試できますか？

4ツールとも無料プランで着手はできます。ただしv0は1日7メッセージ上限、Framerは試用クレジット500、FramerとSTUDIOの無料公開はサブドメイン+ブランド表示という制約付きです。無料枠で比較を完了できるかは利用状況によります。商用公開に必要な機能と追加費用を確認して判断してください。

コピーを固定せず、各ツールにコピーも書かせた方が実力が分かるのでは？

目的によります。この記事はレイアウト再現と実装品質を比べたいのでコピーを固定しました。コピー生成力まで比べたい場合は、変数が2つに増えるぶん採点も「コピー品質」の軸を別に立てる必要があります。その場合の評価方法はキャッチコピーをAIで量産して選ぶ手順の選定基準が流用できます。

生成されたLPをそのまま公開して問題ありませんか？

そのままの公開はおすすめしません。最低限、数字と実績の裏取り、リンク先とフォームの動作確認、利用規約上の商用可否の確認、景表法の観点でのコピー総点検の4つを通してからです。AIはもっともらしいダミーを作るのが得意なので、「00社」のような未確定値が残ったまま公開される事故が一番起きやすいと思っています。

ニュースレターの新規登録は現在停止しています。最新記事は記事一覧またはRSSで確認できます。