ホームページがスマホで崩れる｜伝え方で修正の速さが変わる

ホームページがスマホで崩れる前に、閲覧側を疑う

制作会社に連絡する前に、1分で終わる確認があります。ここで直るなら、サイト本体には問題がありません。

キャッシュが古い可能性

過去に読み込んだデータがブラウザに残っていて、修正前の状態が表示されることがあります。

iPhoneのSafariなら、設定から履歴とデータを消去します。Androidのブラウザでも同様の操作があります。実際、これで直る例は少なくありません。

とくに制作会社が修正した直後に起きます。向こうでは直っているのに、こちらでは古い状態が見えている。この食い違いで無駄な往復が発生します。

修正の連絡を受けたら、まずキャッシュを消して確認してください。

文字サイズの設定を変えている

端末の設定で文字を大きくしていると、レイアウトが想定と違う形で表示されます。老眼への対応で設定している方は多い。

一時的に標準の大きさに戻して開いてみてください。それで直るなら、サイトの不備ではありません。

確認は数秒です。設定から画面表示の項目を開き、文字の大きさを標準に戻して開き直してください。

1分で終わる確認

順序はこうです。キャッシュを消す、文字サイズを標準に戻す、別のブラウザで開く、別の端末で開く。

4つとも試して同じように崩れるなら、サイト側の問題です。4つを試したうえで、初めて制作会社に連絡します。

別の端末で開くのが最も確実です。家族のスマートフォンでも構いません。そこで正常に見えるなら、自分の端末側の問題です。

ホームページがスマホで崩れる3つの型

崩れ方は3つに分かれます。型が違えば、原因も対処も違います。

全体が縮んで表示される

PC版がそのまま小さくなっている状態です。文字が読めないほど縮み、拡大しないと内容が分かりません。

この型は、そもそもスマートフォン向けの対応が入っていないことを意味します。構造の問題なので、部分的な修正では直りません。

この状態は、検索の評価にも影響します。Googleはスマートフォン版の内容で評価するため、読めない状態が続けば不利になります。

特定のブロックだけはみ出す

サイト全体はスマートフォン向けに作られているのに、あるページのある部分だけが画面幅を超えている状態です。横スクロールが発生します。

原因は、画像や表、埋め込みに固定の幅が指定されていることです。局所的な問題なので、その箇所だけ直せば解決します。

局所的な問題なので、その箇所だけ直せば解決します。作り直しは不要です。

どのブロックかを特定するには、ページを上から順にスクロールして、横に動く位置を探します。そこが原因の箇所です。

要素が重なる

文字の上に画像が乗っている、ボタンが別の要素に隠れている。こうした状態です。

装飾のリボン、キャンペーンのバッジ、吹き出しで起きやすい。画面の幅が変わったときに、位置が想定外になっています。

この型は、装飾を外すだけで直ることが多い。リボンやバッジが本当に必要かを考えてください。

• 参考：レスポンシブ ウェブ デザイン
• 関連記事：レスポンシブ対応とは？3つの構成の違いと、テスト廃止後の確認方法

ただし、テーマに組み込まれた装飾の場合は自分で外せません。その場合は制作会社に依頼します。

自分で直せる範囲

コードを触らずに対応できる箇所もあります。具体的には、WordPressの管理画面から操作できる範囲です。

画像の幅を指定し直す

本文に挿入した画像に固定の幅が入っていると、はみ出す原因になります。

ブロックエディターで画像を選び、幅の指定を外すか、画面幅に合わせる設定に変えます。ピクセル単位の固定値が入っていれば、それが原因です。

古い記事で起きやすい問題です。以前のエディターでは、画像の挿入時に幅がピクセルで書き込まれていました。

該当する記事が多い場合、1本ずつ直すより、テーマ側で一律に対応してもらうほうが早い。その場合は制作会社に相談します。

表を入れ替える

列が多い表は、スマートフォンの幅に収まりません。横スクロールが出るか、文字が潰れます。

対処は2つです。列を減らして作り直すか、表をやめて見出しと本文の形に組み替える。比べることが目的の表なら、横スクロールを許容したほうが伝わります。

作り直す場合、列は3つまでに絞ります。項目名と値が2列、比較なら3列。これを超えると、どの端末でも読みにくくなります。

管理画面から触れる部分

長いURLや英数字の連続も、はみ出す原因になります。文中にURLをそのまま書いていると、折り返されずに画面を超えます。

リンクの文字を日本語にすれば解決します。「詳しくはこちら」ではなく、記事のタイトルを使ってください。

