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

LEVEL 1 ハンズオン

Claude Codeで作ったHTMLファイルやWebアプリを、ブラウザからCloudflareにアップロードしてインターネットに公開する

このハンズオンで扱うこと

• ブラウザだけでCloudflareにファイルをアップロードしてWeb公開
• Claude Codeで作ったHTML・Webアプリ・複数ページサイトを公開
• DESIGN.mdでデザインの方針をそろえる
• Claude Designでデザインを作り、Claude Codeに引き継ぐ流れ
• 公開後の仕上げ（favicon・OGP・404・PWA）

想定読者・進め方

• Webサイトを自分で公開してみたい
• Git や CLI はまだ触りたくない
• まずは一番簡単な方法で動かしたい

ブラウザ操作だけで公開まで到達できる構成

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

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

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

• Finderで ~/Desktop/claude/sup フォルダを作る
• Claudeデスクトップアプリ → Code → New session
• 作業フォルダに ~/Desktop/claude/sup を指定

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

公開するファイルは public/ 配下にまとめるのが標準的な作法

1-2. 生成されたファイルを確認

Claudeデスクトップ右上の ビュー → ファイル で public/index.html ができていることを確認

1-3. Cloudflareダッシュボードを開く

最初にChromeの自動翻訳をオフにする。Cloudflareの管理画面が直訳調になり読みづらいため

• ダッシュボード左メニュー Compute → Workers & Pages
• 右上 Create application → 下の Get started

1-3. Pagesプロジェクトを始める

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

1-3. プロジェクト名を決める

Project name に好きな名前（例: thisisapen）を入れて Create project

入力欄の直下に割り当てURLが表示される。末尾に文字が付かなければ競合なし

1-3. ファイルをドラッグ&ドロップ

public フォルダ（index.html が直接入っているもの）をドロップ

上の階層の sup や claude フォルダをドロップすると公開構成が崩れる

1-3. デプロイして公開URLを確認

Deploy site をクリック

公開URL: https://プロジェクト名.pages.dev

1-3. 公開ページの確認

ページ上部に公開URLが表示される

そのURLにアクセスして Hello World! が表示されればOK

1-4. サイトを更新する（ファイル編集）

Claude Codeの先ほどのセッションで:

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

public/index.html が更新される

1-4. プロジェクトを開く

ダッシュボード左メニュー Compute → Workers & Pages → プロジェクト名をクリック

1-4. Create deployment

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

1-4. 再アップロード

public フォルダをドロップ → Save and deploy

• これまでのファイルは消えて、新しいものに置き換わる
• 過去バージョンへのロールバックは Deployments タブから

プロンプト例

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

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

完成したら 1-3 と同じ手順でデプロイ

プロンプト例（続き）

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

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

作例: 複利計算機

複数ページサイトの依頼

新しいフォルダ（例: ~/Desktop/claude/profile）でClaude Codeのセッションを開く

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

出来上がるフォルダ構成

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

完成したら 1-3 と同じ手順でデプロイ

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

DESIGN.md とは

• フォント・色・余白・タイポグラフィのルールを Markdown 1ファイルにまとめたもの
• Claude Code に渡すと、その指針を踏まえて HTML/CSS を書いてくれる
• 日本語サイトでは和文フォントのフォールバック・行間・禁則処理などの指定が効く

Awesome Design MD JP: 日本語サイト向けの DESIGN.md 集（200近いブランドを収録）

4-1. ギャラリーから DESIGN.md を取得

ブラウザで ギャラリー を開く

MUJI のカード（カテゴリ Retail / Lifestyle）を探し、DESIGN.md リンク → Cmd + S で ~/Desktop/claude/profile/ に保存

4-1. ギャラリーで他のブランドも見る

• Apple Japan、星野リゾート、note、メルカリ、ヤマハ、Snow Peak、サンリオなど200近いブランド
• Preview をクリックするとデザイントークン（フォント・色・余白）を可視化したショーケースが見られる
• 見た目で好みのブランドを選べる

4-1. 中身を目視確認（セキュリティ）

Claudeデスクトップ右上の ビュー → ファイル から DESIGN.md をクリックして中身を表示

外部から持ってきたファイルをAIエージェントに渡すときは、想定外の指示が含まれていないか目を通しておくのがセキュリティ対策の基本

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

~/Desktop/claude/profile/ を作業フォルダとして Claude Code を起動

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

4-3. 公開して確認

完成したら 1-3 と同じ手順でデプロイ

• MUJI テイストに切り替わったプロフィールサイトを公開URLで確認
• 別のブランドの DESIGN.md に差し替えれば、別のテイストにも切り替えられる

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

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

Claude Design でプロンプトを入力

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

技術スタックを聞かれたら HTML/CSS/JavaScript を選ぶ

5-1. Claude Design 画面

Claude Design の使用量は別枠管理・消費大きめ。週上限に注意

5-2. Claude Codeに引き継ぐ

1. 画面右上 Share → Handoff to Claude Code... → Copy command で引き継ぎプロンプトをコピー
2. 新たに作業フォルダ（例: ~/Desktop/claude/design）を作る
3. Claudeデスクトップ → Code → New session → 上記フォルダを指定
4. コピーしたプロンプトをClaude Codeにペーストして実行 → 必要なファイルなどがダウンロードされる

別解: Download zip instead で zip 直接ダウンロードも可

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

まず公開ファイルを public/ に集約する

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

気になる箇所があれば調整

ダークモード風にして。

5-4. デプロイ

調整が終わったら 1-3 と同じ手順でデプロイ

公開URLで仕上がりを確認

作例: 企業サイト

6-1. favicon

ブラウザのタブやブックマークに表示される小さなアイコン

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

SVGならClaude Codeが直接コードでアイコンを書ける

反映されないときはハードリロード（Shift + Command + R）

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

<title> はタブや検索結果に出る文字、<meta name="description"> は検索結果の説明文

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

Claude Codeが生成したHTMLは Document のままだったりするので調整する

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

URLをXやLINEに貼ったときにカード表示される仕組み

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

6-3. OGP（補足）

• 画像生成ツール（ImageMagick等）のインストール許可を求められたら許可
• og:image には公開後のフルURLが必要
• デプロイ後は ラッコツールズのOGP確認 で各SNSの表示をチェック

6-4. 404ページ

存在しないURLにアクセスされたときに表示されるページ

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

public/ 直下に 404.html を置けば、Cloudflare Pagesが自動で表示してくれる

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

スマホのホーム画面に追加してネイティブアプリのように起動できる

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

manifest.json とService Workerのスクリプト（sw.js など）を public/ 配下に追加するだけ

6-5. PWA（ホーム画面追加）

• iPhone Safari: 共有ボタン（□に↑）→ ホーム画面に追加
• iPhone Chrome: 共有ボタン → ホーム画面に追加
• Android Chrome: ︙メニュー → ホーム画面に追加

ここまでできたこと

• ブラウザだけでCloudflareに静的サイトを公開
• Webアプリ・複数ページサイト・デザインからの起こしまで
• 公開後の仕上げまで一通り

ブラウザ手動アップロードを厭わないなら、ここまでの知識だけでも十分やっていける

さらに先へ

• 独自ドメインを設定したい: CloudflareでWebサイトに独自ドメインを設定する
• Claude Code＋Wranglerで効率化: Claude CodeでWebアプリを作ってWranglerでCloudflareに公開する

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com