Figmaレスポンシブ作り方｜5ステップで3画面を完成

Figmaでレスポンシブデザインを作るには、ブレイクポイント設定からオートレイアウト適用まで5ステップで完成します。Figma公式ヘルプが示すFill/Hug/Fixの使い分けを押さえれば、PC・タブレット・スマホの3画面を1〜2時間で揃えられます。本記事では手順と実務ハックを解説します。

▶ 3日で初案件PR

この記事でわかること

1440px・768px・375pxの3幅でブレイクポイントを先に固める方法、Fill/Hug/Fixの使い分けでスマホ展開時の崩れをゼロに近づける手順、コンポーネント先作りで3画面分の修正コストを半分以下に削減するアプローチの3点を解説します。

この記事の結論

Figmaでレスポンシブを作る最短ルートは「ブレイクポイント先決め→PC版完成→コンポーネント化→スマホ展開」の順で進めることです。オートレイアウトのFill/Hug/Fixを使い分けることで、画面幅が変わっても崩れないフレーム構造が完成します。文字スタイルとコンポーネントを最初に固める設計が、フリーランスが短時間で納品品質を確保するための最も効率的な方法です。

今日やるべき1つ

新規ファイルを開き、デスクトップ（1440px）・タブレット（768px）・スマホ（375px）の3フレームを横に並べて配置する（所要時間：5分）。

状況別ショートカット

Figmaレスポンシブは3幅で完結

ブレイクポイントを「先に」決めることが最大の時短になります。どこから始めるか迷った場合も、まず幅を固定することで後工程の手戻りが消えます。

デスクトップ1440px・タブレット768px・スマホ375pxが標準

実務でよく使われるブレイクポイントは、デスクトップが1200px以上（フレーム幅1440px推奨）、タブレットが768px〜1199px（フレーム幅768px）、スマホが375px〜767px（フレーム幅375px）の3段階です。フレーム幅をブレイクポイントの下限値に合わせておくと、CSS実装時に開発者が数値をそのまま使えます。

Figmaのプリセットから「Desktop」「iPad mini」「iPhone 14 Pro」を選べば、数値の打ち込みなしに近い値でフレームが立ち上がります。プリセット選択後、フレーム幅を上記の数値に上書きするのが最も速い方法です。ブレイクポイントを設計仕様として先に固定することで、後から「スマホ何pxで切ればいいですか？」という手戻りが発生しなくなります。

3フレームを同一ページに横並びで配置する意図

PC・タブレット・スマホの3フレームを同一ページに横並びで配置すると、スクロールしながら横断比較できるため、崩れの発見が早まります。フレーム間の間隔は100px〜200px空けておくと、後から追加する注釈コメントや矢印が収まりやすくなります。

縦に積んでしまうとスクロールが長くなり、比較の手間が増えます。横並びのまま最後まで作業を進めることが、設計ミスの早期発見につながります。フリーランスの作業効率を上げる方法を参考に、3画面を一覧できる配置が最終確認の時間を短縮する設計と組み合わせるのも有効です。

あわせて読みたい

作業効率上げる方法|フリーランスが5つの仕組みで時間を30%削減 フリーランスが作業効率を30%削減する5つの仕組みを解説。タスク優先順位の明確化、無料ツール活用、環境整備で月3〜5時間を回収できます。

ページ構成は「Base／Components／Breakpoints」の3層で管理

Figmaのページを用途別に分けて管理すると、ファイルが大きくなっても混乱しません。「Base」ページに色・文字スタイル・スペーシングを定義し、「Components」ページにコンポーネントを置き、「Breakpoints」ページで3画面分のデザインを作業します。

この構成を最初に作っておくと、クライアントへのファイル共有時に「どのページを見ればいいか」が明確になります。開発者との連携でも、ComponentsページのURLをそのまま渡せるため、仕様確認の往復が減ります。Figma公式ヘルプでも、構造を先に決めてからレイアウトを適用することが推奨されています。

Q：ブレイクポイントの幅はプロジェクトによって変えるべきですか？

