レスポンシブデザインとは｜固定幅960pxは、4端末中3つで横スクロールが出た

レスポンシブデザインとは何をすることなのか

画面の大きさが違っても崩れないように、配置を柔軟に組む作り方です。ページを端末ごとに分けるのではなく、1つのページで見た目を切り替えます。

レスポンシブデザインとは、画面の大きさや解像度が違ってもうまく表示されるように配置を柔軟に組む作り方のことです。MDNもそう定義しています。

かつてはパソコン向けとスマホ向けでページを分ける方法が使われていました。ただ現在は端末の画面幅が数十通りあり、2つに分けても対応しきれません。幅そのものに合わせる考え方に変わっています。

使う道具は3つ

実際に使うものは多くありません。画面幅で切り替える指定（メディアクエリ）、幅に応じて伸縮する配置（FlexboxやGrid）、そしてスマホに正しい幅を伝えるための1行の記述です。

最後の1行は忘れられがちです。これが無いと、スマホは「パソコン向けのページだろう」と判断して全体を縮小表示します。せっかく幅に合わせて作っても、その指定が効きません。

目的は「読める」こと

レスポンシブの目的は、どの端末でも配置・内容・表示の速さが問題なく成り立つことです。見た目を整えること自体が目的ではありません。次の節では、その差を数字で見ます。

固定幅960pxは、4端末中3つで横スクロールが出た

よくある固定幅と、画面に合わせる作りで、端末ごとの表示を計算しました。固定幅は3端末ではみ出し、可変幅はゼロでした。

レスポンシブデザインの効果は、言葉で説明するより数字の方が早いので計算しました。代表的な4端末で、はみ出す量と1行の文字数を出しています。

条件は単純です。本文16px、全角1文字を16pxとして数えます。固定幅は960px、可変幅は画面幅から左右16pxずつ引いた値にして、広い画面では1行42文字で頭打ちにします。

画面幅ごとの比較（本文16px・全角1文字=16pxとして計算）

端末           幅    固定幅960px            レスポンシブ
iPhone SE      375  60字/行 はみ出し585px    21字/行 はみ出し0px
iPhone 15 Pro  393  60字/行 はみ出し567px    23字/行 はみ出し0px
iPad 縦        768  60字/行 はみ出し192px    42字/行 はみ出し0px
ノートPC       1280  60字/行 はみ出し0px      42字/行 はみ出し0px

固定幅で横スクロールが出る端末: 3 / 4
レスポンシブで横スクロールが出る端末: 0 / 4

出ました。4端末中3つで横スクロールです。iPhone SEでは585pxもはみ出しています。画面の1.5倍以上の幅があるので、読むには常に横に動かし続けることになります。

文字数の方が重要かもしれない

もう1つ見てほしいのが文字数です。固定幅ではどの端末でも60字/行になります。これは長すぎます。1行が長いと、行の終わりから次の行の先頭へ視線を戻すときに迷いやすくなります。

可変幅の方は、スマホで21〜23字、タブレット以上で42字に収まっています。上限を設けているので、画面が広くなっても1行は長くなりません。

区切りは端末名で決めない

画面幅で表示を切り替える地点を、区切り（ブレークポイント）と呼びます。ここでよくある間違いが、「iPhoneは375pxだから375pxで区切る」と端末名から決めることです。

端末は毎年増えるので、名前で決めた区切りはすぐ合わなくなります。上の表でも、iPhone SEとiPhone 15 Proで18pxの差があります。この差に合わせて区切りを2つ作る意味はありません。

1. 幅を少しずつ狭めていく。ブラウザの幅を手で変えるだけでよい
2. レイアウトが崩れた地点を記録する。その幅が区切りの候補
3. その地点に区切りを置く。端末名ではなく、崩れた幅で決める
4. 区切りの数は必要な分だけにする。増やすほど確認する組み合わせが増える

作ったあとに何を確認すればいいのか

確認は3つです。横スクロールが出ないこと、本文が16px以上あること、そしてスマホ向けの1行が入っていること。道具はブラウザだけで足ります。

レスポンシブデザインの確認に、実機を何台も揃える必要はありません。ブラウザの開発者ツールで幅を変えるだけで、大半は見つかります。

確認1: 1行の記述が入っているか

まず meta の記述を確認します。MDNは、スマホで適切に表示するためにこの指定が必要であることを、レスポンシブデザインの学習項目として挙げています。

これが無いと、スマホはページ全体を縮小して表示します。幅に合わせた指定を書いていても効きません。最初に確認すべきはここです。

確認2: 横スクロールが出ないか

1. ブラウザの開発者ツールで幅を375pxにする
2. ページを上から下まで見て、横に動かせる箇所がないか確かめる
3. はみ出す原因はたいてい、幅をpxで固定した要素・長いURL・表・画像のどれか

表とコードは例外です。これらは縮めると読めなくなるので、その要素の中だけで横スクロールさせるのが一般的な扱いになります。ページ全体が横に動くのとは別物です。

確認3: 文字が小さくなっていないか

狭い画面に収めるために文字を小さくしていないか確認します。本文は16px以上が目安です。収まっていても読めなければ意味がありません。

画面の作りについてはUI/UXデザインの記事やアクセシビリティの記事でも扱っています。あちらは使いやすさと、誰でも使える状態の話です。