Cloudflareのしくみガイド

フロントエンドコーダー・デザイナーの方向け ― 「これは何？」「困ったときどうする？」の早見表

はじめに

Cloudflareはサイトの「手前」に置かれている仕組みで、皆さんが作ったHTML/CSS/画像やタグの実装が、実際にユーザーに届くまでの間に色々な処理をしています。設定自体はバックエンド側（私）が管理していますが、日々の制作作業に関わってくる部分だけ、噛み砕いてまとめます。

「更新したはずなのに表示が変わらない」キャッシュ

Cloudflareは表示速度を上げるため、CSSや画像、時にはHTMLそのものを一時的に保存（キャッシュ）しています。そのため、サーバー側は更新済みでも、古い内容がユーザーに配信され続けることがあります。

修正を公開したのに、ブラウザで見ても古いままなんですが？
ローカルのブラウザキャッシュではなく、Cloudflare側にキャッシュされている可能性があります。バックエンド担当に「キャッシュパージ（Purge Cache）お願いします」と伝えてもらえれば、ダッシュボードから該当ページ、または全体のキャッシュを即座にクリアできます。
毎回パージをお願いするのは手間では？
デプロイのたびに自動でキャッシュを消す設定（CI/CDと連携したAPIパージ）も可能です。頻繁に更新が入る案件では、そうした自動化の相談もできます。

画像・表示速度の最適化Speed設定

Cloudflareには、皆さんが用意した画像やCSS/JSを自動で軽量化する機能があります。制作時にどこまで自分で圧縮すべきか、という判断材料になります。

Polish（画像の自動圧縮・WebP変換）

アップロードした画像を自動で圧縮し、対応ブラウザにはWebPなど軽い形式で配信します。ただし完全にPhotoshop/Figmaでの書き出し最適化の代わりにはならないので、書き出し時の圧縮は引き続き意識してください。

Auto Minify（HTML/CSS/JSの圧縮）

コード中の空白やコメントを自動で削るとよいのですが、ビルドツール（webpack/vite等）側で事前にminifyしている場合はそちらの方が効果が高いとされています。二重にやっても害はありません。

Rocket Loader（JSの非同期読み込み）

JSの読み込み順序を自動で調整し表示をブロックしにくくする機能。まれに実行順序に依存したスクリプト（特定のライブラリの初期化処理など）で挙動が変わることがあるので、JSがおかしいと感じたら「Rocket Loaderの影響では」と一言相談してください。

「なぜかページにアクセスできない」WAF（防御機能）

Cloudflareは不正アクセスやボットを自動でブロックする仕組みを持っています。まれに正規のアクセスまで誤って止めてしまう（誤検知）ことがあります。

検証環境で作業中、突然「Attention Required」やチャレンジ画面（人間確認）が出た
WAFやBot対策が作業内容を「怪しいアクセス」と誤判定した可能性があります。よくあるのは、フォーム送信やAPI連携のテストを短時間に連続実行した場合です。バックエンド担当に「このIPからのアクセスがブロックされている」と伝えてもらえれば、除外設定（許可リスト）を追加できます。
実装したフォームの送信が本番だけ失敗する
WAFが特定のパラメータやパターンを攻撃とみなしてブロックしているケースがあります。ブラウザの開発者ツールでレスポンスコード（403等）を確認のうえ、リクエスト内容と一緒に共有してもらえると特定しやすいです。

GA4・広告タグの実装が変わりますZaraz

これまで「GTMのタグをheadに貼る」「Meta Pixelのスクリプトをベタ書きする」といった作業をしていた場合、Zarazという仕組みに置き換わっていく予定です。

何が変わる？

タグを直接HTMLに書く必要がなくなります。かわりにCloudflareのダッシュボード（Zaraz画面）でタグを登録・管理するので、「このページにこのタグを追加してほしい」という依頼はバックエンド担当（または権限を持つ人）への設定依頼に変わります。

dataLayerを使ったイベント送信はどうなる？

クリックイベントやコンバージョン計測でdataLayerに値をpushする実装（GTM向けのカスタムイベント送信）は、引き続きフロント側の実装が必要です。Zarazはその後段（送信先の振り分け）を担うイメージなので、「どのタイミングで、どんな値をdataLayerに送るか」の設計・実装はこれまで通りフロント側の仕事です。

移行期間中は、同じタグが古い実装（ベタ書き）とZarazの両方から動いてしまう「二重計測」に注意が必要です。担当ページのタグを外して良いタイミングは、必ずバックエンド側と確認してから対応してください。

アクセス解析・表示速度の計測計測

Cloudflare Web Analyticsという、Cookieを使わない解析機能が裏側で動く場合があります。

これは自動で計測されるビーコンなので、皆さんが実装で何かを追加する必要は基本的にありません。LCP・CLS・INPといったCore Web Vitals（表示速度・体感品質の指標）も一緒に取得されるので、「表示速度が遅い」と指摘された際の裏付けデータとしても使えます。気になる数値があれば共有できます。

困ったときの相談フロー

最終更新: 2026年9月 ／ 設定自体の変更権限はバックエンド担当が持っています。このページは「何が起きているか」を理解するための参考資料です。