LP制作 2026/09/03

【2026年最新】ClaudeでLPを作る方法｜Artifactsでプレビューしながら制作する手順を解説

この記事でわかること

本記事では、ClaudeでLPを作る方法を、Artifacts機能でプレビューを見ながらHTML/CSSを生成・修正する5ステップで解説します。ChatGPTとの使い分けに迷っている方が、Claudeが得意な工程とコピペで使えるプロンプト、生成後にDejamでABテスト・CVR改善へ進める手順までわかる内容です。

「ClaudeでLPを作れると聞いたが、ChatGPTと何が違うのかわからない」とお悩みではないでしょうか。

ClaudeでLPを作る最大の利点は、Artifacts（アーティファクト）機能によって生成したHTMLがその場でプレビュー表示されることです。コードを別のエディタに貼り直さなくても、対話しながら見た目を確認・修正できます。本記事では、ClaudeでLPを作る具体的な手順と、コピペで使えるプロンプト、そして作成後のCVR改善までを解説します。

記事のポイント

ClaudeのArtifactsがLP制作に向いている理由
ClaudeでLPを作る5ステップの具体的な手順
ChatGPTとClaudeの使い分け方
生成したLPを公開・改善するまでの流れ

ClaudeでLPを作るとは？Artifactsが変えた制作フロー
ClaudeとChatGPTの違い｜LP制作ではどちらを使うべきか
ClaudeでLPを作る5ステップ
ClaudeでのLP制作を成功させるプロンプトのコツ
Claudeで作ったLPを公開・改善する方法
Dejamでclaude生成LPのCVRを高める
よくある質問
まとめ

ClaudeでLPを作るとは？Artifactsが変えた制作フロー

ClaudeでLPを作るとは、Anthropic社の生成AI「Claude」に指示を出し、ランディングページの構成・コピー・HTML/CSSコードを生成させる制作手法です。

従来の生成AIによるLP制作は「AIにコードを書かせる → コピーしてエディタに貼る → ブラウザで開いて確認する → 修正点を伝え直す」という往復が必要でした。ClaudeのArtifacts機能はこの往復をなくします。

Artifacts（アーティファクト）とは

Artifactsとは、Claudeが生成したHTML・CSS・JavaScriptなどの成果物を、チャット画面の横に独立したプレビューパネルとして表示する機能です。

LP制作の文脈では、次のように動きます。

「〇〇のLPを作って」と指示する
右側のパネルに完成したLPが実際のWebページとして描画される
「ファーストビューの背景をもっと濃い青に」と会話で修正を指示する
パネルの表示がその場で更新される

デザインの確認とコードの修正が一つの画面で完結するため、非エンジニアでも見た目を見ながらLPを組み上げられます。

Claudeが得意なLP制作の工程

工程	Claudeの得意度	補足
LP構成案の設計	◎	長文の指示を正確に汲み取る
キャッチコピー生成	○	複数案の一括生成が可能
HTML/CSSコーディング	◎	Artifactsで即プレビューできる
レスポンシブ対応	◎	「スマホで確認」と指示すれば幅を切り替えられる
画像素材の生成	✕	画像生成には対応していない

画像素材だけは別ツールが必要です。この点は「AI画像生成でLPのファーストビュー素材を作る方法」で解説しています。

ClaudeとChatGPTの違い｜LP制作ではどちらを使うべきか

生成AI全般でのLP制作の基礎は「生成AIでLP制作を効率化する方法」にまとめています。ここではLP制作という用途に絞った両者の違いだけを整理します。

観点	Claude	ChatGPT
コードのプレビュー	Artifactsで標準搭載	Canvasで対応
長い指示の読み取り	得意（長文の仕様書をそのまま渡せる）	得意
コピーの語感	落ち着いた・説明的な文体	キャッチーで感情に訴える文体
画像生成	非対応	対応
一貫したトーン維持	得意	会話が長くなると揺れやすい

実務上の使い分けは次のようになります。

構成とコーディング中心ならClaude — 既存LPのHTMLをそのまま貼り付けて「この構成を維持したまま改善して」と頼める
キャッチコピーの発想量が欲しいならChatGPT — 詳しくは「ChatGPTでLPを作る方法」で解説しています

どちらか一方に絞る必要はありません。 コピーはChatGPTで50案出し、そこから選んだ案をClaudeに渡してコーディングさせる、という併用が最も効率的です。

ClaudeでLPを作る5ステップ

ステップ1: LPの前提条件を1つのプロンプトにまとめる

Claudeは長い指示を正確に読み取れるため、情報を小出しにせず最初にまとめて渡すのが定石です。

以下の条件でランディングページのHTML/CSSを作成してください。

【商材】BtoB向けCVR改善ツール
【ターゲット】自社ECサイトのCVRに課題を持つマーケティング担当者
【提供価値】ヒートマップとABテストを1つのツールで完結できる
【CV地点】無料トライアル申し込み
【トーン】誠実・データドリブン。誇張表現は使わない
【セクション構成】
1. ファーストビュー（キャッチコピー＋CTAボタン）
2. 課題提起（3つの悩み）
3. 解決策（機能3点）
4. 導入事例（3社）
5. 料金
6. FAQ
7. 最終CTA

