レスポンシブと画面サイズ

レスポンシブデザインは、画面の幅に合わせてレイアウトを変える作り方です。スマホ・タブレット・PC の3枚を作って終わりではなく、「幅が変わったとき、どこが伸びて、どこで組み替わるか」というルールをデザインします。

落とし穴：デザインを1つの幅（例：390px）だけで作り、短いダミーの文言で確かめること。いちばん狭い幅・いちばん長い文言・大きな文字の3つで一度崩してみると、実装後の手戻りが減ります。

Web エンジニア向け：CSS のレイアウトとレスポンシブ

ブレイクポイントは、レイアウトを切り替える画面幅の境目です。チームでいくつかに決めておきます（例：600px 未満はスマホ、600〜1023px はタブレット、1024px 以上は PC）。端末の名前ではなく、中身が窮屈になる幅で決めるのが基本です。境目と境目の間でも画面は連続して伸び縮みするので、各ブレイクポイントのいちばん狭い幅（例：320px・600px）でも崩れないかを確かめます。

同じカードでも、メインの欄に置くときとサイドバーに置くときで使える幅が違います。こうした部品は、画面幅ではなく「置かれた枠の幅」で形を変えるほうが自然なことがあり、CSS ではコンテナクエリで実装できます。デザインでは「この部品は幅 ○px 未満で縦並び」のように、部品の側のルールとして書きます。

崩れの原因として、画面サイズと同じくらい多いのが文言の長さです。翻訳すると日本語より長くなりやすく、ユーザーが入れる名前や商品名も長さがばらばらです。

文言をデザインに直接書かず、文言の一覧（キーと文言）で管理している現場もあります。その場合は、文言の担当と「最大の文字数」を共有しておくと、翻訳でも崩れにくくなります。

iOS の Dynamic Type、Android のフォントサイズの設定、ブラウザの文字サイズの設定で、ユーザーは文字を大きくできます。高齢の人や目の疲れやすい人など、文字を大きくして使う人は少なくありません。

WCAG（アクセシビリティの基準）の AA では、文字を200%に拡大しても内容や機能が欠けないことが求められます。デザインの段階で、いちばん大きな文字の設定の画面を1枚作ってみると、問題のある場所がすぐ分かります。

狭い画面では、横に並んでいた要素を縦に並べ直すのが基本です。WCAG の AA では、幅 320 CSS px 相当の画面（PC で 1280px の画面を400%に拡大したときと同じ）でも、横スクロールなしで内容が読めることが求められます。ただし、表・地図・図のように2方向の配置が意味を持つものは例外です。

縦に並べ直したときの順番は、HTML の並び順（＝読み上げの順番）と一致させるのが基本です。見た目の順番だけを入れ替えると、キーボードや読み上げで使う人には順番がちぐはぐになります。

同じ画面でも、マウス・タッチ・キーボードのどれで使われるかは分かりません。タブレットにキーボードをつなぐ人もいれば、PC をタッチで使う人もいます。

CSS では、ホバーできる端末かどうか（@media (hover: hover)）や、指で操作しているか（pointer: coarse）で見た目を変えられます。「ホバーできる端末ではホバーで、それ以外では常に表示」のように、両方のデザインを渡します。

画面幅によって画像の枠の縦横比が変わると、画像はその枠に合わせて切り抜かれるか、余白が出るかのどちらかになります。実装では、枠いっぱいに表示して余った部分を切る指定（object-fit: cover）がよく使われます。

運用の担当が画像を入れ替える場所（お知らせのバナーなど）は、入稿のルール（縦横比・残す範囲・文字を入れない）も一緒に決めておくと、公開後の崩れが減ります。