ClaudeでLP作成をやってみた｜プロンプト3回の修正で使える形に

結論: 1回で完成させようとしないこと。「中身を指定する→スマホのルールを数字で書く→崩れた所だけ直させる」の3段階で頼むのが一番早く仕上がりました。

• 最初の1行 → 依頼文に「HTML1ファイルの全文だけを返して」と書く
• 2回目 → 店の情報・セクション・色コード・文字数やpx（ピクセル）を数字で渡す
• 仕上げ → できたHTMLを貼って「この3点だけ直して」と頼む

整体院のLPを1枚、Claudeに作ってもらいました。使ったのは2026-10-15時点のClaude Sonnetです。Claude Code（2.1.296）から、コマンド1回ずつで頼んでいます。

一行で頼んだ回は、HTMLが1行も出てきませんでした。

そこからプロンプトを3回直して、スマホで出せる形になるまでの記録です。

この記事の目次

1. ClaudeにLPを一行で頼むと、何が返ってくる？
2. 院の情報と構成を渡すと、どこまで良くなる？
3. スマホでLPが崩れるときは、どう頼めば直る？
4. 仕上げの修正は、作り直さずに頼める？
5. Claudeで作ったLPを、お客さんに見せるには？
6. 公開前に、自分の目で確かめる所は？
7. そのままコピーして使えるLP作成プロンプト
8. よくある質問
9. この記事のまとめ

ClaudeにLPを一行で頼むと、何が返ってくる？

一行だけだと、HTMLは0行でした。「全文だけ返して」を足すとHTMLは出ましたが、頼んでいない中身まで盛られていました。

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

0回目のプロンプトは、これだけです。

整体院のLPを作ってください。

Claudeはファイルを自分で書こうとして、書き込みの許可が無いところで止まりました。次の一文を足したら、返答が <!DOCTYPE html> で始まり </html> で終わるようになりました。

整体院のLPを作ってください。ファイルには保存せず、CSSを含めたHTML1ファイルの全文だけを返答してください（説明文は不要）。

チャット画面で頼む場合も同じです。「1ファイルで」「全文」と書いておけば、そのままコピペできる形で返ってきやすくなります。

「ぶっちゃけ、一番の違いは「コピペの手間」と「ローカルファイルへの直接アクセス」です。」 — Yahoo!知恵袋の回答（2026年5月）

v1は、ぱっと見なら立派です。中身を確かめると、次の4点が残っていました。

• スマホで料金表の説明文が、1文字ずつ縦に並んだ
• 「施術歴15年」「のべ2万人以上」や体験談など、頼んでいない実績が入った
• 院長の写真の代わりに絵文字。地図は「ここに埋め込んでください」という仮の枠
• 一番小さい文字は10px

原因は、料金の行が3列の横並びだったこと。幅390pxだと、真ん中の説明欄がほぼ0まで押しつぶされます。

一方で、スマホの画面下に予約ボタンを固定する作りは、頼まなくても付いていました。ここは気が利いていると感じた所です。

院の情報と構成を渡すと、どこまで良くなる？

セクション数と色を指定したら、作り話が消えました。スマホでのページの長さも約4割になっています。

2回目に渡したのは次の3つです。全文は、下の完成プロンプトの「# スマホ表示」より上の部分（507字）です。

• 院の情報
• 「この順番で、この5つだけ」という構成
• 色コード4つ

色を「緑」ではなく #3A7D6B のようなコードで渡したら、その配色で出てきました。資格や実績の作り話も消えています。

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

それでも、スマホで見出しが単語の途中で割れました。「腰／痛、」です。

地味に見落としやすい点が、もう一つ。「この5つだけ」と書いたら、v1にあったスマホの固定予約ボタンが消えました。欲しい部品は、はっきり書かないと付きません。

スマホでLPが崩れるときは、どう頼めば直る？

文字数・文字サイズ・ボタンの高さを数字で書くことです。実際に測った値は、全部その範囲に入っていました。

3回目は、2回目の全文の後ろに次の2ブロックを足しました（合計981字）。

# スマホ表示（いちばん大事。幅390pxのiPhoneで見る前提で作る）
- スマホを基準に作り、768px以上でPC用に広げる（モバイルファースト）
- ファーストビューは390×844pxの1画面の中に、キャッチコピー・初回料金・予約ボタンが全部入るようにする
- 見出しは単語の途中で改行させない。改行させたい位置で <span style="display:inline-block"> で区切る（例: 「デスクワークの」「肩こり・腰痛、」）
- スマホでは画面の下に「電話する」「Web予約」の2つのボタンを固定表示する（PCでは出さない）。固定ボタンで最後のフッターが隠れないよう、bodyの下に余白をとる
- 電話番号は tel: リンクにする
- 本文の文字は16px以上、ボタンは高さ48px以上