【技術要件】
- 単一のHTMLファイル。CSSは<style>タグ内に記述
- レスポンシブ対応（ブレークポイント: 768px）
- 外部ライブラリは使わない

ステップ2: Artifactsのプレビューで全体を確認する

生成が終わると右側のパネルにLPが描画されます。ここで見るべきは細部ではなく全体の流れです。

ファーストビューだけで何のサービスかわかるか
CTAボタンが画面内に見えているか
セクションの並び順が読者の思考順序と合っているか

ステップ3: セクション単位で修正を指示する

修正は「LP全体を作り直して」ではなく、セクションを名指しして依頼します。全体の再生成を繰り返すと、直したくない箇所まで変わってしまうためです。

ファーストビューだけ修正してください。他のセクションは変更不要です。
- キャッチコピーを3案出して、それぞれのプレビューを見せてください
- CTAボタンの色をより目立つ配色に変更してください

ステップ4: スマートフォン表示を確認する

LPの流入は多くがスマートフォンです。PC表示で完成としないこと。

このLPをスマートフォン幅（375px）で表示したときのレイアウトを確認したいです。
崩れている箇所があれば修正してください。特にファーストビューの
キャッチコピーが3行以上に折り返していないかを見てください。

ステップ5: HTMLを書き出して公開する

Artifactsパネルからコードをコピーし、公開環境に配置します。ここで多くの担当者がつまずくのが「生成できたが公開する場所がない」という問題です。

DejamのLP・記事LP制作機能は、ノーコード編集とコード編集を切り替えられるため、Claudeが生成したHTMLをそのまま貼り付けて公開できます。独自ドメインも300件まで追加費用なしで利用できるため、LPを量産する運用にも向いています。

ClaudeでのLP制作を成功させるプロンプトのコツ

「変更してはいけない箇所」を明示する

Claudeは指示に忠実な反面、曖昧な依頼だと広範囲を書き換えます。修正指示には必ず保護範囲を書き添えます。

料金セクションのみ修正してください。
ファーストビューと導入事例セクションのHTMLは1文字も変更しないでください。

既存LPのHTMLをそのまま渡す

ゼロから作るよりも、既存LPを渡して改善させるほうが精度が上がります。自社LPのHTMLをコピーして貼り付け、次のように依頼します。

これは現在運用中のLPのHTMLです。
CVRを改善する観点で、変更すべき箇所を優先度順に5つ挙げ、
その後に修正版のHTMLを出力してください。
変更した箇所はコメントで理由を書いてください。

根拠を求める

生成AIは「それらしい改善案」を作れてしまいます。なぜその変更がCVRに効くのかを説明させることで、検証すべき仮説として扱えるようになります。

ただし、AIが述べた根拠はあくまで一般論です。**自社のLPで本当に効果があるかは実際に測る必要があります。**この検証の考え方は「ChatGPTでLPを改善する方法」でも触れています。

Claudeで作ったLPを公開・改善する方法

Claudeで生成した時点のLPは、**あくまで「仮説の塊」**です。実際の訪問者がどう動くかはデータを取らなければわかりません。

米国のNielsen Norman Groupの調査では、ユーザーはページを精読せず「F字型」にスキャンして読むことが知られています（出典: Nielsen Norman Group - F-Shaped Pattern of Reading）。AIが論理的に整えた構成が、実際の視線の動きと一致するとは限りません。

そのため、公開後は次の順序で改善します。

ヒートマップで実際の閲覧行動を見る — どこまで読まれ、どこで離脱しているか
仮説を立てる — 「CTAが読まれる前に離脱している」など
ABテストで検証する — Claudeに代替案を作らせ、勝敗をデータで決める
勝ちパターンを次のLPに反映する

Dejamでclaude生成LPのCVRを高める

Claudeで作ったLPの改善サイクルは、Dejamの以下の機能を組み合わせることで回せます。

LP・記事LP制作

ノーコード編集とコード編集を切り替えられるため、ClaudeがArtifactsで生成したHTMLをそのまま取り込んで公開できます。生成したコードを活かしたまま、CTAの文言だけをノーコードで差し替えるといった運用も可能です。

LP・記事LP制作の詳細を見る →

ヒートマップ

クリック・クリックイベント・熟読・滞在・離脱の5種類のヒートマップで、AIが構成したセクション順序が実際に読まれているかを可視化します。「AIが良いと判断した構成」と「実際に読まれる構成」のズレはここで初めて見えます。

ヒートマップの詳細を見る →

ABテスト

Claudeに複数のキャッチコピー案を出させ、どれが実際に勝つかをデザイン変更テストで検証できます。自然言語での指示からテストコードを自動生成できるため、実装のたびにエンジニアを待つ必要がありません。

ABテストの詳細を見る →

AI相談

LPの改善方針そのものをAIに相談できます。Claudeが出した改善案が自社の商材に合っているか、CVR改善の観点でセカンドオピニオンを取る使い方ができます。

