Figmaのオートレイアウトガイド！自動配置で効率的にレイアウト作成

UIデザインやプロトタイピングを行う際に、レイアウトの整列やレスポンシブ対応は重要です。Figmaのオートレイアウトを使えば、パーツの配置、余白、再配置が自動で調整されるため、デザインの効率と一貫性が飛躍的に高まります。この記事では、オートレイアウトの基本操作から応用テクニックまで、実務で役立つ最新情報を含めてわかりやすく解説します。

Figma オートレイアウト 基本の概念と仕組み

Figmaのオートレイアウト基本とは何かを理解することは、効率的なデザイン構築の第一歩です。オートレイアウトは、フレーム内の要素配置や余白、間隔を自動的に制御する仕組みで、レイアウト更新の手間を削減します。配置方向（水平・垂直）や間隔ギャップ、パディングなどの属性を設定することで、要素をまとめて管理できるようになります。基本的な動作原理を押さえることで、後ほど応用もスムーズです。

また、レスポンシブデザインや複数の画面サイズに対応する際にも、この基本概念が役立ちます。フレームのサイズの変化に応じて中の要素がどのように振る舞うかを予め設定することで、デザインが崩れにくくなります。最新ではグリッドオートレイアウトのベータ機能が追加され、2次元のレイアウト方向性も選べるようになっています。

オートレイアウトとは何か

オートレイアウトは、Figmaでフレームまたはコンポーネントに適用できる機能で、子要素の配置・並び順・間隔を自動で制御します。水平または垂直の方向指定、あるいは新しいグリッドレイアウトを用いることで、列・行の両方向に要素を整列できるようになっています。要素の追加・削除・テキストの量の変更にも柔軟に追随するため、手動調整のコストが大幅に減ります。

主要な構成要素：パディング、ギャップ、アライン

オートレイアウトを制御するための基本要素には、パディング（フレームの内側余白）、ギャップ（子要素同士の間隔）、アラインメント（配置方向、揃え方）が含まれます。パディングは均一または各辺別に設定可能で、ギャップは固定値またはスペースを最大にするモードなど多様です。アラインメントは、左・右・中央・上・下といった方向をアイコンまたはショートカットで操作できます。

方向指定とその効果（水平・垂直・グリッド）

オートレイアウトの方向指定は、要素が並ぶ方向を決めます。水平レイアウトでは横方向に並び、垂直では縦方向に積み重なります。新たに追加されたグリッドオプションでは、行と列の両方向に要素を配置でき、ギャラリーやカードレイアウトに適しています。グリッドは現在ベータ段階で、使用中や制限がある場合がありますが、試してみる価値があります。

Figma オートレイアウト 基本の設定操作方法

オートレイアウト基本の設定操作を覚えることで、デザインの品質と効率がぐっと向上します。フレームを選択して「オートレイアウトを追加」から始まり、パネルで流れの方向、パディング、ギャップ、アラインなどを調整します。加えて最小・最大サイズの設定や、子要素を「Fill Container」や「Hug Contents」にすることで、親フレームや子要素のリサイズ挙動が細かく制御可能です。

それによりテキスト量が変化してもフレームが自動で追従したり、ボタンのラベルによって幅が変わってもそのまま整ったレイアウトが保たれます。複数のオートレイアウトフレームをネストさせる方法もあり、複雑なレイアウトを組みながら整合性を保つのに役立ちます。

オートレイアウトを適用する手順

まず対象となるフレームまたは複数の要素を選びます。次にパネルのオートレイアウトボタンか、ショートカット「Shift + A」を使ってオートレイアウトを追加します。フレームがオートレイアウトフレームに変わり、選択した方向（水平か垂直、またはグリッド）を設定できるようになります。この方法により明示的に流れを定義できます。

サイズとリサイズの設定（固定・Hug・Fill）

オートレイアウトでは子要素と親フレームそれぞれにサイズ設定があります。固定幅・高さ（Fixed）、内容に応じて伸縮する Hug Contents、親コンテナの空き領域を埋める Fill Container の3モードです。これらを組み合わせることで、ボタンなどラベルサイズに応じて動的に調整する要素や、ナビゲーションバーなど横幅いっぱいに伸ばす要素などが簡単に設計できます。

