PC版のWebデザインを作ったあと、全体をそのまま縮めてSP版にすると、文字・画像・カード・ボタンが窮屈になることがあります。

レスポンシブWebでは、PCとSPは完全に別のページではありません。共通する情報と部品を保ちながら、画面幅に応じてレイアウトを変えるという考え方が必要です。

この記事では、FigmaでPC/SPデザインカンプを作り、HTML/CSS実装へ渡しやすくする流れを整理します。

情報の基準日：2026年8月12日
Figmaの機能は更新されます。最新仕様はFigma公式のAuto layout、Frames、Constraints、Prototype previewを確認してください。

先に結論：PC/SPの2枚ではなく「幅が変わったときのルール」を作る

進め方は次です。

  1. PC版の構造を整理する
  2. 共通部品を確認する
  3. 幅が狭くなると困る箇所を洗い出す
  4. PC/SPで変わるルールを決める
  5. Auto layoutやconstraintsを設定する
  6. SP Frameを作る
  7. 並び順・文字・画像・余白を調整する
  8. 状態差分を書く
  9. Prototypeやリサイズで確認する
  10. 実装者へ中間幅の意図も渡す

FigmaでPC/SPデザインカンプを作る簡単な使い方【2026年8月時点】

Step 1：PC版をセクション単位に整理する

まずPC Frameを、

header
hero
features
case-study
pricing
faq
cta
footer

のように分けます。

SP版を作る前に、何が1つのセクション・部品なのかを明確にします。

Step 2：PC/SPで共通するものを確認する

基本的に共通するのは、

  • 情報そのもの
  • 見出し階層
  • ブランド色
  • ボタンの意味
  • カードの役割
  • CTA遷移先

などです。

画面幅が変わるからといって、情報の意味まで別物にしません。

Step 3：幅が狭くなると崩れる箇所を洗い出す

例えば、

  • 3カラムカード
  • 画像 + テキストの2カラム
  • 横長料金表
  • グローバルナビ
  • 長い見出し
  • 大きな装飾画像
  • 横並びCTA

などです。

SP化の判断が必要な箇所を先に一覧化します。

Step 4：各箇所の変化ルールを決める

例：

PC: 3 cards horizontal
SP: 1 column

PC: image left / text right
SP: image top / text bottom

PC: full navigation
SP: menu button

「SPではなんとなくこうした」ではなく、変化を言葉にします。

Step 5：Auto layoutを使う

Figma公式では、Auto layoutを使うとframe内の要素をdirection、spacing、padding、alignmentなどのルールで並べられます。

例えばカードをAuto layout化しておけば、本文が長くなってもpaddingを保ちやすくなります。

ボタンもテキスト量に合わせて伸縮する形にできます。

Step 6：Constraintsを使う場所を確認する

Figma公式ではConstraintsにより、親Frameのサイズが変わったときに子Layerがどの位置・サイズ関係を保つか指定できます。

例えば、

  • 左右に固定する
  • 右端へ固定する
  • 幅へ追従する
  • 中央を維持する

などです。

Auto layout内の要素とConstraintsを使う要素は、構造に応じて使い分けます。

Step 7：SP Frameを作る

SP用のトップレベルFrameを用意し、PCの主要セクションを移します。

ここで単純縮小ではなく、レイアウトルールを反映します。

Step 8：左右余白を決める

SPでは画面端まで文章が張り付かないよう、左右余白を設定します。

重要なのは特定のpx値ではなく、サイト全体で同じ基準を使うことです。

Step 9：文字を読み直す

PCで1行だった見出しがSPで4行になる場合、

  • 文字サイズ
  • 文言
  • 最大幅
  • 改行位置
  • 行間

を確認します。

ただしデザイン都合だけで重要な情報を削りすぎないようにします。

配色・文字・余白の共通ルールは「Webデザインの配色・文字・余白を整える実践レシピ」で整理しています。

Step 10：画像の見せ方を調整する

PC横長画像をSPへそのまま縮めると、主題が小さくなることがあります。

必要に応じて、

  • トリミング
  • aspect ratio
  • 表示位置
  • 別画像の使用
  • 装飾の簡略化

を検討します。

実装者が分かるよう、SP専用素材なら明示します。

Step 11：カラムを並べ替える

2カラムを1カラムにするとき、「PC左→右」の順がそのまま最適とは限りません。

内容の理解順に並べます。

例えばPCでは画像を左、説明を右に置いていても、SPでは説明→画像の順が自然な場合があります。

Step 12：ナビゲーション・操作状態を作る

ヘッダーがSPでmenu buttonになる場合、閉じた状態だけでなく、

  • open状態
  • overlay
  • closeボタン
  • active状態

も必要に応じてデザインします。

FAQ、modal、tabなども同様です。

Step 13：Prototypeで主要操作を確認する

Figma公式ではPrototypeのPreview / Presentで画面遷移や操作フローを確認できます。

Responsive表示では、constraintsやAuto layoutの設定に応じてviewer幅の変化を確認できます。

静止画だけで判断せず、操作があるところは動かして確認します。

Step 14：中間幅で何が起こるか考える

PCが1440px、SPが390pxでも、実際のWebサイトはその間の幅でも表示されます。

そのため、

  • どこまで2カラムを保つか
  • カードが2列になる幅はあるか
  • ナビが収まらなくなるのはどこか
  • 見出しが不自然になる幅はどこか

を実装者と共有します。

デザインカンプがPC/SPの2枚だけでも、中間幅は実装で自然につながる必要があります。

Step 15：実装者へ差分をまとめる

引き渡し時に、

Header
PC: horizontal nav
SP: menu button

Feature cards
PC: 3 columns
Tablet: 2 columns acceptable
SP: 1 column

Hero image
PC: right side
SP: below heading

のように差分を書いておくと解釈違いを減らせます。

Step 16：Figma→HTML/CSSへ渡す

完成したカンプは、最終成果ではなく実装の入力です。

次は「FigmaデザインからHTML・CSSへ実装する方法」で、構造・余白・文字・画像・レスポンシブのルールをコードへ落とします。

HTML/CSS側の基礎から確認する場合は「WebページをHTML・CSS・JavaScriptで1枚作る方法」へ進めます。

PC/SPで避けたい作り方

PCを一括縮小して終える

文字、ボタン、画像、余白は同じ比率で縮めれば良いわけではありません。

画面幅に合わせて情報の読み方を再設計します。

PCとSPで部品を別々に作りすぎる

同じカードなのにPC/SPで完全に別componentになると、修正漏れや実装解釈のズレにつながります。

共通部品を保ち、必要な差分だけ持たせます。

ブレークポイントをデザインツールだけで断定する

実際にどの幅でレイアウトを変えるかは、コンテンツ量・実装・ブラウザでの確認によって決める場合があります。

カンプは意図を伝え、実装時に中間幅を確認します。

LP制作全体の中で使う

まだPC版も作っていない場合は、先に「FigmaでLPデザインを1ページ作る基本」から進めます。

その後、

Figmaで作る → PC/SPを整理する → Figma→HTML/CSS → HTML/CSS/JavaScriptで作る

という順で、デザインから実装までつなげられます。

まとめ

PC/SPデザインカンプでは、2枚の完成画像を作ることより、画面幅が変わったときに何を維持し、何を変えるかをルールとして伝えることが重要です。

次に読む記事

今のテーマから次の行動へ進むときは、以下の記事も参考にしてください。