AIにLPを書かせたあと、意外と手が止まるのが「人に見せる」段階です。
HTMLファイルはできています。
ただ、サーバーを契約するのか、ドメインを取るのか、GitHubへ置くのかを考え始めると、試作品を見せるまでの距離が急に伸びます。
その段階では、公開先を長期運用のために決め切る必要はありません。
Cloudflare Dropを使うと、index.htmlを含むフォルダまたはZIPファイルをブラウザへドラッグ&ドロップするだけで、公開URLを作れます。
元になったShortsでは、この流れを実演しました。
まずは「見せるための公開」を作る#
Cloudflare Dropへ渡せるのは、HTML、CSS、JavaScriptでできた静的サイトです。
たとえば、AIに作ってもらった1ページのLP、料金表、申し込み前の画面案などがそのまま対象になります。
フォルダの中には、入口になる index.html を入れておきます。
my-lp/
├── index.html
├── style.css
└── app.jsこのフォルダかZIPファイルをCloudflare Dropへ置くと、Cloudflareのネットワークへ配信され、workers.devのURLが発行されます。
この時点では、アカウントを作らずに始められます。
「この画面を誰かに見せて反応を聞きたい」という段階なら、公開先の比較より先にURLを渡せます。
URLは60分後に消える#
Dropで作った公開URLは、何もしなければ60分後に失効します。
これは欠点にも見えますが、作りかけの画面を短時間だけ共有したいときには、むしろ扱いやすい条件です。
たとえば、次の用途です。
- 知人へLPの第一印象を聞く
- 商談や打ち合わせの前に画面案を渡す
- AIが作った画面をスマートフォンで確認する
- チームへ「ここまで作れた」を共有する
残したい公開になったら、発行時に表示されるClaim用のURLを使ってデプロイを自分のアカウントへ引き取ります。
Claim用URLは公開URLそのものではなく、デプロイの所有権を取るためのリンクです。
他人へ渡さず、60分以内に自分で処理します。
Claude CodeやCodexなら、公開もコマンドでできる#
ブラウザを開かずに、AIエージェントと作ったフォルダをそのまま公開したい場合は、Wranglerを使えます。
Cloudflare公式の案内では、未認証のローカル環境から一時公開する例として次のコマンドが示されています。
npm exec --yes wrangler@latest -- deploy ./dist --name my-static-site --temporary --compatibility-date 2026-08-13./dist は、公開したい静的ファイルのフォルダに置き換えます。
その中に index.html が必要です。
my-static-site は、公開用の名前です。
実行後は公開URLとClaim用URLが返ります。
Claude CodeやCodexへ渡すなら、「完成した静的ファイルが入ったフォルダを、このコマンドで一時公開して。公開URLとClaim用URLを返して」と依頼すれば足ります。
ただし、すでにCloudflareへログイン済みのWrangler環境では --temporary を付けません。
その場合は、通常の wrangler deploy で自分のCloudflareアカウントへ公開します。
一時公開と、アカウント管理下の本番公開は同じものではありません。
誰かに試してもらうためのURLなのか、継続して運用するプロダクトなのかで、使い分けます。
公開前に確認するのは、見た目だけではない#
Dropは、サーバー側の処理を実行する場所ではありません。
ログイン、データベース、秘密情報を使う処理がある場合は、HTMLを置くだけでは動きません。
また、画面にAPIキーや管理用の情報を直接書いて公開することも避けます。
まずは、次の範囲に絞ると安全です。
- HTML、CSS、JavaScriptだけで表示できる画面
- 実際の顧客情報を含まないデモ
- 公開しても問題ない画像と文章
- URLを知っている人に短時間見せる試作品
AIにLPを作らせると、完成した気持ちになりやすいです。
しかし、スマートフォンで開き、誰かにURLを渡し、何が伝わらなかったかを聞いたときに、初めて次に直す場所が見えます。
サーバーやドメインの準備が理由でそこへ進めないなら、最初はDropで十分です。
長く残したいと決まった後に、Claimして自分のアカウントへ引き取り、ドメインやデプロイの仕組みを整えます。

![[全文公開] 生成AIのレスポンシブUXの話](https://images.tnihei.com/posts/n53c914fa6203/featured-auto.jpg)


