スマホで見ると崩れるのはなぜ？

パソコンでは整って見えるのに、スマホだと文字がはみ出す。その多くは「幅」の設定が原因です。画面の小ささに合わせて、中身が並び替わる仕組みが効いていない状態です。

これはスマホが壊れているわけでも、作り方が特別に悪いわけでもありません。原因は決まったパターンがいくつかあり、ほとんどは直せます。

原因は幅の固定

ホームページは、洋服に少し似ています。パソコン向けのデザインは、パソコンの画面幅に合わせて仕立てたスーツのようなものです。

それをそのままスマホという小さな体に着せると、袖も裾も余ってしまいます。はみ出した部分が横スクロールになったり、文字が途中で切れたりします。

これを防ぐのがレスポンシブ（＝画面幅に合わせて並びが変わる仕組み）です。伸び縮みする素材の服に近く、1枚で大小どちらの画面にも合わせます。横並びだった3つの箱が、スマホでは縦に積み重なる。あの動きがレスポンシブです。

よくある崩れの原因

崩れている箇所をよく見ると、原因は次のどれかに当てはまることが多いです。

・横に長い表を、そのまま貼っている

・画像の幅を数値で固定している

・PDFやチラシ画像を1枚そのまま載せている

・外部の地図やカレンダーを埋め込んでいる

・文字サイズを小さい数値で指定している

特に多いのが、表とチラシ画像です。どちらも「紙の形」をそのまま持ち込んだものなので、小さい画面に入りきりません。料金表は表組みではなく、項目ごとの縦並びにすると読みやすくなります。

確認のコツ

判断の目安はシンプルです。スマホで開いて、指で左右に動かしてみてください。横に動いてしまうページは、どこかがはみ出しています。

そのうえで、はみ出している部分の近くに表や画像がないか探します。原因は1か所だけということも珍しくありません。

また、スマホの機種によって見え方が変わることもあります。自分の端末だけでなく、家族や従業員のスマホでも開いてもらうと、気づきやすくなります。崩れを見つけたら、その画面を撮影して制作者に渡すのがいちばん早い伝え方です。

まとめ

スマホでの崩れは、画面幅に中身が合っていないサインです。表・画像・埋め込みのどれかが原因であることが多く、見つけてしまえば直せます。

「横スクロールが出たら要注意」とだけ覚えておけば十分です。自分のサイトが崩れているか分からないときは、制作を依頼する前に質問だけしてもらっても大丈夫です。

▼ ホームページ制作のご相談はこちら

https://coconala.com/services/3635187