画面サイズが多様化する現代において、UI／UXデザインで重視されているのは“レスポンシブ性”です。Figmaにおける制約（constraints）を活用すれば、要素の位置や大きさを自在にコントロールし、どのデバイスでも整ったレイアウトを実現できます。初心者も安心な基本操作から実践的な応用まで、設定方法とポイントを余すところなく解説します。これを読めば、柔軟で信頼性の高いデザインができるようになります。
目次
Figma 制約 constraints 使い方 の基本とは
Figmaにおける制約とは、フレームがリサイズされた時に内部の要素がどのように振る舞うかを定義するルールです。水平方向と垂直方向の制約を設定することで要素を端に固定したり、中央に置いたり、サイズが親に応じて変化するようにできます。これにより異なる画面幅でもデザインが崩れにくくなります。
Figmaで制約を理解する第一歩として、制約の種類と働きを把握することが重要です。
水平と垂直の制約（Horizontal／Vertical）の種類
水平方向では Left／Right／Center／Scale／Left＋Right といった選択肢があり、それぞれ要素が親フレームのどの辺にくっつくか、あるいは幅がどう伸縮するかを制御します。垂直方向でも Top／Bottom／Center／Scale／Top＋Bottom のような制約があります。これらを組み合わせることで、例えば角に固定する・中央に維持する・親に応じて拡大縮小する、といった動きが可能になります。
制約を適用できる要素とできない要素の違い
制約はフレーム内のレイヤーに対して適用します。グループには基本的に直接制約を設定できず、グループを選んだ場合は内部の個々のレイヤーに制約が判定されます。オートレイアウトが有効なコンテナ内でも、子要素に対して制約を使えますが、オートレイアウト自身の制御と組み合わせる時には挙動を確かめる必要があります。
デフォルト設定と制約の無視方法
レイヤーをフレームに配置すると、デフォルトで Top と Left の制約が設定されます。これではリサイズを行った際に右側や下側に伸ばしたい要素が期待通りに動かないことがあります。そんな時は制約を変更するか、もしくはリサイズ時に modifier キー（MacではCommand／WindowsではCtrl）を押すことで制約を一時的に無視できます。
Figma 制約 constraints を使ってレスポンシブデザインを実現する方法
制約単体でも効果はありますが、レイアウトグリッドやオートレイアウトと組み合わせることで、より強力で柔軟なレスポンシブデザインが可能になります。実際、最新のガイドでは制約とオートレイアウトをまず優先して使うことが推奨されています。各要素の最小・最大幅を設定することで、画面サイズ間で見栄えが壊れないように設計できます。加えて複数のブレークポイント用フレームを構成することでモバイル・タブレット・デスクトップでの表示を明確に整理できます。これは最新情報に基づいた現場でのベストプラクティスです。
この章では、実際の設定手順と応用例を紹介します。
オートレイアウトと制約の組み合わせ
オートレイアウトは、複数のレイヤーを行や列の形式で配置し、スペースやパディングを自動計算する機能です。これを使い、子要素に対して Fill Container や Hug Contents を設定すると、親フレームがリサイズされた際に要素が柔軟に伸縮またはフィットします。特にボタンやカード等の再利用性があるコンポーネントにはこの手法が効果的です。
ブレークポイントに対応するフレーム設計
レスポンシブ設計をする際、モバイル・タブレット・デスクトップなど複数の画面幅を想定したフレームを用意します。それぞれのフレーム内に同じコンテンツを置き、制約とオートレイアウトを調整します。こうすることで、開発者に対してどの幅でどのようなレイアウトになるかの意図を明示できますし、スクリーン間の違いを比較しながら改善できます。
制約を使った具体的な UI 要素の例
例えばナビゲーションバーを画面底部に固定したい場合、「Left＋Right」および「Bottom」の制約を設定します。フローティングアクションボタン（FAB）は「Right＋Bottom」で固定します。カードの画像は「Scale」で拡大縮小、テキストは「Left＋Right」または「Center」でレイアウト内に収める方法が一般的です。これらの具体例を試すことで制約の動きが理解できます。
制約 constraints を使う際の注意点とよくある失敗
便利な制約ですが、誤った設定や要素の使い方で思わぬ表示崩れを起こすことがあります。例えば、テキストレイヤーを「Scale」で拡大縮小すると読みにくくなることがあります。オートレイアウト内で Fill Container や Hug Contents を誤って組み合わせると、意図しない余白や重なりが生じることがあります。
この章では注意点とその回避策を紹介します。
テキストとアイコンの拡大縮小に対する影響
テキストレイヤーやアイコンを制約で「Scale」にすると、親フレームの大きさに応じて拡大縮小されますが、可読性や視認性が損なわれる可能性があります。これは特に小さい画面で顕著になります。解決のためにはテキストサイズを固定したり、最小幅・最大幅を設定することで保護することが推奨されます。
オートレイアウトと制約が相互に干渉するケース
オートレイアウトを使用するとき、親フレームと子要素の制約設定がかち合うことがあります。例えば親が Fill Container を指定して幅を伸ばす設定、子が Left＋Right で引き延ばされる制約では余白が意図せず大きくなることがあります。こうした干渉を避けるにはデザイン中に頻繁にプレビューでサイズを確認することが重要です。
複雑なネスト構造での制約管理
フレームの中にさらにフレームが入るネスト構造があると、子要素の制約は最も近い親フレームに対して働きます。ネストされた構造が深くなるほど制約の挙動を追いにくくなります。階層ごとに制約を整理し、必要に応じてリファクタリングを行うことで可読性と保守性が高まります。
最新情報に基づく Figma 制約 constraints の応用テクニック
最新情報に基づく実践的な応用テクニックも多く登場しています。例えば、デザインシステムの構築時に制約とブレークポイントフレームを組み合わせたり、レイアウトグリッドを活用して要素の配置基準を統一したりする方法です。こうした手法を用いることで、個別の画面サイズに対応しつつデザインの一貫性を保つことが可能です。
レイアウトグリッドとの併用
レイアウトグリッドを設定したフレーム内で制約を使うと、列や行の境界が基準となり要素を配置できます。グリッドを Stretch グリッドに設定しておくと、余白やマージンが一定で保たれ、画面幅の変化によるデザインのアンバランスが減ります。ガイドとしてのグリッドは制約の土台となる設計要素です。
コンポーネントとバリアントの活用
ボタン・カード・ナビゲーションなど再利用される要素はコンポーネント化します。その上でバリアントを用いて画面幅別（モバイル・デスクトップなど）表情を変えられるようにします。親フレームで制約を設定し、インスタンスが各ブレークポイントに応じてレイアウトを整える設計が望ましいです。
ミニマム／マキシマム幅の設定
親フレームや子要素に対して最小幅・最大幅を設定することにより、画面幅が極端に狭い／広い場合でも要素が意図せぬ形で縮んだり伸びたりするのを防げます。例えばテキストブロックが狭すぎて横幅が狭くなった場合、可読性が失われることがあるので最小幅を設定します。これが安定したレスポンシブデザインの基盤です。
制約 constraints の設定手順まとめと実践ガイド
ここでは、Figmaで実際に制約を設定する手順を整理します。初心者にも分かりやすいよう、ステップバイステップで解説します。この手順を通すことで実際に使えるスキルとなります。
ステップ 1：フレームと要素の準備
まず画面（モバイル・タブレット・デスクトップなど）ごとのフレームを用意します。次に中に配置する要素（テキスト・画像・ボタンなど）を配置します。要素はなるべく構造的に分けて、後から制約やオートレイアウトの調整がしやすいように整理します。
ステップ 2：制約の設定画面を開く
要素を選択し、右側のプロパティパネルで「Constraints」のセクションを見つけます。そこから水平方向と垂直方向それぞれの制約をドロップダウンまたはアイコンで設定できます。複数を同時に選択する際には Shift キー等を使いながら操作すると効率的です。
ステップ 3：プレビューと調整
フレームを実際にリサイズしてみたり、プロトタイプモードで異なる画面サイズで見てみたりして、要素が意図通り動くかを確認します。もし崩れや不自然な間隔が見えたら制約を変更するか、最小／最大幅、オートレイアウト設定などを見直します。
ステップ 4：ドキュメンテーションとハンドオフ準備
複数のスクリーン幅に対応させる場合は、デザインファイルにどの幅でどの要素がどう変化するかを記録しておくことが重要です。チームの開発者に伝わるように図解や仕様を書き添えると誤解が少なくなります。これにより実装時の手戻りが減ります。
まとめ
Figmaの制約（constraints）は、レスポンシブデザインを実現するための非常に強力なツールです。水平／垂直の制約設定、オートレイアウトやレイアウトグリッドとの併用、最小幅・最大幅の設定などを適切に組み合わせることで、どのデバイスでも整った UI が期待できます。
ただし、テキストの可読性や階層構造の深さなどによる制約の干渉を避けるには、プレビューでの確認や設定の整理が欠かせません。
本記事の手順と注意点を参考にして、あなたのデザインプロジェクトでも制約を上手に活用し、見た目も使い勝手も優れたレスポンシブデザインを作ってみてください。
コメント