埋め込みも同様です。地図や動画に固定の幅が入っていると、はみ出します。対処は同じで、コードから幅の数値を外します。

• 関連記事：CLSとは？合計ではなく最悪の5秒間、直す前に見る3か所

これらは公開前に気づける問題です。記事を書き終えたら、スマートフォンで一度プレビューを確認する習慣にしてください。

制作会社に伝える5項目

ここが本題です。「スマホで崩れています」だけでは、原因が特定できません。

どの端末とブラウザか

iPhoneかAndroidか、機種名、使っているブラウザ。SafariとChromeでは表示が違うことがあります。

設定から確認できます。iPhoneなら設定の一般から情報、Androidなら設定の端末情報です。

これを伝えるだけで、制作側は同じ環境で再現できます。伝えなければ、まず環境を聞く往復が発生します。

どのページか

トップページなのか、特定の記事なのか。URLをそのまま伝えます。全ページで起きているのか、1ページだけかも重要な情報です。

特定のページだけなら、そのページに固有の要素が原因です。全ページなら、テーマやヘッダーに原因があります。この区別で調査の範囲が絞れます。

どこがどう崩れているか

「ヘッダーのロゴが右にはみ出している」「料金表が画面から出ている」。この粒度で伝えます。

先に挙げた3つの型のどれかを添えると、さらに伝わります。全体が縮んでいるのか、一部がはみ出しているのか、重なっているのか。

この粒度で伝えられれば、調査の時間が大幅に短くなります。原因の候補が絞れるためです。

いつから起きているか

ずっとなのか、最近なのか。最近なら、その前に何をしたかを思い出してください。

記事を追加した、プラグインを更新した、テーマを変えた。経験上、直前の操作が原因である場合が多い。

更新の履歴を確認する方法があります。WordPressの管理画面で、プラグインの更新履歴や記事の更新日を見てください。崩れに気づいた日の直前に何かしていれば、それが手がかりです。

画面の記録

スクリーンショットを撮って添付します。文章で説明するより早く伝わります。

撮り方は、iPhoneならサイドボタンと音量を上げるボタンを同時に押します。Androidなら電源ボタンと音量を下げるボタンを同時に押します。

撮ったら、崩れている箇所が写っているかを確認してください。画面の下のほうで起きている場合、スクロールしてから撮ります。

動きが関係する場合は、画面の録画も使えます。iPhoneならコントロールセンターから、Androidなら通知パネルから開始できます。スクロールしたときだけ崩れる場合に有効です。

直らない場合に確認すること

部分的な修正で直らないなら、構造の問題です。そうなると、作り直しの判断に入ります。

テーマが対応していない

古いテーマを使い続けていると、画面の幅に応じて見え方を変える仕組みが入っていません。

判別は簡単です。PCのブラウザで画面の幅を狭めてみてください。文字や画像が縮んで収まればレスポンシブ対応、横スクロールが出れば非対応です。

判別できたら、テーマの変更か構造からの作り直しになります。部分的な修正を重ねても、根本は解決しません。

別URL方式になっている

スマートフォンで開くと別のURLに転送される構成です。以前は多く使われました。

この方式では、2つのURLを同じ内容だと伝える指定が必要です。誤ると評価が分散します。加えて、更新のたびに2つを直す手間がかかります。

判別は、スマートフォンでURLを見るだけです。パソコンと違うURLになっていれば、この方式です。「sp.」や「/sp/」が含まれることが多い。

作り直しが要る判断

全体が縮む型で、テーマも古い。この状態なら、部分的な修正を重ねても次の要望でまた壁に当たります。

Googleはスマートフォン版の内容で評価します。放置すると検索でも不利になるため、作り直しの検討に入ります。

判断の目安は、同じ箇所の修正を3回以上依頼しているかどうかです。繰り返すなら、構造に原因があります。

• 関連記事：ホームページリニューアルの費用｜作り直す前に、直すだけで済む範囲を見極める

まとめ

スマホで崩れたとき、最初にやるのは閲覧側の確認です。キャッシュと文字サイズで直る例があります。

サイト側の問題なら、崩れ方の型を見分けます。型が分かれば、伝え方も変わります。

まず手元のスマートフォンでキャッシュを消して開き直すところから始まります。それで直らなければ、5項目をまとめて制作会社に送ってください。

伝える情報が揃っていれば、調査から修正までが1往復で終わります。曖昧なまま連絡すると、環境を聞き、箇所を聞き、時期を聞く往復が発生します。その差が、そのまま修正が終わるまでの日数になって現れます。