ホームページ更新が反映されないスマホ｜直らない1日の記録

更新したのにスマホだけ表示が変わらないとき、多くは作業ミスではなく、端末に残った古いコピー（キャッシュ）が原因です。ただし、その場合でも読者側のキャッシュ削除だけでは根本解決しません。

この記事は、原因を並べた解説ではありません。2026年9月21日、ETERNALd.c.tが自社サイト（55名分のライバー紹介ページを持つサイト）で一日かけて直し続けた記録を、時系列でそのまま公開します。何度も直しているのに直らない――その焦りは、私たちもこの日ずっと味わっていました。

結論：スマホだけ反映されないのは、端末に残った古いコピーが原因のことが多い

更新したのにスマホだけ古い表示のままなら、最初に疑うべきはFTPの上げ忘れではなく、端末に残った古いコピーです。

「キャッシュ」とは端末に残った古い表示のコピーのこと

キャッシュとは、ブラウザが表示を速くするために、一度開いたページのデータを端末の中に保存しておく仕組みです。次に同じサイトを開いたとき、サーバーに取りに行かず、手元に残っている控えをそのまま見せます。

だから「サーバー側は新しいのに、画面は古いまま」という食い違いが起きます。作業は正しく終わっているのに、見ている側が昔の写しを見続けている状態です。

自分の端末で直っても、訪問者のスマホでは直っていない

ここが一番大事な前提です。自分のスマホのキャッシュを消しても、訪問者のスマホのキャッシュは消せません。

つまり、よく紹介されている「スーパーリロードしてください」「キャッシュを削除してください」という対処は、あくまで確認方法であって、解決策ではありません。訪問者全員に同じ操作をお願いすることはできないからです。

ただしキャッシュではない「崩れ」も混ざっている

一方で、次のような症状はキャッシュとは別の問題です。

• 横にスクロールしてしまう（画面が横にブレる）
• 一覧が透明のまま表示されない
• 戻るボタンやスワイプで写真が消える

これらは反映はされているのに崩れている状態です。見分け方は記事の後半に書きます。この日の私たちは、この2種類が同時に起きているサイトを相手にしていました。

2026年9月21日、自社サイトを一日かけて直し続けた記録

ここからが本題です。順番を整えずに、実際に見落としていた順序のまま書きます。

① ライバー一覧が透明のまま表示されない（js/main.js）

この日最初に見つかった症状は、所属ライバーの一覧ページで、カードが透明のまま表示されないというものでした。スクロールしても、そこに何もないように見える。

修正対象は js/main.js。表示を組み立てるプログラム側の問題でした。CSS（見た目の指定）ではなくJS（画面の動きを作る処理）が原因だったため、ここを直しました。

② 全ページでスマホが横にブレる（style.css）

次に見つかったのが、全ページでスマホ表示が横にブレる症状です。指を横に滑らせると、本来ないはずの余白まで動いてしまう。いわゆる横スクロールが出ている状態です。

こちらの修正対象は style.css。見た目の指定ファイル側でした。1ページだけでなく全ページで起きていたため、共通のCSSを直すことで一括で解消しています。

③ キャッシュ対策を、本番ではなく先にstagingへ入れた

3つめに、CSSとJSのキャッシュ対策を入れました。具体的には .htaccess（サーバーの動きを決める設定ファイル）と、?v= というファイル名の後ろに付ける版番号の仕組みです。

これを、いきなり本番サイトには入れませんでした。同じ内容を staging（本番に出す前の、練習用のサイト）へ先に追加して確かめています。理由は単純で、設定ファイルを触ると表示そのものが壊れることがあり、壊れた状態を訪問者に見せたくなかったからです。

④ 画像81枚を50.7MB→7.5MBに軽量化し、先読みを追加

同じ日に、画像の軽量化も行いました。対象は81枚、合計50.7MBあったものを7.5MBまで落としています。これは自社サイトでの実測値です。

あわせて main.js に先読み（次に表示する画像をあらかじめ取りに行く処理）を追加しました。55名分のプロフィールページを持つサイトでは、画像の重さがそのまま表示の遅さになります。

項目	変更前	変更後
画像枚数	81枚	81枚
合計容量	50.7MB	7.5MB

⑤ 104ファイルを本番へ反映

①〜④の修正をまとめ、合計104ファイルを本番へ反映しました。

