ホームページがスマホで崩れる｜伝え方で修正の速さが変わる
「スマホで開いたら崩れていた！」と気づいて、手が止まっていませんか？
検索で出てくるのはCSSの直し方が中心で、任せている立場では使いにくいのも無理はありません。
この記事では、触る前に確かめることと、崩れ方の型、制作会社に伝える5項目を解説します。
ホームページの管理を任されている方が、修正までのやり取りを少なく済ませられるようになります。
スマホで崩れたら、まず見る側の設定を疑う
制作会社に連絡する前に、1分で終わる確認があります。ここで直るなら、サイトそのものには問題がありません。
崩れの原因は、サイトの側ではなく、見ている端末の側にあることもあります。確かめずに連絡すると、制作会社が調べても再現できず、やり取りが増えてしまいます。次の3つを、上から順に試してください。確かめた内容は、そのまま制作会社への連絡にも使えます。
ブラウザに古いデータが残っている
過去に読み込んだデータがブラウザに残っていて、修正前の状態が表示されることがあります。とくに、制作会社が直した直後に起きやすい現象です。
向こうでは直っているのに、こちらでは古い状態が見えているという食い違いで、無駄なやり取りが生まれます。iPhoneのSafariなら、設定から履歴とサイトのデータを消せます。修正の連絡を受けたら、まずデータを消してから確かめてください。
文字の大きさの設定を変えている
端末の設定で文字を大きくしていると、レイアウトが想定と違う形で表示されることがあります。見やすさのために、文字を大きくしている人は少なくありません。
一時的に標準の大きさに戻して、開き直してみてください。それで直るなら、サイトの不備とは言い切れません。ただ、文字を大きくして見る人もいるので、大きな文字でも読めるかは改善の候補として残しておきます。
別のブラウザ、別の端末で開く
SafariとChromeのように、別のブラウザでも開いてみます。ブラウザによって、表示が少し違うことがあります。
最も確かなのは、別の端末で開くことです。家族のスマホでも構いません。そこで正常に見えるなら、自分の端末の側の問題です。ここまで試しても同じように崩れるなら、サイトの側の問題として連絡してください。多くの場合、数分で白黒がつきます。
ホームページがスマホで崩れる3つの型
崩れ方は、大きく3つの型に分かれます。型が違えば、原因も直し方も違うのが厄介な点です。
型を見分けておくと、自分で直せるかどうかの判断がつきます。制作会社に伝えるときも、型を添えるだけで調べる範囲が絞れます。まずは、自分のサイトがどの型に当たるかを確かめてください。自分で直せる見込みがあるのは、主に2つ目の型です。1つ目の型は、作りそのものを見直す話になります。
① 全体が縮んで表示される
PC用の画面が、そのまま小さくなっている状態です。文字が読めないほど縮み、拡大しないと内容が分かりません。
web.devの解説では、画面の幅を伝える指定がないと、PCの幅で描いて縮めて表示されます。この型は、スマホ向けの作りがそもそも入っていない印です。部分的な修正では直りにくく、構造の問題として扱う必要があります。
② 一部だけがはみ出す
サイト全体はスマホ向けなのに、あるページの一部だけが画面の幅を超えている状態です。横にスクロールできてしまいます。
原因の多くは、画像や表、埋め込みに固定の幅が付いていることです。web.devも、固定の大きさの画像は画面より大きいとスクロールの原因になると説明しています。局所的な問題なので、その箇所だけ直せば解決します。
③ 要素が重なる
文字の上に画像が乗っている、ボタンがほかの要素に隠れているといった状態です。装飾のリボンや吹き出しで起きやすい型です。
画面の幅が変わったときに、位置が想定外になっています。装飾を外すだけで直ることも多いので、その装飾が本当に必要かを考えてください。テーマに組み込まれた装飾なら、制作会社に頼むことになります。
管理画面から、自分で直せる範囲
コードを触らずに直せる箇所もあります。WordPressなら、記事の編集画面から操作できる範囲です。
はみ出す型の崩れは、この範囲で直ることが多いものです。直したら、必ずスマホで開いて確かめてください。何本もの記事で起きているなら、テーマの側でまとめて直してもらうほうが早く済みます。直す前の状態をスマホで撮っておくと、比べやすくなります。
本文の画像の幅を直す
本文に入れた画像に固定の幅が付いていると、はみ出す原因になります。古い記事で起きやすい問題です。
ブロックエディターで画像を選び、幅の指定を外すか、画面の幅に合わせる設定に変えてください。ピクセルの数値が入っていれば、それが原因のことが多いものです。直したあとは、プレビューをスマホの幅で確かめておくと安心です。
列の多い表を作り直す
列の多い表は、スマホの幅に収まりません。横にスクロールが出るか、文字がつぶれて読めなくなります。
直し方は、列を減らして作り直すか、表をやめて見出しと本文の形に組み替えるかです。列は、項目と値の2列か、比べるなら3列ほどに絞ると読みやすくなります。どうしても列が多いなら、横スクロールを許す作りにしてもらうのも1つの方法です。
長いURLと埋め込みを見直す
本文にURLをそのまま書いていると、折り返されずに画面からはみ出すことがあります。英数字が長く続く部分も同じです。
リンクの文字を日本語にすれば解決します。「詳しくはこちら」ではなく、行き先の記事の題名を使うと読む人にも分かりやすくなります。地図や動画の埋め込みに固定の幅が入っている場合は、幅の数値を外すか、制作会社に相談してください。
制作会社に伝える5項目
「スマホで崩れています」だけでは、原因を特定できません。制作会社は、まず状況を聞くところから始めることになります。
次の5つをまとめて送れば、調べてから直すまでが少ないやり取りで終わるのが普通です。足りないと、環境を聞き、場所を聞き、時期を聞くやり取りが続きます。その差が、そのまま直るまでの日数になって表れます。
① 端末とブラウザ
iPhoneかAndroidか、機種の名前と、使っているブラウザを伝えます。SafariとChromeでは、表示が違うことも珍しくありません。
機種は、端末の設定の中にある情報の画面で確かめられます。これを伝えるだけで、制作会社は同じ環境で崩れを再現できます。伝えなければ、まず環境を聞くやり取りが1回増えてしまうのです。
② 崩れているページのURL
トップページなのか、特定の記事なのかを、URLのまま伝えます。全部のページで起きているのか、1ページだけなのかも大事な情報です。
特定のページだけなら、そのページにある要素が原因です。全部のページなら、テーマやヘッダーに原因がある可能性が高くなります。この区別だけで、調べる範囲がぐっと絞れます。URLは、ブラウザの共有の機能でそのまま送ると間違いがありません。
③ どこがどう崩れているか
「ヘッダーのロゴが右にはみ出している」「料金の表が画面から出ている」といった具体的な言い方で伝えます。どの部分が、どうなっているかが分かれば十分です。
3つの型のどれに当たるかを添えると、さらに伝わります。全体が縮んでいるのか、一部がはみ出しているのか、重なっているのかです。この粒度で伝えられれば、原因の候補が絞れて調べる時間が短くなります。
④ いつから起きているか
前からずっとなのか、最近になってからなのかを伝えます。最近なら、その前に何をしたかを思い出してください。
記事を足した、プラグインを更新した、テーマを変えたといった操作が、手がかりになります。WordPressの管理画面で、記事の更新日などを見ると思い出しやすくなります。崩れに気づいた日の直前の操作を、書き添えてください。
⑤ 画面を撮った画像
崩れている画面を撮って、画像を添えます。文章で説明するより、ずっと早く伝わります。
撮ったら、崩れている箇所が写っているかを確かめてください。画面の下のほうで起きているなら、スクロールしてから撮ります。スクロールしたときだけ崩れる場合は、画面の録画を使うと動きまで伝えられます。撮った画像の崩れている場所に丸を付けておくと親切です。
直らないときに確かめること
部分的な修正で直らないなら、構造の問題を疑ってください。その場合は、作り直しも含めて考える段階です。
Googleは、主にスマホ向けの表示をもとにページを評価しています。スマホで読みにくい状態を放っておくと、読む人だけでなく検索にも響きます。次の2点を確かめ、作り直しの目安と照らしてください。自分で判断しにくいときは、制作会社に構造の確認を頼んでください。
テーマがスマホに対応していない
古いテーマを使い続けていると、画面の幅に合わせて表示を変える仕組みが入っていないことがあります。
見分け方は、PCのブラウザの幅を狭めてみることです。文字や画像が幅に合わせて並び替われば対応済みで、横スクロールが出るなら対応していません。対応していないなら、テーマの変更か作り直しを考えることになります。
スマホ用に別のURLへ転送している
スマホで開くと、別のURLに転送される作りです。以前はよく使われていました。
この作りでは、2つのURLが同じ内容だと伝える指定が要り、誤ると評価が分かれるおそれがあります。更新のたびに2つを直す手間も避けられません。スマホで開いたURLに「sp」などが入っていれば、この作りの可能性があります。今の作りが分からなければ、制作会社に聞くのが確実です。
作り直しを考える目安
全体が縮む型で、テーマも古い。この状態なら、部分的な修正を重ねても、次の要望でまた壁に当たります。
同じ箇所の修正を何度も頼んでいるなら、構造に原因があると考えてください。修正の費用が積み重なる前に、作り直しの見積もりと比べる価値があります。直すだけで済む範囲と、作り直すべき範囲を、制作会社と一緒に見極めてください。
ホームページがスマホで崩れる問題に関するよくある質問
PCでも、スマホでの見え方を確かめられますか
確かめられます。Chromeの開発者ツールには、スマホの画面の幅で表示する機能があります。
F12で開発者ツールを開き、端末の形のボタンを押してください。機種を選んで、表示を切り替えられます。ただし、実際の端末と完全に同じにはなりません。最後は、本物のスマホで開いて確かめてください。画面の幅をいくつか変えて、崩れ始める幅を探すのにも便利です。
横にスクロールできてしまうのは、なぜですか
画面の幅より大きいものが、ページのどこかにあるためです。固定の幅が付いた画像や表、埋め込みが原因のことが多いものです。
ページを上から順にスクロールし、横に動き始める位置を探してください。その付近の画像や表が原因の候補です。見つけたら、その場所を制作会社に伝えると、修正が早く進みます。原因が分かれば、自分で直せるかどうかも判断できます。
スマホでの崩れは、検索順位に影響しますか
Googleの評価は、主にスマホ向けの表示がもとになっています。スマホで内容が読めない状態は、評価の面でも不利になりかねません。
何より、スマホで開いた人が読まずに閉じてしまいます。検索から来た人の多くがスマホなら、影響はより大きくなります。崩れに気づいたら、早めに直してください。直したあとは、Search Consoleで検索の数字の推移も見ておくと安心です。
iPhoneでだけ崩れるのは、なぜですか
ブラウザごとに、表示の仕方に少しずつ違いがあるためです。iPhoneでは、SafariもChromeも、同じ表示の仕組みを使っています。
そのため、iPhoneでだけ崩れる場合は、その仕組みに特有の差が原因のことがあります。制作会社には、iPhoneの機種とiOSの版を伝えてください。同じ環境で再現できれば、原因を絞れます。
崩れの修正は、保守の契約に含まれますか
契約によって違います。不具合の修正として含まれる場合もあれば、別料金になる場合もあるのが実情です。
制作した直後から崩れていたなら、制作の不備として直してもらえることもあります。あとから足した記事や画像が原因なら、扱いが変わることがあります。連絡するときに、契約の範囲も一緒に確かめておいてください。契約書に、不具合の対応の範囲が書かれていないかも見てください。
まとめ
スマホで崩れたとき、最初にやるのは見る側の確認です。古いデータや文字の大きさの設定で、崩れて見えることがあります。
サイトの側の問題なら、崩れ方の型を見分けてください。制作会社には5項目をまとめて伝えると、少ないやり取りで直るまで進みます。
まずは手元のスマホでブラウザのデータを消して、開き直してみてください。