Cloudflare Pagesを使ったホームページの公開方法を初心者向けに解説。容量制限のルールや、サイトを軽くするWebP画像への変換テクニックまで、専門知識なしでも分かるように1から丁寧に紹介します。
はい、Cloudflare PagesにはWebサイトを構成するファイル一式をすべて入れます。
HTML、CSS、JavaScript、画像などの「静的ファイル」を丸ごとアップロード、またはGitHubなどのリポジトリからデプロイしてサイトを公開する仕組みです。
📁 入れるファイルの種類
* HTMLファイル（サイトの骨組み）
* CSSファイル（デザイン・装飾）
* JavaScriptファイル（動きや機能）
* 画像・動画・フォント（メディア資産）
⚙️ 2つの公開方法
1. ファイルの直接アップロード：作成したフォルダ（一式）を画面にドラッグ＆ドロップする。
2. Git連携（推奨）：GitHubやGitLabにソースコード一式を保存し、Cloudflare Pagesと連携させて自動で公開する。
⚠️ 注意点（入れられないもの）
* PHPなどのサーバーサイドプログラム：WordPressなどのPHPで動く仕組みはそのままでは動きません（データベースもありません）。
* 動的機能の代替え：お問い合わせフォームやユーザー認証などの動的機能を作りたい場合は、Cloudflare Workers（Functions機能）という別の仕組みを組み合わせて実装します。
一般的なホームページや、React/Vue/Next.jsなどで作ったフロントエンドのサイト一式であれば、すべてそのまま入れて公開できます。
結論から言うと、毎回サイト一式をアップロードしても容量制限（上限）で溢れる心配はほぼありません。
Cloudflare Pagesは、ファイルの合計サイズやストレージ容量に対する制限を原則として設けていないためです。
制限を気にしなくてよい理由
* ストレージ容量は無制限：サイト全体の総容量（〇〇GBまで、といった枠）はありません。
* 過去の履歴は自動管理：裏側で賢く管理されるため、更新（デプロイ）を何百回繰り返しても「過去のゴミが溜まって容量オーバー」にはなりません。
ただし「1回の壁」となる制限
全体の容量制限はありませんが、1回のデプロイ（公開）あたりの細かいルールは存在します。
* 1ファイルの最大サイズ：25 MiBまで
* 1回の最大ファイル数：20,000ファイルまで
* 1回の最大合計サイズ：25 GiBまで
高画質な動画を大量に置かない限り、一般的なWebサイトでこの上限に達することはまずありません。
💡 毎回一式入れるのが面倒なときは？
無料の「GitHub連携」を使うのがおすすめです。
ファイルを毎回手動で全消去・全投入しなくても、変更したファイルだけをシステムが自動で検知して裏側で一式を更新してくれます。
Cloudflare Pagesのアップロード制限（無料プラン）は、「1ファイル25MiBまで」「合計20,000ファイルまで」です。
Cloudflare Docs
ブラウザの画面を使って直接アップロード（ドラッグ＆ドロップ）する場合と、GitHubなどを連携させる場合で、上限の現れ方が少し異なります。
⚠️ 手動アップロード（画面ドラッグ）の落とし穴
ブラウザ画面へのドラッグ＆ドロップは、サイト全体で1,000ファイルを超えると「これ以上一度にアップロードできません」というエラーになります。
Cloudflare Community
1,000ファイルを超えるサイトを公開したい場合は、以下のいずれかの方法を使う必要があります。
GitHub / GitLab と連携する（一番おすすめ）：これなら最大上限の20,000ファイルまで自動で同期できます。
Wrangler（専用のコマンドツール）を使う：パソコンの黒い画面（ターミナル）からコマンドを使って一括アップロードします。
| 制限項目 | 上限値 | 注意点・対策 |
|---|---|---|
| 1ファイルの最大サイズ | 25 MiB | 動画や高解像度画像は Cloudflare R2 等に逃がす必要があります。 |
| 1サイトの最大ファイル数 | 20,000ファイル | 画像が大量にあると上限に近づきます。 |
| 画面からの直接投入 | 1,000ファイル | ブラウザからのドラッグ＆ドロップは制限があります。 |
| 1回の総容量上限 | 25 GiB | 1回のデプロイ全体の合計サイズです。 |
| 月間のビルド回数 | 500回 | 自動公開の月間上限です。 |
結論から言うと、一度入れた画像（変更していないファイル）も、毎回すべてカウント対象になります。
Cloudflare Pagesにサイト一式をアップロード（デプロイ）する際は、毎回「その瞬間のサイト全体のファイル数」が上限チェックの対象になるためです。
🔄 毎回すべて数えられます
例えば、すでに画像が5,000枚入っているサイトがあるとします。
* 手動アップロードの場合：文字を1文字直しただけでも、毎回5,000枚の画像を含めた「一式」を丸ごと画面に放り込む必要があります。この時、合計ファイル数が20,000枚以内ならセーフですが、画面の制限（1回1,000ファイルまで）に引っかかります。
* GitHub連携の場合：変更したファイル（1マス）だけを送信しますが、Cloudflare側で合体させたときの「最終的な合計ファイル数」が20,000ファイル以内である必要があります。
つまり、過去にアップロードした貯金（ストック）という概念ではなく、「完成版のサイト1個の中に、ファイルが何個あるか」でカウントされます。
💡 画像が大量にある場合の対策
もし画像が数千枚〜数万枚に増えて上限を超えそうな場合は、以下の対策をとるのが一般的です。
1. Cloudflare R2（ストレージ）に画像を逃がす
画像だけを別の無料枠が大きい保管庫（R2）に預けて、Pages（サイト本体）からはリンクで読み込みます。Pagesのファイル数を劇的に減らせます。
2. 外部の画像配信サービスを使う
Cloudinaryなどの画像専用サービスにアップロードして利用します。
画像を圧縮すればファイルサイズ（〇〇MiB）は確実に下がります。
しかし、先ほどお伝えした「ファイル数（最大20,000個）」の制限は、圧縮しても下がりません。
Cloudflare Pagesには「容量（重さ）」と「個数（枚数）」という2つの制限があるため、どちらで困っているかによって対策が変わります。
1. 「1ファイル25 MiB」の壁を超えそうなとき
* 効果：絶大です。
* 画像のデータサイズを小さく（圧縮）すれば、上限の25 MiB（約26MB）を余裕で下回ることができます。
* おすすめの対策：高画質な写真なら TinyPNG などの圧縮ツールを使ったり、拡張子を WebP（ウェッピー） に変換すると、見た目をきれいに保ったまま容量を1/5以下に減らせます。
2. 「合計20,000ファイル」の壁を超えそうなとき
* 効果：ありません。
* 画像をどれだけ小さく圧縮しても、1枚は1枚としてカウントされます。
* おすすめの対策：枚数自体が多すぎる場合は、画像を圧縮するのではなく、先述の「Cloudflare R2（別ストレージ）」に画像を引っ越しさせて、Pagesに入れるファイル数そのものを減らす必要があります。
はい、ダウンロードしたフリー素材（JPEGやPNG）を「WebP（ウェッピー）」に変換するのは大正解です！
見た目の綺麗さはほぼそのままに、データ容量を 1/3〜1/5程度 まで劇的に小さくできます。Cloudflare Pagesの「1ファイル25 MiB」の制限を避けるためにも、非常に効果的な方法です。
変換はとても簡単で、主に以下の3つの方法があります。
🛠️ WebPに変換する3つの方法
1. Webサービスを使う（一番手軽）
* 「Squoosh（Google製）」や「TinyPNG」などの無料サイトにフリー素材をドラッグ＆ドロップするだけで、一瞬でWebPに変換・圧縮してダウンロードできます。
2. PCのアプリを使う（一括処理向け）
* 「XnConvert」などの無料ソフトを使えば、100枚以上のフリー素材も一瞬でまとめてWebPに一括変換できます。
3. 制作ツールから直接書き出す
* CanvaやPhotoshopなどで素材を少し加工してから使う場合は、保存（書き出し）するときに形式を「WebP」に指定して保存すればOKです。
💡 さらに容量を下げるコツ
フリー素材のサイト（ぱくたそ、いらすとや、Unsplashなど）から高画質な写真をダウンロードすると、Webサイトで表示するにはサイズ（横幅など）が大きすぎることがあります。
WebPに変換するついでに、「横幅を1200px〜1920px程度にリサイズ（縮小）」してから圧縮すると、さらに容量を驚くほど小さくできます。
ダウンロードした人が「後から自分で編集したい」という場合は、WebPだと少し不便になることがあります。
ただ、結論から言うとホームページを見るだけの一般の人は、PNGに変換しなくても全く問題ありません。
WebPのままで問題がない理由と、どうしてもPNGにしたい場合の考え方を整理しました。
1. 一般の閲覧者は「見るだけ」なのでWebPでOK
ブログの読者やホームページの訪問者は、画像をパソコンに保存して編集することはほぼありません。
WebPは現在、iPhoneやAndroid、Windows、Macなどすべてのスマホやブラウザで標準対応しているため、見るだけなら100%きれいに表示されます。
2. もし「画像を配布するサイト」を作るなら注意
もしあなたが「フリー素材サイト」や「イラスト配布サイト」を作っていて、訪れた人に画像をダウンロードして編集してもらうことが目的なら、WebPは避けたほうが親切です。
* 理由：古いデザインソフトや、一部のスマホアプリでは、まだWebPの編集に対応していない（開けない）ことがあるためです。
* 対策：その場合は、Pagesに置くファイルを「PNG」のままにして、代わりに先ほど紹介したリサイズ（横幅を小さくする）や、画質を少しだけ落とす圧縮を行って25 MiB以内に収めます。
3. 一般の人でもPNGに変換する方法はある
もしWebPで配布したとしても、ダウンロードした人が編集したければ、今やWindowsの「ペイント」アプリや、スマホの無料変換アプリで簡単にPNGやJPEGに戻すことができます。
* Pagesに入れるもの
* サイトを構成するファイル一式（HTML、画像など）を丸ごと入れます。
* 容量の制限
* 全体の総容量は無制限（ゴミも溜まりません）。
* ただし、「1ファイル 25MBまで」、「全体で 20,000個まで」という制限があります。
* 画像の扱い（WebPについて）
* 画像は見せるだけなら「WebP」に変換するのが軽くてベストです。
* 訪問者に「ダウンロードして編集してもらう素材サイト」なら、少し重くなりますが「PNG」のままの方が親切です。