AI相談の詳細を見る →

よくある質問

Q. ClaudeでLPを作るのは無料でできますか？

A. Claudeには無料プランがあり、Artifacts機能も利用できます。ただし無料プランには利用回数の上限があるため、LPを何本も作る・長い修正のやり取りを重ねるといった実務では有料プランが現実的です。

Q. Claudeが生成したLPのコードは商用利用できますか？

A. Claudeが生成したコードは商用利用可能です。ただし生成物に既存のコードやデザインと類似した部分がないかは、公開前に自社で確認してください。画像素材については、Claudeは画像を生成しないため別途調達が必要です。

Q. ClaudeとChatGPTはどちらがLP制作に向いていますか？

A. コーディングと構成設計はClaude、キャッチコピーの発想量はChatGPTが向いています。両方を使い、コピーをChatGPTで量産してClaudeで実装する併用が最も効率的です。

Q. Claudeで作ったLPはそのまま公開できますか？

A. HTMLとしては公開できますが、フォーム送信の処理やアクセス解析タグの設置は別途必要です。DejamのようなLP制作機能を持つツールに貼り付ければ、公開・計測・ABテストまでを一つの環境で行えます。

Q. Claudeで作ったLPのCVRはどう改善すればよいですか？

A. 公開して終わりにせず、ヒートマップで実際の閲覧行動を確認し、ABテストで改善案を検証します。AIが生成した構成はあくまで仮説であり、成果はデータで確かめる必要があります。

まとめ

ClaudeでLPを作る最大の利点は、Artifacts機能によってプレビューを見ながら対話で修正できる点にあります。コードをエディタに貼り直す往復がなくなるため、非エンジニアでも見た目を確認しながらLPを組み上げられます。

一方で、Claudeが生成したLPは「よくできた仮説」であって、成果が出るLPとは限りません。公開後にヒートマップで実際の行動を見て、ABテストで検証するサイクルを回して初めて、CVRという成果につながります。

CVR改善ならDejam！AI生成LPを成果につなげる

Dejamは、LP制作・ヒートマップ分析・ABテスト・AI自動解析をオールインワンで提供するCVR改善特化ツールです。「ClaudeでLPは作れたが、成果につながっているかわからない」という段階から、本格的なPDCAを回して成果を最大化するまでを総合支援します。

Dejamが選ばれる理由

国内唯一のワンプロダクト: LP制作・ヒートマップ分析・ABテストをすべて単一ツールで完結
月額3万円〜利用可能: オプティマイズプラン月額3万円〜 / CMSプラン月額5万円〜 / オールインワン月額12万円〜
ユーザー課金なし: 何名で使っても追加費用は発生しない
ISMS認証取得: ISO/IEC 27001:2022 & JIS Q 27001:2023認証取得済み
毎週アップデート: 市場トレンドとユーザーリクエストに応じて機能を毎週拡充
権威ある実績: 代表がダイレクトアジェンダで2連覇。国内唯一のLPO顕彰制度「LPO AWARD」主催者

Dejamの主要機能

LP/記事LP制作: ノーコード・コードの切り替えに対応。AIで生成したコードを直接取り込み可能
ヒートマップ: 5種類（クリック/クリックイベント/熟読/滞在/離脱）。データ保存期間無制限
ABテスト: デザイン変更テスト・リダイレクトテスト・ポップアップテストの3種類。AIが自然言語でテストコードを自動生成
自動解析: どのコンテンツがCVRに貢献しているかAIが自動解析。ゴールデンルート機能でページ遷移の最適パスも特定
独自ドメイン300件まで無料: LP専用ドメインを大量運用しても追加費用なし

ClaudeがArtifactsで生成したHTMLは、Dejamのコード編集モードにそのまま貼り付けて公開できます。生成から公開・計測・改善までを一つの環境でつなげられる点が、Claude単体との大きな違いです。

Dejamの詳しい機能を見る →　無料トライアルを申し込む →

タグ: LP制作ランディングページノーコード CVR改善 LPO 生成AI Claude Artifacts プロンプト

この記事の監修者

平井翔吏

株式会社LeanGo 代表取締役CEO / Dejamプロダクトオーナー

CVRを改善するノウハウを体系化するプロフェッショナル。

株式会社リクルートホールディングスに新卒入社、ゼクシィのUXデザインを担当。累計250件以上の施策を実施しCVR改善を140%達成。タグ検索の開発やゼクシィ花嫁割のリブランディングなどのプロジェクトオーナーとして事業を推進した。

株式会社LeanGoを設立。CVR改善ツールDejamのプロダクトオーナー。運用型LPOやセグメントCVRなど独自のメソッドを構築、PDCAハンドスピナーをはじめとするプロモーションも実施している。日本最高峰のダイレクトマーケティングカンファレンス「ダイレクトアジェンダ2025」「ダイレクトアジェンダ2026」のAgenda awardにて2連覇。

【2026年版】WordPressで記事LPを作る方法｜3つの手順と広告運用で詰まる5つのポイント