CloudflareにHTMLファイルなどをブラウザでアップロードしてWebサイトとして公開する

Cloudflareには、HTML・CSS・JavaScriptなどの静的ファイルをブラウザからそのままアップロードして、Webサイトとして公開できる機能がある。

このハンズオンでは、Claude Codeで作ったHTMLファイルやWebアプリをCloudflareにアップロードし、実際にインターネットへ公開するところまでを体験する。

1. アカウント作成から公開まで一気に体験する

Cloudflare サイトトップ

1-1. Cloudflareアカウントを作る

• Cloudflareのサイトにアクセスして、右上の ログイン → Sign up（サインアップ）
• Googleアカウントがあればそれでサインアップすると楽

Googleアカウントで登録

1-2. アップするファイルを準備する

Finderで ~/Desktop/claude フォルダ（なければ作る）の中にWebサイト用フォルダ（例えば sup）を作る。

~/Desktop/claude は「ホームフォルダ → デスクトップ → claude」と辿った場所のこと。~ はホームフォルダ（Finder で 移動 → ホーム から開けるフォルダ）、/ はフォルダの区切り。

Claudeデスクトップアプリを起動。

Code（Claude Code）を選択 → New session をクリック → フォルダ sup を指定（~/Desktop/claude/sup）

macOS の設定によってはデスクトップフォルダが開けないことがある。その場合は /Users/ユーザー名/ 直下にフォルダを作成して進めてください。

下記のプロンプトを実行する:

Claudeへの指示

public/index.html を作って。
Hello World と表示するだけのシンプルなHTML。

本サイトは、基本的にWeb公開するファイルを public フォルダの下に置く方針。公開専用フォルダに分けることで余計なものがアップロードされる事故が防げる。また主要なWeb系ツールでも public フォルダに公開用ファイルを入れるのが標準的な作法になっている。

なお、途中でファイル操作の許可を求められることがあるので、その都度許可する。

Claudeデスクトップアプリの右上の ビューメニュー → ファイル で public フォルダとその下の index.html が生成されていることを確認する。

Claudeデスクトップアプリのファイル表示

1-3. Cloudflareにアップロードして公開する

⚠️ Cloudflareの管理画面にアクセスしたら、最初にChromeの自動翻訳をオフにすること。サービス名（例：Workers）が「従業員」のように直訳されるなど、UI全体が直訳調になって読みづらいため。Chromeの右上の ︙（メニュー） → 翻訳 → 表示されたポップアップの ︙ → このサイトは翻訳しない。それでもメニューに日本語が表示される場合は、Cloudflareのダッシュボードの右上の 👤 アイコン → 言語 → English。

• Cloudflareのダッシュボードの左メニューの Compute → Workers & Pages をクリック
• 右上にある Create application をクリック
• 下にある目立たない Get started をクリック

Create application

• Drag and drop your files の Get started をクリック

Get started

• Project name に好きなプロジェクト名（例：thisisapen）を入れて Create project をクリック

入力欄の直下に割り当てられるURLが表示される。thisisapen.pages.dev のように入力した名前がそのままならば競合なし。thisisapen-abc.pages.dev のように末尾に文字が付く場合はすでに thisisapen.pages.dev が使われているので、別の名前に変えてもよい。

Create project

• Drag to upload と書かれたエリアに、sup フォルダの中の public フォルダをドラッグ＆ドロップする

ドロップするのは public フォルダ（index.html が直接入っているもの）。上の階層の sup や claude フォルダをドロップすると、公開構成が崩れて意図したページが表示されない。

Drag to upload

• アップロードが完了したら Deploy site をクリックする

Deploy site

• デプロイ（本番環境への公開・反映）が終わって表示されるページの上部に公開URLが出る。URLの形式は https://プロジェクト名.pages.dev となる

公開URLの確認

• そのページに行ってみると、Hello World! と表示されているのが確認できる

なお、ドラッグ＆ドロップの際は、必ずフォルダごとアップロードすること。 画像ファイルもアップできるのでWebサイトがまるっとホスティングできる。

1-4. サイトを更新する

ファイルを更新して、サイトを更新する。

まず、Claude Codeの先ほどのセッションで下記のプロンプトを実行して、public/index.html を更新する。

Claudeへの指示

文字を大きくして、中央に寄せて

そして、フォルダ public ごとアップロードしてデプロイする。

• Cloudflareのダッシュボードの左メニューの Compute → Workers & Pages と進み、プロジェクト名（例：thisisapen）をクリック

Project を選ぶ

• プロジェクトページの右上の Create deployment ボタンをクリック

Create deployment

• アップロードのページが開くので、またそこに public フォルダをドラッグ＆ドロップ

