ホームページが、iPhoneのSafariだけ崩れる｜自分で確かめる5つと、直してもらうときに伝えること【2026年版】

こんにちは、株式会社ソライルの波多野です。

「パソコンやAndroidでは、ふつうに見えるのに、iPhoneだけ表示が崩れる」
「お客様から、『スマホで見ると、ボタンが押せない』と言われた」
ホームページは、見る人の機種やブラウザによって、表示のされ方が少しずつ違います。

なかでも、iPhoneのSafariだけで表示が崩れる、というご相談は少なくありません。
この記事では、Webが専門ではない経営者・ご担当者の方に向けて、次のことを順番にご説明します。

• なぜ、Safariだけ崩れることがあるのか
• 自分で確かめる5つのこと
• よくある崩れ方と、原因の見当
• 直してもらうときに伝えること

直す作業そのものは、ホームページの作り（CSSなど）を触るため、制作会社や保守会社に任せるのが安心です。
この記事では、任せる前に知っておきたいことを中心にご説明します。

1. なぜ、Safariだけ崩れることがあるのか

ブラウザごとに、表示の仕組みが違う

ホームページは、ブラウザが「表示の仕組み」（エンジン）を使って、文字や画像を並べています。

同じホームページでも、仕組みが違うと、細かな解釈が違い、表示がずれることがあります。

iPhoneでは、Chromeでも同じことが多い

Appleの審査の決まりでは、iPhoneでホームページを見るアプリは、WebKitの仕組みを使うことが基本とされています。
日本では、別の仕組みを使うための申請もできるようになりましたが、iPhoneのブラウザの多くは、今もSafariと同じ仕組みで表示しています。
つまり、「iPhoneのChromeでも同じように崩れる」ことがよくあります。

iPhoneで崩れるときは、「Safariの問題」というより、「iPhoneでの表示の問題」と考えると分かりやすくなります。

2. 自分で確かめる5つのこと

1. ほかのiPhoneでも崩れるか

社内のほかのiPhoneでも同じページを開いてみます。
1台だけ崩れる場合は、そのiPhoneの設定や、iOSのバージョンが原因のことがあります。

2. iOSが古くないか

「設定」→「一般」→「情報」で、iOSのバージョンを確かめます。
古いiOSのSafariでは、新しい書き方に対応しておらず、崩れることがあります。

3. 縦向きと横向き、文字の大きさの設定

横向きにすると直る、または崩れる、ということがあります。
また、iPhoneの「画面表示と明るさ」や「アクセシビリティ」で文字を大きくしていると、文字がはみ出すことがあります。

4. 古い表示が残っていないか（キャッシュ）

ホームページを直したばかりなのに、古い表示のままということがあります。
Safariのタブを閉じて開き直すか、「設定」→「アプリ」→「Safari」の「履歴とWebサイトデータを消去」を試します（ほかのサイトのログインも消えるため注意します）。

5. いつから崩れたか

• 最初から崩れていたのか
• テーマやプラグインを更新した頃からか
• iOSを更新した頃からか

いつからかが分かると、原因の見当がつきやすくなります。

3. よくある崩れ方と、原因の見当

多くは、ホームページの見た目を決めるファイル（CSS）の書き方で直ります。
ただ、1か所を直すと、ほかの機種で崩れることもあるため、直したあとはパソコン・Android・iPhoneの3つで確かめます。
スマホ対応の全体の確かめ方は、関連記事「WordPressのスマホ対応」でもご紹介しています。

テーマやプラグインの更新のあとに崩れたとき

WordPressのテーマやプラグインを更新したあとに崩れた場合は、更新で見た目のファイルが変わった可能性があります。
テーマに直接手を入れていると、更新で手を入れたところが消えることもあります。
関連記事「WordPressのテーマを更新したらデザインが消えた？」もあわせてご覧ください。

4. 直してもらうときに伝えること

制作会社や保守会社に頼むときは、次のことを伝えると、原因を早く見つけてもらえます。

スクリーンショットは、崩れている部分と、正しく見えている機種の画面を並べて送ると伝わりやすくなります。

5. 放っておくと困ること

