Figmaで作るレスポンシブデザイン：PC／SP両対応のコツ完全ガイド

Posted on by

Figmaでデザインを作っていて、こんな悩みはありませんか？

  • PCで作ったらスマホで崩れた
  • SPデザインを作るたびに作り直している
  • Auto Layoutを使っているのに伸び方がおかしい
  • 「レスポンシブ対応」がよく分からない

実はこれ、センスや経験の問題ではありません。
原因のほとんどは、
レスポンシブ前提で設計していないこと
Figma特有の考え方を知らないこと
です。

この記事では、
FigmaでPC／SP両対応のレスポンシブデザインを作るための考え方と具体的なコツ を、
初心者にも分かる言葉で解説します。

そもそもレスポンシブデザインとは？

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

画面サイズが変わっても、情報の意味と使いやすさを保つ設計

のことです。

重要なのは
PCデザインをそのまま縮めること
ではなく
情報の並び・優先度・見せ方を変えること

Figmaでは、
「構造」「Auto Layout」「Constraints」 を正しく使うことで、
この考え方を安全にデザインへ落とし込めます。

レスポンシブ設計の全体像（先に結論）

Figmaでレスポンシブ対応する基本構造はこれです。

UIパーツ
 → セクション
   → 画面（PC / SP）

つまり、
小さい単位から順にレスポンシブ対応 していくのが正解です。

■ Step1：最初に決める「基本ブレークポイント」

まずは、よく使われる基本サイズを押さえましょう。

■ 基本フレームサイズ

  • SP（スマホ）：375px
  • Tablet：768px
  • PC：1440px（または1200px）

初心者は SPとPCの2つだけ でOKです。

■ Step2：SPファーストで設計する理由

Figma初心者におすすめなのは、
SP（スマホ）→PC の順で作ること。

なぜSPから作るのか？

  • 情報量が少ない
  • 縦並びが基本
  • Auto Layoutと相性がいい

SPを先に作ると、

  • 情報の優先順位が整理される
  • PC展開が楽になる
  • 崩れにくい

レスポンシブが苦手な人ほどSPファーストがおすすめです。

■ Step3：Auto Layoutは「セクション単位」で使う

レスポンシブ対応で最重要なのが Auto Layout。

よくある失敗

画面全体に1つのAuto Layout
途中で後付け

正解

画面
 ├ セクション（Auto Layout）
 │   ├ UIパーツ
 ├ セクション（Auto Layout）

セクション単位でAuto Layoutをかける と、
SP／PCの切り替えが一気に楽になります。

■ Step4：Hug / Fill / Fixed をレスポンシブ目線で使い分ける

レスポンシブで崩れる原因No.1がこれです。

■ 基本ルール

  • テキスト・ボタン：Hug
  • コンテンツエリア：Fill
  • 画像・アイコン：Fixed（または比率固定）

例：カードUI

  • カード本体：Auto Layout（縦）
  • テキスト：Hug
  • 説明文：Fill
  • 画像：Fixed（16:9など）

何が伸びるか／伸びないかを必ず意識しましょう。

■ Step5：Constraints（制約）で位置を固定する

PCとSPでレイアウトがズレる原因の多くは、
Constraints未設定 です。

よく使う設定

  • 中央揃え：Center
  • 左固定：Left
  • 右固定：Right
  • 幅に応じて伸縮：Scale（慎重に）

「画面が広がったとき、どこを基準に動くか？」
を必ず考えて設定します。

■ Step6：PCとSPで「変えるべきもの／変えないもの」

■ 変えるべきもの

  • カラム数（PC：2〜3列／SP：1列）
  • 並び順（横→縦）
  • 余白の大きさ
  • 画像サイズ

■ 変えないもの

  • 色
  • フォント
  • UIパーツの基本形
  • コンポーネント構造

見た目は変えても、部品は共通化 が正解。

■ Step7：コンポーネント×レスポンシブ設計

再利用できるUIは、
レスポンシブ前提でコンポーネント化 します。

例：ボタン

  • サイズ違い：Variant
  • SP / PCで使い回し

例：カード

  • 中身は同じ
  • 並びは親のAuto Layoutで制御

レスポンシブは「親が管理」する意識が重要。

■ よくあるレスポンシブNG例

PCデザインをそのまま縮小
SPだけ別デザインで作る
Auto Layoutを使わない
Constraintsを後回し

レスポンシブは後付けできません。最初から設計するものです。

■ 実務で使えるレスポンシブ設計チェックリスト

  • SPとPCのFrameを用意した
  • セクション単位でAuto Layoutを使っている
  • Hug / Fill / Fixedを意識している
  • Constraintsを設定している
  • UIパーツはコンポーネント化している

■ まとめ｜レスポンシブは「設計8割・見た目2割」

Figmaでのレスポンシブデザインは、

難しい技術
ではなく
正しい設計の積み重ね

です。

今回のポイントを押さえれば、

  • PC／SPどちらでも崩れない
  • 修正が怖くない
  • 実務に近いデザインが作れる

ようになります。

まずやること

  1. SP（375px）からデザインする
  2. セクション単位でAuto Layout
  3. Constraintsを必ず設定

ここから始めてみてください。

#Figma #フィグマ #Figma初心者 #Webデザイン勉強中 #UIデザイン #デザイン独学 #レスポンシブデザイン #PCSP対応 #Webデザイン #UI設計 #Figma設計 #Figma学習 #デザインTips #Webデザイン講座#初心者向け #ブログ更新