正直に書くと、この時点で私たちは「今日はこれで終わった」と思っていました。実際には、ここからが長かったのです。

本番確認で分かった「新しい2人だけスマホに出ない」

サイト全体は直っていた

本番に反映したあと、スマホで実際に開いて確認しました。結果は次のとおりです。

• スマホの一覧表示 → 修正済み
• 全ページの横ブレ → 修正済み
• 転送（リダイレクト）の動き → 修正済み

ここまでは想定どおりでした。

なのに新ライバー2人分だけがスマホに出てこない

ところが、新しく追加した2人分のライバーだけが、スマホでは一覧に出てきません。全部が古いのではなく、一部だけが古いという状態です。

これが厄介でした。全部古いなら「反映されていない」と一目で分かります。でも大半は新しくなっているので、つい「追加作業のほうを間違えたのでは」と自分を疑ってしまう。実際、私たちも追加データのほうを何度も見直しました。

原因は、版番号のないJSが端末に残っていたこと

原因は、版番号（?v=）が付いていないJSファイルが1本、端末に残っていたことでした。

HTML（ページの骨組み）は新しく取りに行っているのに、表示を組み立てるJSだけが古い版のまま、手元の控えを使い続けていたのです。古いJSには新しい2人の情報を読む処理が入っていない。だから2人だけ出てこない。

ここが多くの解説記事で抜け落ちている点だと思います。キャッシュは一枚岩ではありません。ファイルの種類ごとに新しさが違います。 HTMLだけ新しくて、CSSやJSは古いまま、という状態が普通に起こります。

だから「新しく追加したページだけ出ない」「新しいデータだけ反映されない」という症状のときは、作業ミスを探す前に、CSS/JSに版番号が付いているかを見てください。

なお、この日はあわせてURLの読みを登録し直した2人分（pikapika-bousou-magma-mochi-chan ／ yuzuka-yuzumaru）についても、同じ流れで表示を確認しています。

その場で試せる確認手順：自分のスマホで確認しないこと

一番確実な確認方法は、一度もそのサイトを開いたことがない端末で開くことです。

自分のスマホは、そのサイトを何十回も開いています。つまり古い控えが最も溜まっている端末であり、確認相手としては一番あてになりません。自分の端末で直って見えても、それは自分の端末だけが更新された可能性があります。訪問者に見えているかは、まったく別の話です。

確認手順の一覧

方法	やること	何が分かるか
別の端末で開く	家族・友人のスマホで開いてもらう	訪問者に実際どう見えているか
回線を変える	Wi-Fiを切ってモバイル回線で開く	ルーターやプロバイダ側に古いものが残っていないか
シークレットモード	Safari／Chromeのプライベートブラウズで開く	履歴を消さずに「初回訪問に近い状態」を再現
スーパーリロード（PC）	Windows: Ctrl+F5 ／ Mac: Command+Shift+R	サーバーから取り直した状態の表示

iPhone・Androidでのキャッシュ削除手順

• iPhone（Safari）：設定 → Safari → 履歴とWebサイトデータを消去
• Android（Chrome）：Chrome → 右上メニュー → 設定 → プライバシー → 閲覧履歴データを削除

スマホにはPCのようなスーパーリロードがありません。履歴ごと消すのが不安な場合は、シークレットモードで開くのが現実的な代わりになります。

ただし、ここで冒頭の結論に戻ります。これらはすべて確認方法です。訪問者全員に同じ操作を頼むことはできません。だから、直すべきは公開する側の仕組みです。

公開側で二度と起こさない：全CSS/JS/写真に版番号を自動で付ける

この日の最終的な対策は、公開時に全CSS/JS/ライバー写真へ ?v=ハッシュ を自動付与する仕組みを追加することでした。

?v=ハッシュとは「ファイル名に付ける版番号」

?v= とは、ファイルのURLの後ろに付ける版番号のことです。

• 古い：/css/style.css
• 新しい：/css/style.css?v=8f3a1c

ブラウザから見ると、この2つは別のファイルに見えます。手元に控えがないので、サーバーへ取りに行き直します。中身を変えるたびにこの番号が変われば、訪問者の端末には必ず新しいほうが届く、という考え方です。

公開するたびに自動で付け替わる仕組みにした

私たちはこれを、公開処理の中で自動的に付け替わるようにしました。ファイルの中身から番号を計算するので、中身が変わったファイルだけ番号が変わります。