Drag to upload

• Save and deploy をクリックすれば完了。公開ページ（https://プロジェクト名.pages.dev）を確認する

更新時の注意:

• これまでのファイルは消えて、新たにアップロードしたものが入る
• 過去のものにロールバックはできる（プロジェクトページのタブ Deployments をクリック）

2. Webアプリを作って公開する

引き続き 1-2 と同じ Claude Code セッションで作業し、public/index.html を上書きする形で依頼する。

別のフォルダで作業したい場合は、新しいフォルダを作って Claude Code で新しいセッションを開く（1-2 と同じ要領）。

プロンプト例:

Claudeへの指示

HTML+JavaScriptでポモドーロタイマーを作って！
public/index.html 1ファイルで作って。

Claudeへの指示

複利計算機をHTML+JavaScriptで作って！
構成はHTMLファイル(public/index.html)が1つ。

Claudeへの指示

最大60秒のカウントダウンタイマーをHTML+JavaScriptで作って！
秒数を入力してスタート・リセットできるようにしたい。
HTMLファイル1つ（public/index.html）にまとめて。

Claudeへの指示

TODOリストをHTML+JavaScriptで作って！
項目の追加・削除ができて、ページを閉じても消えないようにしたい。
public/index.htmlに書いて。ファイルは1つで。

Claude Codeで複利計算機を作成

完成したら「1-3. Cloudflareにアップロードして公開する」の手順でデプロイして、公開URLで確認する。

作例：複利計算機

3. 複数ページのWebサイトを作って公開する

今度は複数のページからなるWebサイトを作る。Webサイト用の新しいフォルダ（例：profile）を ~/Desktop/claude の下に作り、Claude Code で新しいセッションを開いてそのフォルダを指定する。

Claudeへの指示

個人プロフィールサイトを作って！
架空の人物の設定で、名前・趣味・制作物などは適当に考えて。
ページ構成：
- public/index.html（自己紹介・トップ）
- public/works/index.html（制作物や趣味の紹介）
- public/contact/index.html（連絡先）
CSSは public/css/style.css にまとめて。
各ページにナビゲーションメニューをつけて。
リンクのパスは各HTMLファイルの場所からの相対パスで記述すること。
写真が入りそうな場所は `placehold.co` のプレースホルダー画像を使って。
シンプルでモダンなデザインで。

フォルダ構成はこのようになる：

profile/
└── public/
    ├── index.html
    ├── css/
    │   └── style.css
    ├── works/
    │   └── index.html
    └── contact/
        └── index.html

完成したら「1-3. Cloudflareにアップロードして公開する」の手順でデプロイして、公開URLで確認する。

作例：プロフィールサイト

4. DESIGN.mdでデザインの方針をそろえて公開する

DESIGN.md は Google Stitch が提唱したフォーマット。「フォントはこれ、色はこれ、余白の取り方はこう、句読点はこう扱う」といったデザインの指針を Markdown 1ファイルにまとめたもの。Claude Code に渡すと、その指針を踏まえてHTML/CSSを書いてくれる。

特に日本語サイトでは、和文フォントのフォールバックや行間、禁則処理などの指定が効くため、DESIGN.md を渡すかどうかで仕上がりがかなり変わる。

ここでは前章のプロフィールサイトを、無印良品（MUJI）の DESIGN.md を渡して作り直してみる。

4-1. Awesome Design MD JP のギャラリーから DESIGN.md を取得する

日本語サイト向けの DESIGN.md を集めた Awesome Design MD JP のギャラリーページから、好みのブランドの DESIGN.md を選んでダウンロードする。

ブラウザで ギャラリー を開く。200近いブランドのプレビュー（フォント・色・余白の見本）が並んでいて、見た目で選べる。

Awesome Design MD JP ギャラリー

今回は MUJI のカードを探す（カテゴリ Retail / Lifestyle）。カード下の DESIGN.md リンクをクリックすると、生の Markdown が表示される。ブラウザで Cmd + S を押し、ファイル名を DESIGN.md、保存場所を前章で作ったプロフィールサイトのフォルダ（~/Desktop/claude/profile/）にして保存する。

ギャラリーでは MUJI 以外にも Apple Japan、星野リゾート、note、メルカリ、ヤマハ、Snow Peak、サンリオなど200近いブランドが並ぶ。気になるブランドの Preview をクリックするとデザイントークンを可視化したショーケースが見られる。

保存したら、実行前に DESIGN.md の中身を一度自分の目で確認しておく。Claude デスクトップアプリで右上の ビューメニュー → ファイル から DESIGN.md をクリックすると、デスクトップアプリ内で中身を確認できる。外部から持ってきたファイルをAIエージェントに渡すときは、想定外の指示が含まれていないか目を通しておくのがセキュリティ対策の基本。

