自社サイトがスマホで崩れて見える原因｜PCだけ確認していると気づけない4か所

「パソコンでは普通に見えるんですけど」

ホームページのご相談で、いちばん多いのがこれです。ご自身のパソコンで開くと何の問題もない。でもお客様から「スマホで見たら文字が切れていました」と言われた、あるいはご自分のスマホで開いてみて初めて気づいた。

結論から言うと、スマホで崩れる原因は、よくある4か所にだいたい集まります。しかもその4か所は、パソコンのブラウザの幅を狭めるだけでは再現しないことがあるので、「確認したつもり」で通り過ぎてしまいます。

私はホームページの制作とお守り（保守）を仕事にしていて、既存サイトの点検もよくお受けします。この記事では、その点検で実際にひっかかる4か所と、確かめ方、そして直すときの費用の考え方をお話しします。専門用語はできるだけ避けます。

その前に：なぜPCで確認しても気づけないのか

原因の話に入る前に、ここを押さえておくと納得が早いです。

パソコンのブラウザの幅をぐっと狭めると、たしかにスマホっぽい見た目にはなります。ただ、実際のスマホとは次の点が違います。

• 文字の大きさの扱いが違う。スマホは「読める大きさ」に自動で調整することがあり、パソコンで狭めたときと行数が変わります
• 指の当たり判定がない。マウスなら1ピクセルでも押せますが、指は幅があります。押せるかどうかはパソコンでは分かりません
• 画面の外にはみ出したものが見えてしまう。パソコンだと横スクロールバーが出るので気づけますが、スマホは指で滑らせて初めて分かります

つまり、幅を狭めるのは「だいたい合っているか」までの確認です。仕上げの確認は実機で見ることをおすすめします。ご自分のスマホで開くだけで十分です。

崩れる場所①：横に長い表

いちばん多いのがこれです。料金表・比較表・営業時間の表など、列が4つ以上ある表は、中身の文字数によってはスマホの幅に収まりきりません。

収まらないとき、ページは2通りの壊れ方をします。ひとつは表だけが画面の外へはみ出して、ページ全体が横に動くようになる。もうひとつは文字が潰れて、1文字ずつ縦に折り返される（「営」「業」「時」「間」のように縦に並ぶ、あの状態です）。

直し方は、表を消すことではありません。表そのものは横にスクロールできる箱に入れて、ページ本体は動かないようにするのが基本です。そのうえで、列が多すぎる表は「1行＝1件のカード」の形に組み替えると、スマホでぐっと読みやすくなります。

崩れる場所②：幅を数字で固定してある部分

制作した時期が古いサイトに多いのがこれです。「この箱は横1000ピクセル」というように、幅が数字で決め打ちされている部分があると、画面が375ピクセルしかないスマホでは当然はみ出します。

厄介なのは、ページの大半はきちんと縮むのに、1か所だけ固定されているというケースです。見た目はほぼ整っているのに、なぜか横にスクロールできてしまう。原因がその1か所に隠れています。

見つけ方は簡単です。スマホでページを開いて、指で左右に滑らせてみる。動いてしまったら、動く原因がどこかにあります。上から順に見ていけば、たいてい表か、画像か、この固定幅のどれかです。

崩れる場所③：長い英数字とメールアドレス

これは盲点です。日本語は文字と文字の間ならどこでも折り返せますが、英数字が続く固まりは途中で折り返さないのが標準の動きです。

たとえばメールアドレス、長いURL、「TEL:0120-000-000」のような表記。これらが本文の中にそのまま置かれていると、その1行だけが画面の外まで伸びます。パソコンでは1行に収まってしまうので、まず気づけません。

会社概要のページ、フッター（ページ最下部）、お問い合わせ案内。この3か所は特に確かめてください。私が点検でひっかけるのも、だいたいこの3か所です。

崩れる場所④：余白と文字がパソコンのまま

崩れているというより「使いにくい」に近いのですが、影響はいちばん大きいところです。

• 文字が小さくて読めない
• ボタンとボタンが近すぎて、隣を押してしまう
• 余白が広すぎて、スクロールしてもしても本題に着かない

とくにボタンは、指で押せる大きさが要ります。目安として、押せる範囲が縦横44ピクセルほどあると押しやすいと言われています。パソコンの見た目に合わせて小さくしていると、スマホでは押し損ねが起きます。

お問い合わせボタンや電話ボタンでこれが起きていると、取れるはずだった問い合わせを落とします。見た目の問題ではなく、売上の問題です。

自分で確かめる手順（5分）

道具は要りません。ご自分のスマホでこれだけやってください。

1. トップページを開いて、指で左右に滑らせる。動いたら、はみ出しているものがある
2. 下まで一気にスクロールして、文字が切れている・重なっている場所を探す
3. お問い合わせボタンを実際に押してみる。押しづらい、隣に当たるなら直したほうがよい
4. 会社概要とフッターを開く。メールアドレスや長い番号がはみ出していないか
5. 表があるページを開いて、表だけが横に動くか、ページごと動くかを見る

5番でページごと動いてしまうなら、①の直し方が効きます。

直すときの費用の考え方

ご相談を受けたとき、私が最初にお伝えするのは「全部作り直す必要は、たいていありません」ということです。

崩れている場所が①〜③のような部分的なものなら、その箇所を直すだけで済みます。ページ数にもよりますが、数か所の手直しであれば、作り直しとは桁が変わります。

一方で、次のような場合は作り直しを検討したほうが結果的に安く済みます。

• サイト全体が固定幅で組まれている（②が全ページにある状態）
• スマホ用の設計がそもそも入っていない、10年近く前の作り
• 直すたびに別の場所が崩れる

見分け方は「崩れているのが数か所か、全ページか」です。ここを確かめずに見積もりを取ると、部分修正で済む話に作り直しの金額が出てくることがあります。まずご自分で5分の点検をしておくと、話が早くなります。

まとめ

• スマホで崩れる原因は、横長の表・固定幅・長い英数字・余白と文字の4か所によく集まる
• パソコンで幅を狭める確認は「だいたい合っているか」まで。仕上げは自分のスマホで開く
• 指で左右に滑らせて動くかどうかが、いちばん手早い判定
• 押しづらいボタンは見た目の問題ではなく、取れるはずの問い合わせを落としている
• 直す前に「数か所か、全ページか」を確かめる。部分修正で済むことのほうが多い

ご自分のサイトを点検してみて、どこが原因か分からなかったり、直し方の見当がつかない場合は、コマチWEBサポートまでお気軽にご相談ください。まず現状の点検結果をお伝えするところからで結構です。