未ログイン状態で閲覧中
  • 投稿日:2026/04/30
ChatGPTで作ったLPをClaude Codeで本物のHP化+Cloudflare無料公開

ChatGPTで作ったLPをClaude Codeで本物のHP化+Cloudflare無料公開

  • 1
  • -
ひろ@Youtube

ひろ@Youtube

この記事は約10分で読めます
要約
ChatGPTでLPは作れたのに、本物のホームページにして公開する方法が分からず止まっていませんか?Claude Codeに丸投げプロンプトを投げるだけで、HTML作成からCloudflare Pages公開まで全自動。月額0円で実現する全手順をまとめました。

1. はじめに

こんにちは、ひろです。
非エンジニアとしてClaude Code/AI活用を発信しています。

朝のリベシティライブで紹介されていた「ローカル事業者へのHP営業」、試してみようとした方、こんなところで止まっていませんか?

・Googleマップで近所の高評価×ホームページが弱いお店を見つけた
・ChatGPTで会社概要からLP(ランディングページ)案まで作れた
・でも、ここからどうやって本物のホームページにして、営業先に渡せばいいの?

僕も同じところで止まりました。
LP案はあるけど、それは「テキストの設計図」であって、営業先に「これがあなたのHPですよ」と渡せるURLではないんです。

ホームページ制作を外注に出すと、相場は1ページで5万円〜30万円。月額管理費もかかります。
営業先に渡す「サンプルHP」のためにそれを払うのは、現実的じゃありません。

この記事で紹介する ChatGPT × Claude Code × Cloudflare Pages の組み合わせなら、これが全部解決します。

