こんにちは！UIデザイナーのYunyです。
- Figmaのオートレイアウトで意図しないレイアウト崩れが発生する方
- Hug・Fill・Fixedの違いや、Padding / Gapの設定基準を整理したい方
- カードUIやリストなど、実務で破綻しないレスポンシブなネスト構造を組みたい方
テキストの打ち替えやパーツ追加のたびに余白が崩れると、手作業による再調整が発生します。
オートレイアウトを活用すれば、コンテンツの増減に合わせてフレームが自動伸縮し、手動修正の工数を大幅に削減できます。
本記事では、実務で破綻しないオートレイアウトの基礎知識と、レスポンシブなネスト（入れ子）設計の手順を整理して解説します。
- そもそもオートレイアウトとは？（通常フレームとの決定的な違い）
- なぜ実務で必須なのか？オートレイアウトを使う2大メリット
- ① デザイナー視点：画面幅の伸縮やテキスト変更に柔軟に対応できる
- ② 開発・AI連携視点：MCPやCursorがレイアウト構造を正確に解釈できる
- オートレイアウトを「使うべき場面・使わない場面」
- オートレイアウトを使うべき場面
- あえてオートレイアウトを使わない場面
- オートレイアウトの「3大基本パラメーター」
- ① 方向（Direction）：縦積みと横並びの指定
- ② 余白（Padding）：外枠と要素間のスペース
- ③ 間隔（Gap / Spacing between items）：要素間の距離
- 3つのリサイズ挙動（Hug・Fill・Fixed）の使い分け
- 1. Hug contents（コンテンツを内包）
- 2. Fill container（コンテナに合わせて拡大）
- 3. Fixed size（固定サイズ）
- 破綻しない「ネスト（入れ子）構造」の組み立て手順
- Step 1: アイコンとラベルの最小パーツを作る（横並び）
- Step 2: ユーザー情報ヘッダーを作る（横並び）
- Step 3: タイトルと本文テキストをまとめる（縦並び）
- Step 4: 外枠フレームへ統合する
- 参考になる公式コンポーネントライブラリ（Material Design / HIG）
- 応用テクニック（Wrapと絶対配置）
- ① 折り返し（Wrap）：幅に応じた自動改行
- ② 絶対配置（Absolute Position）：特定位置への固定配置
- 実務でよくあるトラブルと解決策
- トラブル1: テキストを打ち替えると枠を突き抜ける
- トラブル2: 親フレームを広げても中身が横に広がらない
- トラブル3: アイコンが縦横に歪んで伸び縮みする
- 次のステップ：あわせて参照したい関連記事
- 終わりに
そもそもオートレイアウトとは？（通常フレームとの決定的な違い）
要素の並び順と余白（Padding / Gap）をルール化し、テキスト量や画面幅に合わせてサイズを自動伸縮させる機能です。手動の微調整をなくし、破綻しないレスポンシブUIを組むための必須の基本操作となります。
Figmaのオートレイアウトは、フレーム内の要素に対して規則的な並び順と余白ルールを適用し、コンテンツ量に応じてサイズを自動調整する機能です。
通常のフレームとの最大の違いは、「絶対座標（X, Y）」から「要素間の相対的な関係性」への変化にあります。
従来のグループや通常フレームは、キャンバス上の固定位置に要素を配置するため、文字数が増えても周囲のパーツは連動しません。
一方、オートレイアウトを適用したフレームは、テキストが増加するとフレームの高さが自動で拡張され、下部のパーツも自然に押し出されます。
この仕組みは、Webやアプリ開発におけるCSSの「Flexbox」と同様のレイアウトモデルに基づいています。
そのため、オートレイアウトを用いたデザイン設計は、エンジニアへの正確な実装意図の伝達に直結します。
オートレイアウトの適用と解除で使用する基本ショートカットキーは以下の2つです。
- オートレイアウトの追加:
Shift + A - オートレイアウトの解除:
Option + Shift + A（Mac） /Alt + Shift + A（Windows）
要素を選択して Shift + A を実行すると、選択要素が即座にオートレイアウトフレームへ変換されます。
実務でUIパーツを作成する際は、要素を選択して Shift + A を適用する操作が標準的な手順になります。
なぜ実務で必須なのか？オートレイアウトを使う2大メリット
実務でオートレイアウトを使用するメリットは、主に「レスポンシブ対応の効率化」と「AI・MCP連携時の精度向上」の2点です。
① デザイナー視点：画面幅の伸縮やテキスト変更に柔軟に対応できる
Webサイトやアプリは、PC・タブレット・スマートフォンなど複数の画面幅で表示されます。
また、多言語展開などによってテキストの文字数が大きく変動するケースもあります。
オートレイアウトで構築しておけば、親フレームの幅を伸縮させるだけで、内部のカードやテキストが自動追従します。
画面幅ごとに個別のデザインをゼロから作り直す必要がなくなり、レスポンシブ検証の工数を削減できます。
② 開発・AI連携視点：MCPやCursorがレイアウト構造を正確に解釈できる
最近の実務では、MCP（Model Context Protocol）経由でFigmaのデザインデータをClaudeやCursorなどのAIツールに連携し、コードを自動生成する手法が普及しています。
この連携において重要になるのが、デザインの親子関係とレイアウト構造です。
座標のみで配置されたデータの場合、AIは要素同士の前後関係を推測できず、不要なタグが乱立したコードを出力しがちです。
適切にオートレイアウトが組まれていれば、AIはFlexboxの方向や余白サイズを正確に認識し、実務で再利用しやすいコンポーネントコードを出力できます。
オートレイアウトを「使うべき場面・使わない場面」
オートレイアウトは有用な機能ですが、キャンバス上の全要素に適用する必要はありません。
用途に応じて、「使うべき場面」と「あえて使わない場面」を明確に切り分ける運用が実務に適しています。
オートレイアウトを使うべき場面
- ボタンやタグ・バッジ: ラベルとアイコン間の間隔（Gap）やPaddingを一定に保ち、アイコンの有無や状態（バリアント）の切り替えによる崩れを防ぐ
- 入力フォームや検索バー: 先頭・末尾のアイコン、プレースホルダー、クリアボタンなどの配置間隔を均等に保ち、親コンテナの幅に連動して伸縮（Fill）させる
- カードUI、記事リスト、ナビゲーションバー: 反復する要素を等間隔（Gap）で整列させ、項目の追加・削除や並び替えをワンアクションで行う
- レスポンシブな画面全体のレイアウト: デバイス幅の変更に合わせて、内部のセクションやカラムを自動で伸縮・再配置させる
- デザインシステムの共通アセット: チーム全体でパーツを再利用する際、手動調整によるレイアウトの崩れを防ぎ一貫性を担保する
あえてオートレイアウトを使わない場面
- 初期のアイデア出し・自由なブレスト: 構造や余白を固定せず、直感的にメモや参考画像を配置する段階
- イラストレーションやアイコン作成: 幾何学図形やベクターパスを自由な重なり順や角度で配置する場合
- キービジュアルや自由配置のコラージュ: 規則的な並び順ではなく、非対称に配置するグラフィック表現
まずはボタンやカードなど、規則的に並べるパーツから適用するのが扱いやすい進め方です。
オートレイアウトの「3大基本パラメーター」
オートレイアウトを適用すると、右側のプロパティパネルに専用の設定項目が表示されます。
基本となる設定は、「方向」「余白」「間隔」の3つです。
① 方向（Direction）：縦積みと横並びの指定
方向は、フレーム内の子要素をどの向きに整列させるかを決定する設定です。
UIの構成要素は、基本的に以下の2つの向きを組み合わせて設計します。
- 垂直方向（Vertical layout）: 要素を上から下へ縦方向に積み重ねます（記事リスト、入力フォーム、カードの上下パーツなど）。
- 水平方向（Horizontal layout）: 要素を左から右へ横方向に並べます（アイコン付きボタン、ナビゲーションメニュー、タグの並びなど）。
パネル上の矢印アイコン（↓ / →）を選択することで、いつでも向きの切り替えが可能です。
② 余白（Padding）：外枠と要素間のスペース
パディングは、オートレイアウトフレームの内側と、内部の要素との間に設ける余白です。
例えばボタンを作成する場合、ラベルテキストの上下左右に配置するスペースをこのパディングで定義します。
Figmaでは、上下・左右の一括設定と、4方向を個別に指定する方法を選択できます。
デザインの一貫性を確保するため、8の倍数（8px、16px、24pxなど）を基準とした数値設計が広く用いられています。
③ 間隔（Gap / Spacing between items）：要素間の距離
間隔（Gap）は、フレーム内に並ぶ要素同士の距離を指定する数値です。
リストアイテム間の距離や、ボタン内のアイコンとテキスト間のスペースを均等に保つ際に指定します。
間隔設定には、数値を指定する固定モードのほかに、「Auto（自動 / Space between）」設定があります。
Autoを指定すると、フレーム全体の幅や高さに応じて、子要素が両端に均等に離れて配置されます。
ヘッダーの左端にロゴ、右端にメニューボタンを配置するレイアウトなどで活用されます。
3つのリサイズ挙動（Hug・Fill・Fixed）の使い分け
オートレイアウトでレイアウト崩れが発生する主な要因は、親要素と子要素のリサイズ設定の不一致です。
Figmaでは、幅（W）と高さ（H）のそれぞれに対して3種類のリサイズ挙動を指定できます。
この3つの挙動は、言葉で理屈を追うよりも、実際にFigma上でテスト用のフレームを作り、親要素の端を左右にドラッグしてみるのが最も直感的に把握できます。
まずはそれぞれの役割と挙動の違いを整理します。
1. Hug contents（コンテンツを内包）
Hug contentsは、フレーム内部のコンテンツサイズに合わせて、外枠が追従して伸縮する設定です。
テキストの文字数に応じて、フレームの幅や高さが自動的に伸縮します。
- 主な用途: ボタン、ラベルタグ、ステータスバッジなど
- 特徴: パディング数値を維持したまま、中身のサイズに応じてフレームが動的に変化します。
2. Fill container（コンテナに合わせて拡大）
Fill containerは、親フレームの余剰スペースを埋めるように、子要素が自動で拡大する設定です。
レスポンシブな画面設計において中心となる挙動です。
- 主な用途: カード内の本文テキスト、全幅バナー、レスポンシブな入力フォームなど
- 特徴: 親フレームの幅を変更した際、内部の要素が連動して拡大・縮小します。
3. Fixed size（固定サイズ）
Fixed sizeは、中身のコンテンツ量や親フレームの大きさに関わらず、指定した幅や高さを固定する設定です。
- 主な用途: アイコン（例: 24×24px）、アバター画像（例: 48×48px）など
- 特徴: 親フレームの伸縮に影響されず、要素の寸法を維持します。
実務で参照しやすい推奨設定の組み合わせは以下の通りです。
| UIパーツ | 親フレーム（外枠）の設定 | 中身（子要素）の設定 | 主な用途 |
|---|---|---|---|
| ボタン | 幅: Hug / 高さ: Hug | テキスト: Hug | 文字数に応じて自動伸縮するボタン |
| カード内の本文 | 幅: Fixed または Fill | テキスト幅: Fill container | カード幅の変更に合わせて本文が自動折り返し |
| アバター画像 | 幅: Fixed / 高さ: Fixed | 画像: Fixed | 画面サイズ変更時も縦横比と寸法を維持 |
| 画面コンテナ | 幅: Fixed（デバイス幅） | 内部セクション: Fill container | 複数デバイスに対応するレスポンシブレイアウト |
設定で迷ったときは、親フレームの端をドラッグして伸縮させてみてください。
意図した通りに追従しない場合は、親要素と子要素のW/H設定（Hug / Fill / Fixed）を1階層ずつ確認します。
Fillに指定すべき要素がFixedやHugのままになっているケースが大半です。
破綻しない「ネスト（入れ子）構造」の組み立て手順
複数のパーツで構成されるUIは、最小単位の要素から順にオートレイアウトを組み、外側のフレームへネスト（入れ子）していく構造をとります。
ここでは、実務で頻出するメディアカードUIを例に組み立て手順を解説します。
Step 1: アイコンとラベルの最小パーツを作る（横並び）
アイコンと「保存する」というラベルテキストを選択し、Shift + A で横並びのオートレイアウトを適用します。
幅・高さともに「Hug」に設定し、要素間の間隔（Gap）を4pxに設定します。
Step 2: ユーザー情報ヘッダーを作る（横並び）
アバター画像（Fixed: 40×40px）とユーザー名テキストを選択し、Shift + A を適用します。
方向を水平（横並び）にし、ユーザー名テキストの幅を「Fill container」に設定します。
テキスト幅をFillにしておくことで、ユーザー名の長さに応じて柔軟にスペースが確保されます。
Step 3: タイトルと本文テキストをまとめる（縦並び）
見出しテキストと本文テキストを選択し、Shift + A で縦並びのフレームを作成します。
見出しと本文の両方の幅を「Fill container」に指定します。
幅をFillに設定することで、カード全体の横幅を変更した際にも文章が自動で折り返されます。
Step 4: 外枠フレームへ統合する
作成した各グループ（ヘッダー、画像、テキスト、ボタン）を選択し、再度 Shift + A を押して外枠フレームを作成します。
カードフレームの方向を垂直（縦並び）にし、内側のパディング（例: 16px）と要素間の間隔（例: 12px）を指定します。
内部に含まれる各グループの幅をすべて「Fill container」に切り替えます。
外枠フレームの幅を左右にドラッグして伸縮させ、内部の画像やテキストが追従して伸縮すれば設定完了です。
参考になる公式コンポーネントライブラリ（Material Design / HIG）
コンポーネントのレイヤー構成やネスト設計の参考として、公式のデザインシステムライブラリを活用するのが有効です。
Figma Communityでは、Google公式の「Material 3 Design Kit」や、Apple公式の「Apple Design Resources」が無償公開されています。
実際のコンポーネントのレイヤー構造を確認することで、実務で通用する設計手法を参照できます。
- Google Material Design 3: ボタンやダイアログにおけるPadding・Gapのルールや、ネスト階層の整理手法が確認できます。
Figmaリンク: Material 3 Design Kit（Figma Community） - Apple HIG (Human Interface Guidelines): ナビゲーションバーやリストアイテムなど、可変テキストに対応するレイアウト構造が参考になります。
Figmaリンク: Apple Design Resources – iOS 18 and iPadOS 18（Figma Community）
自分自身も、新しいコンポーネントを設計する際はMaterial DesignやHIGのレイヤー構造をリファレンスとして確認しています。
応用テクニック（Wrapと絶対配置）
基本の整列とネストに加えて、レイアウトの柔軟性を高める2つの実務向け設定があります。
① 折り返し（Wrap）：幅に応じた自動改行
タグ一覧や検索フィルターのボタンなど、画面幅が狭くなった際に自動で複数行へ改行させたい場面があります。
このレイアウトには「折り返し（Wrap）」を使用します。
水平方向のオートレイアウトを選択した状態で「Wrap」アイコンを有効にします。
親フレームの幅を狭めると、収まりきらない子要素が自動的に下段へ回り込みます。
② 絶対配置（Absolute Position）：特定位置への固定配置
オートレイアウトフレーム内で特定の要素を重ねて配置したい場合、「絶対配置（Absolute Position）」を使用します。
カード右上のバッジや、モーダルの閉じるボタンなどが対象になります。
対象の要素を選択し、プロパティパネルのオートレイアウト項目右上にある「重なりアイコン」をクリックします（UI3環境では「Ignore auto layout / オートレイアウトを無視」アイコンとして表示されます）。
その要素のみがオートレイアウトの整列計算から除外され、自由な座標へ配置できます。
Constraints（制約）を「Right」「Top」に設定しておくことで、親フレームが伸縮しても右上の位置が固定されます。
実務でよくあるトラブルと解決策
実務で遭遇しやすいトラブルと、その対処手順をまとめました。
トラブル1: テキストを打ち替えると枠を突き抜ける
- 原因: テキストレイヤーの幅が「Fixed」になっており、自動折り返しの設定が外れているケースがあります。
- 対処法: テキストレイヤーの幅を「Fill container」に変更し、テキストパネルの折り返し設定を「自動高さ（Auto height）」に指定します。
トラブル2: 親フレームを広げても中身が横に広がらない
- 原因: ネスト階層内の子要素の幅が「Fixed」または「Hug」のまま残っていることが原因です。
- 対処法: レイヤー階層を順に確認し、横幅を連動させたい要素の幅をすべて「Fill container」に統一します。
トラブル3: アイコンが縦横に歪んで伸び縮みする
- 原因: ベクターデータに直接Fill設定が適用されているか、縦横比の固定が外れています。
- 対処法: アイコンを24×24pxなどの固定サイズフレームでラップし、そのフレームの幅・高さを「Fixed」に指定します。
次のステップ：あわせて参照したい関連記事
オートレイアウトで作成したコンポーネントをエンジニアへ正確に引き渡すための「Dev Mode」の活用法については、以下の記事で解説しています。
余白やリサイズ設定がCSSコードにどのように反映されるかを把握することで、開発チームとの連携がスムーズになります。
PaddingやGapの数値をデザインシステムとして共通化する場合は、Figmaの「Variables（変数）」との連携が有効です。
余白ルールを変数化することで、デザイン全体の整合性を保ちやすくなります。
終わりに
オートレイアウトは、ボタンやタグなどの最小パーツから段階的に適用していくことで、実務への導入がスムーズになります。
要素間の余白や並び順をルール化しておくことで、画面サイズやコンテンツ量の変更に伴う手作業の修正工数を大幅に削減できます。
まずは日常的なコンポーネント設計から活用し、レスポンシブなUI設計に役立ててみてください。
それでは、良いデザインライフを！
