トラブルシュート

CSSだけキャッシュが残るときに相手へ伝える確認依頼の書き方

HTMLを更新したのにCSSが古いままと相手から言われたとき、確認作業を依頼するメッセージの書き方一つで解決速度が大きく変わります。相手の技術レベルに合わせた依頼の型と、情報を効率よく集めるコツを具体的に解説します。

よくある原因

「CSSが古い」という報告を受けたとき、最初に疑うべきはブラウザのローカルキャッシュです。Chromeは同じURLのCSSを最大24時間キャッシュすることがあり、ハードリフレッシュで解消できます。確認依頼の第一文に「Ctrl+Shift+R(MacはCmd+Shift+R)でページを再読み込みしてみてください」を入れると、多くのケースで追加のやり取りなく解決します。

企業ネットワーク経由でアクセスしている相手の場合、社内プロキシがCSSをキャッシュしている可能性があります。この場合はブラウザのキャッシュをクリアしても改善せず、プロキシのキャッシュが切れるまで古いCSSを見続けることになります。「スマートフォンのモバイル通信で同じURLを開いて確認してください」と依頼すると原因がプロキシかどうかを切り分けられます。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

相手への依頼を送る前に、自分のCDN管理コンソールでCSSファイルのキャッシュパージが完了しているかを確認してください。パージが走っていなければ相手に何を依頼しても解決しません。`curl -s -o /dev/null -w "%{http_code}" https://example.com/style.css`でステータス200が返り、かつ`Last-Modified`ヘッダーが更新後の日時になっているか確認するのが確実です。

CSSファイルのURLを変えた(クエリを更新した)場合は、HTMLのlink要素が新しいURLを正しく参照しているかをソースで確認してください。HTMLだけを差し替えてCSSのクエリを上げ忘れた場合は逆に古いCSSに新しいHTMLという組み合わせになることがあります。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

相手にCSSのキャッシュ問題を確認してもらう手順は、ITリテラシー別に書き方を分けてください。技術者向けなら「DevTools→Network→Disable cache→リロード」で十分ですが、一般ユーザー向けには「①Ctrl+Shift+R ②それでも変わらなければ別のブラウザ(EdgeやFirefox)で試す ③スクリーンショットを送る」の三段構えで書くと迷わず対応してもらえます。

相手のスクリーンショットを見て、デザインのどの部分が古いかを特定したら、その部分に関連するCSSセレクタをコードで確認してください。意図したCSSが適用されているかはDevToolsのElements→Stylesパネルで確認でき、適用されていない場合はキャッシュではなくCSSの記述ミスの可能性もあります。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

CSSを更新するたびに送る「更新完了通知メッセージ」のテンプレートに、最初から「古いデザインが表示された場合はCtrl+Shift+Rをお試しください」の一文を入れておきましょう。問題が起きてから確認依頼を送るのではなく、更新通知と同時に手順を伝えておくことで問い合わせ件数を減らせます。

反復して同じCSSキャッシュ問題が起きているなら、運用の根本を変えるタイミングです。Cloudflare PagesやNetlifyに移行してデプロイのたびに自動でキャッシュパージとコンテンツハッシュ付与が走る環境を整えると、問い合わせ自体が発生しなくなります。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

「CSSが古い」と言われた相手に最初に送るメッセージの文例を教えてください。

「お手数ですがCtrl+Shift+R(MacはCmd+Shift+R)でページを強制更新してみてください。それでも古いデザインのままであればスクリーンショットをお送りいただけますか?」が最初のメッセージとして適切です。

相手がスクリーンショットを送ってきたとき、何を確認すればよいですか?

更新したはずのCSSの変更点(色・フォント・レイアウトなど)が画像に反映されているかを確認します。反映されていなければCDNキャッシュが残っている可能性が高く、パージを実行してから再確認を依頼します。

ハードリフレッシュを試したが改善しないと言われた場合の次の一手は?

「シークレットウィンドウで開いてみてください」が次のステップです。それでも古ければCDN側のキャッシュ問題と判断してパージを実行し、パージ後5分待ってから再確認を依頼します。

関連記事

トラブルシュート

CSSだけキャッシュが残るときの原因と直し方

HTMLは更新されたのにCSSだけキャッシュが残ってデザインが古いままになる問題に悩む担当者向けに、CDN・ブラウザ・プロキシの各レイヤーでキャッシュを消す手順を解説します。

5分で読める
「トラブルシュート」の記事をもっと見る →