A：変えて問題ありません。クライアントがすでにCSSフレームワーク（Bootstrapなど）を使用している場合、その既定値（576px・768px・992px・1200px）に合わせると開発側の修正が減ります。初回打ち合わせで「使用フレームワークの有無」を確認するのが確実です。

Q：タブレット版は必ず作らなければいけませんか？

A：クライアントの要件次第です。アクセス解析でタブレット比率が低い場合、PC版とスマホ版の2画面に絞る判断も合理的です。最初の要件定義で「何画面対応か」を明文化して合意を得ておくと、後からスコープが広がるリスクを防げます。

オートレイアウトは3設定で制御

Fill・Hug・Fixという3つの幅設定は、使い分けが分かると崩れが減ります。役割を覚えると設計の判断が速くなります。

Fillは「親フレームに合わせて広がる」設定

Fillは、親フレームの幅いっぱいに要素を引き伸ばす設定です。ナビゲーションバーやフッター、全幅セクションなど「画面幅に追従してほしい」要素に使います。子要素をFillにすると、親フレームの幅を変えるだけで子が自動追従するため、ブレイクポイントごとの幅調整が不要になります。

Fillを正しく使えば「スマホフレームに貼り付けたらナビが短くなった」という現象が起きません。フレームを複製してブレイクポイント別に幅を変えれば、Fillの要素は自動で追従します。これが「PCデザインをコピーして各幅に調整する」手順の本質です。

Hugは「中のコンテンツ量に合わせて縮む」設定

Hugは、子要素のサイズに合わせて親が縮む設定です。ボタンや小さいカード、テキストラベルなど「コンテンツが変わったときに幅が追従してほしい」要素に使います。テキストが長くなっても枠からはみ出さず、短くなっても余白が残りません。

Hugを使うとテキスト量が変わるA/Bテストや多言語対応の際に修正ゼロで対応できます。クライアントが「キャッチコピーを変えたい」と言ったときにデザインが自動調整されるため、修正工数の削減につながります。

Fixは「サイズを固定する」設定

Fixは、数値で幅・高さを固定する設定です。ロゴ・アイコン・サムネイル画像など「何があってもサイズを変えたくない」要素に使います。Fillでもなく、Hugでもない要素をFixで固定することで、レイアウト全体の「動かしたくない錨」が決まります。

3つの設定は「動いてほしいか・縮んでほしいか・固定したいか」の3択で判断できます。セクション全体はFill、カード内のテキストはHug、ロゴはFixという組み合わせが最もよく使われるパターンです。Figma公式では、オートレイアウトにより「いっぱいに拡大したり、収まるように縮小したり、コンテンツをリフローしたり」できると説明しており、これがFill・Hug・Fixの3つに対応しています。

Q：オートレイアウトはShift+Aで追加できると聞きましたが、既存フレームにも使えますか？

A：使えます。既存フレームを選択した状態でShift+Aを押すと、そのフレームにオートレイアウトが追加されます。ただし、すでに絶対配置（Absolute position）を使っている子要素がある場合、位置が意図せずずれることがあるため、追加後は各子要素の配置を確認してください。

Q：FillとHugが混在するフレームはどう管理すればいいですか？

A：親フレーム側にオートレイアウトを適用し、子要素ごとにFill・Hug・Fixを設定するのが基本です。親の方向（横方向・縦方向）を固定してから子の設定を行うと、意図しない方向への引き伸ばしが起きません。混乱した場合は、まず親フレームのAutoLayoutの「方向」を確認するところから始めてください。

レスポンシブ展開は3段階で整える

PCデザインをスマホに落とし込むと崩れてしまう原因のほとんどは、「幅を固定した要素が親フレームより大きい」か「横並びが縦並びに切り替わっていない」のどちらかです。

PC版からスマホへ展開する3段階の手順

PCフレームを複製してスマホフレーム（375px）にリネームし、フレーム幅を375pxに変更するところから始めます。これが第1段階です。第2段階では、横幅がFillになっている要素が正しく追従しているかを確認し、Fixのままになっている幅広要素（カードグリッドや横並びボタン群）を見つけてFillまたはHugに変更します。第3段階では、横並び（Horizontal）のオートレイアウトを縦並び（Vertical）に切り替える要素を特定して変更します。

