ホームページの表示崩れを確認する方法
自分のパソコンではきれいに見えるのに、お客さまのスマートフォンでは崩れている。
ホームページの表示は、見る端末やブラウザによって変わることがあります。
この記事では、ホームページの表示崩れを確かめる方法を解説します。
1.端末・ブラウザ・画面の幅
| 確かめるもの | 例 |
|---|---|
| 端末 | iPhone、Androidのスマートフォン、タブレット、パソコン |
| ブラウザ | Safari、Chrome、Edge、Firefox |
| 画面の幅 | 小さめのスマートフォン、大きめのスマートフォン、横向き、パソコンの広い画面 |
すべての組み合わせを確かめるのは大変なので、見に来る人が多い端末とブラウザを優先しましょう。GA4で、見に来る人の端末やブラウザを確かめられます。
2.表示崩れが起きる理由
ブラウザによって、ホームページの表示のしかたが少しずつ違います。また、画面の幅が違うと、文字の折り返しや、要素の並び方が変わります。
作ったときはきれいに表示されていても、WordPressやプラグインの更新、ブラウザの更新、文章や画像の差し替えをきっかけに、崩れが起きることもあります。
表示崩れは、見に来る人が多い端末から、実際に見て確かめるのがいちばん確実です。
3.確かめ方
1. 実際の端末で見る
自分や家族、社内の人のスマートフォンで見るのが、いちばん確実です。iPhoneとAndroidの両方で見られると安心です。
2. パソコンでスマートフォンの表示を見る
Chromeのデベロッパーツールを開き、端末の印のボタンを押すと、スマートフォンの画面の大きさで表示を確かめられます。使い方は、Google Chromeのデベロッパーツールの基本的な使い方で解説しています。
3. ブラウザの幅を変えてみる
パソコンのブラウザの幅を、少しずつ狭くしたり広くしたりして、崩れる幅がないか確かめます。
よく見る崩れと確かめるところ
- 横にはみ出して、左右に動く
- 文字や画像が重なる
- ボタンが押しにくい、画面の外に出ている
- 表が読めない、切れている
- メニューが開かない
崩れを見つけたときの伝え方
- 崩れているページのURL
- 端末とブラウザ（例：iPhone の Safari）
- 画面を撮った画像
- いつから崩れているか
4.よくある質問
自分のスマートフォンでは崩れていません。
端末の大きさや、ブラウザ、文字の大きさの設定によって、崩れることがあります。お客さまの端末とブラウザを聞いてみましょう。
Safari でだけ崩れます。
Safari は、ほかのブラウザと表示のしかたが少し違うことがあります。iPhoneやMacの実機で確かめましょう。
崩れていたのに、いつの間にか直っていました。
ブラウザに古い表示が残っていた可能性があります。キャッシュを消して確かめましょう。
どの端末まで確かめればよいですか？
GA4で、見に来る人が多い端末とブラウザを確かめ、多いものから確かめましょう。
5.まとめ
ホームページの表示崩れは、端末、ブラウザ、画面の幅によって起きます。
- 見に来る人が多い端末とブラウザを優先して確かめる
- 実際のスマートフォンで見るのがいちばん確実
- パソコンでは、デベロッパーツールでスマートフォンの表示を確かめる
- 崩れを伝えるときは、URL、端末、ブラウザ、画像をそろえる
まずは、自分のホームページの主なページを、iPhoneとAndroidの両方で開いてみましょう。
表示崩れの原因が分からない場合は、浅草Web屋にご相談ください。
6.自分のホームページを確認する
何から確認すればよいか分からない方は、まず無料チェックをお試しください。ホームページのURLを入力すると、公開情報から確認できる範囲で、サイトの状態をチェックできます。
※無料チェックで確認できるのは、外部から見える公開情報の範囲です。サーバー内部の設定や、すべての弱点を確認できるわけではありません。結果は、ホームページ全体の安全性を保証するものではありません。ご自身のサイト、または管理者の了承があるサイトでご利用ください（利用規約）。
もっと詳しく調べたい場合や、修正・復旧について困っている場合もご相談いただけます。相談する