よくある原因
差し替え後に古い表示が残る原因の多くはキャッシュレイヤーの問題ですが、実はファイルの上書き自体が失敗しているケースも少なくありません。FTPやSFTPでのアップロードエラーがサイレントで起きていたり、Cloudflare PagesやNetlifyへのデプロイがエラーで中断されていたりします。管理コンソールでデプロイ完了のステータスを確認してから配信確認に進むのが正しい順序です。
HTMLファイル内から参照しているCSSやJSが別ファイルとして存在する構成の場合、HTMLだけ差し替えてCSSを差し替え忘れると「レイアウトだけ古い」という症状が出ます。単一HTMLファイルでなく複数ファイル構成のときは、変更があったすべてのファイルをリストアップしてからまとめてデプロイする習慣をつけてください。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
差し替え後は必ずDevToolsを開いた状態でページをリロードしてください。Networkタブで対象ファイルのレスポンスの`Last-Modified`または`ETag`ヘッダーを確認し、更新日時が差し替えたタイミングと一致しているかを見ます。古い日時が表示されていればCDNキャッシュに旧ファイルが残っています。
管理画面でキャッシュパージを実行した後、数分以内に異なる2つのネットワーク環境（自宅Wi-Fiとスマートフォンのキャリア回線など）でページを開いて両方で新しい表示になっているか確認してください。一方だけ正しく表示されている場合はエッジキャッシュの伝播が完了していない可能性があります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手には「ブラウザの戻るボタンで来た場合は古い表示になることがあります。アドレスバーにURLを直接貼り付けてEnterで開いてください」と伝えましょう。ブラウザのBFCache（Back/Forward Cache）が古いページを保持していることがあり、直接URLアクセスで回避できます。
相手が「グレーの画面のまま」「デザインが崩れている」と言う場合は、CSSやJSのキャッシュが原因の可能性があります。Chromeなら`Ctrl+Shift+Delete`でキャッシュのクリアを依頼し、「画像とファイル」にチェックを入れてクリアしてから再アクセスしてもらいましょう。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
差し替えのたびに行う確認項目をSlackのピン止めメッセージかConfluenceのページに「差し替えチェックリスト」として公開してください。新人や他部署のメンバーが対応する際も同じ基準で確認できるため、ヒューマンエラーによる見落としが減ります。
本番環境への反映にはステージング環境での事前確認を必須化するルールも有効です。「本番で初めて気づく」状況をなくすために、差し替えたHTMLをステージングURLで開いて古い表示がないことを確認してから本番にデプロイする手順を標準化しましょう。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
差し替え直後は正しく表示されたのに翌日また古くなった場合は？
キャッシュパージの効果は即時ですが、TTLが短く設定されていない場合は次のクロールで旧コンテンツが再キャッシュされることがあります。Cache-ControlヘッダーのMax-Ageを短く設定するか、ファイルごとにキャッシュを無効化する設定を検討してください。
複数ファイルを一括で差し替えたのに一部だけ反映されない場合の確認方法は？
デプロイログを確認し、アップロードに失敗したファイルがないか確認します。ファイルサイズ上限やファイル名の文字コードが原因で特定ファイルだけアップロードが失敗するケースがあります。
毎回差し替えのたびにキャッシュパージするのが面倒な場合の対処法は？
Cloudflare PagesやNetlifyを使えばデプロイのたびに自動でキャッシュがパージされます。手動アップロード運用をやめてGitリポジトリと連携した自動デプロイに移行するのが最も根本的な解決策です。