この3段階を順番に踏むことで、「とりあえず幅を縮めたら全部崩れた」という状態から抜け出せます。PCで横に3列並んでいたカードをスマホで縦1列に変えるには、親フレームのオートレイアウト方向をHorizontalからVerticalに変更するだけで完了します。

コンポーネント化で3画面分の修正コストをゼロに近づける

ナビゲーションバー・フッター・カードUI・ボタンは最初にコンポーネント化しておきます。コンポーネントを使っていれば、「ボタンの色を変えてほしい」というクライアントの要望に対し、Componentsページのマスターコンポーネントを1箇所変更するだけで3画面すべてに反映されます。

コンポーネント化せずに3画面分を個別に管理すると、変更のたびに3か所を修正する必要が生じます。初期設定に10〜15分かけてでもコンポーネントを作る価値はここにあります。なお、著作権とはわかりやすく解説した記事にも書かれているように、デザイン制作においても「最初の設計をしっかり行う」姿勢が長期的なコスト削減につながります。

あわせて読みたい

著作権とはわかりやすく｜侵害を避ける5つの実務ルール 著作権は創作と同時に自動発生します。フリーランスが侵害を避けるための判断基準「依拠性＋実質的類似性」を解説。契約書・利用規約の確認など実務ルール5つを事例つきで紹介。

文字スタイルを先に定義するとタイポグラフィの崩れが消える

見出し（H1・H2・H3）・本文・ラベルの文字スタイルをFigmaの「Styles」に登録しておくと、ブレイクポイントごとにフォントサイズをバラバラに設定するミスが起きません。スマホ版ではH1を32px→24pxに変更するといった調整も、スタイルを使っていれば一括変更できます。

コンポーネントと文字スタイルを最初に固めておくと、スマホ版を作るときの作業が大幅に減ります。文字スタイルの登録は「最初の15分に必ずやること」として習慣化してください。後から整理しようとすると、すでに個別設定が混在して修正にかえって時間がかかります。

Q：スマホ版でカードを縦並びにするとき、余白が大きくなりすぎます。どう調整しますか？

A：オートレイアウトの「Gap between items」を小さくするのが最初の対処です。それでも大きい場合は、親フレームのPaddingを左右16px・上下24pxに統一すると、スマホの画面幅に対してバランスが取れることが多いです。余白を個別に設定している場合は、まず親フレームのPaddingに集約するところから始めてください。

Q：コンポーネントのVariantを使ってPC版とスマホ版を分けるべきですか？

A：分けるとより厳密な管理ができます。Figmaでレスポンシブデザインを細かめに表現するでは、Mobile・Tablet・DesktopのVariantを作り、VariablesでDevice typeを切り替える方法が紹介されています。ただし設定に時間がかかるため、1ページ完結の小規模サイトではブレイクポイントごとにフレームを複製するシンプルな方法で十分です。

Figmaレスポンシブの進捗を5項目で診断

「自分の作業が今どの段階にあり、次に何をすべきか」を自己判断できると、制作が止まりにくくなります。

Q1：Figmaのファイルに3つのフレーム（デスクトップ・タブレット・スマホ）が存在しますか？

YESの場合→Q2へ進んでください。NOの場合→今すぐ3フレームを作成してください（所要時間5分）。

Q2：ナビゲーションバーやフッターなど、共通パーツはコンポーネント化されていますか？

YESの場合→Q3へ進んでください。NOの場合→「レスポンシブ展開は3段階で整える」セクションを参照してコンポーネント化から始めてください。

Q3：セクション・カード・ボタン等にオートレイアウトが適用され、Fill/Hug/Fixが設定されていますか？

YESの場合→Q4へ進んでください。NOの場合→「オートレイアウトは3設定で制御」セクションを参照して設定してください。

Q4：スマホフレームで横並び要素が縦並びに切り替わっていますか？

YESの場合→Q5へ進んでください。NOの場合→親フレームのオートレイアウト方向をVerticalに変更し、横並びから縦並びへの切り替えを確認してください（所要時間10〜20分）。

Q5：各ブレイクポイントでプレビュー表示を確認しましたか？

