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

SUP CloudflarePagesClaudeDesign

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

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

1. Webサイト作成から公開まで一気に体験する

1-1. ローカルでWebサイトを作る

Finderで ホームフォルダの直下に claude フォルダ（なければ作る）を用意し、その中にWebサイト用フォルダ（例えば sup）を作る。パス（フォルダの場所を表す文字列）で書くと ~/claude/sup。先頭の ~チルダはホームフォルダを指し、/スラッシュはフォルダの区切り。

ホームフォルダ（家アイコン＋ユーザ名）の中に `claude`、その中にWebサイト用の `sup` を作る

作業フォルダをホームフォルダ直下に置くのは、デスクトップなどの保護フォルダで起きる macOS のアクセス制限や iCloud 同期のつまずきを避けるため。場所自体はどこでもよく、本サイトでは説明を揃えるためにここに統一しているだけ。好きな場所に作ってもよく、その場合は以降に出てくるフォルダのパスを自分のものに読み替えればOK。

ホームフォルダは、初期状態では Finder の左サイドバーに出ていない。一度だけサイドバーに固定しておくと、このあとのハンズオンでもすぐ開けて楽になる。Finder → 設定 → サイドバー を開き、「よく使う項目」の中にある、家アイコンと自分のユーザ名（下の画像では yto）の項目にチェックを入れる。

Finder → 設定 → サイドバーで「家アイコン＋ユーザ名」にチェック

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

Code（Claude Code）を選択 → New session（新規セッション）をクリック → フォルダ sup を指定（~/claude/sup）

フォルダの指定は、入力欄の下にある ❶「ローカル」ボタンの横のフォルダアイコン（例では my-video）をクリック → ❷フォルダを開く… から sup（~/claude/sup）を選ぶ。選ぶと作業ディレクトリが /Users/ユーザ名/claude/sup になる。

❶フォルダアイコン → ❷「フォルダを開く…」→ `sup` を選ぶと、作業ディレクトリが `~/claude/sup` になる

セッションを始める前に、画面左下のモード選択を 編集を承認 にしておく（自動モード にしない）。自動モードだと Claude がファイルの変更やコマンドを確認なしで一気に進めてしまい、意図しない結果になる事故が起きやすい。たとえば「公開して」のようなざっくりした依頼で、ツールを勝手にインストールするなど環境が知らないうちに変わってしまうこともある。まずは一つずつ承認しながら進めるのが安全。

画面左下のモード選択で「編集を承認」を選ぶ

また、使うモデルは Sonnet にしておくのがおすすめ。モデルは入力欄の送信ボタンの右下にあるドロップダウンから選べる（セッションの途中でも変えられる）。最上位の Fable 5 や Opus は高性能なぶん使用量（利用枠）の消費が速く、Claude Pro だと簡単なハンズオンでも途中で上限に達して続けられなくなることがある。今回のような静的サイトや小さなWebアプリづくりなら Sonnet で十分。

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

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

`public/index.html` が作られ、右のプレビューパネルに `Hello World` が表示される

途中でファイル操作の許可を求められることがあるので、その都度許可する。 public フォルダの下にWebページのファイル index.html が作られる。

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

Finder を開いて、public フォルダとその下の index.html が生成されていることを確認する。

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

作ったWebサイトを公開する先が Cloudflare。まだアカウントがなければ無料で作る。

Cloudflare サイトトップ

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

Googleアカウントで登録

ログインできるとダッシュボードが表示される
初めてログインしたときは利用目的などを聞かれることがあるが Skip でOK

⚠️ Cloudflareのダッシュボードに入ったら、最初にChromeの自動翻訳をオフにすること。オンのままだとサービス名（例：Workers）が「労働者」のように直訳され、UI全体が直訳調になって、以降の手順の英語表記と食い違って読みづらいため。
翻訳が効いているかは、ダッシュボード右上のボタンで見分けられる。Ask AI のままならオフ、AIに質問する と日本語になっていれば翻訳がオンになっている。
翻訳がオンなら、❶Chromeの右上の ︙（メニュー） → ❷翻訳… → ❸表示されたポップアップの ︙ → ❹このサイトは翻訳しない。それでもメニューに日本語が残る場合は、Cloudflareのダッシュボード右上の 👤 アイコン → 言語 → English。

Chrome右上の ︙ →「翻訳…」→ ポップアップの ︙ →「このサイトは翻訳しない」でオフにする（①〜④）

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

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

