スマホで見たらなんか違う！レスポンシブデザインで見直したいポイント

WebサイトをPCで作って、

「よし、いい感じ！」

と思ってスマホで確認してみたら……

「あれ？なんか見づらい…」

なんてことがあります。

レスポンシブデザインでは、単純にPC版を小さくするのではなく、画面の大きさに合わせて見やすいレイアウトに変えることが大切です。

今回は、スマホ表示で特に見直したいポイントをまとめます。

① 3列・4列をそのまま表示しない

PCでは横に3枚並んだカードも、スマホではかなり窮屈になります。

例えば、

PC → 3列

タブレット → 2列

スマホ → 1列

というように、画面幅に合わせて変更すると見やすくなります。

FlexboxやGridなどを使って、画面幅に合わせてレイアウトを変える方法は、コンテンツを見やすく保つためにも有効です。

② 文字サイズもスマホで確認

PCではちょうどよかった大きな見出しも、スマホでは何行にも折り返されることがあります。

逆に小さくしすぎると読みにくくなってしまいます。

**「画面に収まるか」だけではなく、「実際に読みやすいか」**をスマホで確認することが大切です。

③ 余白をそのまま使わない

PCで左右に80pxの余白を設定していても、スマホで同じ余白を使うと、コンテンツ部分がとても狭くなってしまいます。

スマホでは、

padding: 0 20px;

など、画面に合わせて余白を調整します。

④ 画像は画面からはみ出していない？

画像に固定幅を指定していると、スマホで横にはみ出すことがあります。

そんなときによく使うのが、

img {

  max-width: 100%;

  height: auto;

}

画像だけでなく、文字やコンテンツが横にはみ出して横スクロールが発生していないかも確認したいポイントです。W3Cのアクセシビリティ基準でも、画面が狭くなったときに情報を失わず、基本的に2方向へのスクロールを必要としないことが重視されています。

⑤ 最後は実際のスマホでチェック！

ブラウザの検証ツールでスマホ表示を確認するのも便利ですが、最後は実際のスマートフォンで見るのがおすすめです。

「ボタンが押しにくい」

「文字が思ったより小さい」

「余白が広すぎる」

など、実機で見て初めて気づくこともあります。

まとめ

レスポンシブデザインは、

「PC版を小さくする」のではなく、「その画面で見やすい形に組み直す」

という考え方が大切です。

レイアウト・文字サイズ・余白・画像サイズをスマホに合わせて見直すだけでも、サイトはぐっと見やすくなります。

私もWeb制作では、PC版が完成してからスマホを確認すると「ここも直したい！」という部分がよく出てきます。

だからこそ、PCとスマホはセットで確認することが大切ですね😊