フレームサイズを変更するたびに子レイヤーがずれる問題は、制約を5パターン設定するだけで解決できます。Figma公式ヘルプと実務経験をもとに、設定手順から頻出エラーの対処まで解説します。
▶ 3日で初案件PR
この記事でわかること
Figmaの制約5パターンを役割ごとに使い分けて、画面サイズ変更を手作業ゼロで対応できます。制約が表示されない・効かない3つの原因と対処法を2分で理解できます。フリーランス案件の納品差し戻しをゼロにする制約確認プロセスを習得できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Figmaの制約とは、親フレームをリサイズしたときに子レイヤーがどう動くかを決める機能です。水平方向と垂直方向の2軸でそれぞれ「左・右・中央・左右・拡大縮小」の5パターンを使い分けることで、レスポンシブ対応デザインを手作業ゼロで実現できます。制約はフレーム構造の子レイヤーにのみ設定でき、オートレイアウトが有効な親フレームには適用できない点だけ押さえれば、フリーランス案件での実装指示まで通用します。
今日やるべき1つ
既存Figmaファイルを開き、フレーム内の任意の子レイヤーを選択して右パネルの「制約」セクションを確認し、水平方向・垂直方向をそれぞれ1段階変更してからフレームをドラッグでリサイズして挙動の違いを体感してください（5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 制約の基本を今すぐ理解したい | Figma制約は5設定で親フレームに追従 | 3分 |
| どのパターンを使うか判断したい | 制約の選択は要素の役割で決まる | 3分 |
| 制約が表示されない・効かない | Figma制約は3確認で表示される | 2分 |
| オートレイアウトとの使い分けを知りたい | 制約とオートレイアウトは役割が異なる | 3分 |
| 実案件での設定判断フローが欲しい | Figma制約の実務適用を3分で診断 | 3分 |
| フリーランス案件の実運用例を知りたい | フリーランス案件は5ハックで制約を自動化 | 4分 |
Figma制約は5設定で親フレームに追従
制約の概念と設定操作を一気に整理します。
制約は親フレームと子レイヤーの関係で機能する
Figmaの制約は、親フレームのサイズが変わったときに「子レイヤーがどこに留まるか・どう変形するか」を事前に宣言する機能です。制約を設定しないデフォルト状態では、子レイヤーは親フレームの左上を基準に固定されるため、フレームを右方向に広げても子レイヤーの位置は変わりません。何も考えずにデザインすると、画面サイズを変えたときに全レイヤーが左上に集まってしまいます。これを事前に防ぐのが制約の本質的な役割です。
制約はトップレベルのフレーム自体には設定できません。必ず「フレームの中に存在する子レイヤー」を選択してから右パネルで操作します。この構造を把握しておけば、「なぜ設定できないのか」で迷う時間が大幅に減ります（Figma公式ヘルプ：制約の基本）。
水平方向と垂直方向で独立して5種類を指定できる
制約は水平方向と垂直方向を独立して設定します。水平方向の選択肢は「左（Left）」「右（Right）」「中央（Center）」「左右（Left and right）」「拡大縮小（Scale）」の5種類で、垂直方向も同様の5種類があります。合計で25通りの組み合わせが存在しますが、実務で頻繁に使うのは6〜8パターン程度です。
設定方法は、キャンバス上またはレイヤーパネルで子レイヤーを選択し、右パネルの「制約」セクションで水平方向と垂直方向のドロップダウンをそれぞれ変更するだけです。変更後は親フレームの端をドラッグしてリサイズし、子レイヤーの動きをリアルタイムで確認してください。設定値を変えるたびに即座にプレビューできるため、感覚で覚えるのが最も早い学習法です（Figma公式ヘルプ：制約の適用）。
リサイズを一時的に制約なしで行うショートカットがある
制約を設定した後でも、特定のリサイズ操作だけ制約を無効にしたい場面があります。MacであればCommandキー、WindowsであればCtrlキーを押しながら親フレームをドラッグしてリサイズすると、制約を一時的に無視して自由にサイズ変更できます。この操作は制約設定を変更するわけではなく、あくまでそのリサイズ操作の間だけ制約が無効化されます。「制約を外し忘れた」「一時的に崩して確認したい」という場面で即座に使える手段として覚えておくと、実務のテンポが上がります。
CHECK
▶ 今すぐやること: 既存ファイルの子レイヤーを1つ選択し、水平方向の制約を「左」から「右」に変更してフレームをリサイズして違いを確認してください（3分）
Q: フレームではなくグループに制約は設定できますか？
A： グループには制約のセクションが表示されないため、設定できません。グループをフレームに変換（右クリック→「フレームとして囲む」）してから設定してください。
Q： 制約は1つのレイヤーに水平・垂直の両方を設定する必要がありますか？
A： 両方を設定してください。片方だけ設定した場合、未設定の方向は「左」（水平）または「上」（垂直）のデフォルトが適用されるため、意図しない挙動になります。
制約の選択は要素の役割で決まる
5種類のどれを選ぶかは、要素の役割で判断する基準を持てば迷わなくなります。
ヘッダーとサイドバーは端固定と垂直拡大縮小を組み合わせる
ページの上部に固定されるヘッダーは、水平方向「左右（Left and right）」または「拡大縮小（Scale）」、垂直方向「上（Top）」の組み合わせが基本です。水平方向を「左右」にすると、フレームの左端と右端からの距離を維持しながら幅が伸縮します。スマホからPCへの画面サイズ変更でもヘッダーが画面幅にフィットし続けるため、レスポンシブ対応の大半はこの設定で解決できます。
左サイドバーは水平方向「左（Left）」、垂直方向「上下（Top and bottom）」または「拡大縮小（Scale）」を選択します。左端からの距離が固定されるため、親フレームの幅が変わってもサイドバーは左端に張り付いたまま高さだけが追従します。ナビゲーションメニューやフィルターパネルなど、縦方向に伸縮するサイドバーの大多数に適用できるパターンです。
ボタンやCTAは右下固定または中央固定を使う
右下に配置する「送信」ボタンや「決定」ボタンは、水平方向「右（Right）」、垂直方向「下（Bottom）」の組み合わせで右下に固定できます。フレームをどのサイズに変えても、ボタンは常に右下隅から一定の距離を保ちます。フォーム画面やモーダルダイアログのデザインでは、この設定を使わないとフレームリサイズのたびに手動でボタンを移動する作業が発生し、工数が積み上がります。
画面中央に配置するモーダルや通知バナーは、水平方向「中央（Center）」、垂直方向「中央（Center）」が最適です。フレームサイズが変わっても常に中央に表示されるため、ダイアログデザインの品質を担保する基本設定として覚えておいてください。
背景帯や区切り線は拡大縮小で全幅に追従させる
フルワイド背景、セクション区切り線、ヒーロー画像のオーバーレイなど、「常にフレーム幅いっぱいに広がってほしい要素」には水平方向「拡大縮小（Scale）」を使います。フレームに対する比率を維持しながら拡大縮小するため、フレーム幅が1,440pxから375pxに変わっても要素は常に全幅を覆います。「左右（Left and right）」との違いは、左右は端からの距離（px）を維持するのに対し、拡大縮小は比率を維持する点です。端からの余白がゼロであればどちらでも同じ結果になりますが、余白がある場合は意図によって使い分けが必要です。
背景の帯がリサイズのたびにズレていたと悩んでいたWebデザイナーは、拡大縮小に変えてから一切ズレなくなったと語っています（オートレイアウトと制約の使い分け実践）。なお、フリーランスとして作業効率を上げる方法についても別記事で詳しく解説しています。
CHECK
▶ 今すぐやること: 自分のFigmaファイルでヘッダーコンポーネントを選択し、水平方向「左右」・垂直方向「上」に設定してからフレームを横方向にドラッグして追従を確認してください（3分）
Q: 「左右（Left and right）」と「拡大縮小（Scale）」はどちらを優先して選ぶべきですか？
A： 端からの余白（パディング）を絶対値で維持したい場合は「左右」を選択します。フレームに対する比率を維持したい場合や、余白ゼロで全幅に広げたい場合は「拡大縮小」が適切です。実務では背景系に「拡大縮小」、コンテンツエリアに「左右」を使うケースが最多です。
Q： 水平方向と垂直方向に別々の設定を入れることはできますか？
A： できます。「水平：左右、垂直：上」という組み合わせが最も頻出する設定の1つです。2軸は完全に独立しているため、必要に応じて自由に組み合わせてください。
Figma制約は3確認で表示される
制約が表示されない・効かないという悩みは、原因が3パターンに集約されます。
原因1：グループを選択していてフレームではない
最も多いパターンです。Figmaでは「グループ」には制約の概念が存在せず、右パネルに制約セクションが表示されません。レイヤーパネルでアイコンを確認し、フレームアイコン（四隅に小さな点がある正方形）であれば制約が使えます。グループアイコン（通常の枠のみ）であれば、右クリックから「フレームとして囲む」でフレームに変換してから設定します。
グループをフレームに変換する際、要素の見た目は変わりませんが、背景色が「なし」に設定されるため透明なフレームとして機能します。変換後はサイズ・位置が維持されているか確認してから制約を設定してください。
原因2：選択しているレイヤーがトップレベルのフレームである
フレームがキャンバスの最上位（どのフレームにも属さない状態）に置かれている場合、そのフレーム自体には制約が表示されません。制約は「親フレームの中に存在する子レイヤー」にのみ設定できます。該当するフレームを別のフレームで囲み、子フレームとして内包させてから設定します。
この制限はFigmaの仕様であり、バグではありません（Figma公式ヘルプ：制約の基本）。トップレベルのデザインフレームにはページサイズの概念があるため、制約ではなくオートレイアウトや手動配置で対応することが設計上の前提になっています。
原因3：親フレームにオートレイアウトが有効になっている
親フレームにオートレイアウトが設定されている場合、子レイヤーの配置はオートレイアウトのルールが優先されるため、制約セクションは表示されるものの実質的に機能しません。この状態で制約を変更しても挙動が変わらないため「制約が壊れている」と誤解されることがあります。
解決策は、オートレイアウトを一旦解除して制約を設定するか、オートレイアウトのパディングや整列設定で代替することです。どちらが適切かは次のセクションで詳しく説明します。
制約を設定しているはずなのにフレームを動かしても変化がないと悩んでいたデザイナーが、調べたら親フレームがオートレイアウトになっていたと語っています（制約が表示されない体験談・対処）。Figma以外の業務でもChrome拡張機能を活用したツール効率化が役立ちます。
CHECK
▶ 今すぐやること: 制約が表示されないレイヤーをレイヤーパネルで確認し、グループアイコンであれば右クリック→「フレームとして囲む」で変換して制約を設定してください（2分）
Q: フレームに変換してもまだ制約が表示されない場合はどうすればよいですか？
A： 親フレームにオートレイアウトが設定されていないか確認してください。右パネルの上部に「オートレイアウト」セクションが表示されていれば、その子レイヤーには制約が実質的に機能しません。オートレイアウトを解除するか、設定方法を変える必要があります。
Q： 制約を設定したのにフレームをリサイズしても動きが変わらない原因は？
A： 親フレームではなく子レイヤー自身をリサイズしている可能性があります。制約は「親フレームのリサイズ」に反応するため、必ず親フレームの端をドラッグしてリサイズ操作を行ってください。
制約とオートレイアウトは役割が異なる
2つの役割を明確に分けて整理します。
制約は「どこに固定するか」、オートレイアウトは「要素同士をどう並べるか」
制約は子レイヤーの「位置と伸縮の振る舞い」を親フレームに対して定義します。フレームサイズが変わったときの個々の要素の動きを制御する機能です。一方、オートレイアウトはフレーム内の子レイヤー群を「縦または横に一定間隔で並べる」機能であり、要素の自動整列・可変幅対応・余白の統一管理を担います。
この2つは競合するのではなく、設計の階層によって使い分けるものです。例えば「ナビゲーションバー全体を画面幅に追従させる」には制約を使い、「ナビゲーションバー内のメニュー項目を等間隔で並べる」にはオートレイアウトを使います。制約は親子関係の「縦の軸」、オートレイアウトは兄弟関係の「横の軸」で機能すると捉えると混乱が減ります。
オートレイアウトのフレーム内に制約は効かない
最も重要な制限として、オートレイアウトが有効な親フレームの中では、子レイヤーへの制約設定が実質的に無効化されます。オートレイアウトは子レイヤーの配置を自動管理するため、制約による位置指定と競合するためです。この仕様を知らないと「制約を設定したのに動きが変わらない」という状況に陥ります。
実務での判断基準はシンプルです。「要素群を均等に並べたい・間隔を一括管理したい」場面ではオートレイアウトを選び、「特定の要素をフレームの端や中央に固定したい」場面では制約を選ぶと考えると、迷う回数が大幅に減ります。
2つを組み合わせる設計パターンが最も実用的
フリーランス案件での実用的な設計パターンは、「外側のフレームに制約を設定し、内側のフレームにオートレイアウトを設定する」という2層構造です。例えば、ページ全体を囲む最外フレームの子として「ヘッダーフレーム（制約：水平左右・垂直上）」を置き、そのヘッダーフレーム内でメニュー項目をオートレイアウトで管理します。この設計により、画面幅の追従は制約が担い、メニュー数の増減への対応はオートレイアウトが担うという明確な分業が実現します。
CHECK
▶ 今すぐやること: 手元のFigmaファイルで「外側フレームに制約・内側フレームにオートレイアウト」の2層構造を1箇所だけ作って動作確認してください（5分）
Q: コンポーネント内部にも制約は設定できますか？
A： できます。コンポーネントのマスターコンポーネント内でも制約は設定でき、インスタンスに引き継がれます。ただしインスタンス側では制約の変更が制限される場合があるため、マスター側で設定を完成させてからコンポーネント化してください。
Q： オートレイアウトを解除せずに特定の子要素だけ位置を固定したい場合はどうすればよいですか？
A： オートレイアウトのフレームを「絶対位置（Absolute position）」モードに切り替えると、特定の子レイヤーをオートレイアウトのフローから外して自由配置できます。右パネルの子レイヤー設定から「絶対位置」を有効化してから制約を設定してください。
PR提供: 日本デザインスクール（デザスク）
Figma制約の実務適用を3分で診断
「自分のケースでは制約とオートレイアウトのどちらを使うべきか？」を3分で判断できます。
Q1: 今設定しようとしている要素は、フレームの「特定の端や中央」に固定したいですか？
Yesの場合はQ2に進んでください。Noの場合はQ3に進んでください。
Q2: その要素が属する親フレームにオートレイアウトは設定されていますか？
Yesの場合はResult Aです。Noの場合はResult Bです。
Q3: 複数の子要素を「均等な間隔で自動整列」させたいですか？
Yesの場合はResult Cです。Noの場合はResult Dです。
Result A: 親フレームのオートレイアウトを解除するか、子要素を「絶対位置」モードに切り替えてから制約を設定してください。オートレイアウトが有効な親フレーム内では制約は実質機能しません。所要時間：2分
Result B: 直ちに子レイヤーを選択して右パネルの「制約」セクションで水平方向・垂直方向を設定できます。「ヘッダー：左右＋上」「ボタン：右＋下」「モーダル：中央＋中央」の3パターンを試してください。所要時間：3分
Result C: オートレイアウトを親フレームに適用するのが最適です。フレームを選択して右パネルの「＋オートレイアウト」をクリックし、方向・間隔・パディングを設定してください。所要時間：3分
Result D: 手動配置で対応する場面です。スナップグリッドや整列ツールを使いつつ、将来的なリサイズ必要性が低い要素であれば制約なしのデフォルトのままでも問題ありません。所要時間：1分
CHECK
▶ 今すぐやること: 今悩んでいる要素をQ1から順に判定し、該当するResultの手順を実行してください（3分）
Q: フレームの全子要素に一括で制約を設定する方法はありますか？
A： 現時点でFigmaに一括設定機能はありません。複数の子レイヤーを同時選択した状態で右パネルの制約を変更すると、選択した全レイヤーに同じ設定を適用できます。全子レイヤーを選択するにはレイヤーパネルで親フレームを開き、Shift+クリックで複数選択してください。
Q： 制約の設定は書き出し（Export）後のCSSに影響しますか？
A： 制約はFigma上のレイアウト挙動の設定であり、書き出し画像やCSSの直接的なプロパティには含まれません。ただしDev ModeではFigmaのレイアウト意図が伝わるため、制約を正しく設定しておくと実装担当者との認識合わせがスムーズになります。
フリーランス案件は5ハックで制約を自動化
フリーランス案件で制約を使いこなすには、基本操作を覚える段階にとどまらず、クライアントやエンジニアに通用する設計ができるかが評価のポイントになります。
ハック1: 3サイズ同時確認でリサイズ確認を1工程で完了
【対象】: フリーランス案件でSP/タブレット/PC対応のデザインを納品する方
【手順】:
STEP 1. 同じコンポーネントを3つ複製し、親フレームの幅をそれぞれ375px・768px・1440pxに設定します（3分）。
STEP 2. 3フレームを横並びに配置し、制約設定の変更後は3フレームの挙動を同時に目視で比較します。
STEP 3. 差異があるレイヤーだけ制約を修正し、3フレームすべてで意図どおりの挙動になったことを確認してから次の要素へ進みます。
【コツと理由】: 「1フレームで確認してから次のサイズへ」という手順より、「横並び3フレームで同時確認」の方が修正漏れを防止できます。フレームサイズをまたいだ制約の挙動は、並べて見ないと差が視認しにくいためです。375pxと1440pxで問題がないように見えても768pxで崩れるケースが実務では少なくなく、3点同時比較によって中間サイズの崩れを見落とす確率が下がります。
【注意点】: 3フレームの内容を個別に手動編集する必要はありません。コンポーネントのインスタンスを使えば1箇所の修正が3フレームに即時反映されるため、マスターコンポーネントへの変更のみで完結します。フレームを複製しただけの通常のコピーでは同期しないため注意してください。
ハック2: 命名規則でレイヤー構造を制約ミスゼロに
【対象】: 複数ページや複数案件を並行して進めるフリーランス、または複数デザイナーとのチーム案件に関わる方
【手順】:
STEP 1. フレームのレイヤー名を「constraint-fixed-right」「constraint-scale-horizontal」のような命名規則に統一します（初回設定：10分）。
STEP 2. 新規レイヤー追加時にレイヤー名から制約設定を特定できるようにし、確認にかかる時間をゼロにします。
STEP 3. プロジェクト開始時に命名ルールをFigmaファイルの表紙ページに記載し、引き継ぎ・レビュー時の確認コストを下げます（5分）。
【コツと理由】: 「レイヤー名に制約の意図を埋め込む」命名規則を使うと、後工程でのミスが減ります。レイヤーが増えると設定済みか未設定かの判断が視認だけでは追えなくなるためです。フリーランス案件で最も発生しやすい「制約の設定漏れ」「引き継ぎ時の仕様不明」を、命名の段階で防止できます。
【注意点】: 全レイヤーに命名規則を適用する必要はありません。デフォルトの「左・上」で問題ない静的要素には命名規則を適用せず、制約が重要な意味を持つレイヤーだけに絞ることで管理コストを抑えられます。
ハック3: 親フレームの幅を変数で管理して制約の検証を高速化
【対象】: Figmaの変数（Variables）機能を使える環境にある方
【手順】:
STEP 1. FigmaのVariablesパネルで「frame-width」という数値変数を作成し、値を375・768・1440の3種類のモードで定義します（初回：15分）。
STEP 2. 制約確認用の親フレームの幅にこの変数をバインドし、モードの切り替えボタン1クリックでフレーム幅が変更できる状態にします。
STEP 3. 制約設定後は変数モードをSP・タブレット・PCと順番に切り替えて挙動を確認し、問題がなければ次の作業に移ります（各30秒）。
【コツと理由】: 「変数バインドでモード切り替え」は、「フレームを手動でドラッグしてリサイズして確認」より確認速度が向上します。手動ドラッグは毎回元の幅に戻す手間が発生しますが、変数は元の設定に戻すのが1クリックで済むためです。変数が使えない場合はコンポーネントのバリアントで代替できます。
【注意点】: 変数機能はFigmaのプロフェッショナルプラン以上で利用可能です。無料プランおよびスタータープランでは変数の作成・編集に制限があります（Figma公式：プランと機能）。変数を使わない代替手段として、フレームを3つ複製する前述のハック1で同等の確認が可能です。
ハック4: Dev Mode連携前に制約を全レビューして実装コストを削減
【対象】: エンジニアへのデザイン引き渡しがある案件を担当するフリーランス
【手順】:
STEP 1. デザイン完成後、Dev Modeを有効化する前に全フレームをリサイズして制約の挙動を最終確認します（30分/画面）。
STEP 2. 意図しない挙動が発覚したレイヤーは優先度順にリストアップし、制約を修正してから再確認します。
STEP 3. Dev Modeを有効化し、エンジニアに引き渡す際に「各要素の制約設定とその意図」をコメント機能で補足します（10分）。
【コツと理由】: 「Dev Mode有効化前に制約の全レビューを挟む」ことで実装後の手戻りが減ります。Dev Modeでエンジニアが確認するのはCSSプロパティだけでなくレイアウト意図も含まれるため、制約が正確に設定されていないとエンジニア側での推測実装が増え、最終的な修正コストが上がるためです。
【注意点】: Dev Modeのコメントで制約の意図を補足する際、全レイヤーにコメントを付ける必要はありません。デフォルト（左上固定）から外れている要素、つまりエンジニアが判断に迷う可能性のある要素だけにコメントを絞ることで、コメントの視認性と確認効率が上がります。
ハック5: フリーランス案件の納品前チェックリストに制約確認を追加
【対象】: 複数案件を掛け持ちしていて、納品ミスのリスクを下げたいフリーランス
【手順】:
STEP 1. 案件ごとの納品前チェックリストに「全主要フレームのリサイズ確認（SP・タブレット・PC）」を追加します（初回設定：5分）。
STEP 2. チェック時は全フレームを一覧できるページに移動し、フレームごとに幅を変えて制約の挙動を目視確認します。
STEP 3. 問題がなければチェックリストにチェックを入れてから納品します。問題が発覚した場合は修正後に再確認してから納品します。
【コツと理由】: 「納品前チェックリストに制約確認を組み込む」プロセスを持つことで、クライアントからの差し戻し件数が減ります。制約の設定漏れは静止画での確認では気づきにくく、リサイズして初めて顕在化するためです。チェックリストがないと制約確認が案件によってまばらになり、品質にばらつきが生じます。
【注意点】: 全フレームのリサイズ確認を毎回丁寧に行う必要はありません。デザインの変更があったフレームと、デザインシステムから外れたカスタム設定を持つフレームだけを重点確認することで、確認時間を全確認の3分の1程度に抑えられます。
CHECK
▶ 今すぐやること: 今担当している案件のFigmaファイルを開き、主要フレーム1つの幅を1440pxから375pxに変更して、すべての子レイヤーが意図どおりに挙動しているか確認してください（5分）
Q: 制約の設定をコンポーネント化して再利用する方法はありますか？
A： コンポーネントのマスターに設定した制約はインスタンスに引き継がれます。よく使う制約パターン（ヘッダー用・カード用・モーダル用など）をコンポーネントとして整理しておくと、新規案件での設定時間を短縮できます。
Figma制約の実例は2パターンで比較
ケース1（成功パターン）: 初回設定で3サイズ対応を完成させたフリーランスデザイナーの場合
Webサービスのリニューアル案件を受注したフリーランスデザイナーが、SP/タブレット/PCの3サイズ対応を求められました。設計フェーズで各要素の制約を先に決め、ヘッダーに「水平：左右・垂直：上」、サイドナビに「水平：左・垂直：上下」、CTAボタンに「水平：右・垂直：下」を設定した上で、3フレームを並べて同時確認する手順を組み込みました。その結果、エンジニアへの引き渡し後に発生したレイアウト修正依頼はゼロで、追加修正工数が発生しませんでした。
制約をあらかじめ設計段階で決めておいたことで、画面サイズの変更があっても都度手直しが不要だったとこのデザイナーは語っています（フリーランス案件でのFigma活用・実務観点）。
制約を後付けで設定しようとしていれば、各レイヤーの確認と修正で追加工数が発生していた可能性があります。
ケース2（失敗パターン）: 制約未設定のまま納品して差し戻しになったケース
ECサイトのスマホ対応デザインを担当したフリーランスが、制約設定を省略したまま静止画として納品しました。エンジニアがFigmaファイルを開いてフレームサイズを変更した際、全要素が左上に集まる状態が発覚し、納品から3日後に差し戻しになりました。修正対応で追加工数が発生し、クライアントとの信頼関係にも影響が生じました。
Figmaでの制約設定ができていない場合、エンジニア側での推測実装が増えてコストが上がると語るデザイナーもいます（オートレイアウトと制約の使い分け実践）。フリーランスの案件管理の仕組み化についても参考になります。
納品前チェックリストに制約確認を組み込んでいれば、差し戻しは事前に防止できた可能性があります。
CHECK
▶ 今すぐやること: 納品前チェックリストを持っていない場合は今すぐFigmaファイルのページ1枚目に「制約確認：SP/タブレット/PC各サイズリサイズ確認」の項目を追加してください（3分）
Q: 差し戻しを防ぐために事前にクライアントと共有しておくべき情報はありますか？
A： 「デザインはSP・タブレット・PCの3サイズで確認済みであること」と「Figmaファイルでフレームをリサイズして挙動を確認できること」をキックオフ時に共有しておくと、後工程のコミュニケーションがスムーズになります。
Figma制約は5設定で自動化：今日からできる行動まとめ
Figmaの制約を5パターン設定すれば、画面サイズ変更時のレイアウト崩れを手作業ゼロで防止できます。水平・垂直の2軸でそれぞれ役割に応じたパターンを選び、設定後は必ず3サイズで挙動確認するプロセスを習慣にすることで、フリーランス案件での差し戻しリスクを大きく下げられます。制約とオートレイアウトは競合するのではなく、外側に制約・内側にオートレイアウトの2層設計で組み合わせることが実務の定石です。
Figmaの制約は「知っているかどうか」だけで、デザイン品質とエンジニアへの引き渡し精度に直結します。今日ご紹介した5つのハックと3サイズ確認のプロセスを案件に組み込むことで、制約の設定漏れによる差し戻しは事前に防止できます。制約を正しく使いこなすことは、フリーランスとしての信頼性を高める直接的な手段です。
| 状況 | 次の一歩 | 所要時間 |
| 今すぐ基本を試したい | 既存ファイルの子レイヤーで制約を1つ変更してリサイズ確認 | 5分 |
| 案件で今すぐ使いたい | 主要フレームをSP・タブレット・PCの3幅で並べて挙動確認 | 15分 |
| エンジニア連携を改善したい | Dev Mode有効化前に制約の全レビューを実施 | 30分 |
| 納品品質を安定させたい | 納品前チェックリストに制約確認項目を追加 | 5分 |
Figma制約の使い方に関するよくある質問
Q: Figmaの制約はコンポーネントのバリアント間でも維持されますか？
A： マスターコンポーネントで設定した制約はバリアント間でも維持されます。ただしバリアントごとにレイアウトが大きく異なる場合は、バリアントごとに制約を個別に設定してください。インスタンス側では制約の変更が制限されるため、設計段階でマスターの制約を完成させてからバリアントを作成してください。
Q： 制約の設定内容をFigmaファイル外にエクスポートして記録する方法はありますか？
A： Figma標準機能では制約設定のみをエクスポートする機能はありません。設定内容を記録する場合は、前述のレイヤー命名規則（ハック2）を活用するか、Figmaファイル内のドキュメントページに制約設定一覧をテキストで記録する方法が実務では広く使われています。
Q： 制約を設定した状態でコンポーネントを別のファイルにコピーしても設定は維持されますか？
A： 維持されます。制約設定はレイヤーのプロパティとして保存されるため、コピー・ペーストやファイル間の移動でも設定は引き継がれます。ただしコピー先のファイルでフレーム構造が変わると挙動が変わることがあるため、コピー後は必ず親フレームをリサイズして確認してください。
【出典・参照元】
Figma公式ヘルプ：制約の適用 – レイヤーのサイズ変更定義への制約の適用
Figma公式ヘルプ：制約の基本 – FD4B：制約の基本
Figma公式：プランと機能 – Figmaプランごとの機能比較
制約が表示されない体験談・対処 – 制約が表示されない場合の体験談と対処法
オートレイアウトと制約の使い分け実践 – オートレイアウトと制約の使い分けに関する実践談
フリーランス案件でのFigma活用・実務観点 – フリーランス案件でのFigma活用に関する実務的視点