Figmaでのオートレイアウトは、UIデザインを効率良く整えたい人にとって強力なツールです。要素を手動で並べるのではなく、方向や間隔、パディング（余白）、リサイズのルールを設定することで、コンテンツが更新されたときも自動で整う構造をつくれます。この記事ではオートレイアウトの基本操作から応用テクニックまで、最新情報を交えながら解説します。初心者でも理解しやすい構成で、実践に使える知識を身に付けましょう。
目次
Figma オートレイアウト 基本の仕組みと利用シーン
オートレイアウトは、方向（Horizontal／Vertical／Grid）、アイテム間の間隔、パディング、整列、リサイズ設定などのプロパティによって成り立ちます。これらを理解することで、デザインが動的に変化しても見た目を保てるようになります。まずはその仕組みやどのような場面で使われるかを把握しましょう。
オートレイアウトとは何か
オートレイアウトは、フレーム内の子要素を自動で配置・調整する機能です。方向を指定すると、その軸に沿って要素が整列され、要素が追加・削除・サイズ変更された場合にも再計算されます。余白や間隔も指定でき、デザインが動的に整うため手間を省けます。最新情報でGrid方向のオプションも登場し、レイアウト構造の自由度が増しています。
利用シーンと利点
オートレイアウトは次のようなシーンで特に効果を発揮します。ボタンなどのラベル変更でボックスの幅が変わる場合、リスト項目が増減するUI、カードデザインやダッシュボードのような可変要素がある画面など。こうした場面で手動配置だと調整に時間がかかりますが、オートレイアウトを使えば自動で整うため、作業効率とデザインの一貫性が高まります。
最新の更新ポイント
オートレイアウトには、従来の横・縦レイアウトに加えてGrid（グリッド）レイアウトがオープンベータとして導入されています。このGridフローは行・列の構成を指定でき、複数行や列にまたがる要素も配置可能になっており、ダッシュボードやギャラリー形式での見せ方が柔軟になっています。これにより、レイアウト設計の幅がさらに広がりました。
Figmaオートレイアウトの具体的な使い方と設定
ここからは実際の操作方法を詳しく見ていきます。オートレイアウトを追加する手順、方向の切り替え、パディングと間隔の設定、要素を追加・削除・順序を入れ替える方法など、基本から応用まで順を追って解説します。
オートレイアウトの有効化（追加方法）
まずはフレームや複数のレイヤーを選択し、ショートカットキー「Shift + A」を押すか、右パネル内のオートレイアウト追加ボタンをクリックします。選択が複数オブジェクトの場合はそれらを囲む新しいオートレイアウトフレームが作られます。有効化後すぐに方向や間隔、パディングの設定が可能になります。
方向（Horizontal／Vertical／Grid）の切り替え
フレームがオートレイアウトになったら、方向設定を切り替えられます。横方向（Horizontal）は左から右に要素を並べる形式で、ボタン群やアイコン並びに適しています。縦方向（Vertical）は上から下に積み重ねていく形式で、リストやフォームの項目などによく使われます。そしてグリッド方向はベータ版で導入されており、行と列の両方の構造が設定でき、複雑なレイアウトにも対応できるようになりました。
間隔（Gap between items）とパディングの設定
Gap between items は子要素間の空白を指定する設定で、水平・垂直フローに応じて適用されます。また、GapをAutoにする設定もあり、要素間の揃った状態と余白の最大化を同時に実現できます。パディングはフレームの内部四辺の余白で、統一設定か個別設定が可能です。デザインの見栄えや可読性を高める重要な要素です。
高度なリサイズ設定とネストの戦略
オートレイアウトの力を最大限に引き出すには、リサイズの挙動やフレームのネスト（入れ子構造）がポイントになります。親子関係を設計することで、動的なレイアウトが可能になり、レスポンシブデザインにも対応しやすくなります。
リサイズタイプ（Hug contents／Fill container／Fixed）の理解
リサイズ設定には主に三つの種類があります。Hug contents は子要素のサイズにフィットするようにフレームを最小限に保つ設定です。Fill container は子要素が親の空きスペースを充填するよう伸びる設定で、特に要素を均等に並べたい場合に便利です。Fixed は幅や高さを固定し、変更されないどの変更にも揺るがない部分を作れます。
最小・最大サイズと制約の設定
リサイズ設定に加えて、最小幅・最大幅および最小高さ・最大高さを設定できます。これにより、内容が増えても広がり過ぎず、また縮み過ぎて崩れない制限を設けることができます。特に可変要素が多いUIでは、この制約がデザイン破綻を防ぐ鍵になります。
ネストされたオートレイアウトの設計戦略
ネストとは、オートレイアウトフレームを他のオートレイアウトフレームの子要素とする構造です。例えば横フローの中に縦フローを含めたり、グリッド内に異なる方向のフローを含めたりすると、複雑なレイアウトも柔軟に実装できます。ネストをうまく使うことで、見た目に整合性がありつつ可変性を持ったUIが作れます。
整列・配置・特殊機能を活用する
オートレイアウトには整列（alignment）や配置、特殊な配置制御の機能があります。これらを駆使することで、汎用的なレイアウトから微調整が必要な部分まで、美しく制御できます。ここでは整列設定やIgnore Auto Layout、Space Betweenなどのテクニックを扱います。
クロス軸の整列と整列オプション
方向と直交する軸（たとえば横方向のフローなら垂直方向の整列）に対して「上揃え」「中央揃え」「下揃え」などの設定があります。複数の要素の背景やテキストサイズが異なる場合、中央揃えにすることでバランス良く見せられます。方向と整列を組み合わせることでレスポンシブなデザインの見栄えが向上します。
Space Between／Packed 配置の使い分け
Space Between は子要素間の余白を最大限に使って両端揃えのような配置をするオプションです。一方 Packed は子要素を詰めて配置するモードです。タイトルとアクションボタンなどを左右に配置したい時や、端にアイコンを置きたい時に Space Between が使われます。Packed は要素が中心に集まる印象を与えたい場面に適しています。
Ignore Auto Layout（絶対位置）の活用法
オートレイアウトの中に含まれながら、そのフローに影響を受けず絶対的な位置に置きたい要素を設定できます。たとえばバッジや重ねたい装飾など、親のレイアウトと干渉させたくない部分に使われます。これを使うことで、主要なレイアウトルールを保ちながら特殊な見せ方も可能です。
実践ワークフローとデザインの整え方
ここではオートレイアウトを使ったワークフローの具体的なコツや修正時の効率化テクニックを紹介します。デザインを進める中で整合性を保ちつつ、変更に強い構造を築く方法を学びましょう。
デザインシステムとの連携
ボタンやカードなど UI コンポーネントを統一したスタイルで設計する際、オートレイアウトをコンポーネント内に組み込むことで、インスタンスでの更新も自動で整います。共通のパディングや間隔、幅、高さをスタイルに落とし込んでおくことで、チーム全体でのデザインのブレを防げます。
レスポンシブデザイン対応のポイント
画面幅や親フレームのサイズが変化する場面を想定して、リサイズ設定のうち Fill container や min/max の制限を活用します。グリッドレイアウトの導入により、複数列レイアウトで画面幅応じて列数を変えるような設計もしやすくなりました。これによりモバイルからデスクトップまで対応可能なUIが効率的に実装できます。
修正・更新を見越した設計
内容が変わることを前提に設計することが重要です。たとえばテキストが長くなることを想定して幅を Hug ではなく Fill にしたり、画像サイズが変わっても崩れないように min/max を設定したりします。さらにネストされたフレームを整理したり、不要な要素を削除してレイヤー構造をシンプルに保つことも品質に影響します。
よくあるトラブルとその解決策
オートレイアウトを使っているときに「思った通りに整わない」「要素がはみ出す」「順序が崩れる」などの問題が起きがちです。ここではそのようなトラブル例と、実際の解決策を解説します。
要素の重複・配置ズレの原因と対策
重複するのは、オートレイアウトが適用されていないか、子要素が Ignore Auto Layout に設定されていることがあります。また、固定サイズと Hug の組み合わせが整列を崩す原因になることもあります。対策としてフレームを明確にオートレイアウト化し、必要に応じて子要素のリサイズ設定を統一します。
間隔が揃わない／予期せぬ空白ができる
Gap の値が誤って設定されていたり、Auto モードと数値指定モードが混在している場合に起こります。Auto モードを使う際はすべての子要素が適切な幅・高さ設定になっているかを確認します。またパディングの設定が四辺統一か個別かで先端・底辺に空白が偏ることがありますので注意します。
ネストが複雑すぎて調整しにくい
フレームが多重にネストされていると、変更があったときにどこを直せばいいかわからなくなることがあります。ネスト構造はなるべく浅く保ちつつ、役割ごとに整理します。用途に応じて親フレーム・子フレームのリサイズ設定や整列設定を明確に使い分けると調整が容易になります。
まとめ
Figmaのオートレイアウトを使うと、方向、間隔、パディング、整列、リサイズ設定などを組み合わせてデザインを動的に整えることができます。Gridオプションやネスト構造、およびFillやHugなどのリサイズタイプを理解することで、画面サイズや内容が変わっても見栄えを保てる設計が可能です。
トラブルが起きそうな間隔や配置の問題も、設定を見直すことで解決できます。デザインシステムと連携し、修正や更新を見越した設計を心がけることで、作業効率も品質も向上します。まずは小さなコンポーネントで試してみて、オートレイアウトの基本をマスターしましょう。読み取りやすく整ったUIデザインが確実に手に入ります。
コメント