介護施設のホームページが、iPhoneだけ真っ白になった話
nakuru
この記事の目次
ホームページを作っていて、ヒヤッとした出来事がありました。
完成したページを、念のため自分のiPhoneで開いてみたら、ある部分がまるごと真っ白。何も表示されていなかったんです。パソコンで見たときは、完璧に表示されていました。なのに、iPhoneでは消えている。
この記事は、その原因を突き止めるまでの記録と、そこから私が学んだことの話です。技術的な話が少し出てきますが、「ホームページを作る人」「ホームページを持っている事業者」すべてに関わる教訓だと思うので、できるだけわかりやすく書きます。
この記事では、
- パソコンで正常でも、スマホで崩れることがあるのはなぜか
- ChromeとSafariの「見えない違い」とは何か
- だからこそ欠かせない「実機確認」という習慣
この3点を、実際の体験にそって整理します。
パソコンの画面では、完璧に見えていた
その日、私はホームページのあるセクションを作り込んでいました。施設のデモを並べて見せる部分で、写真とカードを組み合わせた、少し凝ったデザインです。
パソコンの画面で見ると、狙いどおりに仕上がっていました。写真がきれいな正方形に収まり、その下にカードが少し重なって、立体感のあるレイアウトになっている。スマホ表示も、パソコンの開発ツール（ブラウザに付いている、画面サイズを切り替えて確認する機能）で何度も確認しました。問題なし。
この「開発ツールでのスマホ確認」が落とし穴になるとは、このときは思っていませんでした。パソコン上では、スマホサイズにしても、ちゃんと表示されていたのです。
iPhoneで開いたら、まるごと消えていた
念のため、自分のiPhoneで実際のページを開いてみました。
そのセクションが、まるごと真っ白でした。写真もカードも、何も表示されていない。見出しの文字だけがあって、その下に大きな空白が広がっているだけ。パソコンで見た、あの仕上がりはどこにもありませんでした。
正直、一瞬で血の気が引きました。もしこれに気づかず公開していたら、スマホで見た人にとっては「何もないページ」です。介護施設を探しているご家族の多くはスマホで見ます。その人たちに、空白を見せていたことになる。
まず疑ったのは、ブラウザのキャッシュ（一度見たページを一時的に保存しておく仕組み。古い状態が残ることがある）でした。そこで、キャッシュを使わない「プライベートモード」で開き直しました。それでも真っ白。さらに、iPhoneのChromeでも開いてみました。やはり真っ白。キャッシュの問題ではない、と確定しました。
原因は「ブラウザのエンジン」の違いだった
切り分けを進めて、はっきりしたことがあります。パソコンのChromeでは正常、iPhoneでは崩れる。同じページ、同じ場所なのに、見る端末によって結果が違う。
ここに、多くの人が知らない「ブラウザの仕組み」が関わっています。
ChromeとSafariは、見た目が同じでも中身が違う
ブラウザには「エンジン」と呼ばれる、ページを画面に描き出すための心臓部があります。車でいえばエンジンのようなもので、外側（ブラウザの見た目）が同じでも、中身が違えば走り方が変わります。
パソコンのChromeは「Blink」というエンジン、Safariは「WebKit」という別のエンジンを積んでいます。そして、ここが重要なのですが、iPhoneのブラウザは、Chromeという名前がついていても、中身はすべてSafariと同じWebKitです。これはAppleのルールで、iPhone上のブラウザは全部WebKitで動くことになっています。
だから、「iPhoneのSafariでもChromeでも崩れた」のは、当然だったのです。どちらも同じエンジンなのですから。一方、私がパソコンで確認していたのはChrome＝Blinkエンジン。そもそも別のエンジンで確認していたわけです。
同じ指示書でも、解釈が変わることがある
ホームページのデザインは、「この部分はこういう形にしてください」という指示書（CSSと呼ばれる仕組み）でできています。ブラウザのエンジンは、その指示書を読んで、画面に描き出します。
ところが、同じ指示書でも、エンジンによって解釈が微妙に違うことがあるのです。とくに、比較的新しい書き方や、少し複雑な指定では、その差が出やすい。片方のエンジンは指示どおりに描くのに、もう片方は描けない、ということが起こります。
今回は、まさにそれでした。私が使っていた、写真の形を整えるための指示が、Blink（パソコンのChrome）では正しく伝わり、WebKit（iPhone）では伝わらなかった。その結果、写真の高さが「ゼロ」と計算されてしまい、写真が完全に潰れて消えていたのです。
実際に何が起きていたのか
もう少しだけ具体的に書きます。技術に興味のない方は、この段落は読み飛ばしても大丈夫です。
私は、写真を入れる「枠」のほうに「正方形にしてください」という指示を出し、中の写真には「枠の高さにぴったり合わせてください」という指示を出していました。つまり、枠が高さを決めて、写真がそれに従うという作りです。
Blinkエンジンは、この「枠が決めた高さ」を、ちゃんと写真に伝えてくれます。ところがWebKitエンジンには、この受け渡しがうまくいかない既知のクセ（バグ）がありました。写真が参照しようとした枠の高さが「未定」と判断され、結果として写真の高さがゼロになり、消えてしまったのです。
直し方は、考え方を逆にすることでした。「枠が高さを決めて写真が従う」のをやめて、「写真自身が正方形になる」ように指示を変えた。こうすると、枠は写真の大きさに自然と従うだけになり、ややこしい受け渡しが発生しません。WebKitでも安定して表示されるようになりました。
修正は、文字にすればこれだけです。でも、ここに行き着くまでが本題でした。「パソコンでは正常」という事実が、かえって原因究明を遠回りにする。パソコンで正しく見えているものを、疑うのは難しいのです。
この経験で、あらためて徹底したこと
今回の件で、自分の中ではっきりさせたことが2つあります。
1. パソコンの「スマホ表示確認」を、確認したことにしない
パソコンの開発ツールでスマホサイズに切り替える機能は、便利です。でもあれは「画面の幅をスマホと同じにする」だけで、エンジンはパソコンのまま。本物のiPhoneやAndroidとは別物です。レイアウトのざっくりした確認には使えますが、「これで確認した」と言い切ってはいけない。本物の端末で見て、はじめて確認したことになります。
2. 公開前に、必ず実機（本物のスマホ）で全ページを見る
これは以前からやっていたつもりでしたが、今回「念のため」で開いたiPhoneが、致命的な崩れを見つけてくれました。もし「パソコンで完璧だから大丈夫」と公開していたら、と思うとぞっとします。実機確認は「念のため」ではなく、制作工程の必須の一手順として組み込む。そう決め直しました。
介護施設のホームページこそ、実機確認が要る
これは、介護施設のホームページにとって、とくに大事な話だと思っています。
介護施設を探すのは、入居される本人よりも、そのご家族であることがほとんどです。そしてご家族は、仕事や家事の合間に、スマホで施設を調べます。パソコンの前にじっくり座って探す人は、むしろ少数です。つまり、介護施設のホームページはスマホで見られることが前提の媒体なのです。
そのスマホで、肝心の部分が真っ白だったら。料金が見えなかったら。写真が表示されなかったら。検討者は「何かおかしいな」と感じて、静かに離れていきます。わざわざ「おたくのホームページ、崩れてますよ」と教えてくれる人はいません。崩れに気づかないまま、問い合わせだけが来ない、という状態が一番こわい。
もし、すでにホームページをお持ちで、しばらく自分のスマホで隅々まで見ていないなら、一度ゆっくり確認してみてください。パソコンで作った人が「できました」と言っていても、それはパソコンでの話かもしれません。チェックすべきは、ご家族が実際に手に取る、その小さな画面です。
まとめ
- ホームページのある部分が、iPhoneでだけ真っ白に消えるトラブルが起きた
- パソコンのChromeでは正常。原因はブラウザの「エンジン」の違いだった
- iPhoneのブラウザは、Chromeでも中身はSafariと同じ「WebKit」。パソコンのChromeとは別のエンジン
- 同じデザイン指示でも、エンジンによって解釈が変わり、片方で崩れることがある
- パソコンの「スマホ表示確認」は画面幅を変えるだけで、本物の実機とは別物
- 公開前の実機確認は「念のため」ではなく、必須の手順にすべき
ホームページ制作は、見えないところで、こういう細かい落とし穴と向き合う仕事です。私は介護の現場を22年やってきて、Web制作は専門の出身ではありません。だからこそ、「パソコンで動いたから大丈夫」と簡単に言わず、実際に使われる場面を一つひとつ確かめることを大事にしています。今回のトラブルも、その姿勢が見つけてくれたものでした。地味な確認の積み重ねが、最後はホームページの信頼を守るのだと思っています。
