レスポンシブ編 10 / 10 実践 約5分
確認手順とチェックリスト｜崩れを見逃さない順番
レスポンシブ対応の最終確認を、見る順番とチェック項目に落とし込みます。納品前にそのまま使えるリストです。
この教材で学べること
- 崩れを効率よく見つける確認の順番
- 納品前チェックリスト
- 実機確認でしか分からないこと
レスポンシブ対応の最後は確認作業です。見る順番を決めておくと、同じ場所を何度も見て他を見落とす、という事態を防げます。
確認の順番
| 順 | 見るポイント | よくある崩れ |
|---|---|---|
| 1 | 横スクロールが出ていないか | 固定幅の要素がはみ出している |
| 2 | 横並びが解除されているか | カードが細くなり文字が読めない |
| 3 | 文字サイズは適切か | 見出しが大きすぎ、折り返しが汚い |
| 4 | 余白は詰まっているか | PC用の広い余白が残り、間延びする |
| 5 | 画像は意図どおりか | 被写体が切れている、薄く潰れている |
| 6 | ボタンは押せるか | 小さすぎる、隣と近すぎる |
| 7 | メニューは開閉するか | 開いたまま閉じられない |
この順番には理由があります。1が残っていると他の確認が正しくできません。横スクロールが出ている状態では、そもそも正しい表示になっていないからです。
確認する画面幅
実機でしか分からないこと
ブラウザの幅を狭めるだけでは再現できないものがあります。納品前に必ず、自分のスマホで実際に開いてください。
| 項目 | ブラウザ幅の縮小 | 実機 |
|---|---|---|
| レイアウトの崩れ | 分かる | 最終確認 |
| タップのしやすさ | 分からない | 指で確かめる |
| 読み込みの速さ | 分からない | 回線込みで分かる |
| スクロールの滑らかさ | 限定的 | 実際の動きが分かる |
| フォームの入力しやすさ | 分からない | キーボードの出方まで分かる |
レスポンシブ編は以上です。次は第4章 CMS編に進みます。