レスポンシブデザインの基本

レスポンシブは「画面幅に応じた最適化」

レスポンシブデザインは、表示領域に合わせてレイアウトや文字サイズ、余白、操作方法などを調整する考え方です。PC画面をそのまま小さく縮めることではありません。

最初に確認する4つの視点

1. 優先順位：重要な情報や行動ボタンが埋もれていないか。
2. 可読性：文章・ラベルが小さすぎないか。横スクロールが発生していないか。
3. 操作性：指で押しやすいボタンやリンクになっているか。
4. 画像：重要な被写体や文字が見切れないか。

CSSでの基本例

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 768px) {
  .cards { grid-template-columns: 1fr; }
}

上の例では、画面幅に応じて3列から1列に変わります。ただし768pxが唯一の正解ではありません。コンテンツが読みにくくなる幅を確認して決めましょう。

実務でのチェック

制作中にスマホ用カンプを作っても、完成後の実機確認は必要です。長い見出し、入力フォーム、モーダル、ページ内リンクなど、操作が必要な要素まで確認しましょう。

ミニ演習

普段よく見るECサイトをPCとスマホで開き、商品の写真・価格・購入ボタンの順番がどう変わるか比較してください。変化が「購入しやすさ」にどう役立つか一文で説明しましょう。

参考

MDN Web Docs：CSS メディアクエリー