・Claude Codeに丸投げプロンプトを投げるだけで、本物のHTMLホームページが完成
・そのままCloudflare Pagesにデプロイまで全自動(月額0円)
・営業先に渡せる公開URL(https://〜.workers.dev)が手に入る
・修正もClaude Codeに頼めばOK
・コードは1行も書かない

僕自身、この方法で水道工事店のサンプルHPを作って、営業に使えるようになりました。
今日はその全手順を、コピペで使える丸投げプロンプト付きで全公開します。

2. これができるようになります

ChatGPT Image 2026年4月30日 16_46_22.png完成すると、こうなります。

・営業先に渡せる公開URL: `https://○○○.あなたのアカウント名.workers.dev`
・スマホ・タブレット・PC対応のレスポンシブデザイン
・写真はプレースホルダ画像(後で差し替え可能)
・修正したくなったらClaude Codeに「ここをこう直して」と頼めばOK

例えばこんな営業の流れができます。

・「○○工事店さんのホームページのサンプルを作ってみました」とメール送信
・URLをクリックしてもらえば、その場で完成形を確認してもらえる
・気に入ってもらえれば、写真を差し替えて納品 → 制作費を請求

所要時間は1件あたり30分以内(Claude Codeへのプロンプト送信から公開URLが出てくるまで)。

3. なぜCloudflare Pagesなのか

ChatGPT Image 2026年4月30日 16_46_28.pngホームページの公開先を比較するとこうなります。

Cloudflare Pagesがダントツでおすすめな理由は3つあります。

① Claude Codeとの相性が抜群

Claude CodeはCloudflareへのデプロイ手順を熟知しています。
「Cloudflare Pagesにデプロイして」と頼むだけで、必要なツールのインストールから認証、デプロイまで全部やってくれます。

② 月額0円・クレカ登録不要

メールアドレスだけでアカウント作成できます。
営業用サンプルを10件・20件と量産しても、課金される心配なし。

③ 公開URLがすぐもらえる

デプロイが完了した瞬間に `https://〜.workers.dev` の公開URLが発行されます。
そのまま営業メールに貼り付けて送れる手軽さです。

4. 必要なもの

準備するのはこの3つです。

・Claude Code(インストール済み・有料プラン推奨)
・Cloudflareアカウント(次のステップで作成、無料)
・ChatGPTで作ったLP案

LP案がまだない方は、後ろの「STEP 1」で作り方を解説します。
Claude Codeを使ったことがない方は、まずClaude Code公式サイトでインストールしておいてください。

5. 全体の流れ(3ステップ・30分)

ChatGPT Image 2026年4月30日 16_57_41.png```
[STEP 1] ChatGPTでLP案を作る(10分)

[STEP 2] Cloudflareアカウント作成(5分)

[STEP 3] Claude Codeに丸投げプロンプト(15分・ほぼ待つだけ)

🎉 営業先に渡せる公開URLが完成
```

合計30分程度で完了します。

6. 手順

STEP 1. ChatGPTでLP案を作る

すでにLP案がある方はSTEP 2に進んでください。

1-1. ターゲット事業者を見つける

Googleマップで以下の条件のお店を探します。
・自宅から半径5km圏内
・口コミ評価4.0以上
・ホームページがない or ホームページが古い/弱い

朝のリベシティライブでも紹介されていた狙い目の業種は以下です。

・水道工事店
・工務店
・電気工事店

これらの業種は「腕は確かだけど、Web集客が苦手」というお店が多く、HPサンプルを見せると刺さりやすい傾向があるようです。

1-2. ChatGPTでLP案を生成

ChatGPTに以下のように依頼します。

```
○○県○○市にある「△△水道工事店」のランディングページ(LP)案を作ってください。
情報源:(Googleマップの店舗情報URL or 口コミから読み取った内容)
```

1-3. LP案をファイルに保存

ChatGPTの出力をコピーして適当なフォルダ(例:`~/Documents/HP営業/水道工事店`)を作って、その中に置いておきます。

このフォルダで後ほどClaude Codeを起動します。

STEP 2. Cloudflareアカウントを作る

SCR-20260430-plhq.png1番上のContinue with Googleがおすすめです。クリックして指示に従っていくと、登録を進められます。

クレカ登録は不要です。完了するとダッシュボードが開きます。

このアカウントは1回作れば、何件HPを作っても使い回せます。

STEP 3. Claude Codeに丸投げプロンプト

ここが本記事の核心です。

3-1. Claude Codeで作業フォルダを開く

LP案ファイルを置いたフォルダをClaude Codeに連絡します。


3-2. 丸投げプロンプトを投げる

以下をそのままコピペして、Claude Codeに送信してください。

```
このフォルダのLP案を元に、本格的なホームページを作って、Cloudflare Pagesにデプロイしてください。

営業先(水道工事店)に「こういうHPいかがですか」と見せるサンプルです。信頼感のあるシンプルなデザインで、スマホでも見やすくお願いします。
```

7. ハマりどころ

ChatGPT Image 2026年4月30日 19_50_48.png実際にやってみて、つまずきやすかったポイントを4つ紹介します。

ハマりどころ① LP案が抽象的すぎると微妙なHPになる

ChatGPTに「LP作って」とだけ頼むと、汎用的すぎる文章しか出てきません。
具体的な店名・所在地・口コミ内容を含めた情報を渡すと、ChatGPTもいいLPを作ってくれます。

特に「お客様の声」は、Googleマップの実際の口コミから抜粋して入れると説得力が出ます。

ハマりどころ② Claude Codeが途中で止まる場合

長いプロンプトを一気に処理しようとすると、Claude Codeが途中で止まることがあります。
そんなときは「続けて」と一言入れると、続きから作業してくれます。

ハマりどころ③ wrangler login の認証画面を見逃す

`npx wrangler login` を実行するとブラウザが自動で開きますが、別ウィンドウで開いて見逃すことがあります。
Claude Codeが「認証してください」と止まっていたら、ブラウザのタブ一覧をチェックしてください。

8. 料金の現実

ChatGPT Image 2026年4月30日 17_29_57.png「全部AI任せで本当に無料?」と思うかもしれません。実際の料金を整理します。

結論:すでにClaude CodeとChatGPTを使っている人なら、追加費用ゼロでHP営業を始められます。

営業が成約したらどうする?

「気に入ったので正式に納品してほしい」と言われたら:

・写真を実際の店舗写真に差し替え
・電話番号・メールアドレスを実物に変更
・独自ドメイン(例:`suidou-tanaka.com`)を取得して紐付け
・制作費を請求(相場は5万〜10万円)

これも全部Claude Codeに頼めます。

9. 応用編:自分専用のWebアプリも作れる

この方法はホームページ以外の応用もできます。

たとえば

・自分の家計簿アプリを作って自分専用に公開
・読書ログアプリを家族と共有
・営業先リスト管理アプリを自分だけアクセス可能で公開

「自分(や家族)だけがアクセスできるWebアプリ」を作りたい場合は、Cloudflare Workers + Cloudflare Accessという別の組み合わせが必要です。

詳しい手順は前記事「【無料・自前運用】自作Webアプリを月額0円でクラウド公開【Cloudflare 30分手順】」にまとめています。
あわせて読むと、「公開HP(Pages)」と「自分専用アプリ(Workers+Access)」を使い分けられるようになります。
※現在作成中です。

10. Q&A

Q:本当にコードを1行も書かなくていいの?
A:はい。Claude Codeが全部書きます。読者は「丸投げプロンプト」をコピペして、確認ボタンを押すだけです。

Q:営業先にどうやって渡せばいい?
A:メールに公開URLを貼って送るのが一番シンプルです。「○○様のホームページのサンプルを作りました。一度ご覧ください:https://〜」

Q:URLが「workers.dev」だと営業先に怪しまれない?
A:「サンプル版なので一時的なURLです。本契約後に独自ドメインに切り替えます」と伝えればOKです。実際それが事実なので問題ありません。

Q:HPの内容を修正したくなったら?
A:Claude Codeに「『お客様の声』のセクションをこの内容に差し替えて、もう一度デプロイして」と頼めば、修正版が同じURLで公開されます。

Q:公開を止めたくなったら?
A:Cloudflareダッシュボード → Workers & Pages → 該当プロジェクトを削除すればOKです。

Q:ChatGPTじゃなくてClaude(チャット版)でLP案を作ってもいい?
A:はい、問題ありません。Geminiでも同じです。LP案はテキストとして読み込めればなんでもOKです。

Q:1日で何件のHPを作れる?
A:慣れれば1件30分なので、1日に5〜10件は現実的です。営業の歩留まりが10%なら、月20件契約も狙えます。

Q:制作費の相場は?
A:1ページの長尺LP形式なら5万〜10万円、複数ページなら10万〜30万円が目安です。月額管理費(修正対応・サーバー代)として月3,000〜5,000円を別途いただくのも一般的です。

11. あとがき

この記事は、朝のリベシティライブで紹介されていた「ローカル事業者HP営業」を実際に試行錯誤した結果のまとめです。

「LPは作れたけど、その先が分からない」という壁は、僕も最初にぶつかりました。
でも、Claude Codeに丸投げするという発想に切り替えた瞬間、一気に景色が変わりました。

特にCloudflare PagesがClaude Codeとの相性が抜群で、HTMLの作成からデプロイまで本当に1つのプロンプトで完結します。
これは外注に出すと10万円以上かかる作業を、月額0円・30分で実現できる威力があります。

最初の1件を作ってみると、感覚がつかめます。
ぜひ、自分の住んでいる街で「Googleマップ高評価×HP弱い」のお店を1軒だけでも探して、試してみてください。

僕は水道工事会社のホームページを作って、早速メールしてみましたが、まだ返信は来てないです笑

もし営業が成約したら、その体験談をリベシティで共有しますね。

※本記事の内容は2026年4月時点の情報です。
※Cloudflare PagesおよびClaude Codeの仕様は変更される可能性があります。最新情報は各公式ドキュメントを参照してください。

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

ひろ@Youtube

投稿者情報

ひろ@Youtube

イルカ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(0

まだレビューはありません