iPhoneは、日本では多くの方が使っているスマホです。
iPhoneだけの崩れでも、見ている方にとっては「このホームページは見づらい」という印象になります。
特に、次のような崩れは、お問い合わせや予約に直接響くため、早めに直します。

• お問い合わせや予約のボタンが押せない、隠れている
• 電話番号やフォームが表示されない
• メニューが開かない

6. ご自身で進めるか、任せるかの目安

7. ソライルの保守での見守り方

ソライルのホームページ保守では、WordPressのサイト向けのスタンダードプラン以上で、WordPress本体・プラグイン・テーマの更新と、更新後の表示確認を毎月行っています。
「iPhoneでだけ崩れる」「お客様から見づらいと言われた」というご相談も承っています。
機種ごとの表示を確かめて原因を見つけ、パソコン・Android・iPhoneで崩れないように直すところまでお任せいただけます。

ソライルはお客様に2つのことをお約束しています。
毎月、必ずサイトを確認します。
毎月、月次報告をメールにてお送り致します。

月次報告はスタンダードプラン以上が対象で、ライトプランではオプションで追加できます。

8. まとめ

• ブラウザごとに表示の仕組みが違い、iPhoneではChromeでも多くはSafariと同じ仕組みで表示される
• まず、ほかのiPhone・iOSのバージョン・縦横や文字の大きさ・古い表示・いつからかを確かめる
• 横にずれる、ボタンが隠れるなど、崩れ方から原因の見当がつく
• 直すときは、パソコン・Android・iPhoneの3つで確かめる
• 頼むときは、ページ・機種・iOS・ブラウザ・写真・いつからを伝える

「iPhoneでの見え方を、一度きちんと確かめたい」と思われたら、ソライルの無料サイト健康診断をご利用ください。
フォームにURLを入れて送っていただくだけで、通常1営業日以内に、メールで所見をお返しします。
営業のお電話はいたしません。

▶ 無料サイト健康診断を申し込む

ホームページの更新と確認を、毎月まとめて任せたい方は、ホームページ保守サービスのページもご覧ください。

▶ ホームページ保守サービス（料金・プラン）

関連記事

• WordPressのスマホ対応｜できているかの確かめ方と、今のサイトに合う4つの方法
• WordPressのテーマを更新したらデザインが消えた？原因と戻し方、子テーマで安全に更新する方法【経営者向け】
• ホームページの画像は小さくしてからアップする｜用途別のサイズ・容量の目安と、Windows・Mac・スマホでの縮小手順【2026年版】
• WordPressのアップデートの注意点｜更新前の確認5つ・失敗したときの戻し方

よくある質問

Q. iPhoneのChromeで見ても崩れます。Safariの問題ではないのですか？

A. iPhoneのブラウザの多くは、ChromeでもSafariと同じ表示の仕組み（WebKit）を使っています。
そのため、iPhoneではSafariでもChromeでも、同じように崩れることがよくあります。

Q. 自分のiPhoneだけ崩れます

A. iOSのバージョンが古い、文字を大きくする設定にしている、古い表示が残っている、といった理由が考えられます。
ほかのiPhoneでも同じページを開いて、同じように崩れるかを確かめてください。

Q. パソコンのSafariでも崩れますか？

A. パソコン（Mac）のSafariも同じ仕組みを使っているため、同じように崩れることがあります。
ただ、画面の大きさが違うため、iPhoneだけで起きる崩れもあります。

Q. 古いiPhoneのお客様にも、合わせたほうがよいですか？

A. すべての古い機種に完全に合わせるのは、難しいことがあります。
お問い合わせのボタンやフォームなど、大事なところが使えることを優先して確かめます。

Q. 直すのに、どれくらいかかりますか？

A. 原因が1か所の見た目の指定であれば、早く直ることが多くあります。
ただ、テーマ全体の作りに原因がある場合は、確かめる範囲が広くなります。
まずは、崩れるページと機種を伝えて、見てもらうのがおすすめです。

Q. 写真は、どうやって撮ればよいですか？

A. iPhoneでは、サイドボタンと音量を上げるボタンを同時に押すと、画面の写真（スクリーンショット）が撮れます。
崩れている部分が分かるように撮り、どこがおかしいかを一言添えて送ってください。