4-2. Claude Code に適用を依頼する

~/Desktop/claude/profile/ を作業フォルダとして Claude Code を起動し、依頼する。

Claudeへの指示

このフォルダに DESIGN.md を置いた。
DESIGN.md に書かれているフォント・色・余白・タイポグラフィのルールにそって、サイトの見た目を作り直して。
ページ構成・本文の内容はそのままで、CSSとHTMLのクラス・マークアップを更新して。

4-3. 公開して確認する

完成したら「1-3. Cloudflareにアップロードして公開する」の手順で公開する。MUJI テイストに切り替わったプロフィールサイトを公開URLで確認できる。

作例：MUJIテイストのプロフィールサイト

別のブランドの DESIGN.md に差し替えて同じ依頼をすると、また別のテイストに切り替えられる。

5. Claude Designでデザインを作って公開する

Claude Design は、プロンプトでWebページのデザインを生成するツール。今回のハンズオンでは、ビジュアルの完成イメージをClaude Designで作り、その成果物をClaude Codeに引き継いで調整、最後はブラウザからCloudflareにアップロードして公開する。

5-1. Claude Design でデザインを作る

Claude Design にアクセスし、作りたいWebページの概要をプロンプトで伝える。Claude Designも英語UIなので、必要ならChromeの自動翻訳をオフにする。

Claudeへの指示

企業のホームページを1ページで作りたい。
AI系の従業員5,6人のスタートアップ。
会社概要、理念や社長からのメッセージ、提供しているサービス一覧、アクセス、お問い合わせなどのセクションを1ページに縦に並べる構成。
今風でスタイリッシュな感じで。
出力はindex.html 1ファイルで。ReactなどのフレームワークやJSXは不要。

その後、Claudeからの質問（会社名・ターゲット・カラー・言語など）に答えると、デザインが生成される。技術スタックを聞かれた場合は「HTML/CSS/JavaScript」を選ぶ。何も質問されないこともある。

Claude Design

Claude Design は使用量の消費が比較的大きい。凝ったデザインを何度も作り直すと、週ごとの使用量上限に達しやすい。なお、Claude Design の使用量は Claude Code の使用量とは別枠で管理されている。

5-2. Claude Code に引き継ぐ

デザインが完成したら、画面右上の Share ボタン → Handoff to Claude Code… → Copy command をクリックして引き継ぎプロンプトをコピーする。

新たに作業フォルダ（例：~/Desktop/claude/design）を作り、Claudeデスクトップアプリ → Code → New session → そのフォルダを指定してセッションを開始する。

コピーしたプロンプトをClaude Codeにペーストして実行すると、必要なファイルなどが作業フォルダにダウンロードされる。

別の方法: Handoff to Claude Code… 画面で Download zip instead → Download .zip で zip を直接ダウンロードしてもよい。または Claude Design のチャットに「このあとClaude Codeで作業を引き継ぎたいです。どうしたらいいですか？」と頼んでも zip リンクが出る（少し時間がかかる）。

5-3. Claude Code で細部を調整する

まず、公開ファイルが public/ 配下に集まるよう Claude Code に整理を依頼する。

Claudeへの指示

公開するHTMLや画像などを public/ フォルダに移動して整理して。

そのまま公開してもよいが、気になる箇所があれば続けて Claude Code で調整する。

プロンプト例：

Claudeへの指示

ダークモード風にして。

5-4. Cloudflareにアップロードして公開する

調整が終わったら、「1-3. Cloudflareにアップロードして公開する」の手順でデプロイして、公開URLで確認する。

作例：企業サイト

6. 公開後にやっておきたい仕上げ

サイトが公開できたら、もう少しだけ手を加えると「ちゃんとしたサイト」感がぐっと増す。どれもClaude Codeとの短いやりとりで済む軽い作業。これまで作ったどのサイトにも同じ要領で適用できる。

設定を加えたあとは、フォルダごと再アップロードしてデプロイする（「1-4. サイトを更新する」と同じ要領）。

6-1. favicon

favicon（ファビコン）は、ブラウザのタブやブックマーク、履歴の一覧などに表示される小さなアイコン。設定しておくとぐっと「ちゃんとしたサイト」感が出る。

先ほどのセッションで下記のように頼む:

Claudeへの指示

このサイトのfaviconを作って、public/index.htmlに設定して。
サイトの内容に合うシンプルなデザインで。SVGで作ってくれてOK。
ファイルは public/favicon.svg として保存して。

SVGならClaude Codeが直接コードでアイコンを書けるので、画像生成ツールがなくても作れる。public/favicon.svg として保存され、<link rel="icon" href="favicon.svg"> のように読み込まれる。

