スマホで更新が反映されないとき、多くの場合は書いた内容が悪いのではなく、端末が前に読み込んだ古いファイルをそのまま使い回していることが原因だった。この環境では、直すべき場所は読者の端末ではなく、公開する側の仕組みのほうだった。

これは2026年9月21日に、ETERNALd.c.tの自社サイトで実際に起きたことの作業記録です。画像を軽くしても出ない、一覧が透明のまま、全ページが横にブレる、最後は新しいライバー2人だけスマホに出ない——この4つをどう切り分けたかを、時系列でそのまま並べます。

一般的な「キャッシュを削除してください」という手順の記事ではありません。運営側が何を直したか、の話です。ETERNALd.c.tには「専門用語より、中学生にも伝わる言葉で説明する」という約束があるので、この記事でも専門用語は必ず日常語に言い換えます。

結論:スマホで更新が反映されないのは、端末が「前と同じファイル」を使い回しているから

キャッシュとは「一度読んだものを端末が取っておく仕組み」

キャッシュは、一度開いたページの部品(文字の見た目、画像、動きの指示など)を、次に速く出すために端末がしまっておく仕組みです。悪いものではなく、これがあるから2回目以降の表示が速くなります。

問題は、しまっておく判断の基準がだいたい「ファイルの名前」だということです。端末は同じ名前のファイルを見ると「もう持っている」と判断して、中身が書き換わっていても取りに行かないことがあります。

なぜスマホだけ古いままになりやすいのか

パソコンには強制的に読み直す操作(Ctrl+F5 や Command+Shift+R)がありますが、スマホのブラウザに同じ操作はありません。結果として、パソコンでは新しく見えてスマホでは古いまま、という食い違いが起きます。

確認だけなら、シークレットモード(プライベートモード)で開く、別の端末で開く、という切り分けが使えます。それで直って見えるなら、端末が古いファイルを持っている可能性が高いと判断できます。

読者にキャッシュを消してもらう対処では、根本的に終わらない

ただ、訪問者全員に「キャッシュを消してください」と頼むのは現実的ではありません。更新のたびに同じ説明をすることになります。だからこの記事は、運営側が何を直せば聞かれなくなるか、の話に振り切ります。

記録①:画像81枚を50.7MB→7.5MBに軽くしても、初回表示で画像は出なかった

やったこと:81枚の軽量化、先読み、軽量版の自動生成

ETERNALd.c.tはライバー紹介ページを自社で運用しています(2026年7月時点で所属58名、個別プロフィールは55名分を掲載)。人数が多いぶん写真も多く、この日はまずライバー紹介の画像81枚を、合計50.7MBから7.5MBまで軽くしました。

あわせて main.js(ページの動きを決めるファイル)に先読み——次に使う画像を早めに読み込ませる処理——を足し、ライバー写真の軽量版を自動で作る流れも組みました。

それでも初めて開いた人の画面に画像が出なかった

ところが、初回表示では画像が出ませんでした。転送量は確かに減っているのに、画面には出ない。ここで分かったのは、「重いから出ない」と「そもそも出ない」は別の問題だということです。

軽量化しても直らないときは、軽量化以外の層を見る。内容を疑う前に、読み込みの経路を疑う。この切り替えが、この日いちばん最初の分岐点でした。

ライバー紹介ページの画像81枚を軽量化した前後のイメージ

LINE

読みながら気になったことは、そのままLINEで

「うちの場合はどうなる?」という個別の質問に、担当者がLINEでお答えします。

公式LINEで相談する

質問だけでも大丈夫です。担当者がLINEでお返事します。

記録②:スマホで同時に起きていた3つの不具合を、原因ファイル別に分けた

症状は3つ同時に出ていましたが、原因の置き場所はそれぞれ違いました。まとめて「反映されない」と呼んでいる限り、どれも直りません。

症状原因の置き場所日常語で言うと
ライバー一覧が透明のまま出てこないmain.jsページの動きの指示書
全ページが横にブレるstyle.css見た目の指示書
CSS・JSが古いまま読まれる.htaccess と ?v=サーバー側の保存期限と、ファイル名の印

一覧が透明のまま(main.js)

一覧が表示状態に切り替わらず、透明のまま止まっていました。要素自体はあるのに見えない状態です。

全ページの横ブレ(style.css)

全ページで横方向にわずかにはみ出していて、指でスワイプすると画面が横に動いてしまう。スマホ表示崩れの中でも気づかれにくく、指摘されにくい種類の崩れです。

CSS・JSが古いまま(.htaccess と ?v=)

3つめだけが本当のキャッシュ問題でした。中身を直しても、端末は同じ名前のファイルを持っているので取りに行きません。

対策は2つ。サーバー側の設定ファイル(.htaccess)で「このファイルは何日取っておいていいか」という期限を見直したこと。そして、ファイル名の後ろに印を足す方式(?v=)を入れたことです。

?v= は、言い換えるとファイル名の後ろに日付のような印を足すやり方です。中身は同じ場所にあるのに、端末から見ると別のファイルに見えるので、取りに行ってくれます。