パディングとギャップの具体的な操作方法

パディングはフレームのエッジと内部の要素との距離を、ギャップは子要素同士の間隔を示します。パディングは上・右・下・左を別々に設定するか、均等に設定するか選べます。ギャップは固定値を指定するほか、「Space Between（自動間隔）」などのモードもあります。操作はプロパティパネルの数値入力だけでなく、キャンバス上でハンドルをドラッグしたり Alt／Option キーなどを使って両側／すべての辺を同時に操作することもできます。

Figma オートレイアウト 基本の応用テクニック

オートレイアウト基本を超えて使いこなすことで、複雑なUIやデザインシステムにも対応できます。ネスト構造を活用する、テキストの行数制限・マックス値を設定する、新しいグリッドオートレイアウト機能を使うなどは応用テクニックです。これらを組み合わせることで柔軟かつ再利用可能なコンポーネント設計が可能になります。

また、最新ではサイズの最小・最大値（min/max）やグリッド流の追従性、Fractional unit の導入などがあり、これらを適切に使うことで、よりCSSレイアウトに近く、実際の実装に近い設計が可能です。

ネストの活用で複雑なレイアウトを構成

あるフレームの中にさらにオートレイアウトフレームを配置することで、水平と垂直の方向が混在する複雑なレイアウトやカードコンポーネントなどを作ることができます。各ネストレベルでパディング・ギャップ・アラインを独立して設定できるため、部分ごとの制御も自由度が高くなります。

テキスト制限と最小／最大サイズの設定

テキストレイヤーには行数制限や最大・最小高さなどの設定が可能です。これにより、テキストの量が急に増えてもデザイン崩れを防げます。同様に、子要素や親フレームには min-width や max-width を設定することで、極端な拡大縮小に耐えるデザインを作成できます。

グリッドフローと Fractional unit（割り当て比率）の利用

グリッドオートレイアウトフローは、行列の両方向で要素を整列させる新しい機能で、ギャラリーやカード一覧などに適しています。最新のアップデートでは Fractional unit を使って比率ベースのサイズ設定が可能となり、CSS Grid に近い表現ができるようになってきています。ただし、まだベータ段階の機能があるため環境やプランにより制限があることを念頭に置いて下さい。

Figma オートレイアウト 基本のショートカットと操作効率化

基本操作を覚えたら、ショートカットやキャンバス上での直接操作を駆使することで作業効率が飛躍的に上昇します。Figmaにはオートレイアウトを追加・削除するショートカット、パディングやギャップをドラッグで調整する操作、アラインメントをキーボードで選択する操作などが用意されています。これらを使いこなせばマウス移動や手入力の手間を激減させることができます。

操作の例を把握し、それを日常のデザインワークに組み込むことが大切です。複数のファイルやプロジェクトで使い回せるルールを設けたり、テンプレートを作っておくと便利です。

よく使うショートカット一覧

以下はオートレイアウト基本操作で覚えておきたい主要ショートカットです。作業速度の向上につながります。

キャンバス上での直接操作（ハンドル操作）

プロパティパネルを使うだけでなく、オートレイアウトフレーム上でマウスをフレームの内側境界線か要素間隔を示すハンドルにホバーすると、ピンク色のガイドが表示されます。そのガイドをドラッグすることで、パディングやギャップを直感的に変更できます。Shift や Alt／Option キーと組み合わせることで複数方向の操作や微調整もできますので、細部の整列に便利です。

アラインメントと配置モードの切り替え

要素の揃え位置（左・中央・右・上・下など）はパネル内のアラインメントボックスまたはキーボード方向キーで制御できます。また「Baseline Alignment（ベースライン揃え）」という機能を使えば、アイコンとテキストなど高さが異なる要素の整列がより自然になります。ギャップモードには Packed（詰める）・Space Between（間隔を最大限に使う）などがあり、レイアウトの印象を大きく左右します。

