崩れの型は限られている
スマホでの表示崩れは、原因のパターンがほぼ決まっています。症状から当たりを付けると早く直ります。
| 症状 | よくある原因 |
|---|---|
| 横にスクロールできてしまう | 画面幅より広い要素がある |
| 文字が重なる | 高さを固定している |
| 画像がはみ出す | 最大幅の指定が無い |
| 表が切れる | 横スクロールの枠に入っていない |
| ボタンが押しにくい | 要素が小さすぎる、間隔が狭い |
| 余白が大きすぎる | パソコン用の余白がそのまま効いている |
横スクロールの原因を探す
一番多いのが横スクロールです。原因になりやすいのは次の要素です。
- 画像に最大幅の指定が無い
- 表が枠に入っていない
- 長い文字列（URLなど）が折り返されない
- 余白の指定が幅を押し広げている
- 横並びの指定が、狭い画面でも解除されない
上から順に確認すると、大半はここで見つかります。
直す時の範囲
見た目の修正は影響範囲が広いので、指示に範囲を書いてください。
- 「このページだけ。他には影響させないで」
- 「幅768px以下の時だけ」
- 「共通部分のファイルは触らないで」
- 「パソコンでの見た目は変えないで」
4つ目を書かないと、スマホは直ったがパソコンで崩れる、という状態になります。
直した後の確認
- スマホの幅で開く
- 横スクロールが消えているか確認する
- 見出しをわざと長くして崩れないか見る
- 同じ形の他ページを2〜3枚開く
- パソコンの幅でも崩れていないか見る
3番と5番が抜けやすい部分です。直した直後のきれいな状態では、崩れが見えません。
実機で見る必要があるもの
パソコンの画面幅を狭めるだけでは分からないものがあります。
- ボタンの押しやすさ（指の大きさ）
- 画面の下に隠れる要素
- 読み込みの速さ
- 文字の実際の読みやすさ
大半の崩れは画面幅を狭めるだけで見つかりますが、最終確認は実機で行ってください。
原因を絞る手順
崩れている箇所が分からない時は、次の順で範囲を狭めてください。
- 崩れているのが1ページだけか、全ページかを見る
- 1ページだけなら、そのページ固有の要素を疑う
- 全ページなら、共通部分か全体の指定を疑う
- 要素を1つずつ隠して、崩れが消える箇所を探す
- 見つかったら、その要素だけを直す
1番で分かれ道になります。ここを確認せずに直し始めると、共通部分の問題を1ページずつ直すことになります。
直せない場合の逃げ方
構造そのものに原因があり、簡単に直せないことがあります。その場合、次の対処で実害は減らせます。
- 表は横スクロールの枠に入れる（構造を変えずに済む）
- 横並びを、狭い画面では縦に積む
- 大きすぎる画像は表示幅を制限する
- どうしても収まらない要素は、スマホでは省く
すべてをパソコンと同じ見た目にする必要はありません。読めることと、行き先が押せることを優先してください。
実践ログから分かったこと
横スクロールが消えない原因が分からず時間をかけたことがあります。結局、表が横スクロールの枠に入っていないだけでした。原因の型を先に持っていれば、すぐ見つかった種類の問題です。
もう1つ、スマホは直ったのにパソコンで崩れたことがあります。指示に「パソコンでの見た目は変えないで」と書いていませんでした。範囲を書くだけで防げます。
FAQ
横スクロールが消えません
画像の最大幅、表の枠、長い文字列、余白、横並びの指定の順に確認してください。
パソコンで確認すれば十分ですか？
大半の崩れは画面幅を狭めれば見つかりますが、押しやすさや読み込みは実機で確認してください。
直したら別の場所が崩れました
指示に範囲を書いていないと起きます。ページと画面幅を限定してください。
どこまで任せてよいですか？
指定した箇所の調整は任せられます。どのデザインがよいかの判断は自分でしてください。