YESの場合→基本的なレスポンシブデザインが完成しています。開発連携の準備に進んでください。NOの場合→右上の「Present」ボタンからプレビューを確認し、崩れた箇所をメモしてください（所要時間5〜10分）。

Q：プレビューで確認するときに注目すべき箇所はどこですか？

A：テキストが枠からはみ出していないか、カードやボタンが画面幅からはみ出していないか、余白が均等に見えるかの3点を最初に確認してください。次に、スクロールしたときに要素が重なっていないかを確認します。崩れの多くはFillの設定漏れかオートレイアウトの方向設定ミスです。

Figmaレスポンシブは5ハックで効率化

フリーランスが短時間でレスポンシブデザインを仕上げるには、作業の順番と仕組みの設計が重要です。ここでは「なぜその方法が速いのか」まで解説します。

ハック1：コンポーネント先作りで修正時間を削減

【対象】： コンポーネント化をまだ始めていない、またはページ完成後にまとめて対応しようとしているフリーランス

【手順】： 第1ステップは、ナビゲーション・フッター・ボタン・カードの4種類を最初の作業30分以内にコンポーネント化することです（所要時間：20〜30分）。第2ステップは、ComponentsページにMain componentを配置し、Breakpointsページではすべてインスタンスを使う運用に切り替えることです（所要時間：5分）。第3ステップは、スマホ展開時にMain componentのオートレイアウト方向を変更して全インスタンスへの反映を確認することです（所要時間：10分）。

【コツと理由】： 「先にコンポーネント化してから中身を詰める」アプローチが3画面分の修正コストを大幅に削減します。後からコンポーネント化すると既存フレームとの置き換え作業が発生し、かえって時間がかかるためです。

【注意点】： Variantを最初から細かく分けすぎる必要はありません。PC/タブレット/スマホの3種類をVariantで分けるのはプロジェクト規模が大きい場合に限定し、小規模なら「1つのコンポーネントのオートレイアウトを柔軟に作る」だけで十分です。

ハック2：余白は親のPaddingに集約して工数を削減

【対象】： カード内の余白を子要素のMarginで個別に調整しているフリーランス

【手順】： 第1ステップは、修正したいセクションを選択し、オートレイアウトのPaddingを確認することです（所要時間：2分）。第2ステップは、子要素に個別設定されているMarginやPaddingを0にリセットし、親フレームのPaddingに集約することです（所要時間：5〜10分）。第3ステップは、スマホフレームでは親のPaddingを左右16px・上下24pxに統一し、タブレットは左右24px・上下32pxに設定することです（所要時間：3分）。

【コツと理由】： 「余白は親フレームのPaddingで一元管理する」方が、ブレイクポイントごとの調整が短時間で完了します。子要素が増えるたびに個別Marginを設定すると、要素を追加・削除するたびに余白の整合性が崩れ、修正に時間がかかります。

【注意点】： 兄弟要素同士の間隔はGap between itemsで管理します。Paddingは「親フレームの内側の余白」、Gapは「子要素同士の間隔」という役割分担を守ると、余白管理の複雑さが解消されます。

ハック3：横並び要素は最初から縦並び前提でコンポーネントを組む

【対象】： PCデザインが完成してからスマホ対応を始め、横並びを縦並びに直す作業で時間がかかっているフリーランス

【手順】： 第1ステップは、カードや機能紹介ブロックのオートレイアウト方向をVerticalで作り始め、PCではWrapを使って横に並べる設定にすることです（所要時間：10分）。第2ステップは、Wrapの折り返し幅をMin widthで設定し、親フレームが375px以下になったときに自動で縦並びになるか確認することです（所要時間：5分）。第3ステップは、スマホフレームで表示を確認し、意図した縦並びになっていれば完了、なっていない場合は最大幅の設定を見直すことです（所要時間：5分）。

【コツと理由】： 「Verticalベースで組んでWrapで横に見せる」アプローチを取ります。FigmaのオートレイアウトにはWrap機能があり、親フレームが狭くなると自動で折り返します。スマホ展開時に「縦並びに変更する」作業を省けます。