# 文章量
- キャッチコピーは20字以内、サブコピーは40字以内
- 悩みのチェックリストは各項目20字以内
- 施術の流れの各ステップの説明は40〜60字
- 「必ず治る」「改善します」など効果を断定する言い方は使わない

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

見出しは「肩こり・腰痛、／そろそろ整えませんか」と、狙った位置で改行されました。料金の下には「感じ方や経過には個人差があります。」という注記まで入っています。これは頼んでいません。

4回の中で一番効いたのは、この「数字で書く」でした。「大きめに」「短めに」では、ここまで揃いません。

「「スマホで見たらこうなっている」とスクリーンショットを見せながら修正を繰り返す。」 — リベシティ図書館のブログ記事（2026年4月）

ところがPCで見ると、別の崩れが出ていました。1画面目の価格の数字の後ろに、生成り色の四角があります。

原因はクラス名（CSSで見た目を指定するための名前）のかぶりです。料金セクションと1画面目の価格で、同じ名前が使われていました。

仕上げの修正は、作り直さずに頼める？

頼めます。HTMLを貼って3点だけ直すよう頼んだら、変わったのは5か所だけ。ほかは1文字も変わりませんでした。

下のHTMLは整体院のLPです。次の3点だけを直して、修正後のHTML1ファイルの全文だけを返答してください。ファイルには保存せず、説明文も不要です。それ以外のデザイン・文章・構成は変えないでください。

1. ファーストビューの価格「4,980円（税込）」の数字の後ろに、生成り色の四角い背景が出ている。料金セクションの section.price と、ファーストビューの span.price のクラス名がぶつかっているのが原因。ファーストビュー側のクラス名を hero-price に変えて、背景が出ないようにする
2. PC幅（1280px）で、施術の流れのSTEP4の見出し「アフターアドバイス」が「アフターアドバイ / ス」と改行されてしまう。単語の途中で改行しないようにする
3. PC幅（1280px）で、ファーストビューの見出しが「肩こり・腰痛、そろそろ / 整えませんか」と改行される。PCでもスマホと同じく「肩こり・腰痛、 / そろそろ整えませんか」で改行されるようにする

この後ろに、3回目のHTMLの全文を貼りました。返答までは39秒。1280pxで見ると、3点とも直っていました。

「私がやったのは「実行する」ボタンを押すことと、画面を見て「ここの色をもう少し柔らかく」「この文字が大きすぎる」とフィードバックを返すこと。」 — リベシティ図書館のブログ記事（2026年4月）

ただし、タブレット幅（820px）ではSTEP4がまだ「アフターアド／バイス」と割れていました。

Claudeは「1280pxで」を文字どおりに受け取り、1024px以上のときだけ直していたんです。幅は「768px以上のすべてで」のように、範囲で書くのが安全です。

Claudeで作ったLPを、お客さんに見せるには？

HTMLを index.html で保存して、外部のサービスで公開します。Claudeの共有リンクは、見る人にもClaudeアカウントが要るからです。

Anthropicのヘルプでは、2026年9月16日より前にチャットで作ったものを「旧アーティファクト」と呼んでいます。アカウントなしで見られる公開リンクを出せるのは、この旧アーティファクトだけ。今から作るLPでは出せません。

今回のプロンプトなら、返答はHTMLの全文です。テキストエディタに貼って index.html で保存すれば、それがLPの本体になります。

Netlifyの公式ガイドによると、index.html をNetlify Dropのページにドラッグすれば公開できます。

• アカウントが無くても始められる。あとから登録すれば、サイトを自分のものにできる
• フォルダは50MB未満が条件。今回のHTMLは11KB前後なので、十分に収まる

公開前に、自分の目で確かめる所は？

作り話の数字・体験談を消すことと、3つの画面幅で崩れを見ること。この2つは、プロンプトだけでは防げませんでした。

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

画面幅の確認は、Chromeの開発者ツールにある「デバイスモード」でiPhoneの幅を選ぶのが確実です。

実は今回、撮影用のツールが390pxを指定しても500pxで描いていました。おかげで、ありもしない崩れを一度追いかけています。確認に使う道具の設定も、一度は疑ってください。

そのままコピーして使えるLP作成プロンプト

下のプロンプトの院名・料金・色・構成を、自分の案件に差し替えれば使えます。

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

整体院のLPを作ってください。ファイルには保存せず、CSSを含めたHTML1ファイルの全文だけを返答してください（説明文は不要）。