この日の修正は、最終的に104ファイルに及びました。

外注やAIに直してもらう場合でも、症状は分けて伝えたほうが早いです。ETERNALd.c.tは「丸投げにさせない、置き去りにしない」を方針にしていますが、これは依頼する側にも当てはまります。「見た目が崩れている」「動きが止まっている」「古いまま出ている」の3つに分けて言えるだけで、返ってくる修正の精度が変わります。

記録③:本番で確認したら、新しいライバー2人だけがスマホに出なかった

手元で直っていても、本番のスマホ実機で見るまでは判断できませんでした。ここは先に書いておきます。

本番で確認したところ、一覧の表示、横ブレ、転送量の重さは解消していました。ところが、新しく追加した2人だけがスマホに出ない。パソコンでは出るのに、スマホでは出ない。

原因は、印(?v=)を付け忘れていたJSファイルを、端末が古いまま持っていたことでした。ファイルの中身には新しい2人が入っているのに、端末は自分が持っている古いほうを読んでいた。だから「2人だけ出ない」という中途半端な見え方になっていたわけです。

ここが今回いちばんの学びでした。

  • 一部だけ古い/特定の端末だけ古い → 内容ではなく、読み込み経路(キャッシュ)を疑う合図
  • 全部が古い → 公開そのものが通っていない可能性

ライバーは随時増えていく運用なので、放っておけば人を追加するたびに同じ症状が出る構造でした。

再発を止めた方法:公開のたびに、全CSS・JS・写真へ自動で印を付ける

1ファイルずつ印の付け忘れを目視で確認する運用は、104ファイル規模では続きません。人が気をつける方式は、必ずどこかで抜けます。

そこで最終的に、公開するたびに全CSS・JS・ライバー写真へ ?v=ハッシュ を自動で付ける仕組みに変えました。ハッシュというのは、中身が少しでも変わると自動で書き換わる印のことです。

中身をちょっとでも直したら、ファイル名の後ろの印が自動で書き換わる。端末は別物だと思って、必ず取りに行く。

これで、公開のたびに人が確認する手順を減らせました。読者側にキャッシュ削除を頼む前提からも降りられます。

ただし、これはこの環境での対応です。サーバーや公開の仕組みによって設定方法は変わります。コードが書けない場合は、外注やAIに「公開のたびにCSS・JS・画像へ自動でバージョンを付けてほしい」と伝えれば、だいたい通じます。

公開のたびに全ファイルへ自動でバージョンの印が付く仕組みのイメージ

キャッシュに見えて、キャッシュではなかった例

戻る・スワイプで写真とカードが消える

同じ9月21日、ブラウザの戻るボタンやスワイプでページに戻ると、写真やカードが消えるという症状も出ていました。

原因はキャッシュではなく、js/main.js のページ離脱時の表示(page-leave)を消し忘れていたことでした。ページを離れるときの演出が残ったままになっていた、というだけの話です。特定して修正し、実機で確認しました。

前日9月20日:設定ファイルが1か月効いていなかった

もうひとつ前例があります。前日の9月20日には、公開時の設定ファイル(netlify.toml)が約1か月のあいだ適用されていなかったことが分かりました。設定は書いてあるのに、効いていない。これも「反映されない」の一種です。

切り分けの順番

  1. パソコンとスマホで見え方が違うか
  2. シークレットモードで見ると直るか
  3. 一部だけ古いか、全部古いか
  4. そもそも設定ファイル自体が効いているか

同じ症状が出たときのチェック順(コードが読めなくても使える)

  • ①シークレットモードか別端末で見る — 直って見えるなら、端末が古いファイルを持っている可能性が高い
  • ②一部のページ・一部の要素だけ古い — そのファイルに印(?v=)が付いていない可能性を疑う
  • ③全部が古いまま — 公開そのものが通っていない、設定ファイルが効いていない可能性を見る
  • ④本番のスマホ実機で見るまで「直った」と判断しない — 手元で直っていても、本番では別の結果になることがある

外注やAIに伝えるときは、こう書けば通じます。

スマホだけ古い表示のままです。CSSとJSにバージョン(?v=)が付いているか確認してほしいです。

公開のたびに、CSS・JS・画像へ自動でバージョンを付ける形にできますか。

この記事は2026年9月21日のETERNALd.c.tの自社サイトでの記録です。ETERNALd.c.tはホームページ制作とライバー事務所運営を自社で行っていて、今回は作る側と運用する側の両方でこの症状を踏みました。環境によって最適な対応は変わるので、断定ではなく「この環境ではこうだった」として読んでください。

この日の作業はここまで

104ファイルの修正内容や、その後どう運用が変わったかは、X(@kazuto_AI_auto)で実作業のログとして続けて出しています。続きを追いたい方はフォローしてもらえればと思います。

ETERNALd.c.tでは、AI導入支援とホームページ制作を行っています。同じように「直したのに直らない」で止まっている方は、info@eternaldct.net か公式LINE(@585fuemj)から、相談だけでも受け付けています。即決は不要で、質問だけでも大丈夫です。