Webサイトは、AIを使えば作れる時代になりました。
それでも、作ったページをインターネットへ公開する段階になると、サーバー契約、GitHub、ドメイン設定、ビルド設定といった聞き慣れない言葉が一気に増えます。 「ページはできたのに、公開方法が分からない」という人も少なくありません。
そこで注目したいのが、Cloudflareが2026年7月8日に公開したCloudflare Dropです。
Cloudflare Dropでは、HTML、CSS、JavaScript、画像などが入ったフォルダまたはZIPファイルをアップロードするだけで、一時的な公開URLを発行できます。 最初の表示確認にはCloudflareアカウントも必要ありません。
この記事では、Claude CodeまたはCodexのデスクトップアプリでWebサイトを作り、Cloudflare Dropで公開するまでの流れを、非エンジニア向けに解説します。
Cloudflare Dropでできること
- Claude CodeまたはCodexのデスクトップアプリで静的Webサイトを作る
- 完成したフォルダをCloudflare Dropへアップロードする
- アカウントなしで1時間有効の公開URLを発行できる
- 公開を続けたい場合は、1時間以内に「Claim」してCloudflareアカウントへ紐づける
- WordPress、会員登録、データベースなどを使うサイトは対象外と考える
- 患者情報、顧客情報、APIキーをWebサイトのファイルへ入れない
今回の方法は、サービス紹介ページ、イベント告知、ポートフォリオ、採用ページ、クライアント確認用の試作品などに向いています。
Cloudflare Dropとは
Cloudflare Dropは、静的なWebサイトのファイルをドラッグ＆ドロップで公開できるCloudflareのサービスです。
Cloudflareの公式発表では、次のファイルを含むフォルダまたはZIPファイルをアップロードできると案内されています。
- HTML
- CSS
- JavaScript
- 画像
- フォント
アップロードが完了すると、サイトを確認できる一時的なURLが発行されます。 このURLは1時間有効で、その間に表示確認や関係者への共有ができます。
公開を続ける場合は「Claim」を選択し、Cloudflareへログインするか、新しいアカウントを作成します。 Claim後は、独自ドメインの接続、利用状況の確認、閲覧者の制限などを設定できます。
Cloudflare Dropの最新情報は、Cloudflare公式の発表で確認できます。
Cloudflare PagesのDirect Uploadとの違い
Cloudflareには以前から、Cloudflare Pagesへファイルを直接アップロードする「Direct Upload」があります。
両者は似ていますが、Cloudflare Dropはアカウントを作る前に1時間の公開プレビューを試せることが大きな特徴です。 一方のPages Direct Uploadは、Cloudflareのダッシュボードでプロジェクトを作成してからアップロードします。
Cloudflare Pagesと一般的なレンタルサーバーの違いは、レンタルサーバーとCloudflare Pagesの違いを解説した記事も参考にしてください。
Cloudflare Dropで公開しやすいサイト
Cloudflare Dropが得意なのは、閲覧時にサーバー側の処理を必要としない静的サイト（あらかじめHTMLなどを用意して配信するサイト）です。
たとえば、次のような用途があります。
- 会社や店舗の簡易ホームページ
- サービス紹介用のランディングページ
- セミナーや勉強会の告知ページ
- 採用ページ
- ポートフォリオ
- クライアントへ確認してもらうデザイン案
- 社内向けマニュアルや案内ページ
反対に、次のような機能はフォルダをアップロードするだけでは動きません。
- WordPress
- PHPなどのサーバーサイド処理
- 会員登録やログイン
- データベースへの保存
- 決済
- 管理画面
- メール送信を伴う問い合わせフォーム
ReactやViteなどで作ったサイトは、開発中のソースコードではなく、ビルド後に作られるdistなどの公開用フォルダをアップロードします。
Cloudflare Dropへアップロードするサイトを用意する
Cloudflare Dropは、完成したWebサイトのファイルを公開するサービスです。 Cloudflare Dropの画面内でWebサイトを作るわけではないため、HTML、CSS、画像などのファイルは先に用意します。
この記事では、公開用ファイルの作成にClaude CodeまたはCodexを使います。 どちらも指定したフォルダ内のファイルを作成し、必要に応じて修正できます。 完成したサイトは、そのフォルダのままCloudflare Dropへアップロードできます。
デスクトップアプリとターミナル版の違い
Claude CodeとCodexには、デスクトップアプリとターミナル版があります。
デスクトップアプリでは、作業用フォルダを画面で選び、チャット欄へ日本語で依頼できます。 初めて1ページ構成の静的サイトを作る場合は、フォルダと会話の内容を画面で確認できるデスクトップアプリが使いやすいでしょう。
ターミナル版は、コマンド操作に慣れている人や、Gitで変更履歴を残しながらビルドやテストまで実行したい人に向いています。
Claude CodeやCodexが通常のチャット型AIと何が違うかは、CodexとClaude Codeでホームページや社内ツールを作る方法で詳しく解説しています。
以降の手順ではデスクトップアプリを使います。 ターミナル版を選んでも、完成したフォルダをCloudflare Dropへアップロードする流れは変わりません。
Webサイトを作り、Cloudflare Dropで公開する4ステップ
空のフォルダを用意し、Claude CodeまたはCodexでサイトを作り、完成したファイルをCloudflare Dropへアップロードします。
ステップ1：Webサイト用の空フォルダを作る
MacならFinder、Windowsならエクスプローラーで、新しい空フォルダを作ります。
フォルダ名は、半角英数字とハイフンで付けると管理しやすくなります。
sample-company-site
今回は、ビルド作業を必要としない次のような構成を目指します。
sample-company-site/
├── index.html
├── style.css
├── script.js
└── images/
トップページとなるindex.htmlが、フォルダの一番上にあることがポイントです。
ステップ2：Claude CodeまたはCodexでフォルダを開く
Claude CodeまたはCodexのデスクトップアプリを起動し、先ほど作ったフォルダを作業対象として開きます。
最初は、既存の業務ファイルが入っていない空フォルダを使うと安全です。 アプリからファイル編集やコマンド実行の許可を求められた場合は、表示内容と対象フォルダを確認してから許可します。
Claude Codeの権限設定や注意点は、Claude Codeのセキュリティ判断基準も確認してください。
ステップ3：作りたいサイトを日本語で伝える
以下の依頼文は、Claude CodeとCodexのどちらでも利用できます。 角括弧の部分を、自分の事業やサービスに置き換えてください。
このフォルダ内に、Cloudflare Dropで公開できる静的Webサイトを作成してください。
【目的】
[サイトを作る目的]
【想定する閲覧者】
[顧客、求職者、イベント参加者など]
【掲載する内容】
[事業内容、料金、アクセス、問い合わせ先など]
【デザイン】
[希望する色、雰囲気、参考サイトなど]
【実装条件】
- index.htmlをフォルダの一番上に配置する
- HTML、CSS、JavaScriptだけで動作させる
- ビルド処理やサーバー処理を使用しない
- パソコンとスマートフォンの両方に対応する
- title、description、OGP（SNSで共有されたときのタイトルや画像の設定）を設定する
- 画像やCSSのリンク切れがないことを確認する
- APIキー、パスワード、個人情報を含めない
- 作成後にローカルで表示を確認する
最初から細かなデザインをすべて指定する必要はありません。 AIが作ったページを見てから、次のように修正を依頼できます。
- 「スマートフォンで文字を読みやすくしてください」
- 「お問い合わせボタンをもう少し目立たせてください」
- 「薬局らしい清潔感は残しつつ、病院のように堅すぎないデザインにしてください」
- 「専門用語を減らし、初めて利用する人にも分かる文章にしてください」
- 「公開前に、リンク切れと表示崩れをもう一度確認してください」
ステップ4：Cloudflare Dropへアップロードする
サイトが完成したら、Cloudflare Dropを開きます。
- WebサイトのフォルダまたはZIPファイルをアップロードする
- 発行されたURLを開く
- パソコンとスマートフォンで表示を確認する
- 必要に応じて関係者へURLを共有する
- 公開を続ける場合は、1時間以内に「Claim」を選ぶ
- Cloudflareへログインするか、アカウントを作成する
- 必要に応じて独自ドメインを接続する
一時URLは1時間で期限が切れます。 残したいサイトは、表示確認が終わった段階でClaimまで進めてください。
公開前にAIへ確認させるプロンプト
Cloudflare Dropへアップロードする前に、次の確認を依頼するとミスを減らせます。
Cloudflare Dropへアップロードする前に、このフォルダ全体を確認してください。
【確認項目】
- index.htmlがフォルダの一番上にある
- パソコンとスマートフォンで表示できる
- CSS、JavaScript、画像のリンク切れがない
- すべてのボタンとリンクが意図した場所へ移動する
- title、description、OGPが設定されている
- APIキー、パスワード、個人情報が含まれていない
- 未完成の文章やダミーテキストが残っていない
- 外部へ公開してよい内容だけで構成されている
問題があれば修正し、変更したファイルと確認結果を報告してください。
AIの「問題ありません」という報告だけで公開を決めず、最後は自分でも画面と掲載内容を確認します。
うまく表示されないときの確認ポイント
トップページが表示されない
index.htmlがアップロードしたフォルダの一番上にあるか確認します。
ZIPファイルの中に同じ名前のフォルダがもう一つ入っていると、階層が深くなっている場合があります。
CSSや画像が反映されない
MacやWindows内の絶対パスを指定していないか、ファイル名の大文字と小文字が一致しているかを確認します。
<!-- 避けたい例 -->
<img src="/Users/example/Desktop/photo.jpg" alt="店舗写真">
<!-- フォルダ内の相対パスを使う例 -->
<img src="./images/photo.jpg" alt="店舗写真">
ReactやViteのサイトが動かない
プロジェクトのソースフォルダではなく、npm run buildなどで生成された公開用フォルダをアップロードします。
どのフォルダを使えばよいか分からない場合は、AIへ「Cloudflare Dropへアップロードするフォルダを教えてください」と確認できます。
問い合わせフォームから送信できない
HTMLでフォームの見た目を作るだけでは、メール送信やデータ保存はできません。 フォームサービス、Cloudflare Workers、別のAPIなどが必要です。
医療、介護、薬局のサイトで注意すること
操作が簡単でも、公開する情報の扱いは簡単に考えてはいけません。
特に医療、介護、薬局のサイトでは、次の点を確認します。
- 患者名、利用者名、連絡先、病歴、処方内容をAIへ入力しない
- Webサイトのファイル内に患者情報や顧客情報を保存しない
- JavaScriptへAPIキー、パスワード、秘密情報を書かない
- 患者・利用者の個人情報や健康情報を受けるフォームは、保存先や権限を決めずに設置しない
- 個人情報を受ける場合は、利用目的と取扱方針を明示する
- AIが作った医療表現、広告表現、料金、所在地は人が確認する
- 医療広告ガイドラインや医薬品医療機器等法の対象となる表現は、公開前に内容に応じた確認を行う
静的サイトのHTMLやJavaScriptは、閲覧者のブラウザへ配信されます。 画面上で見えにくくしても、コードの中に書いた秘密情報は隠せません。
Cloudflare Dropが向いている人と別の方法がよい人
Cloudflare Dropが向いている人
- AIで初めてWebサイトを作る
- まずは試作品をインターネット上で確認したい
- イベントやサービスの1ページを短期間で用意したい
- GitHub連携やCLIの設定をせずに公開体験をしたい
- クライアントやスタッフへ確認用URLを共有したい
GitHub連携や本格的なWeb制作が向いている人
- Webサイトを頻繁に更新する
- 複数人で変更履歴を管理する
- 問い合わせ、予約、ログインなどを実装する
- 自動デプロイやテストを整えたい
- 企業サイトとして長期運用する
Cloudflare Dropは「作ったサイトを初めて公開する」ハードルを大きく下げます。 一方、長期運用では、更新方法、バックアップ、セキュリティ、問い合わせ対応まで含めた設計が必要です。
ターミナルから使いたい場合
Claude CodeとCodexは、ターミナルからも利用できます。
CLI（コマンドを入力して操作する画面）は、複数サイトの管理、Gitによる変更履歴、ビルドやテストの自動化まで行いたい場合に便利です。 ただし、初めて静的サイトを作ってCloudflare Dropで公開する段階では、デスクトップアプリだけでも十分です。
まずデスクトップアプリで制作と公開の流れを体験し、必要になってからCLIやGitHub連携へ進むと、学ぶ目的を見失いにくくなります。
よくある質問
Cloudflareアカウントがなくても使えますか？
一時的な公開プレビューを始める段階では、Cloudflareアカウントは必要ありません。 公開を1時間より長く維持する場合は、ClaimしてCloudflareアカウントへ紐づけます。
公開URLはいつまで使えますか？
Claimする前の一時URLは1時間有効です。 表示確認後もサイトを残したい場合は、期限内にClaimしてください。
WordPressも公開できますか？
WordPressはPHPやデータベースを使用するため、WordPress一式をそのままCloudflare Dropへアップロードする方法には向きません。 静的HTMLとして出力したサイトであれば公開できる可能性があります。
Claude CodeとCodexはどちらがおすすめですか？
どちらもローカルフォルダのファイルを作成・修正できます。 普段Claudeを利用している人はClaude Code、ChatGPTを利用している人はCodexから試すと始めやすいでしょう。 Cloudflare Dropへアップロードする手順は同じです。
問い合わせフォームは設置できますか？
フォームの画面は作れますが、送信や保存には別のサービスまたはサーバー側の処理が必要です。 個人情報を扱う場合は、保存先、通信、権限、プライバシーポリシーまで含めて設計してください。
公開後に修正できますか？
元のフォルダをClaude CodeまたはCodexで修正し、再度デプロイする流れになります。 Cloudflare Dropは公開直後のサービスであるため、Claim後の再アップロード手順や管理画面は、利用時点のCloudflare公式画面で確認してください。 頻繁に更新する場合は、GitHub連携やWranglerを使った運用も検討します。
Cloudflare Dropで小さな公開から始める
Claude CodeやCodexによって、コードを書けない人でもWebサイトの形を作りやすくなりました。 Cloudflare Dropは、そのサイトをインターネットへ公開するまでの手順を、フォルダのアップロードまで短縮します。
最初から大規模な企業サイトを作る必要はありません。
まずはサービス紹介、イベント告知、採用案内など、内容を自分で確認できる1ページのサイトから試してみてください。 デスクトップアプリでフォルダを開き、日本語で指示し、Cloudflare Dropで表示を確認する。 この小さな一周が、AIを「相談相手」から「一緒に制作する実務担当」へ変える第一歩になります。