ショートカット：ダッシュボードの右側にある + Add をクリック → Pages をクリック、でもよい

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 in or click to upload a file or folder と書かれたエリアに、sup フォルダの中の public フォルダをドラッグ＆ドロップする

folder のリンクをクリックして、sup フォルダの中の public フォルダを選択する方法でも良い

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

Drag in or click to upload a file or folder

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

Deploy site

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

公開URLの確認

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

公開URL（`プロジェクト名.pages.dev`）をブラウザで開くと `Hello World` が表示される

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

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

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

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

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

`index.html` が更新され、右のプレビューに派手になった `Hello World` が表示される

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

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

Project を選ぶ

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

Create deployment

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

または folder のリンクをクリックしてアップ

Drag in or click to upload a file or folder

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

更新時の注意:

これまでのファイルは消えて、新たにアップロードしたものが入る
過去のデプロイへのロールバックもできる（くわしくは6章「デプロイの履歴管理とプロジェクト削除」を参照）

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

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

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

プロンプト例:

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

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

マウスかタッチパッドでボタンを10回連打するのに何秒かかるかを競うゲーム。
public/index.html 1ファイルで作って。

ボタンを押すと効果音が出るWebアプリをHTMLファイル1つ（public/index.html）で作って。
3つのボタンで三つの効果音。

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

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

Claude Codeで連打ゲームを作成

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

作例：連打ゲーム

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

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

個人プロフィールサイトを作って！
架空の人物の設定で、名前・趣味・制作物などは適当に考えて。
ページ構成：
- 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で確認する。

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

最後の一行の「シンプルでモダンなデザインで。」を変えるだけで、全体の雰囲気を大きく変えられる。たとえば「南国リゾート風なデザインで。」にすると、次のようになる。

「南国リゾート風なデザインで。」にした例（トップ・制作物・連絡先の3ページ）

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

Claude Design は、プロンプトでWebページのデザインを生成するツール。2026年6月のアップデートで Claude 本体に統合され、デスクトップアプリのサイドバーから直接開けるようになった。今回のハンズオンでは、ビジュアルの完成イメージをClaude Designで作り、その成果物をClaude Codeに引き継いで調整、最後はブラウザからCloudflareにアップロードして公開する。

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

Claudeデスクトップアプリで Chat または Cowork タブを開くと、サイドバーの一番下に デザイン が出る（Code タブのときは表示されない）。これをクリックすると Claude Design が開く（ブラウザの claude.ai/design からでも同じ画面になる）。

開いたら「Make something new」の一覧から Product prototype（Interactive app mockups）を選ぶ。続く「Start with context」画面では、参照として Design system / Screenshot / Codebase / Figma を渡せるが、今回はそのまま下部の入力欄に作りたいWebページの概要をプロンプトで伝えればよい。Claude Designは英語UIなので、必要ならChromeの自動翻訳をオフにする。

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

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

やり取りを減らしたい場合は、Claude Design が普段聞いてくる項目（社名・事業・ターゲット・言語・配色・技術スタック）を最初から全部入れて、「質問せず1回で出して」と頼むとよい。次のように条件を盛り込んでおくと、質問されにくく、見栄えと生成スピードのバランスも取りやすい（凝りすぎると生成が長引き、使用量も増えるため）。

日本語の企業ホームページを1ページで作ってください。
確認の質問はせず、足りない情報は下記の指定や一般的な内容で補って、そのまま完成版を1回で出力してください。

【会社】
- 社名: オレオレAIカンパニー
- 事業: AIを活用した業務効率化サービスを提供する、従業員5〜6名のスタートアップ
- ターゲット: 中小企業の経営者・情報システム担当者

【構成】次のセクションを縦に並べる
- ヒーロー（キャッチコピー＋一言説明）
- 会社概要
- 理念／社長からのメッセージ
- 提供サービス一覧（3件程度）
- アクセス
- お問い合わせ（送信はしない、フォーム風の見た目だけ）

【デザイン】
- 今風で洗練された、ひと目で「おお」と思える見た目に。しっかり作り込んだヒーロー、効いた配色、余白とタイポグラフィにこだわる
- グラデーションやアクセントカラーを効果的に使い、モダンで上質な雰囲気に
- ただし生成が長引かないよう、重いアニメーションや過剰な作り込みは避け、1回でまとまる範囲で仕上げる
- 日本語。本文はそれらしい日本語のダミーテキストで埋める

【技術】
- 出力は index.html 1ファイルのみ（CSSは同じファイル内に含める）
- React などのフレームワークや JSX は使わない。素のHTML/CSS（必要なら最小限のJSのみ）