【注意点】： Wrapを使うとFigmaのプレビューで折り返しが機能しないケースがあります。実際の折り返し確認はフレーム幅を手動で変えながら確認してください。

ハック4：開発者への仕様伝達はコメント機能と注釈フレームで修正を減らす

【対象】： 開発者に渡したデザインに「意図が分からない」と言われ、修正対応に時間を取られているフリーランス

【手順】： 第1ステップは、各ブレイクポイントフレームの近くに「Annotation」用のフレームを作成し、ブレイクポイントの幅・オートレイアウトの意図・可変部分の説明を書き込むことです（所要時間：15〜20分）。第2ステップは、Figmaのコメント機能（Cキー）を使い、「このセクションはFillで幅追従」「この画像は固定サイズ」等の意図を要所に追加することです（所要時間：10分）。第3ステップは、Figma Dev ModeのURLを開発者に共有し、実装前に「分からない点はここで聞いてください」とコメント欄の使い方を案内することです（所要時間：3分）。

【コツと理由】： 注釈と意図のコメントを付けておくことで開発者からの確認連絡を減らせます。開発者は実装時に判断できない点をメモしてから質問するため、先に判断材料を置いておくことで往復コミュニケーションが発生しません。

【注意点】： コメントを書きすぎると開発者がかえって重要な情報を見落とします。コメントは「幅設定の意図」「可変/固定の区別」「スマホ時の挙動」の3種類に絞り、それ以外は注釈フレームにまとめる方が読みやすくなります。

ハック5：変数設計で画面幅切り替えを自動化

【対象】： FigmaのVariablesを試したことがなく、ブレイクポイントごとに手動で幅を変更しているフリーランス

【手順】： 第1ステップは、Figmaの「Variables」パネルを開き、Number型で「breakpoint/desktop（1440）」「breakpoint/tablet（768）」「breakpoint/mobile（375）」の3変数を作成することです（所要時間：5分）。第2ステップは、各フレームの幅に対して作成した変数を紐づけ、変数の値を変えるとフレーム幅が変わることを確認することです（所要時間：10分）。第3ステップは、Figma Sitesを使う場合、レスポンシブ変換の設定を確認することです（所要時間：15分）。

【コツと理由】： Number型変数は3つ定義するだけで始められます。Figmaでレスポンシブデザインを細かめに表現するでは、VariablesとVariantを組み合わせることでDevice typeを切り替えるだけで全コンポーネントの表示が切り替わる仕組みを作る方法が紹介されています。一度設計しておくと、次の案件から同じ変数設計をそのまま再利用できます。

【注意点】： VariablesはFigmaの有料プラン（Professional以上）が必要です。無料プランでは変数の一部機能が制限されるため、プランを確認してから設計を始めてください。変数なしで進める場合は、各フレームに手動で幅を入力する方法で問題ありません。

Q：FigmaのVariablesとStylesはどう使い分ければいいですか？

A：Stylesは色・文字・エフェクトの見た目を登録するもの、Variablesは数値・真偽値・文字列などの「値」を登録して条件分岐に使うものです。レスポンシブ対応では、色・文字スタイルはStylesで管理し、ブレイクポイントの幅・表示/非表示の切り替えはVariablesで管理するのが最も整理されます。

Figmaレスポンシブの実例は2パターンで学ぶ

実際にどんなケースでつまずき、どう解決したかを具体的に見ると、自分の状況に当てはまるヒントが見つかりやすくなります。

ケース1（成功パターン）：コンポーネント先作りで3画面を4時間で完成

ECサイトのリニューアル案件を担当したフリーランスのWebデザイナーは、ヘッダー・フッター・カード・ボタンを制作開始から30分以内にコンポーネント化してからデザインに着手しました。PC版が完成した時点でスマホ展開を始めたところ、コンポーネントのオートレイアウト方向を変えるだけで3画面分のデザインが2時間以内に完成しました。クライアントから「ボタンの色を変えてほしい」という変更依頼が来た際も、マスターコンポーネント1箇所の変更で全画面に反映され、修正時間は短時間に収まりました。

「最初のコンポーネント化に時間をかけた分、後半の作業が驚くほど速く終わりました」（Figmaで効率の良いレスポンシブの作り方）

