「取引先のPCで見たらレイアウトが崩れていた」と言われて確認したが、自分の環境では問題なく見える。この状況で最初にやるべきは、修正の依頼ではなく環境の特定です。ブラウザによって表示に差が出るのはある程度は避けられないことであり、すべてを一致させる必要もありません。この記事では、確認すべき環境と、直すべき崩れの線引きを整理します。
表示が完全に一致することはない
前提を揃えます。
ブラウザごとに描画の仕組みが異なる
Chrome・Safari・Edge・Firefoxは、それぞれ独自の仕組みでページを描画します。フォントの太さ、行間、入力欄の見た目、影の付き方などに、わずかな差が生じるのは不具合ではなく仕様です。（1ピクセルの差を追いかけると、費用だけが増えます）
OSによってフォントが変わる
WindowsとMacでは、標準で使えるフォントが異なります。同じ指定をしていても、実際に表示されるフォントが違えば、文字の幅も改行位置も変わります。2行に収まっていた見出しが3行になる、という程度の差は日常的に発生します。
直すべきは読めない・押せない・はみ出す崩れ
判断基準は明確です。以下に該当するなら修正、しないなら許容してください。
| 症状 | 判断 |
|---|---|
| 文字が背景と重なって読めない | 修正する |
| ボタンが押せない・反応しない | 修正する |
| 横スクロールが発生する | 修正する |
| 画像が表示されない | 修正する |
| フォームが送信できない | 修正する |
| メニューが開かない | 修正する |
| 見出しの改行位置が違う | 許容する |
| 文字の太さがわずかに違う | 許容する |
| 余白が数ピクセル異なる | 許容する |
| 入力欄の見た目が違う | 許容する |
確認すべき環境は5つに絞れる
すべての環境を確認する必要はありません。
優先すべき確認環境
- iPhoneのSafari（国内のスマートフォン閲覧で最多）
- AndroidのChrome
- WindowsのChrome
- WindowsのEdge（法人利用が多い）
- MacのSafari（必要に応じて）
自社サイトの実際の内訳で判断する
GA4のレポートで、訪問者が使っているブラウザとOSの内訳を確認できます。自社サイトでほとんど使われていない環境の表示を直すために費用をかけるのは、合理的ではありません。数字を見てから優先順位を決めてください。
法人向けサイトはEdgeを必ず確認する
企業のPCでは、初期設定のままEdgeが使われていることが多くあります。BtoBのサイトでEdgeを確認していないと、肝心の見込み客の環境で崩れていることに気づけません。なおGoogleはモバイル版のページを基準に評価しているため（出典 Google 検索セントラル モバイルファースト インデックスに関するおすすめの方法）、スマートフォンでの崩れは検索評価にも影響します。
古いブラウザへの対応は不要
すでにサポートが終了しているブラウザへの対応は、費用に見合いません。閲覧者にも、更新されていないブラウザを使い続けるリスクがあります。
報告を受けたときの切り分け手順
「崩れている」と言われた場合の初動です。
まず環境を特定する
報告者に以下を確認してください。これがないと、再現できず調査が進みません。
- 使用している端末（PCかスマートフォンか、機種）
- ブラウザの種類（Chrome、Safari、Edgeなど）
- どのページのどの部分か
- いつから発生しているか
- 可能であればスクリーンショット
スクリーンショットが最も重要
言葉での説明だけでは、どの状態を指しているのか判別できません。スクリーンショットが1枚あれば、調査時間が大幅に短縮されます。報告を受ける際は必ず依頼してください。
自分の環境で再現するか試す
同じブラウザで開き、再現するかを確認します。再現しない場合、報告者の環境固有の問題である可能性があります。
キャッシュと拡張機能を疑う
報告者の環境だけで発生している場合、ブラウザのキャッシュか、インストールされている拡張機能が原因のことがあります。シークレットウィンドウで開いてもらえば、両方の影響を除いて確認できます。ここで正常に見えるなら、サイト側の問題ではありません。
広告ブロック系の拡張機能が、サイトの一部要素を非表示にすることがあります。「特定の画像だけ表示されない」という報告の原因が拡張機能だった、というケースは実際にあります。
更新をきっかけに崩れるケース
突然崩れ始めた場合の原因です。
テーマ・プラグインの更新が最も多い
いつからかを聞いて、その時期に更新作業をしていないか確認してください。更新の直後から発生しているなら、原因はほぼ確定です。更新したプラグインを1つずつ停止して切り分けます。
ブラウザ側の更新で顕在化することもある
ブラウザは自動更新されるため、これまで動いていた記述が新しいバージョンで動かなくなることがあります。この場合、複数の環境で同時に発生します。
親テーマを直接編集していると再発する
子テーマを使わずに親テーマを編集していると、テーマ更新のたびにカスタマイズが消え、同じ崩れが繰り返し発生します。毎回同じ場所を直しているなら、それは修正ではなく構造の問題です。
確認作業を効率化する方法
複数環境を毎回確認するのは現実的ではありません。
PCブラウザの開発者ツールで簡易確認する
PCのブラウザには、スマートフォンの画面幅をシミュレートする機能があります。実機ほど正確ではありませんが、レイアウトのはみ出しは十分に確認できます。
確認するページを絞る
全ページを毎回確認する必要はありません。トップページ、主要なサービスページ、料金ページ、問い合わせフォームの4つを確認すれば、重大な崩れは検出できます。
更新後の確認を手順に入れる
テーマやプラグインの更新後に、この4ページをスマートフォンで開く。この習慣があれば、取引先から指摘される前に気づけます。
社内の複数端末で見てもらう
社員が使っている端末はバラバラです。月に一度、数人に自社サイトを開いてもらうだけでも、環境の違いによる問題を発見できます。費用はかかりません。
最後に
ブラウザによって表示が完全に一致しないのは正常であり、すべてを揃える必要はありません。直すべきは、読めない・押せない・はみ出す・送信できないという実害のある崩れだけです。報告を受けたら、まず環境とスクリーンショットを確認し、シークレットウィンドウで再現するかを見る。この順序で切り分ければ、サイト側の問題かどうかを短時間で判断できます。
Web管理では、月額1万円からホームページの運用保守を代行しています。表示崩れの原因調査、複数環境での確認、更新後の動作確認まで対応可能です。「崩れていると言われたが自分では再現しない」というご相談も歓迎します。
