変更したWEBページが更新（反映）されない！原因はキャッシュ？

2025年6月27日

1. はじめに：なぜ「更新したのに反映されない」問題が起こるのか？

WEBサイトの運用中に、「画像を差し替えたのに反映されない」「文章を修正したのに古い内容のまま」などのトラブルに遭遇することは珍しくありません。多くの場合、この現象の原因は「キャッシュ」にあります。キャッシュはWEBの表示を高速化するために非常に重要な仕組みですが、仕組みを理解していないと、更新が正しく反映されない原因にもなります。

ここでは、キャッシュの正体と、その正しい扱い方を徹底的に解説していきます。

2. キャッシュとは何か？その仕組みを理解しよう

キャッシュ（Cache）とは、「一度アクセスしたデータを一時的に保存し、次回以降の読み込みを早くする仕組み」です。キャッシュは複数の層で存在し、それぞれが独立して機能しています。ここを理解しておくことが、トラブル解決の第一歩です。

2.1 ブラウザキャッシュ

ブラウザ（Chrome, Safari, Edgeなど）は、ユーザーがアクセスしたページのデータ（HTML、CSS、JavaScript、画像など）を一時的に保存しています。これにより、次回アクセス時には再ダウンロードせず、保存済みのデータを利用して高速表示します。

問題は、サーバー上のファイルが更新されても、ブラウザが古いキャッシュを読み込むこと。これが「変更したのに反映されない」典型例です。

2.2 サーバーキャッシュ

サーバー側にもキャッシュがあります。特にWordPressのようなCMSでは、「サーバーキャッシュ」や「オブジェクトキャッシュ」などが自動的に生成されます。これによりサーバーの負荷が軽減されますが、更新直後にキャッシュが残っていると、古いページを配信してしまうことがあります。

2.3 CDNキャッシュ

CDN（Content Delivery Network）は、世界中のサーバーにコンテンツを分散して配信する仕組みです。CloudflareやAkamaiなどが代表的です。これもキャッシュの一種で、特にグローバル配信では強力ですが、更新後に古いデータが残ることがあります。

2.4 DNSキャッシュ

DNSキャッシュとは、「ドメイン（例：www.example.com）がどのサーバーにあるか」という情報をパソコンやネットワーク機器が一時的に記憶しているものです。サーバー移転やネームサーバー変更の際に古い情報が残ると、新サーバーのページが表示されない原因になります。

3. よくある症状とその見分け方

キャッシュによる影響は多岐にわたります。ここでは代表的な3つのケースを紹介します。

3.1 自分だけが古いページを見ているケース

この場合、ほとんどが「ブラウザキャッシュ」が原因です。別のブラウザやシークレットモードで確認すると、正しいページが表示されることがあります。

3.2 全ユーザーに反映されていないケース

これは「サーバーキャッシュ」や「CDNキャッシュ」が関係しています。全ユーザーに同じキャッシュが配信されているため、制作者がキャッシュを削除しない限り古い情報が残ります。

3.3 一部の画像やCSSだけが更新されないケース

部分的に反映されない場合は、ブラウザキャッシュとファイル名の問題が多いです。ファイル名が同じだと、ブラウザは「変更されていない」と判断して古いファイルを使い続けます。

4. 各キャッシュのクリア方法と注意点

4.1 ブラウザキャッシュを削除する方法

  • Chrome：設定 → プライバシーとセキュリティ → 閲覧履歴データの削除 → キャッシュされた画像とファイルを選択
  • Safari：開発メニュー → キャッシュを空にする
  • Edge/Firefox：設定から同様の項目で削除可能

4.2 WordPressなどCMSでのサーバーキャッシュ削除

WP Rocket / W3 Total Cache / LiteSpeed Cacheなどのプラグインでは「Clear Cache」ボタンが用意されています。

サーバー側キャッシュ（例：ConoHa WING, XSERVERなど）でも「キャッシュ削除」機能を持つものがあります。

4.3 CDNキャッシュのパージ方法

Cloudflareなどでは「Purge Cache」機能があります。全キャッシュ削除（Purge Everything）と個別削除を選べます。全削除は慎重に行いましょう。

4.4 DNSキャッシュのクリア方法

  • Windows：コマンドプロンプトで ipconfig /flushdns
  • Mac：ターミナルで sudo killall -HUP mDNSResponder

5. キャッシュを制御するための設定方法

5.1 .htaccessでキャッシュ期限をコントロール

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 30 days"
ExpiresByType text/css "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
</IfModule>

これにより、各ファイルタイプごとにキャッシュの有効期間を設定できます。

5.2 metaタグによるキャッシュ制御

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

特定のページでキャッシュを無効にしたい場合に有効です。

5.3 WordPressプラグインでのキャッシュ管理

「WP Rocket」「LiteSpeed Cache」「W3 Total Cache」などを利用することで、キャッシュの有効期間や除外設定を柔軟にコントロールできます。

5.4 CloudflareなどCDNサービスでのキャッシュ設定

Cloudflareでは「Cache Everything」設定を使うことで静的ページをキャッシュできますが、管理画面など動的ページは除外設定することが推奨です。

6. キャッシュをうまく利用するためのコツ

6.1 すべてのキャッシュを無効化してはいけない理由

キャッシュは「表示の高速化」や「サーバー負荷の軽減」に不可欠です。完全に無効化すると、ユーザー体験が悪化する可能性があります。

6.2 更新頻度別のキャッシュ運用の最適化

  • トップページ：更新頻度が高い → 短め（1日程度）
  • ブログページ：更新頻度が低い → 長め（7日～30日）
  • 画像：めったに変わらない → 長期（90日～1年）

6.3 テスト環境と本番環境のキャッシュの違い

テスト環境ではキャッシュを無効化し、常に最新を反映する設定に。本番ではパフォーマンス重視でキャッシュを有効にするなど、環境に応じた設計が重要です。

7. トラブルシューティング：キャッシュ以外の原因とは？

7.1 ファイルのアップロードミス

FTPやCMSでアップロード先を間違えると、正しい場所にファイルが存在しないことがあります。

7.2 同名ファイルのバージョン管理不足

style.cssを上書きしてもブラウザが古いファイルを保持してしまう場合、style.css?v=2のようにクエリパラメータを付けることで更新を強制できます。

7.3 プラグインやテーマの干渉

キャッシュ系プラグインが複数有効になっていると、キャッシュが二重化して不具合を起こすことがあります。

8. WEB制作会社が実践するキャッシュ対策のベストプラクティス

8.1 ファイル名のバージョニング（キャッシュバスター）

更新のたびにファイル名にバージョンを付けることで、ブラウザが新しいファイルを確実に読み込みます。

8.2 デプロイ時のキャッシュクリア自動化

GitHub ActionsやFTPツールのスクリプトで、デプロイ時に自動でキャッシュを削除する仕組みを導入するのも効果的です。

8.3 QAテスト時のキャッシュ検証手順

制作会社では、納品前に「キャッシュ有り」「キャッシュ無し」両方の状態をテストして、反映確認を行うのが一般的です。

9. まとめ：キャッシュを理解して快適なWEB運用を

キャッシュは、WEBの表示速度を支える欠かせない技術です。しかし、その仕組みを理解しないと、「変更が反映されない」というトラブルを招く要因にもなります。重要なのは、キャッシュを敵視することではなく、正しく制御し、賢く付き合うことです。

WEB制作や運用において、「キャッシュクリア」「キャッシュコントロール」は基本中の基本。今回紹介した内容を理解すれば、キャッシュに悩まされることなく、快適なWEBサイト運用ができるようになるでしょう。