レスポンシブ対応は、PC版を最後に小さく縮める作業ではありません。文章を読む順番、画像の役割、CTAの操作しやすさを保ちながら、画面幅に合う配置へ変えます。
デザイン画像にスマートフォン版がない場合も、内容の優先順位から判断し、決めた理由を実装メモへ残します。
現在のCSSから固定値を探す
固定されたwidth、高さ、左右位置、絶対配置を検索します。画面が狭くなったときに、内容がはみ出したり重なったりしないか確認します。
最大幅にはmax-width、画像にはmax-width: 100%を使い、必要のない固定高を外します。
セクションごとに切り替える
広い画面では、文章と画像、複数のカードを横に並べて空間を活用します。
狭い画面では読む順番を保ったまま1列へ切り替え、操作しやすい余白を確保します。
すべてを1つのブレークポイントで切り替える必要はありません。カードが窮屈になる幅、画像と文章が読みにくくなる幅など、内容に応じて判断します。
@media (max-width: 767px) {
.feature-list {
grid-template-columns: 1fr;
}
.media {
grid-template-columns: 1fr;
gap: 24px;
}
}文字と余白を滑らかに調整する
画面幅によって極端に差が出ない値にはclamp()を使えます。ただし、すべての値を計算式へせず、デザイン上の段階が明確ならメディアクエリで切り替えます。
次の画像は、「文字と余白を滑らかに調整する」で扱うコードや構成をブラウザで表示した結果です。
.hero__title {
font-size: clamp(2rem, 1.25rem + 4vw, 4.5rem);
}
.section {
padding-block: clamp(56px, 8vw, 112px);
}操作方法の違いを確認する
スマートフォンにはhoverがない場合があります。hoverでだけ表示する情報を作らず、リンクとボタンには十分なタップ領域を確保します。メニューを折りたたむ場合は、JavaScriptがない状態の導線も検討します。
次の図では、「操作方法の違いを確認する」で押さえる違いを左右で比較しています。
連続した画面幅で検証する
320px、375px、768px、1024pxのような代表値だけでなく、その間も幅をゆっくり動かします。特定の端末幅だけで成立するCSSになっていないか確認してください。
次の図では、「連続した画面幅で検証する」の仕組みや関係を確認できます。
- 横スクロールが発生しない
- 文字やボタンが重ならない
- 画像の縦横比が変わらない
- 読む順番が自然である
- 固定ヘッダーが内容を隠さない