実例で見るFigma オートレイアウト 基本の活用パターン

オートレイアウト基本を使った代表的なパターンを実例で確認することで応用力が身につきます。ボタン、カード、メニューなど製品UIで頻出するモジュールをどう設計するか、また実装で揃えやすい設計とは何かを考えます。これらのパターンをデザインシステムに組み込むことで、一貫性と拡張性が高まります。

さらに、スクリーンサイズが変わるレスポンシブ対応や、テキストの増減を考慮したカードの高さ調整など、実践的なシナリオを通じてオートレイアウトの設定をどう選ぶかを解説します。

ボタン・ナビゲーションバー

ボタンコンポーネントではテキストの長さに応じてサイズが変わることが多いため、子要素の幅を「Hug Contents」に設定し、パディングを左右と上下にしっかり取ることが基本です。ナビゲーションバーでは、子要素を「Fill Container」で横幅を最大限使う設定にすることで、スクリーン幅いっぱいに広がる柔軟なレイアウトが作れます。

カードレイアウト（一定列、可変高さ）

カードを並べる場合、グリッドオートレイアウトを使用して複数列を作るか、水平オートレイアウトを row の中にネストして複数列構成を行うことがあります。カード内テキストが増えると高さが変わりますが、各カードまたは内部要素を「Hug Contents」か「Fixed」のどちらかで管理することで、揃わない問題を回避できます。

フォーム・リスト・メニューの実装例

フォームやリストの整列では、垂直オートレイアウトを使うことが一般的です。ラベル・入力欄・ヘルプテキストなどを垂直に並べ、ギャップを一定にすることで読みやすさを維持します。特定の要素だけ親フレームから外す場合は「Ignore Auto Layout（自動配置無視）」を使って絶対配置にすることで柔軟度を上げることもできます。

よくある問題と解決策：Figma オートレイアウト 基本の落とし穴

基本を理解した上で、実務でぶつかりやすい問題を予め知っておけばトラブルが減ります。高さが揃わない、テキストが切れる、子要素が期待通り伸びない、または親が縮まないなど、原因が設定ミスであることが多いです。どういう設定が原因になるかを把握し、解決策を知っておくことがデザインの完成度を高めます。

さらに、グリッドオートレイアウトを使う際の制限や、ベータ版としての不具合への対処法についても押さえておきましょう。

テキストが切れる・高さが揃わない

テキストレイヤーが固定サイズに設定されていたり、最大行数を超えるようなテキストが入った際、高さが足りず切れてしまうことがあります。これを防ぐにはテキストを「Auto Height」に設定し、必要に応じて最大行数を設定することで、テキストが増えてもデザインが崩れないようにすることができます。

親フレームが縮まない、子要素が伸びない場合</

親フレームを「Hug Contents」に設定していても、子要素が「Fill Container」など親のスペースを拡張する設定になっていると、親が縮まないことがあります。このような場合は、子要素のサイズ設定を見直し、場合によっては固定サイズにするか最小・最大サイズを適切に設定してください。

グリッドオートレイアウトの制限と対応策

グリッドフローはまだベータ機能が含まれるため、仕様が未完成な部分があります。たとえば、Fractional unit の扱いや行列のスパン設定が環境やアカウントプランで制限されていたり、挙動が不安定なことがあります。こうした場合は既存の水平または垂直レイアウトをネストしてグリッド風に組むなどの回避策を使うことも有効です。

まとめ

Figma オートレイアウト 基本をマスターすることで、UIデザインの作業効率と精度が大きく向上します。基本の概念、方向指定、サイズ制御、パディング・ギャップ設定などの知識をしっかりおさえ、それを日々のデザインに応用できるレベルにすることが大切です。

応用テクニックとしてネスト構造やグリッドフロー、テキストの行数・サイズ制限などを活用することで、レスポンシブな設計やコンポーネントの再利用性も高まります。ショートカットやキャンバス上での直感的操作を取り入れ、Figmaの使い勝手を真に高めていきましょう。