STEP04
index.html化してCloudflare Pagesに公開
完成したホームページをインターネットで誰でも見られる状態にします。完全無料で公開できます。
redeem
終わったら手に入る
公開URL(○○.pages.dev)
① Claude DesignからHTMLをダウンロード
完成したら、画面右上の「Share」を押して「Export as standalone HTML」を選択します。
準備ができると左側に Download landing page のような黒いバーボタンが出ます(表示まで5〜10分かかる場合あり)。クリックでHTMLファイルが1つダウンロードされます。
infoダウンロードされるファイル名に注意
「sample.html」「design-export.html」など、Claude Designが自動で付けた名前になっています。
次の②で名前を変えます。
tips_and_updatesエクスポート前に出しておくと困らない指示
info画像が消えない形でエクスポートできていればOK
Claude Design が 1ファイル完結で出力する場合も、HTML と画像フォルダに分けて出力する場合もあります。どちらでも、公開後に画像が表示される形になっていれば大丈夫です。
以下の prompt は 「Claude Designが対応していなかった場合の保険」 として用意しています。
エクスポート前に念のため Claude Design に送ると安全です。
中身を見る
HTMLをエクスポートする前に、以下を確認してください。
・画像はWebPという軽い画像形式(品質80)、幅1200px以下、500KB以下に圧縮
・画像が公開後に消えない形で出力されていること
・1ファイル完結の場合は、そのHTMLだけで画像が表示されること
・assets等の画像フォルダが出る場合は、HTMLと同じフォルダに置いて一緒にアップロードできること
・アップロードする全体のファイルサイズは25MB以下
② ファイル名を「index.html」に変える ★最重要
priority_highここはよく忘れる。飛ばすと真っ白！
ファイル名が違うと、Cloudflareで公開しても真っ白なページになります。
必ずindex.htmlにしてから次へ進んでください。
2
ダウンロードしたHTMLファイルをそのフォルダに移動
3
右クリック→「名前の変更」→ index.html に変える
.html 拡張子は消さないこと。
check_circle正しい状態
sakura-cafe/ ← デスクトップに作ったフォルダ
└── index.html ← この名前が必須
cancelNGな例
sakura-cafe/
└── sample.html ← ✗ ダウンロード時の名前のままだと表示されない
sakura-cafe/
└── design-export.html ← ✗ これも表示されない
desktop_windowsWindowsで拡張子が見えないとき
Windowsの初期設定では、ファイル名の「.html」が見えていないことがあります。
その状態で「index」と打つと、実際のファイル名はindex.html.htmlになってしまい表示されません。
エクスプローラーの「表示」→「ファイル名拡張子」にチェックを入れてから名前変更してください。
laptop_macMacで名前変更するとき
Finderでファイルをクリック→もう一度ファイル名のところをクリックすると編集モードに。.htmlを消さないように、ファイル名部分だけ書き換えてください。
③ Cloudflare Pagesにアップロードして公開
一見手順が多そうに見えますが、初回登録さえ済めば2回目以降の公開は楽になります。
person_add初回のみ: Cloudflareのアカウントを作る
1
cloudflare で検索 → 「無料で始める」をクリック
普段使っているGoogleアカウントを選ぶだけ。Apple ID / GitHub / メールアドレスでも可。
5
メール認証(届く英文メールの「Verify your email」をクリック)
cloud_uploadアップロード(毎回の手順)
1
ダッシュボード → 「Workers と Pages」→ 「構築を開始する」
2
「Pagesを導入しようとお考えですか? 始める」をクリック
3
「ファイルをドラッグアンドドロップする」の「始める」を選択
4
プロジェクト名を半角英数字で入力(例: sakura-cafe)→「プロジェクトの作成」
日本語不可・大文字不可・人気の名前は既に取られてることがあります。入れた名前がそのままhttps://sakura-cafe.pages.devのURLになります。
5
②で作った index.html入りフォルダを丸ごとドラッグ
中央のドラッグ&ドロップエリアに放り込みます。確認ダイアログが出たら「アップロード」をクリック。
6
緑のバナーで完了確認 → 右下「サイトをデプロイ」をクリック
7
30秒〜1分待つ → 成功画面 → 「プロジェクトに進む」
8
「ドメイン」のリンクが公開URL。クリックで自分のページが開く
celebration表示されれば作成完了！
このURLをLINE / X / Instagram / 名刺 / チラシなどで共有すれば、誰でもこのページにアクセスできます。
build後から修正・更新したいとき
- デプロイタブ: 履歴一覧。右上「デプロイを作成する」から新しいファイルをアップロードできます。URLは変わりません。
- カスタムドメインタブ: 独自ドメイン(例:
sakura-cafe.com)を設定するときに使用。
- 設定タブ: プロジェクト名やビルド設定の変更。
warningトラブル対処法
ページが真っ白: ファイル名がindex.htmlか再確認(sample.htmlのままだと真っ白)。Windowsで拡張子表示OFFだとindex.html.htmlになっていることも。
アップロードでエラー: ファイルサイズオーバーの可能性。アップロード全体が25MBを超えている場合は、以下を Claude Design に貼り付けて再エクスポート。
中身を見る
これから HTML としてエクスポートします。
Cloudflare Pages にデプロイするため、
アップロード全体が25MB未満に収まるよう、以下を厳守してください。
【画像最適化】
- 画像を減らさない
- 画像は抜け漏れなく全てを出力
- 写真は WebP(品質80)または JPEG(品質80)、幅 1200px 以下
- 小さな絵・図はSVG、なければ PNG(256色以下に減色)
- 1画像あたり 500KB 以下を目標
- 1ファイル完結でも、assetsフォルダ方式でもOK
- ただし、公開後に画像が消えない形で出力してください
修正したい: Claude Designで該当プロジェクトを開いて修正指示 → 再エクスポート → Cloudflare Pagesの管理画面「デプロイを作成する」で再アップロード。URL変わらず内容だけ更新されます。
英語のエラーメッセージ: そのままコピーしてChatGPTかClaudeに「これ何?」と聞いてください。日本語で原因と対処法を教えてくれます。
