「スマホでは」より「640px以下」で。実装が崩れないレスポンシブ指示の渡し方

レスポンシブの指示で「スマホでは縦並びにしてください」と指示に書かれていると、受け取る側は一瞬止まります。そのスマホが何pxまでを指すのか、指示だけでは決まらないからで、同じ資料でも、幅ベースで640px以下のときと書かれていれば、迷う余地はありません。この記事では、崩れにくい書き方を、受け取る側の実感からまとめます。

決めるべきは、境目の数値。

端末名は人によってpxが違う

スマホやタブレットという言葉は、指す幅が人によってずれるうえ、ある端末は縦だと375px、横にすると800pxを超えます。折りたたみ端末やブラウザの縮小表示も含めると、端末名と画面幅は一対一で対応しません。

端末名は、幅の指定になりません。

実装は最終的に◯px以下でこうというルール（メディアクエリと呼ぶ、画面幅ごとにスタイルを切り替える仕組み）に落ちます。指示が端末名のままだと、実装者がたぶんこの幅だろうと推測して境目を決めることになるんです。この推測が入った時点で、意図と実装がずれる余地が生まれます。

たとえば同じ「スマホでは縦並び」という指示でも、実装者が境目を640pxに置けば横向きの端末（800px超）は横並びのまま残り、確認した向きによって見え方の報告が食い違いかねません。

640pxはよく使う区切りの一つで、CSSフレームワークのTailwind CSSでも初期設定の小さいブレークポイント（sm）に採用されています。もちろん現場に合わせて調整できますが、幅で書いてあれば、その値をそのまま実装に写せます。

/* 640px以下のとき、縦並びにする例 */
@media (max-width: 640px) {
  .cards { flex-direction: column; }
}

中間幅がないと、実装者が勝手に補間する

もう一つよくあるのが、モバイルとPCの2枚しかデザインが無いケースです。この場合、タブレット〜PCの間（おおよそ640〜1024px）の見た目は指示に存在しません。

すると実装者は、2枚の間を自分の判断でつなぎます。カラム数をどこで変えるか。文字や余白をどこまで伸ばすか。この補間が意図と合っていれば問題ありませんが、合っていなければ中間幅だけ崩れて見えます。レビューで「タブレットで見たら間延びしている」と指摘されるのは、たいていこの範囲です。

中間幅を1枚足すだけで、この推測はほぼ消えます。全幅ぶんのデザインは要りません。折り返しやカラム数が変わる境目が分かる程度で十分です。

例外は、1カラムで縦に流れるだけのページ。カラム数も折り返しも変わらないなら、中間幅の1枚は省いても崩れにくいでしょう。

実装者からのお願い、4つ

受け取る側として、指示にこれが書いてあると再現性が上がります。

• 端末名でなく幅で ―「スマホでは」でなく「640px以下のとき」。境目の数値を決めておく
• 中間幅も1枚 ― モバイルとPCの間を1枚。全部でなく、変化する境目だけでよい
• 最小・最大幅を明記 ― 要素をどこまで縮め、どこで伸ばすのをやめるか。伸縮の下限と上限を示す
• 折り返しの意図を伝える ― 「ここは2行で」ここは折り返さない。文字の折り方は見た目を大きく左右する

この4点があると実装側は推測せずに済み、結果として、指示どおりの見た目が幅を変えても再現できます。Figmaのレスポンシブ機能は便利ですが、機能で表現しきれない意図の一言があると、齟齬はさらに減るはずです。

幅・中間幅・最小最大・折り返しの4点が先に書いてあると、実装中に迷っても設計意図に照らしてその場で決められるので、レビューで指摘されてから幅ごとに直す往復がまるごと減ります。

デザインデータの渡し方そのものは、Figma・XDでのコーディング依頼のコツにもまとめています。制作の進め方から相談したい場合は、Web制作依頼の流れもあわせてご覧ください。

まとめ

レスポンシブ指示は、端末名でなく画面幅で渡すと実装の挙動が一意に決まります。加えて中間幅を1枚足し、最小・最大幅と折り返しの意図を添えるだけで、実装者の勝手な補間による崩れはほぼ防げます。私自身、幅ベースの指示をいただいた案件ほど手戻りが少ないと感じています。

端末名でなく、幅の数値で。

Figmaに忠実で、幅を変えても崩れないレスポンシブ実装をお探しでしたら、お問い合わせからお気軽にご相談ください。デザインデータを拝見して、指示の粒度から一緒に整えます。

本記事は2026年7月時点の情報です。CSSフレームワークの初期ブレークポイントやFigmaの機能仕様は変わる場合があるため、最新の情報をあわせてご確認ください。