最初からコンポーネント化せずに3画面分を個別に作っていれば、ボタン色変更だけで相当な時間がかかっていた可能性があります。

ケース2（失敗パターン）：スマホ対応を後回しにして工数が2倍に膨らんだ

LP制作でPC版を完成させてからスマホ対応に着手したフリーランスのデザイナーは、すでに各要素が固定幅で作られており、横並びのカードグリッドを縦並びに変えるにはほぼ全要素の幅設定を手直しする必要が生じました。スマホ対応だけで予定の2倍の時間がかかり、クライアントへの納品が1日遅れました。

「スマホ版を最初に考えずに作り始めたら、後から手直しが大変で後悔しました」（Figmaで作る！レスポンシブデザインの基本と実践ガイド）

最初からオートレイアウトとFillを設定してPC版を作っていれば、スマホ展開は1〜2時間で完了していた可能性があります。納期管理の観点からも、フリーランスの時間管理を5つの仕組みで改善する方法を参考に、制作フローを仕組み化しておくことが重要です。

あわせて読みたい

フリーランス時間管理は5つの仕組みで月40時間を取り戻す フリーランスの時間管理を5つの仕組みで解決。ポモドーロ・テクニック、タイムブロッキングなど無料ツールで月40時間の浪費時間を取り戻す実践的な方法を解説します。

Q：コンポーネント化を後からやろうとしたら大変でした。何から始めればいいですか？

A：まず「繰り返し使われている要素」を探してください。ナビゲーション・フッター・ボタン・カードの4種類だけをコンポーネント化するだけで、修正コストを大幅に削減できます。全要素を一気にコンポーネント化しようとせず、よく変更が入る箇所から優先的に対応してください。

Figmaレスポンシブを完成させる：5ステップの総まとめ

Figmaでレスポンシブを作る最短ルートは、ブレイクポイント先決め・コンポーネント先作り・オートレイアウトのFill活用の3点にあります。PC版が完成してからスマホ対応を後回しにすると、修正工数が大幅に増えます。文字スタイルとコンポーネントを最初の30分で固めることが、制作時間を最も効率的に短縮する方法です。

制作が止まる原因の多くは「次に何をすべきかわからない」という状態です。本記事で紹介した5項目診断を使えば、今日の作業の優先順位が2分で決まります。

Figmaレスポンシブ作り方に関するよくある質問

Q：Figma無料プランでもレスポンシブデザインを作れますか？

A：作れます。オートレイアウト・コンポーネント・スタイル機能はすべて無料プランで使えます。Variablesの一部機能（モードの切り替えなど）はProfessional以上が必要ですが、ブレイクポイントごとにフレームを複製するシンプルな方法であれば無料プランで問題なく進められます。

Q：Figma Sitesを使うとコーディング不要でレスポンシブ公開できますか？

A：Figma Sites公式によると、既存のFigmaデザインをレスポンシブ対応コンポーネントとして公開する機能が提供されています。細かいカスタムインタラクションやCMSとの連携など複雑な実装はコーディングが必要な場合があります。静的なLP・ポートフォリオサイトであれば、Figma Sitesで公開まで完結できるケースが多いです。

Q：スマホ版を先に作るモバイルファーストの方が良いですか？

A：プロジェクト次第です。クライアントがスマホユーザーを主要ターゲットとしている場合はスマホ版を先に作るモバイルファーストが適しています。Webサービスやツール系でデスクトップ利用が主体の場合はPC版から始める方がクライアントへの説明もしやすいです。最初の打ち合わせで「ユーザーのメインデバイスは何か」を確認してから方針を決めてください。

【出典・参照元】

デザインへのオートレイアウトの追加 – Figma公式ヘルプ – Figma公式ヘルプ

Figma Sites公式 – Figma Sitesの機能案内

Figmaでレスポンシブデザインを細かめに表現する – Variables・Variant活用の実践記事

Figmaで効率の良いレスポンシブの作り方 – 実務メモ・体験談

Figmaで作る！レスポンシブデザインの基本と実践ガイド – レスポンシブデザインの基本と実践ガイド