手で付け直す運用にしなかった理由

手作業にしなかった理由は、この日の失敗そのものです。

55名分のページと81枚の画像を抱えた状態で、公開のたびに人の手で番号を書き換えるのは、必ずどこかが漏れます。実際、たった1本のJSに版番号が付いていなかっただけで、新しい2人がスマホに出ませんでした。漏れる前提で考えるなら、人がやらない形にするしかありません。

この仕組みを入れたあとは、更新のたびに訪問者へ「キャッシュを削除してください」とお願いする必要がなくなります。そもそも、お願いされた訪問者のほとんどは操作しませんし、操作しなかった人にはずっと古いサイトが見えたままです。

「反映されている」のに崩れているときの見分け方

見分けの基準はひとつです。一度もそのサイトを開いていない端末でも同じ崩れが出るなら、キャッシュではなく、CSSやJSそのものの不具合です。

横にブレる・横スクロールが出る場合

CSS側の問題であることが多いです。当社の例でも、全ページの横ブレは style.css の修正で解消しました。画面の幅からはみ出している要素がどこかにある、という見た目の指定の話です。

一覧が透明で表示されない場合

JS側の問題でした。当社では js/main.js が原因です。データは届いているのに、画面に出す処理が途中で止まっていると、この見え方になります。

戻る／スワイプで写真やカードが消える場合

この日の最後に見つかったのが、この症状でした。ブラウザの戻るボタンや、横スワイプでページを戻ると、写真やカードが消えてしまう。

原因は js/main.js の page-leave の消し忘れでした。page-leave とは、ページを離れるときに画面を薄くする演出の処理です。離れるときに「薄くする」を付けるのに、戻ってきたときに「薄くする」を外していなかった。だから戻ると薄いまま＝消えたように見えていたわけです。

修正後、実機で確認して解消しています。

症状	疑う場所	キャッシュか
全部が古い表示のまま	版番号（?v=）の有無	キャッシュ
新しく足した分だけ出ない	CSS/JSの版番号	キャッシュ
横にスクロールする	CSS（style.css）	不具合
一覧が透明で出ない	JS（main.js）	不具合
戻ると写真が消える	JS（page-leave処理）	不具合

一日を振り返って、見落としていた順序

直す順番より、確認する端末を間違えていた

この日いちばんの反省は、修正の腕ではなく確認の方法でした。

自分のスマホで確認し続けたぶん、古い控えを見ていた時間があります。その間、直っているものを「まだ直っていない」と判断して、同じ場所を何度も触っていました。時間を使った割に、何も進んでいない時間帯が確かにありました。

何度も直しているのに直らないときは、自分を疑う前に仕組みを疑う

「直したのに直らない」と感じているとき、人はまず自分の作業ミスを探します。そして同じファイルを何度も開き直します。

おすすめしたい順序はこうです。

1. まず確認する端末を変える（自分以外のスマホ、Wi-Fiを切った回線）
2. それでも直っていないなら、公開側の仕組み（版番号の有無）を見る
3. どの端末でも同じ崩れが出るなら、CSS/JSそのものを疑う

この順序を間違えたのが、9月21日の私たちです。格好はつきませんが、そのまま書きました。

ETERNALd.c.t（代表：畑 和寿／設立2025年5月）は、AI導入支援やライバー事務所運営とあわせて、ホームページ制作も行っています。大切にしているのは「丸投げにさせない、置き去りにしない」「専門用語より、中学生にも伝わる言葉で説明する」という約束です。この記事も、同じ方針で書きました。

まず今日、これだけ試してください

自分のスマホではなく、家族や友人のスマホで、できればWi-Fiを切った状態で、自分のサイトを開いてもらってください。

そこで正しく表示されていれば、あなたの作業は終わっています。古いまま出るなら、作業ミスを探す前に、CSSとJSに版番号（?v=）が付いているかを確認してください。

こうした運用記録の続きは X（旧Twitter） @kazuto_AI_auto で発信しています。同じように詰まった日の記録を続けて載せていくので、よければフォローして追いかけてみてください。

ホームページの表示や更新でお困りのことがあれば、ETERNALd.c.tにご相談いただけます。質問だけでも、相談だけでも大丈夫です。即決は必要ありません。

• お問い合わせフォーム：https://eternaldct.net/contact.html
• メール：info@eternaldct.net
• 公式LINE（ID）：@585fuemj