Claude Design

Claude Design の使用量は、チャットや Claude Code とは別枠で計測される（公式ヘルプに「metered independently / separately from chat and Claude Code」と明記。2026-06-17更新）。週ごとの上限があり、リセットは7日ごと。凝ったデザインを作り直すほど消費が早い。なお、現時点（2026年6月21日）では Design 専用の使用量表示（usage tracking）はまだ提供されていない。最新は公式ヘルプで確認するとよい。

4-2. Claude Code に引き継ぐ

デザインが完成したら、キャンバス右上の Share ボタンをクリックする。モーダル上部のタブから Send to… を選ぶと Your destinations に Claude Code が並ぶので、その右の Send ボタンをクリックする。

引き継ぎ用のモーダルが開く。ここで一番手軽なのは zip をダウンロードする方法。Send to local coding agent タブの下にある OPTIONS で Download zip instead にチェックを入れ、zip をダウンロードする。展開すると index.html などのファイルがそのまま手に入る。

引き継ぎモーダル。OPTIONS の Download zip instead で zip を入手

ダウンロードした zip を展開すると、デザイン名から付けられたフォルダができ、その中の project フォルダに index.html が入っている。新たに作業フォルダ（例：~/claude/design）を作り、この index.html を作業フォルダに移す。あとは Claudeデスクトップアプリ → Code → New session → その作業フォルダを指定してセッションを開始すれば、次の「4-3」で細部を調整できる。

別の方法（MCPコネクタ）: 同じモーダルの Copy prompt をコピーして Claude Code に貼ると、claude_design という MCP コネクタ経由でデザインを取り込める。未認可なら Claude Code で /design-login を実行して接続を許可する（user:design:read/write の権限が付く）。ただし手順が増えるうえ、認可まわりで詰まりやすいので、まずは上の zip 方式で十分。

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

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

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

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

プロンプト例：

ダークモード風にして。

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

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

作例：企業サイト

補足: デザインの方針（フォント・色・余白・タイポグラフィなど）を Markdown 1ファイルにまとめて Claude Code に渡す DESIGN.md という手法もある。Awesome Design MD JP には日本語サイト向けのサンプルが200近く揃っている。外部から持ってきたファイルは、AIに渡す前に中身を一度確認しておくと安全。

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

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

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

5-1. favicon

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

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

このサイトの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）を試す。

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

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

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

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

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

このサイトにOGPの設定を追加して。
シェア用画像（public/og.png）も作って、タイトル・説明・画像を public/index.html の <head> に設定して。
タイトルと説明文は、すでに設定してある <title> と <meta name="description"> に揃えて。
シェア画像はサイトの雰囲気に合わせて作って。
og:image は公開後のフルURL（https://〇〇.pages.dev/og.png）で設定して。相対パスにしないこと。

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

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

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

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

5-4. 404ページ

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

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

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

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

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

PWA

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

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

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

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

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

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

6. デプロイの履歴管理とプロジェクト削除

公開したあとの管理として、過去のデプロイの確認・ロールバックと、プロジェクトの削除を押さえておく。Cloudflare ダッシュボードのプロジェクトページから行う。

6-1. デプロイ履歴とスナップショット（Deployments タブ）

プロジェクトページの Deployments タブを開くと、上部の Production に現在公開中のデプロイ（本番URL プロジェクト名.pages.dev が指す先）が、下の All deployments にこれまでのデプロイが新しい順に並ぶ。

各デプロイには https://英数字8桁.プロジェクト名.pages.dev（例：https://635c3404.tokyorain.pages.dev）という固有のURLが割り当てられる。これはそのデプロイ時点の内容で固定されたスナップショットで、あとからサイトを更新しても、その固有URLの中身は当時のまま変わらない。一方、本番URL（プロジェクト名.pages.dev）は常に最新（＝Production にあるデプロイ）を指す。

つまり「本番URL＝つねに最新」「各デプロイの固有URL＝その時点の保存版」という関係。過去のある時点の見た目を確認したいときは、その固有URLを開けばよい。

Deployments タブ。上の Production が現在の本番、下の All deployments が各デプロイ。デプロイごとに固有URLが付く

6-2. 過去のデプロイにロールバックする

サイトを更新して不具合が出たときなどは、過去のデプロイに本番を戻せる（ロールバック）。Deployments の一覧で戻したいデプロイの行の右端にある … をクリックし、Rollback to this deployment を選ぶ。本番URL（プロジェクト名.pages.dev）がその過去のデプロイの内容を指すようになる。