# 院の情報
- 院名: みどり整体院（仮）
- 対象: 30〜50代のデスクワークの人。肩こり・腰痛
- 初回料金: 4,980円（税込・60分）。2回目以降 6,600円（税込・45分）
- 予約: 電話（000-0000-0000）とWeb予約ボタン（リンク先は # のままでよい）

# 構成（この順番で、この5つだけ）
1. ファーストビュー: キャッチコピー、サブコピー、予約ボタン
2. 悩み: 「こんなお悩みありませんか？」チェックリスト5項目
3. 施術の流れ: 4ステップ（受付・問診 → 検査 → 施術 → アフターアドバイス）
4. 料金: 初回と2回目以降の2つ
5. 予約: 電話番号とWeb予約ボタン

# デザイン
- メインカラー: #3A7D6B（落ち着いた緑）
- アクセントカラー（ボタン）: #E8833A（オレンジ）
- 背景: #FAF8F3（生成り）、文字色: #333333
- 写真は使わず、色と余白で見せる。絵文字は使わない

# スマホ表示（いちばん大事。幅390pxのiPhoneで見る前提で作る）
- スマホを基準に作り、768px以上でPC用に広げる（モバイルファースト）
- ファーストビューは390×844pxの1画面の中に、キャッチコピー・初回料金・予約ボタンが全部入るようにする
- 見出しは単語の途中で改行させない。改行させたい位置で <span style="display:inline-block"> で区切る（例: 「デスクワークの」「肩こり・腰痛、」）
- スマホでは画面の下に「電話する」「Web予約」の2つのボタンを固定表示する（PCでは出さない）。固定ボタンで最後のフッターが隠れないよう、bodyの下に余白をとる
- 電話番号は tel: リンクにする
- 本文の文字は16px以上、ボタンは高さ48px以上

# 文章量
- キャッチコピーは20字以内、サブコピーは40字以内
- 悩みのチェックリストは各項目20字以内
- 施術の流れの各ステップの説明は40〜60字
- 「必ず治る」「改善します」など効果を断定する言い方は使わない

崩れが出たら、次の型で頼みます。1項目ごとに「どの幅で・どこが・どう崩れたか・分かれば原因・どうしたいか」を書くと伝わります。

下のHTMLは〇〇のLPです。次の3点だけを直して、修正後のHTML1ファイルの全文だけを返答してください。ファイルには保存せず、説明文も不要です。それ以外のデザイン・文章・構成は変えないでください。

1. （どの幅で）（どこが）（どう崩れているか）。（分かれば原因）。（どうしたいか）
2. …
3. …

この文の後ろに1行空けて、直したいHTMLの全文を続けて貼ってください。

よくある質問

Q. Claudeの無料プランでも、同じことができますか？

• できます。Freeプランでも、Claudeが作るまとまったページ（アーティファクト）は使えます
• 設定の「Capabilities」で「Cloud code execution and file creation」をオンにしておきます
• 料金は2026-10-15時点で、Freeが$0。Proは月払いで$20、年払いなら月$17です（$200の前払い・税別）
• Proは、5時間ごとに使える量がFreeの5倍以上
• あなたが1案件で修正を何往復もするなら、Proが合います。月1本試すくらいならFreeで足ります

Q. Claude Codeが無いと、この手順は再現できませんか？

• チャット画面に同じプロンプトを貼っても、同じ考え方で進められるはずです（今回はチャット画面では試していません）
• Claude CodeはFreeプランには含まれません（Pro以上）
• 今回Claude Codeを使ったのは、記録を取りやすかったからです。仕上げまでの手順も、チャットで同じように進められるはずです

Q. AIが入れた実績やお客様の声は、そのまま使えますか？

• 使わないでください。今回のv1にも、架空の施術歴や体験談が入っていました
• 実在するお客様の声と、根拠のある数字に差し替えます
• 最初から入れさせたくないなら、プロンプトに「店の情報に無い実績・資格・お客様の声は書かない」と足します

この記事のまとめ

• 最初に「HTML1ファイルの全文だけを返して」と書く。書いた4回とも、HTMLだけが返ってきた
• 一行だけで頼むと、セクション・実績・体験談を盛られる。構成は「この5つだけ」と区切る
• 色はコード、スマホのルールは数字で書く。数字で書いた条件は全部守られていた
• 仕上げは作り直さず「この3点だけ直して」。幅は「768px以上のすべてで」のように範囲で書く
• 公開はHTMLを index.html で保存し、Netlify Dropへ。その前に、390・820・1280pxの3つの幅で画面を見る

次にやることは1つです。上の完成プロンプトの「# 院の情報」を手元の案件に書き換えて、まず1回流してみてください。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。