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

『スマホでは』と『640px以下のとき』の伝わり方の違いを比べた図

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

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

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

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

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

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

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

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

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

レスポンシブ指示で崩れないための4つのコツをまとめたカード図

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

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

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

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

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

まとめ

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

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

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