スマホのホーム画面に置けるサイトを作ったら、なぜか古い画面が表示され続けた話
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
ツール工房.ai の中で、毎日触るタイプのツールは、スマホのホーム画面に置ける形にしています。
ブラウザのお気に入りから開くより、ホーム画面のアイコンから一発で開くほうが、ほんの一手間ですが体験がぐっと良くなる気がしたからです。
ただ、運用の途中で困ったことがありました。見た目を直して公開したはずなのに、実機では古い見た目のまま表示される という状態が起きたのです。調べると、以前読み込んだ見た目の部品が手元に残っていて、それが使われ続けていたのが原因でした。
じつは、この「古い画面のまま」に気づいて右往左往した顛末そのものは、以前 直しても古いまま問題に悩んだ話 に書きました。そちらは「どう気づいて、どう直したか」という体験の記録なので、この記事のほうは、その反省をふまえて裏側の仕組みを実際にどう組み直したか——設計の話に絞ってみます。
どのツールをホーム画面対応にしたか
最初にホーム画面対応を入れたのは、検索系のツール群でした。その後、2026年6月の末に、公開しているツール全部へまとめて広げています。
ホテル検索、スマホ料金比較、楽天最安値検索、子連れスポット検索など、スマホで「ちょっと開いて確認したい」場面が多いものを中心に対応しました。
逆に、月に数回しか開かないものや、操作の都合上アプリっぽい起動が向かないものには、ホーム画面対応を入れていません。
どれをホーム画面に置くかは使う人の自由ですが、私自身は、頻度の高いものだけを並べています。
「前に取ってきた中身」を出す仕組みで詰まった
ホーム画面対応の中で一番手応えがあったのが、「前に一度取ってきた中身」をどこまで残しておくか、というルール決めでした。
組んでいるルールはこうです。
画面の中身そのものは、毎回まずネットから取りに行く。もしネットがつながらなければ、しかたなく前に取ってきた中身で代用する。一方で、見た目や動きを支える部品ファイルは、前に取ってきたものをすぐ表示して、裏で最新を取り直しておく。よく中身が変わるものはネット最新を優先、めったに変わらない部品は手元優先、という役割分担です。
この形は最初から使っているのですが、落とし穴がありました。部品を手元優先にしている以上、部品の「世代」を上げ忘れると、直したはずの見た目が利用者の手元で古いまま残り続けるのです。冒頭の「実機で古い見た目のままだった」件は、まさにこれでした。部品の中身を直したときは、控えの世代番号も一緒に上げる。この運用をセットにして、ようやく安定しました。
なお、サイト本体のほうは組み立ての仕組みが部品を自動で別名にしてくれるので、この上げ忘れが起きにくくなっています。一方、個別のツールは部品のファイル名が固定なので、URLに更新用の目印を付けたり、控えの世代番号を変えたりを、更新のたびに手でやっています。同じ「部品を最新にする」でも、置き場所によって手当てが違うわけです。
「前に取ってきた中身」をしまっておく場所にも世代の番号を付けて、新しい裏側の仕組みが動き始めるタイミングで、古い世代を整理するようにしました。これを入れておかないと、古い在庫がスマホの中にずっと残り続けて、別の事故の元になります。
即時に切り替えるか、ボタンで知らせるか
新しい版を利用者にどう届けるかは少し悩みました。
「新しい版が出ましたよ」とバナーでタップしてもらう丁寧なやり方もあります。私のツールではバナーは使わず、新しい裏側の仕組みをできるだけ早く有効にする設定にしています。ただし、開いたままの画面がその場で入れ替わるとは限らないので、起動時の確認に加えて、どうしても古いままのとき用に「↻」の更新ボタンも各ツールに置いてあります。黙って切り替わるのを基本に、逃げ道のボタンを添える、という二段構えです。
私のツール群は「短い時間で答えを出して終わり」というものが中心なので、多少すぐに切り替わっても大きく困る場面は少なそうだと判断しました。ページを開くたびに軽くチェックも走るので、届くまでのタイムラグも自分で納得できる範囲に収まっています。
アイコンの背景で詰まった話
ホーム画面に置けるようにするには、アイコンや名前などをまとめた設定ファイルを用意します。
ここで失敗したのが、アイコンの背景 でした。
最初に用意した形式のアイコンが、iPhone のホーム画面ではうまく表示されないことが分かったのです。
対応としては、絵文字に色付きの背景を敷いた画像を、決まった大きさで3サイズ作って置きました。結局、アイコンは「それらしく見える画像を、行儀よく複数サイズ用意する」のがいちばん確実、という当たり前の結論に落ち着いています。
ネットがつながらない場面はどこまでやるか
ホーム画面対応では「ネットがつながらなくても動かせる場合がある」という話もありますが、これはツールの性質によって温度感が全然違います。
外部のサービスに問い合わせて結果を返すツール（ホテル検索や楽天最安値検索など）は、読み込み済みの一覧やデータを見るだけなら動くこともありますが、空室の確認やその場の検索のような「いま問い合わせる」機能は、ネットがないとどうにもなりません。
一方、端末の中だけで完結するツール（TODO のようなもの）なら、ネットがなくても普通に使える状態にできます。電車の中でさっと開ける体験は、地味ですが満足度が高い部分です。
アイコンを消した後の話
ホーム画面のアイコンを消せばそれで終わり、と最初は思っていました。
実際には、裏側で静かに動く小さな仕組みが端末に残っていることがあって、もう一度入れ直したときに古い動きを引きずる場合がある、と知って驚きました。
他の人の端末で起きると説明もしづらいので、ページを開くたびに「新しい版が来ていないか」を軽くチェックする、という保険だけは入れてあります。
振り返り
ホーム画面に置ける形にする、という話は、見栄えの良さ以上に、「なるべく新しい状態で使ってもらう仕組み」を考えないといけない、というほうが本体だな、と思いました。
ここを誤ると、自分で作ったツールが、自分のスマホで古いまま動き続ける、というちょっと滑稽な状態に陥ります（実際になりました）。
毎日使うものほど、更新の挙動を真面目に組んでおくと、後がぐっと楽になります。派手な機能を増やすよりも、こうした裏側の挙動を整える時間のほうが、結局はツールの寿命を延ばしてくれる気がしています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