Figmaでスマホ・PC両対応デザインを作るには、フレームを分けてオートレイアウトと制約を組み合わせるのが最速です。本記事では、ブレイクポイント設定から確認方法まで5ステップで解説します。
▶ 3日で初案件PR
この記事でわかること
Figmaにはスマホ・PC自動変換機能がなく、2フレーム並行管理が実務の正解であることがわかります。オートレイアウトのHug・Fill・Fixed設定でレイアウト崩れを防ぐ方法がわかります。Figma Mirrorで制作中に実機確認し、修正コストを削減する手順がわかります。
今の仕事について、一番近いものは？
この記事の結論
Figmaにスマホ・PC自動変換機能はなく、デバイスごとにフレームを分けて管理するのが実務の正解です。オートレイアウトと制約を正しく設定すれば、レイアウト崩れは最小限に抑えられます。フリーランス案件では「どこまで自動化するか」を最初に決めることで、制作時間を削減できます。
今日やるべき1つ
新規ファイルを開き、Desktop（1440px）とMobile（375px）の2フレームを並べて作成する（5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| フレーム分けの基本から知りたい | Figmaスマホ・PC切り替えは2フレームが基本 | 3分 |
| オートレイアウトの設定で詰まっている | Figmaレスポンシブはオートレイアウトで崩れを防ぐ | 5分 |
| 制約の意味と設定方法を知りたい | Figma制約は4設定で伸縮をコントロール | 4分 |
| どちらから作り始めるか迷っている | Figmaモバイルファーストで作る3つの判断基準 | 3分 |
| ケーススタディで実務イメージをつかみたい | Figmaスマホ・PC切り替えの実例は2パターンで比較 | 4分 |
| 作業効率を上げるノウハウが知りたい | Figmaスマホ・PC切り替えは5つの仕組みで管理 | 6分 |
| 実機確認の手順を知りたい | Figmaプレビューは2方法でデバイス表示を確認 | 3分 |
Figmaスマホ・PC切り替えは2フレームが基本
Figmaには「PCデザインをワンクリックでスマホ版に変換する」機能は存在しません。自動変換プラグインを探し続けて時間を消費するより先に、実務上の正解を知っておいてください。デバイスごとにフレームを作成して別管理するのが、崩れが少なく修正コストも低い方法です。
PC・スマホは別フレームで管理が鉄則
Figmaのフレームはデバイスの「画面サイズの入れ物」として機能します。Desktop用フレーム（幅1440pxが一般的）とMobile用フレーム（幅375pxが一般的）を同一ページ内に横並びで作成するのが、最もシンプルで崩れにくい管理方法です。実際の制作現場でも、PC版とスマホ版を同じキャンバスに置いて見比べながら作業するスタイルが主流です（ejworks「Figmaを使ってみた」）。
「切り替え」という発想ではなく「2種類のフレームを並行管理する」という発想に切り替えることが、Figmaでレスポンシブ制作を進めるうえで最初のステップです。Figmaを活用した作業効率を上げる方法については、別記事でも詳しく解説しています。
ブレイクポイントは先に3つ決める
ブレイクポイントとは、レイアウトが切り替わる画面幅の境界値です。案件着手前に「Desktop：1440px、Tablet：768px、Mobile：375px」の3サイズを先に決めておくと、フレームの作成基準が明確になり後戻りが減ります。フリーランス案件で最低限必要なのはDesktopとMobileの2点セットで、TabletはクライアントのGA4データでタブレット流入比率が10%を超える場合に追加するという判断基準が実務では使われています。
ブレイクポイントを後から変更すると、フレームサイズの修正・要素の再配置・制約の見直しが同時に発生します。最初に決める時間は5分で済みます。後から変更した場合の修正コストは、その何倍にもなります。
ページ分離かフレーム分離かを最初に選ぶ
PC版とスマホ版の分離方法には「同一ページ内にフレームを並べる」方法と「PageタブでPage1=PC・Page2=SP」と分ける方法の2つがあります。前者はデザインを比較しながら作業できますが、フレーム数が増えるとキャンバスが煩雑になります。後者はファイルが整理されますが、PC・SP間のコピーが手間になります。画面数が5以下の小規模案件は同一ページ内フレーム分離、10画面以上の大規模案件はページ分離を選ぶと管理しやすくなります。
CHECK
▶ 今すぐやること：Figmaを開き、新規ページに「Desktop：1440px」と「Mobile：375px」の2フレームを作成し、ブレイクポイントの判断メモをフレーム上にテキストで追記する（5分）
Q：フレーム幅は必ず1440pxと375pxでないといけませんか？
A：必須ではありません。クライアントの要件に合わせて変更できます。ただし、多くのWebデザイン案件ではDesktopは1280px〜1440px、Mobileは375px〜390pxが標準として使われているため、指定がなければこの範囲を起点にすると後のコーダーへの引き渡しがスムーズになります。
Q：同一ページ内にDesktop・Mobile両方のフレームを置くと重くなりますか？
A：フレーム数と配置要素の量によって異なります。1ページ内に多数のフレームを配置する場合はパフォーマンスが落ちることがあるため、大規模案件ではページを分けることを検討してください。
Figmaレスポンシブはオートレイアウトで崩れを防ぐ
フレームを複製してスマホ版を作ったときにレイアウトが崩れる原因は、要素の配置が「固定座標」で管理されているためです。オートレイアウトを使うと、要素を座標ではなく「並び方のルール」で管理できるようになります。この違いを理解してから設定に入ると、手戻りが大幅に減ります。
オートレイアウトは「並び方のルール」を定義する機能
オートレイアウトを設定したフレーム内の要素は、横並び・縦並び・間隔・余白のルールに従って自動的に再配置されます（Figmaヘルプ：オートレイアウトを使用する）。PCではナビゲーションを横並びにして、モバイルではハンバーガーメニューに変更するといった対応も、オートレイアウトの方向設定を変えることで素早く実現できます。
オートレイアウトは「デザインの見た目を整えるツール」ではなく、「デバイスごとの変化に対応できる構造を作るツール」です。この違いを意識せずに設定すると、スマホ版を作るたびに手動で位置を修正する作業が発生し続けます。
Hug・Fill・Fixedの3モードを使い分ける
オートレイアウトのサイズ指定には「Hug（内容に合わせる）」「Fill（親要素に合わせて伸縮）」「Fixed（固定値）」の3モードがあります。画面幅に合わせて横に広がってほしい要素にはFillを指定し、テキスト量に応じて高さが変わってほしい要素にはHugを指定します。Fixedはボタンなど固定サイズにしたい要素に使います。この3つを正しく使い分けるだけで、フレーム幅を変更したときの自動追従率が向上します。
実務では「ヘッダーの幅=Fill、ロゴ=Fixed、ナビリンク=Hug」という組み合わせが頻出パターンです（tec.tecotec「オートレイアウト実践記事」）。1要素ずつ確認しながら設定してください。設定を誤ると横スクロールが発生したり、要素が重なったりします。
テキストスタイルをPC・SP共通で先に定義する
見出し・本文・キャプションのフォントサイズ・行間・ウェイトを「テキストスタイル」として先に定義しておくと、PC版とスマホ版で同じスタイルを参照できます。PCではH1=48px・スマホではH1=28pxという変化も、テキストスタイルを2セット定義しておけば一括で管理できます。スタイルを先に定義せずに作業を進めると、PCとスマホでフォントサイズがバラバラになり、後から全要素を修正するコストが発生します（stocker.jp「Figma初心者でも大丈夫！レスポンシブWebデザイン」）。
CHECK
▶ 今すぐやること：既存のフレームに含まれる要素を1つ選び、オートレイアウトを適用してHug・Fill・Fixedのいずれかを設定する（10分）
Q：オートレイアウトを途中から適用しても大丈夫ですか？
A：途中からでも適用できます。既存の要素に適用すると配置が自動調整されるため、意図しないズレが生じることがあります。適用前にフレームを複製してバックアップを取ってから設定を変更してください。
Q：オートレイアウトをネストする（入れ子にする）ことはできますか？
A：できます。親フレームにFill幅のオートレイアウトを設定し、子フレームにも個別のオートレイアウトを設定するネスト構造が、複雑なレスポンシブ対応では標準的な設計です。ネストが3層を超える場合はコンポーネント化を検討してください。
Figma制約は4設定で伸縮をコントロール
オートレイアウトを使わないフレーム内の要素には、制約（Constraints）を設定して伸縮の挙動をコントロールします。制約の設定を知らずにフレームサイズを変更すると、要素が画面外に飛び出したり左端に固定されたまま動かなかったりします（Figmaヘルプ：制約を設定する）。
制約の左右設定は「Left・Right・Center・Scale」の4種類
制約の横方向設定はLeft（左端に固定）・Right（右端に固定）・Left and Right（両端に合わせて伸縮）・Center（中央固定）・Scale（比率で変化）の5種類です。特に重要なのはLeft and Rightで、フレーム幅が変わっても両端の余白を保ちながら要素が自動的に広がります。ヘッダー・フッター・コンテンツブロック等の幅いっぱいに広げたい要素にはLeft and Rightを設定するのが基本です。
なお、代表的な4設定（Left・Right・Left and Right・Center）を中心に覚えると、実務上の大半のケースに対応できます。
制約は「要素がフレームのどこを基準に動くか」を決めるルールです。オートレイアウトが「要素同士の関係性」を管理するのに対し、制約は「要素とフレームの関係性」を管理します。2つを使い分けることで、複雑なレイアウト変化にも対応できる構造を作れます。
縦方向制約はTop・Bottom・Centerで固定方向を決める
縦方向の制約はTop（上端固定）・Bottom（下端固定）・Top and Bottom（両端伸縮）・Center（中央固定）・Scale（比率）の5種類です。固定ヘッダーはTop固定、固定フッターはBottom固定、フルハイトのサイドバーはTop and Bottomを使います。高さが変動するコンテンツエリアに対して正しく設定しないと、スクロール領域のデザインが実装時の挙動と大きく異なる結果になります。
Layout Gridで列数と余白を制御する
Layout Gridは、フレームに参考用のグリッドを表示する機能です。PCでは12列・余白64px・ガター24px、スマホでは4列・余白16px・ガター16pxを設定するのが一般的です（web-represent「Figmaでレスポンシブデザインを作る」）。Layout GridはFigma上の表示のみで実装には影響しませんが、コーダーへの引き渡し時に「何列グリッドで設計したか」を視覚的に伝えられるため、コミュニケーションコストが下がります。
CHECK
▶ 今すぐやること：Desktopフレームの全幅要素（ヘッダー等）を選択し、右パネルのConstraintsを「Left and Right / Top」に設定する（5分）
Q：制約とオートレイアウトは同時に使えますか？
A：オートレイアウトを設定したフレーム内の要素には制約が無効になります。制約はオートレイアウトを使っていない通常フレーム内の要素に適用するものです。どちらを使うかは要素の種類と管理方法によって使い分けてください。
Q：制約を設定してもフレームサイズを変えたときに崩れます。なぜですか？
A：制約の設定対象が正しいか確認してください。グループ化した要素の内側の要素には制約が反映されません。グループを解除してフレーム直下に要素を置いた状態で制約を設定するか、グループをフレームに変換してから設定してください。
Figmaモバイルファーストで作る3つの判断基準
「PCから作るべきかスマホから作るべきか」は、フリーランスが案件受注時に最初に迷うポイントです。答えは一律ではなく、案件の条件によって判断が変わります。以下の3つの基準で方針を決めてください。
流入データでモバイル比率60%超ならスマホファースト
クライアントのGA4データでモバイル流入が60%を超える場合は、スマホ版を先に設計してください。スマホ版を先に完成させてからPC版に広げると、スマホで見やすい情報量・タップ目標サイズ・縦スクロールの自然さを優先した設計になります。PC版を先に作ってスマホに縮小する方向で進めると、情報を削ぎ落とす判断に追われて手戻りが増えます。
流入データがない新規サイト案件の場合は、総務省の通信利用動向調査でスマートフォンからのインターネット利用が高水準にあることを踏まえ、スマホファーストを基本として提案する方法が実務では有効です（総務省「令和5年通信利用動向調査」）。
コーポレートサイトはPCファーストが制作効率で上回る
ビジネス向けコーポレートサイトでは、デスクトップからのアクセス比率が相対的に高くなる傾向があります。また、クライアントへのデザイン提案・社内承認プロセスがPC画面での閲覧を前提としているケースが多く、PCデザインを先に完成させる方が承認を得やすいという実務上の理由もあります。コーポレートサイトでPCファーストを選ぶ場合は、PC版のDesktopフレームを複製してからMobileフレームとしてリサイズし、レイアウトを調整するフローが時間効率で優れています（note shiba_design「Figmaで効率の良いレスポンシブの作り方」）。
Variant化でDesktop・Mobile切り替えを1コンポーネントで管理
コンポーネントの「Variant」機能を使うと、Desktop版とMobile版を1つのコンポーネント内に持たせて切り替えができます。例えばナビゲーションバーのコンポーネントに「Desktop」と「Mobile」のVariantを追加することで、プロパティパネルからワンクリックで表示形式を変更できます。Variant化のメリットはコンポーネントの更新が両デバイスに同時反映されることで、初期設定に時間がかかる点がデメリットです。繰り返し使うUI要素（ヘッダー・フッター・カードコンポーネント等）はVariant化する価値があります。1度しか使わない要素への適用は不要です。
CHECK
▶ 今すぐやること：GA4を開いてモバイル・デスクトップ流入比率を確認し、どちらファーストで設計するか方針をFigmaのコメント機能でメモする（10分）
Q：途中でモバイルファーストからPCファーストに変更できますか？
A：技術的には変更できますが、途中変更はフレーム構造の大幅な作り直しが必要になる場合があります。方針は案件開始前に確定させてください。クライアントからGA4データを取得してから判断すると、後戻りを防げます。
Q：モバイルとPCで異なるコンテンツを表示したい場合はどう設計しますか？
A：Figmaのデザインデータはモバイル専用コンテンツとPC専用コンテンツを別フレームに用意し、それぞれのフレームに表示する要素を入れて管理します。実装側でCSSのdisplay:noneやメディアクエリで切り替えますが、デザインデータ段階でどの要素がどのデバイスでのみ表示されるかをコメントで明記しておくとエンジニアへの引き渡しがスムーズになります。
PR提供: 日本デザインスクール（デザスク）
Figmaスマホ・PC切り替えの実例は2パターンで比較
フリーランス案件でスマホ・PC対応に取り組むとき、対応方針の違いが成果を大きく変えることがあります。
ケース1（成功パターン）：ブレイクポイントを先に決めてフレームを分離したケース
Webデザイナーが10画面のECサイトリニューアル案件を受注し、着手初日に「Desktop：1440px・Mobile：375px」の2フレームをページ内に並べて作成、オートレイアウトとConstraintsを設定した構造を先に構築してからデザインを進めました。制作途中でクライアントから「スマホ表示も見せてほしい」と言われた際に、Mobileフレームをそのまま提示して即座に対応できました。PC版の修正がオートレイアウトを通じてMobileフレームの一部要素に自動反映され、手修正の作業量が削減されたと報告されています。
Figmaで効率よくレスポンシブを進めるデザイナーから「ブレイクポイントごとにフレームを作る」「オートレイアウトで時短する」という実務寄りの作業手順が共有されています（note shiba_design「Figmaで効率の良いレスポンシブの作り方」）。最初にフレームを分けず1フレームで作業を進めていれば、スマホ表示の修正が全要素の手動再配置になり、追加作業が発生していた可能性があります。
ケース2（失敗パターン）：PC版完成後にスマホ版を後付けで対応したケース
別の案件では、PC版デザインを固定座標で全要素配置した状態で完成させてから、クライアントの要望でスマホ版対応が追加されました。オートレイアウト未使用のため、375pxフレームにPC版をコピーすると全要素がPC版の固定サイズのまま貼り付けられ、テキスト・画像・ボタン類をすべて手動で配置し直す作業が発生しました。
Figma使用歴1ヶ月のデザイナーによる実体験として「PC版からSP版を自動生成するプラグインはない」「Auto layoutとConstraintsを使うのが堅実」という回答が報告されています（Yahoo!知恵袋：Figma使用歴1ヶ月の質問）。最初からオートレイアウトと制約を設定した構造を作っていれば、スマホ版への転用コストを大幅に圧縮できた可能性があります。
なお、フリーランスのポートフォリオ作成ツールとしてFigmaを活用する方法についても、別記事で詳しく解説しています。
CHECK
▶ 今すぐやること：現在の制作ファイルを開き、オートレイアウト未設定の要素が何個あるかを確認する（5分）
Q：後からオートレイアウトに移行するのは現実的ですか？
A：可能ですが、完成度が高いほど移行コストが上がります。移行する場合は、パーツ単位（ナビ・カード・ボタン等）から始めて、画面全体への適用は新規制作時に行ってください。
Figmaスマホ・PC切り替えは5つの仕組みで管理
フレームを分けてオートレイアウトを使う基本を押さえたら、次は案件で即使える効率化ノウハウです。フリーランスが実務で繰り返し使う5つの仕組みを順に解説します。
ハック1：DesktopフレームをDuplicateで複製してMobileに変換し手修正を削減
【対象】：PCファーストで設計を始め、スマホ版を後工程で作るフリーランス
【手順】：Desktop版フレームを右クリック→「Duplicate」で複製します（2分）。複製フレームを選択し、右パネルのWをMobileの幅（375px）に変更します（1分）。フレーム幅変更後にオートレイアウトのFill設定要素が自動追従していることを確認し、Fixed設定要素のみ手動でサイズと位置を調整します（10〜20分）。
【コツと理由】：PC版でオートレイアウトとConstraintsを正しく設定していれば、フレーム幅変更後に自動追従する要素が全体の多くを占め、手修正が必要な要素を最小化できます。自動追従する理由は、オートレイアウトのFill設定が「親フレームの幅に対する相対比率」でサイズを計算するためです。
【注意点】：固定サイズのアイコンや画像がPC版のサイズのまま残る点に注意してください。リサイズ後に表示を確認しながら都度調整する方が効率的です。
ハック2：コンポーネントにVariantを追加してDesktop・Mobile切り替えをワンクリック化
【対象】：ヘッダー・カード・CTAボタン等の繰り返し使うUI要素を複数案件で再利用するデザイナー
【手順】：既存コンポーネントをMain Componentとして選択し、「＋」ボタンでVariantを追加します（5分）。追加されたVariantの名前を「Device=Desktop」「Device=Mobile」にリネームします（2分）。Mobile Variantのフレーム幅をMobile幅に変更し、レイアウトを調整します（15〜30分）。完成後、インスタンスとして配置した箇所でプロパティパネルからDevice値を切り替えて動作確認します（5分）。
【コツと理由】：「デバイスごとにコンポーネントを別名で作成する」ではなく、「1コンポーネント内にVariantとして格納する」を採用してください。別名管理では「Header_PC」「Header_SP」が乱立してライブラリが肥大化し、修正時に2箇所の更新が必要になります。Variant化するとMain Componentの変更が全Variantのインスタンスに同時反映され、管理コストを削減できます。
【注意点】：Variant内のプロパティ名（「Device」「Type」等）は全コンポーネントで統一してください。名前がバラバラだと、デザインシステムとして活用する際に検索・フィルタが機能しません。繰り返し使う要素のみに限定し、1案件1回しか使わない要素には適用しなくてよいです。
ハック3：Layout Gridのスタイル化でPC・SP余白設定を3秒で切り替え
【対象】：複数ページのグリッド設定を毎回手入力していて時間を浪費しているデザイナー
【手順】：Desktopフレームに12列グリッド（余白64px・ガター24px）を設定し、「Grid Styles」として保存します（5分）。Mobileフレームに4列グリッド（余白16px・ガター16px）を設定し、別の「Grid Style」として保存します（3分）。新しいフレームを作成するたびに、右パネルのGrid StylesからDesktop用・Mobile用を選択して適用します（3秒）。
【コツと理由】：グリッドをフレームごとに手動で設定するより、Grid Stylesで一括管理する方が時間効率で優れています。Grid Stylesを使えば初回設定8分・以降は毎フレーム3秒で適用でき、多数のフレームを扱う案件では設定時間を大幅に削減できます。
【注意点】：Grid Stylesはファイル内でのみ共有されます。複数案件にまたがって使うには、チームライブラリに登録する必要があります。チームライブラリへの登録はFigmaの有料プランが必要です。Grid Styleは保存しても実装には影響しないため、コーダーへの指示は別途スペック共有で行ってください。
ハック4：Presentモードのデバイスフレーム設定で実機サイズを確認
【対象】：プロトタイプをクライアントに提示する際に「実際のスマホで見たらどう見えるか」を事前に確認したいデザイナー
【手順】：確認したいMobileフレームを選択した状態でPresentボタン（▶）をクリックします（1分）。右上の「Fit to screen」を「100%」に変更してフレーム実寸表示にします（1分）。プレビュー画面の右パネルで「Device」を選択し、確認したいデバイスモデル（iPhone 15等）を選択してデバイスフレームを重ねて表示します（2分）。
【コツと理由】：PC画面での確認では、スマホのノッチ・ステータスバー・ホームインジケーターが視野に入らないため、実際のスマホで見たときにUIが隠れる問題を事前に発見できません。Presentモードのデバイスフレーム機能を使うと、これらのシステムUI領域を考慮したデザイン確認が行えます。
【注意点】：PresentモードはFigmaのブラウザ版・デスクトップアプリ版でのみ使用可能です。Figmaモバイルアプリのミラー機能（後述）とは別機能で、実機でのミラーリングにはミラー機能を使ってください。Presentモードで確認した見た目は、あくまでFigma上のシミュレーションです。
ハック5：Figma Mirrorで実機確認し表示ズレを制作中に発見
【対象】：制作完了後に実機確認でズレが見つかり修正コストが発生しているデザイナー
【手順】：スマホにFigmaモバイルアプリをインストールし、同一アカウントでログインします（5分）。デスクトップのFigmaで確認したいMobileフレームを選択した状態にします（1分）。モバイルアプリの「ミラー」タブをタップすると、デスクトップで選択中のフレームがスマホ画面に表示されます（1分）。デスクトップでデザインを変更するたびに、スマホのミラー表示がリアルタイムで更新されるため、制作しながら実機イメージを確認し続けることができます（継続運用）。
【コツと理由】：Presentモードの確認はデスクトップ画面内のシミュレーションであるのに対し、Mirrorは実際の物理デバイスで表示するため、タップ目標サイズ・フォントの読みやすさ・実際の色再現性を体感できます（Figmaヘルプ：Figmaモバイルアプリの操作ガイド）。制作中に問題を発見すれば早期に対応できるため、実機確認を作業フローに組み込んでください。
【注意点】：Figmaモバイルアプリではアカウント切り替え機能がなく、別アカウントに切り替えるには再ログインが必要です（Figmaヘルプ：Figmaモバイルアプリの操作ガイド）。複数クライアントのファイルを行き来する場合は、この制限を考慮して作業順序を計画してください。
CHECK
▶ 今すぐやること：スマホにFigmaモバイルアプリをインストールし、ミラー機能で現在のMobileフレームを実機表示する（10分）
Q：Figmaミラーを使うのに追加費用はかかりますか？
A：Figmaモバイルアプリは無料でダウンロードでき、ミラー機能もすべてのプランで利用できます。デスクトップのFigmaと同一アカウントでログインすれば追加費用なしで使用できます。
Q：同じページ内に複数フレームがある場合、ミラーはどのフレームを表示しますか？
A：デスクトップのFigmaで選択状態になっているフレームを表示します。選択を変えるとモバイルアプリの表示も切り替わります。
Figmaスマホ・PC切り替えは7項目でチェック
設計・制作が完了したら、以下の7項目で対応漏れがないか確認してください。
Desktopフレーム（1280〜1440px）とMobileフレーム（375〜390px）の両方が存在するかを確認します。次に、全幅要素のConstraintsが「Left and Right」に設定されているかを確認します。3点目は、横並びから縦並びに変わるナビゲーション・カード等にオートレイアウトが設定されているかです。4点目は、テキストスタイルがPC・SP両方で参照されているかを確認します。5点目は、Presentモードで各フレームをプレビューして崩れがないかを確認します。6点目は、Figma Mirrorで実機表示を確認し、タップ目標サイズが44px以上あるかを確認します。7点目は、コーダーへの引き渡し前に各フレームのInspect表示でスペックが正しく出力されているかを確認します。
この7点を毎案件のチェックリストとして使うことで、実装後の「スマホで崩れていた」という報告を防ぐことができます。
CHECK
▶ 今すぐやること：上記7項目を紙またはNotionにコピーして、次の案件から使えるチェックリストとして保存する（3分）
Q：チェック7項目の中で最も見落とされやすい項目はどれですか？
A：実務では「タップ目標サイズが44px以上あるか」の確認が最も見落とされます。デスクトップでは問題なく見えるボタンやリンクが、スマホでは小さすぎてタップミスが頻発するケースがよく報告されます。Figma上でスマホフレームのボタン要素を選択し、高さが44px以上あるかを数値で確認してください。なお、44pxというサイズはAppleのHuman Interface Guidelinesで推奨されているタップ目標の最小サイズです（Apple Human Interface Guidelines）。
Figmaプレビューは2方法でデバイス表示を確認
実機に近い表示確認の方法が2つあります。デスクトップ画面だけで確認して終わらせると、スマホ実機で見たときに初めて問題が発覚します。2つの方法を使い分けることで、そのリスクを大幅に減らせます。
Presentモードは画面上でデバイスシミュレーション
Presentモード（▶ボタン）は、Figmaのフレームをブラウザ内でプレビュー表示する機能です。プレビュー画面の右上に「Device」設定があり、iPhone・Android・タブレット等のデバイスフレームを重ねて表示することで、ノッチやステータスバーを考慮したデザイン確認が可能になります。URLをクライアントと共有してフィードバックを得ることもできるため、デザインレビューの場面でも活用できます。
Presentモードはインタラクションが設定されていればプロトタイプとして動作し、画面遷移の確認も同時にできます。スマホ・PC両対応の確認では、Desktop版フレームとMobile版フレームのPresent URLをそれぞれクライアントに共有する運用が効率的です。
Figma MirrorはiPhone・Androidで実機表示
Figmaモバイルアプリのミラー機能は、デスクトップのFigmaで選択したフレームをスマホに実寸で表示します（Figmaヘルプ：Figmaモバイルアプリの操作ガイド）。表示がリアルタイムで同期されるため、デスクトップでデザインを修正しながらスマホで確認し続けることができます。フォントの読みやすさ・ボタンのタップしやすさ・実際の色の見え方は、Presentモードよりも実機ミラーリングの方が正確に確認できます。
デザイン完成後の最終確認としてMirrorを使うだけでなく、ヘッダー・ナビ・カード等のコンポーネントを作成した直後にその都度実機確認する習慣をつけると、後から大きな修正が発生するリスクを減らせます。デザイナーのポートフォリオ作成にFigmaを活用する場合も、実機確認を組み込んだワークフローが品質向上に役立ちます。
CHECK
▶ 今すぐやること：PresentモードでMobileフレームを開き、DeviceをiPhone 15 Proに設定してデバイスフレーム表示を確認する（3分）
Q：クライアントへのデザイン共有はPresentモードのURLで行うのがベストですか？
A：スマホ・PC両対応の確認であれば、Desktop版とMobile版それぞれのPresent URLを共有するのが確実です。クライアントが自分のデバイスで対応するURLにアクセスすることで、実際の使用感に近い形でフィードバックを得られます。最終的な動作確認は実装後のステージング環境で行う旨をクライアントに伝えておいてください。
Q：FigmaモバイルアプリのミラーはWi-Fi接続が必要ですか？
A：デスクトップとスマホが同一ネットワーク（Wi-Fi）に接続されている状態が推奨です。モバイルデータ通信でも動作しますが、同期の遅延が発生することがあります。
Figmaスマホ・PC切り替えを習慣化する：フレーム分離+オートレイアウトが最速
Figmaにスマホ・PC自動変換機能はなく、デバイスごとにフレームを分けてオートレイアウトと制約を設定するのが実務の正解です。この構造を最初に作っておくことが、スマホ版制作の手修正コストを削減する最も確実な方法です。「ブレイクポイントを先に決める→フレームを分けて作成→オートレイアウトと制約を設定→Mirrorで実機確認」の4ステップを習慣化してください。
本記事で紹介した5つのハックと7項目チェックリストは、次の案件から即日使えます。今日取り組めることは1つだけ、Figmaを開いてDesktopとMobileの2フレームを並べて作成することです。構造を先に整えてから装飾に入る習慣が、制作スピードと品質の両方を高めます。フリーランスのWebデザイナーとして案件獲得率を高めたい場合は、ポートフォリオの改善方法も合わせて参考にしてください。
| 状況 | 次の一歩 | 所要時間 |
| フレーム構造がまだ整っていない | 新規ファイルでDesktop・Mobileフレームを作成する | 5分 |
| オートレイアウト未設定の要素が多い | 主要コンポーネント（ヘッダー等）にオートレイアウトを設定する | 30分 |
| 実機確認をしたことがない | Figmaモバイルアプリをインストールしてミラー確認する | 10分 |
| Variantを使ったことがない | ヘッダーコンポーネントにDesktop・Mobile Variantを追加する | 45分 |
Figma スマホ PC 切り替えに関するよくある質問
Q：FigmaでPC版のデザインからスマホ版を自動生成するプラグインはありますか？
A：2025年時点で、PC版デザインをスマホ版に自動変換する公式・サードパーティプラグインは存在しません。Auto layoutとConstraintsを適切に設定したうえでフレームをリサイズするのが、現在最も現実的なアプローチです（Yahoo!知恵袋：Figma使用歴1ヶ月の質問）。
Q：オートレイアウトと制約はどちらを優先して学ぶべきですか？
A：オートレイアウトを先に学んでください。オートレイアウトを設定したフレーム内では制約が無効になるため、まずオートレイアウトの挙動（Hug・Fill・Fixed）を理解してから、オートレイアウト非対応の場面で制約を補完的に使う順序が学習効率で優れています（Figmaヘルプ：オートレイアウトを使用する）。
Q：スマホ・PC両対応のデザインをコーダーに引き渡すときのポイントは何ですか？
A：Desktop版フレームとMobile版フレームの両方をInspect表示でコーダーに共有し、「どの要素がどのブレイクポイントで切り替わるか」をコメント機能で明記することが最重要です。コンポーネントのVariant設定がある場合は、そのプロパティ名と切り替え条件を文書化してコーダーに伝えるとエンジニアサイドでの実装ミスを防げます。
【出典・参照元】
Figmaヘルプ：Figmaモバイルアプリの操作ガイド – Figmaモバイルアプリの機能とミラーリングの説明
Figmaヘルプ：オートレイアウトを使用する – オートレイアウトの設定と挙動の公式説明
Figmaヘルプ：制約を設定する – Constraints機能の公式説明
note shiba_design「Figmaで効率の良いレスポンシブの作り方」 – 実務フローとオートレイアウト活用法
Yahoo!知恵袋：Figma使用歴1ヶ月の質問 – 自動変換プラグインの有無と代替手段に関する実体験
web-represent「Figmaでレスポンシブデザインを作る」 – デバイス別レイアウト設計の手順解説
stocker.jp「Figma初心者でも大丈夫！レスポンシブWebデザイン」 – テキストスタイルとコンポーネント管理の解説
tec.tecotec「オートレイアウト実践記事」 – オートレイアウトの実務的な使い方
ejworks「Figmaを使ってみた」 – PC・スマホ表示分離の運用例
総務省「令和5年通信利用動向調査」 – スマートフォンからのインターネット利用状況
Apple Human Interface Guidelines – タップ目標の推奨最小サイズ（44px）