デプロイ後、ブラウザのタブに小さなアイコンが出ていれば成功。出ない場合はブラウザのキャッシュが効いていることがあるので、ハードリロード（macOSなら Shift + Command + R）を試す。

6-2. ページタイトル・description

<title> はブラウザのタブやブックマーク、検索結果に表示される文字。<meta name="description"> は検索結果に出る説明文。Claude Codeが生成したHTMLでは Document のままだったりすることもあるので、内容に合った文言にしておく。

Claudeへの指示

public/index.html の <title> と <meta name="description"> を、
サイトの内容に合った文言に整えて。

6-3. OGP（SNSシェア対応）

OGPは、サイトのURLをXやLINEなどに貼ったときに、タイトルや画像が大きく表示される仕組み。設定しないと味気ないリンクのままだが、設定するとカード型のリッチな表示になる。

Claudeへの指示

このサイトにOGPの設定を追加して。
シェア用画像（public/og.png）も作って、タイトル・説明・画像を public/index.html の <head> に設定して。
タイトルと説明文は、すでに設定してある <title> と <meta name="description"> に揃えて。
シェア画像はサイトの雰囲気に合わせて作って。

Claude Codeが生成したOGP画像の例（vibecodingnotes.com の場合）

このプロンプトは一発で完結しないことが多い。途中でClaude Codeとやりとりすることになる:

• 画像生成ツールのインストール許可を求められる: シェア画像の生成にImageMagickなどをインストールしようとすることがある。許可すればOK
• 公開URLを聞かれる: og:image には公開後のフルURL（https://〇〇.pages.dev/og.png など）が必要。まだデプロイしていない場合は仮のURLで進めておき、最初のデプロイで公開URLが確定したら教えて貼り直してもらう

設定が終わってデプロイしたら、ラッコツールズのOGP確認 などに公開URLを貼って、各SNSでのカード表示を確認する。

6-4. 404ページ

存在しないURLにアクセスされたとき、デフォルトでは無味乾燥なエラー画面が出る。404.html を公開フォルダ（public/）直下に置いておくと、Cloudflare Pages が自動でそれを表示してくれる。

Claudeへの指示

public/404.html を作って。
サイトのデザインに合わせて、トップに戻るリンクを入れて。

Claude Codeが作成した404ページの例。画像は後から追加した。

6-5. PWA（スマホアプリ風Webアプリ）

作ったWebアプリをPWA（Progressive Web App）にすると、スマートフォンのホーム画面に追加してネイティブアプリのように起動できるようになる。

PWA

PWAの動作方式は色々あるが、たとえばこのような方式がおすすめ：

• アクセスするたびに新しいバージョンがあるか確認し、あれば自動更新
• ネットに繋がっていないときはキャッシュ（前回読み込んだデータ）を使って動作

manifest.json とService Workerのスクリプト（sw.js など）を public/ 配下に追加するだけで実現できる。Claude Codeに相談してみよう。

Claudeへの指示

このWebアプリをPWAにしたい。manifestとservice workerは public/ 配下に置いて。
アクセスのたびにバージョンチェックして更新し、オフラインはキャッシュで動くようにしたい。

PWAにしたサイトをスマホのホーム画面に追加する方法。

• iPhone Safari: ページを開き、画面下部（または右上）の ⋯メニュー → 共有ボタン（□に↑のアイコン） → ホーム画面に追加 → 名前を確認して 追加
• iPhone Chrome: ページを開き、右上の 共有ボタン（□に↑）→ ホーム画面に追加 → 追加
• Android Chrome: 右上の ︙メニュー → ホーム画面に追加（PWA要件を満たすと アプリをインストール と表示されることもある）

7. 次のステップ

このハンズオンでは、ブラウザから静的ファイルを直接アップロードしてデプロイする方法を学んだ。

もし、あなたの目的が、自分のサイトをWebで公開することのみで、ブラウザでの手動アップロード操作を厭わないのならば、今回の知識だけでも十分やっていける。

一方で、実際に運用するWebサイトとして使っていくのであれば、独自ドメインの設定も重要になる。 独自ドメインを設定したい場合は、以下を参照。

• CloudflareでWebサイトに独自ドメインを設定する

さらに、Claude CodeやGitHubを活用した、より効率的なWebサイト・Webアプリの作り方や、公開・更新方法を学びたい場合は、以下に進むとよい。

• Claude CodeでWebアプリを作ってWranglerでCloudflareに公開する
  • Claude Codeからwranglerを実行し、ローカルフォルダを直接デプロイする方法（このハンズオンで作ったpages.devプロジェクトをそのままWranglerで更新する手順も載っている）