スマホでホームページが崩れる原因7つ｜
今すぐできる修正方法

なぜスマホ表示が崩れるのか？

ホームページの多くはパソコン向けに設計された後でスマホ対応が後回しになっています。その結果スマホで見ると表示が崩れてしまいます。現在はスマホからのアクセスが全体の60〜70%を占めるためスマホ表示の改善は集客に直結します。

崩れる原因7つ

1. 1
   viewport設定がないHTMLのheadにviewportメタタグがないとスマホでもPC幅で表示されます。横スクロールが発生する最大の原因です。
2. 2
   幅を固定px指定しているwidth:800pxのように固定値で指定するとスマホ画面からはみ出します。%やvwなど相対値を使うのが基本です。
3. 3
   画像にmax-widthがないimg要素にmax-width:100%がないと画像が画面からはみ出します。この1行で多くの崩れが解決します。
4. 4
   フォントサイズが小さすぎるスマホで読みやすいフォントサイズは16px以上が目安です。それ以下では文字が読みにくくなります。
5. 5
   タップターゲットが小さいボタンやリンクは最低44×44pxが推奨サイズです。小さすぎると押せずユーザーが離脱します。
6. 6
   横並びレイアウトが崩れるPC用の横並び（float/flex）がスマホで重なったりはみ出したりするケースです。メディアクエリで縦並びに切り替える必要があります。
7. 7
   テーブルが横にはみ出す料金表などのHTMLテーブルはスマホで横スクロールが発生しやすい要素です。overflow-x:autoを親要素に設定するだけで改善できます。

今すぐできる確認方法

① Chromeのスマホプレビューで確認

PCのChromeでF12キーを押してデベロッパーツールを開きます。画面上部のスマホアイコンをクリックするとスマホ表示を確認できます。iPhone・Androidのサイズを切り替えながらチェックしましょう。

② 無料診断ツールで一括チェック

TORIMA HPの無料診断ではスマホ対応を含む7つのカテゴリをYES/NOで約3分チェックできます。どこに問題があるか把握するのに便利です。

まとめ

スマホ表示が崩れる原因の多くはviewport設定・固定幅・画像のmax-widthの3点に集約されます。まずはChromeのスマホプレビューで自社サイトを確認してみましょう。