Figmaのオートレイアウトの使い方｜設定項目とネストの実践手順

2026年1月6日

前田壮一

この記事のポイント

✓Figmaのオートレイアウトの使い方を
✓追加の手順から方向と間隔と余白の設定
✓サイズ変更3モードの違い

まず、安心してください。Figmaのオートレイアウトは、覚えることが多いように見えて、実際に押さえるべき設定は5つだけです。私も最初は右側のパネルに並んだアイコンの意味が分からず、とりあえず適用してみたら要素が縦一列に潰れて、慌てて取り消したことがあります。あの混乱には理由があって、オートレイアウトは「図形を並べる機能」ではなく「並べ方のルールを決める機能」だからです。

この記事では、Figmaのオートレイアウトの使い方を、追加の手順から順番に説明します。方向と間隔と余白の設定、サイズ変更の3つのモードの違い、入れ子で画面全体を組む方法、絶対位置や最小幅といった応用、そして現時点でできないこと。最後に、この機能を実務でどう使うと効くのかまで触れます。皆さんが読み終えたときに、自分のファイルを開いて手が動く状態を目指します。

オートレイアウトとは何をしてくれる機能なのか

オートレイアウトは、フレームの中に置いた要素を、決めたルールに従って自動で並べ続けてくれる機能です。重要なのは「並べ続ける」という部分です。一度設定しておけば、中の文字が長くなったとき、要素を1つ足したとき、順番を入れ替えたときに、位置の調整が自動で追従します。

手作業で並べていたときのことを思い出してください。ボタンのラベルを「送信」から「確認画面へ進む」に変えると、ボタンの幅が足りなくなります。幅を広げると、隣の要素と重なります。隣をずらすと、その下の余白が崩れます。1文字変えただけで、5箇所を直す作業が発生していました。オートレイアウトは、この連鎖を全部引き受けてくれます。

考え方としては、ウェブの実装で使われる並べ方の仕組みと同じです。横に並べるか縦に並べるか、要素の間をいくら空けるか、枠の内側にいくら余白を取るか。この3つを宣言すると、あとは中身に応じて自動的に配置される。だから、オートレイアウトで組んだ画面は、実装する人にとっても読みやすい設計図になります。逆に、座標をひとつずつ手で置いた画面は、実装側から「この余白は意図した24pxなのか、たまたま23pxなのか」と質問が来ます。

基本の考え方は、参考記事でも次のように整理されています。

AppsWorksAboutBlog公開日: 2023.02.17 　|　更新日: 2023.07.09この記事は最終更新から2年以上経っていますFigmaのオートレイアウトの基本的な使い方FigmaTipsレクチャー今回は、Figmaで要素を繰り返し整列できる「オートレイアウト（Auto layout）」の基本的な使い方を、シンプルな画面レイアウトを実際に作りながら紹介します。また、この記事内で作成した画面レイアウトのサンプルファイルを公開・配布していますので、自由にご利用ください。出典: wentz-design.com

実際の画面を作りながら覚えるのが最短です。読んで理解しようとせず、Figmaを開いて、四角と文字を3つ並べたところから始めてください。なお、この機能は無料プランでも制限なく使えます。有料プランが必要になるのは、共有ライブラリやバージョン履歴の長期保存といった別の機能です。Figmaそのものの基本操作から確認したい方はFigma初心者ガイド｜Webデザインの基本操作【2026年版】を先に読んでおくと、この記事の内容が入りやすくなります。

オートレイアウトを追加する手順

追加の方法は3つあります。どれを使っても結果は同じなので、自分の手癖に合うものを選んでください。

1つ目は、要素を選んでショートカットを押す方法です。並べたい要素を複数選択し、Shift と A を同時に押します。これが最も速く、実務で使うのはほぼこの方法です。選択した要素を包む新しいフレームが作られ、そこにオートレイアウトが設定されます。

2つ目は、右側のパネルから追加する方法です。要素を選ぶと、右パネルに「オートレイアウト」の項目が現れ、プラスのボタンで追加できます。設定項目が目に見えるため、最初のうちはこちらのほうが理解しやすいでしょう。

3つ目は、既にあるフレームに対して追加する方法です。フレームを選んで同じ操作をすると、そのフレームの中身が並べ替えられます。注意点として、中の要素がばらばらに置かれている状態で適用すると、元の座標を無視して整列するため、見た目が大きく変わります。これが私が最初に慌てた原因でした。壊れたと思わず、いったん設定を確認してください。方向を横にすべきところが縦になっているだけ、というケースが大半です。

追加した直後に確認すべきは、フレームの名前です。自動で「Frame 123」のような名前が付きますが、これを「カードの中身」「ボタン群」のように日本語で付け替えてください。入れ子が深くなったときに、レイヤー一覧から目的の階層を探せるかどうかが作業速度を左右します。名前を付けない習慣のまま画面を10枚作ると、自分のファイルが自分で読めなくなります。

削除したいときは、フレームを選んでオートレイアウトの項目を解除します。解除すると要素は現在の位置に固定されます。ただし、一度組んだものを解除する場面は実務ではほとんどありません。解除したくなったときは、設定を見直すか、階層をひとつ足すほうが正解です。

方向と間隔と余白と配置、4つの基本設定

オートレイアウトを追加したら、右パネルに4つの設定が並びます。ここが機能の中核です。

方向は、縦に並べるか横に並べるかを決めます。ボタンの中のアイコンと文字は横、フォームの入力欄の並びは縦、といった具合です。切り替えは右パネルの矢印アイコンで行い、キーボードでも変更できます。どちらか迷ったら、実装したときにどう積まれるかを想像してください。画面の幅が狭くなったときに上下に積まれるものは縦、横に並び続けるものは横です。

間隔は、要素と要素の間の距離です。ここで大切なのは、数値を揃えることです。8の倍数で設計する考え方が広く使われており、4、8、12、16、24、32、40 といった値から選ぶと全体が整います。8の倍数に揃える理由は美しさだけでなく、実装側が値を覚えやすく、確認の手間が減ることにあります。間隔の欄に「auto」と入力すると、要素を両端に押し広げる配置になります。ヘッダーの左にロゴ、右にメニューを置きたいときは、この設定が最短です。

余白は、フレームの内側の空きです。上下左右を一括で指定することも、個別に指定することもできます。個別指定に切り替えるアイコンを押すと、上、右、下、左の4つの欄が現れます。カードの中身は上下を24px、左右を20pxにするといった非対称の指定は頻繁に使います。ここを一括のままにしておくと、どうしても窮屈になります。

配置は、要素をフレームのどこに寄せるかです。9つのマスが並んだ小さな図をクリックして指定します。方向が横のときは上下の寄せ方が効き、縦のときは左右の寄せ方が効きます。中央に見せたいのに左に寄っているときは、この設定を見てください。多くの人がここを見落として、要素に手でマージンを足してしまいます。手でマージンを足した瞬間に、オートレイアウトの利点が消えます。

4つの設定を覚えたら、ボタンを1つ作ってみてください。文字を置き、Shift と A、方向を横、間隔を8、余白を上下12と左右20、配置を中央。これだけで、文字の長さに応じて幅が変わるボタンが完成します。この1個が作れたら、画面全体も同じ考え方で組めます。

サイズ変更の3つのモードを理解する

ここがオートレイアウトで最も混乱する箇所です。そして最も重要な箇所でもあります。要素やフレームの幅と高さには、3つの振る舞いを指定できます。

固定は、指定した数値のまま変わりません。幅を320pxと決めたら、中身が増えても320pxです。中身が入りきらない場合は、はみ出すか折り返します。画像の枠や、幅を決め打ちしたいサイドバーに使います。

内包（hug contents）は、中身に合わせて縮みます。文字が短くなればフレームも狭くなり、長くなれば広がります。ボタン、タグ、バッジのように「中身の分だけの大きさでいい」ものはすべてこれです。オートレイアウトを適用したフレームだけが選べるモードで、これを知らないとボタンの幅を毎回手で調整することになります。

拡大（fill container）は、親のフレームの空いている分を埋めます。入力欄を画面幅いっぱいに広げたいとき、カードを3つ横に並べて均等に分けたいときに使います。親がオートレイアウトのときだけ選べます。

実務での組み合わせ方を具体的に書きます。カードを3枚横に並べる場合、親フレームは方向を横、幅は固定または拡大。子のカード3枚はすべて幅を拡大にする。すると、親の幅が変わったときに3枚が均等に伸縮します。カードの高さは内包にしておけば、中の文字量が一番多いカードに合わせて揃います。逆に、カードの幅を固定にしてしまうと、親の幅を変えたときに右側が余ります。

もう1つ覚えておきたいのが、テキストの扱いです。テキストレイヤーの幅を拡大にすると、指定した幅で折り返します。内包のままにすると、折り返さずに横に伸び続けます。長い説明文が1行で延々と伸びてしまうときは、ここが内包になっています。この設定ひとつで、レイアウトが壊れたように見えるため、最初に確認する場所として覚えておいてください。

ネストが深くなると、どの階層のサイズ設定が効いているのか分からなくなります。そのときは、いったん一番外側から順に、親、子、孫と確認していく。これは遠回りに見えて、実は最短の切り分け方です。私は以前、孫の階層だけを何度も触って1時間を溶かし、原因が親の幅の固定設定だったという失敗をしました。外側から見る、という順番だけは守ったほうがよいと思います。

入れ子（ネスト）で画面全体を組み立てる

実際の画面は、オートレイアウトを何重かに重ねて作ります。考え方は単純で、「まとまりごとに包んでいく」だけです。

たとえば商品カードを作るとします。一番内側は、価格と単位を横に並べたまとまり。その上に、商品名と説明文と価格のまとまりを縦に並べたもの。さらにその上に、画像と文字のまとまりを縦に並べたもの。これで1枚のカードになります。そしてカードを3枚横に並べるフレームを作り、それをページ全体のフレームに入れる。階層は4段から5段になります。

ネストを作るときのコツは、先に一番小さいまとまりから作ることです。外側の枠を先に作って中に詰めていくと、途中で「このまとまりを1つ包み忘れた」という事態になり、作り直しが発生します。小さいまとまりを作って名前を付け、それを選んでさらに包む。この積み上げ方なら迷いません。

階層が増えると、選択が難しくなります。クリックすると一番外側のフレームが選ばれてしまうため、目的の要素までたどり着けません。ここで使うのが、Command（WindowsではCtrl）を押しながらのクリックです。これで最も内側の要素を直接選べます。逆に、選択している状態から Shift と Enter で親の階層へ上がれます。この2つの操作を覚えるだけで、作業速度がはっきり変わります。

同じまとまりを何度も使う場合は、コンポーネント化します。ボタン、入力欄、カードといった繰り返し使う部品をコンポーネントにしておくと、1箇所直せば全部に反映されます。オートレイアウトとコンポーネントは、組み合わせたときに真価が出る機能です。公式のガイドでも、部品の差し替えを前提にした作り方が推奨されています。

インスタンスにアイコンを追加するには、不透明度0%のプレースホルダーアイコンをメインコンポーネントに追加することをお勧めします。その後、ライブラリ内の別のコンポーネントのアイコンと交換できます。出典: help.figma.com

透明のプレースホルダーを仕込んでおくという発想は、慣れるまで思いつきません。アイコンがある場合とない場合でボタンの幅が変わってしまう問題を、綺麗に解決してくれます。

応用機能で実務の細かい要求に応える

基本を押さえたら、細かい要求に応える機能を3つ覚えておくと便利です。

1つ目は、絶対位置（オートレイアウトを無視）です。オートレイアウトの中に置いた要素を、並びから外して自由な位置に置けます。バッジをカードの右上に重ねる、閉じるボタンを枠の右上隅に固定する、といった用途です。要素を選んで、右パネルの絶対位置のアイコンを押すだけで切り替わります。これを知らないと、重ねたい要素のためにオートレイアウトを解除してしまい、せっかくの自動追従を失います。

2つ目は、最小幅と最大幅の指定です。幅を拡大に設定した要素に、それ以上狭くならない値、それ以上広がらない値を与えられます。本文の読みやすさを保つために最大幅を640pxに制限する、といった使い方ができます。以前はこの指定ができず、要素を二重に包むなどの工夫が必要でした。

3つ目は、折り返しです。方向を横に設定したフレームで折り返しを有効にすると、幅に入りきらない要素が次の行に送られます。タグの一覧や、商品カードの並びに使います。ただし、折り返しには制約があり、行ごとに高さが揃わない場合の挙動には癖があります。ここは実際に試して確認するのが早いです。

レスポンシブの扱いについては、SNS上でも情報交換が活発な領域です。

Auto Layout のレスポンシブ対応、画面右上のボタンでよしなにできるっぽい出典: note.com

ただし、正直に書いておきます。Figmaのオートレイアウトは、実装のようなレスポンシブを完全に再現するものではありません。画面幅に応じて段組みが2列から1列へ変わる、といった挙動は、現在も別のフレームを作って表現するのが確実です。この点を知らずに「Figmaで全部再現できるはずだ」と粘ると時間を失います。

現時点でできないことを先に知っておく

できることだけを並べると、詰まったときに「自分の操作が悪いのだ」と思い込んでしまいます。リスクは正直に書いておきます。オートレイアウトには、仕様として不可能な領域があります。

まず、マイナスの間隔は指定できません。アイコンを少しだけ重ねて並べる、いわゆる重なり表現は、間隔の数値では作れません。これをやりたい場合は、重ねる側の要素を絶対位置に切り替えるか、要素の余白を負の値に見せる工夫で代替します。

次に、実装と同じレスポンシブの再現はできません。画面幅が一定を下回ったときに3列から1列へ切り替わる、といった条件分岐は表現できません。実務では、画面幅ごとに別のフレームを作り、それぞれオートレイアウトで組んで並べます。手間はかかりますが、実装側に渡す情報としてはこのほうが正確です。

そして、一定の幅まで伸びたら折り返すという、最大幅と折り返しを組み合わせた複合的な挙動も、思ったとおりには作れない場合があります。最大幅の指定と折り返しは個別には使えますが、組み合わせたときの結果は試して確認する必要があります。

代替手段の考え方を1つ示します。オートレイアウトで表現しきれないときは、その部分だけを切り出して、注記を添えた別のフレームで見せる。「幅が768px未満のときはこの並びになる」と文字で書いたフレームを横に置くだけで、実装側の疑問は解消します。ツールの限界を工夫で埋めようと粘るより、言葉で補うほうが速く、そして誤解が少ないです。

ボタンとカードを実際に作って手を動かす

読むだけでは定着しません。10分で終わる練習を2つ用意しました。Figmaを開いて、そのまま進めてください。

1つ目はボタンです。テキストツールで「確認画面へ進む」と打ちます。そのテキストを選んで Shift と A。方向を横、間隔を8、余白を上下12と左右20、配置を中央、幅と高さはどちらも内包。塗りを付け、角を丸めます。ここでテキストを「送信」に書き換えてください。ボタンの幅が自動で縮んだら成功です。次に、テキストの前に小さな四角を置いてアイコンに見立て、ボタンの中に入れます。四角とテキストの間が8px空いた状態で並べば、間隔の設定が効いています。

2つ目はカードです。まず画像の代わりの長方形を1つ、幅を拡大、高さを固定で180px。その下に見出しのテキスト、説明文のテキスト、価格のテキストを縦に並べ、この3つを選んで Shift と A。方向を縦、間隔を8、余白は0、幅は拡大。これで文字のまとまりができます。次に、長方形と文字のまとまりの2つを選んで Shift と A。方向を縦、間隔を16、余白を20、幅を固定で320px、高さを内包。これで1枚のカードです。

最後に、このカードを Command と D で2回複製し、3枚を選んで Shift と A。方向を横、間隔を24、幅は内包。そのうえで、3枚それぞれの幅を固定から拡大に変え、外側のフレームの幅を固定で1,080pxにしてください。外側の幅を1,200pxに広げると、3枚が均等に伸びます。ここまで動いたら、基本は理解できています。

この練習で作ったカードは、そのままコンポーネントにしておくとよいです。Command と Option と K で登録すれば、次の画面から呼び出して使えます。私も最初の頃、毎回カードを作り直していて、5画面目で「これは無駄だ」とようやく気づきました。部品として登録する習慣は、早く身につけたほうが得です。

つまずきやすい点と時間を節約するショートカット

よくある詰まりを先に挙げておきます。

要素が縦一列に潰れて見えるときは、方向の設定が縦になっているか、要素の幅が拡大になっていて親の幅が狭いかのどちらかです。まず方向を確認してください。

余白が意図した値にならないときは、要素自体に手でマージンを足していないか確認します。オートレイアウトを使う場合、要素個別のマージンは使いません。すべて間隔と余白で表現します。

要素を動かそうとすると順番が入れ替わってしまうときは、それが正しい挙動です。オートレイアウトの中ではドラッグで並び順を変える操作になります。位置を自由に動かしたいなら絶対位置に切り替えます。

高さが中身に合わないときは、高さの設定が固定になっています。内包に変えてください。逆に、中身がなくても最低限の高さを保ちたい場合は、高さを固定にするか最小高さを指定します。

覚えておくと効くショートカットを整理します。オートレイアウトの追加は Shift と A、内側の要素を直接選ぶのは Command を押しながらクリック、親へ上がるのは Shift と Enter、コンポーネント化は Command と Option と K、複製は Command と D。この5つだけで、マウスに戻る回数が大幅に減ります。

そして最大の時短は、命名規則を決めることです。フレームの名前を「カード」「カード＿画像」「カード＿本文」のように階層が分かる形で付けておく。私は名前を付けずに進めた画面を3か月後に修正する仕事を受けたことがあり、自分が作ったファイルなのに構造を読み解くのに半日かかりました。あの経験以来、名前を付ける作業は後回しにしないと決めています。

実務での使い方と、この技能が仕事につながるところ

オートレイアウトを使えることは、単に作業が速くなるだけの話ではありません。実装する人との会話が変わります。

座標を手で置いた画面を渡すと、実装側は余白の数値をひとつずつ測ることになります。オートレイアウトで組んだ画面なら、間隔と余白の値が設定として明示されているため、測る作業が消えます。この差は、開発の見積もり時間に直結します。20年この市場を見てきた立場から言えば、継続して依頼が来るデザイナーは、見た目が上手い人よりも「渡したあとに質問が来ない人」です。オートレイアウトで組む習慣は、その評価に直接効きます。

運営者として見てきた限りでは、長く仕事が続く人は、単発の制作物を納品して終わりにしていません。画面の部品をコンポーネントとして整理し、次の依頼のときに使い回せる状態にして渡している。すると発注側は「またこの人に頼めば早い」と考えます。この関係が作れると、価格の交渉をしなくても単価が上がっていきます。逆に、毎回ゼロから作る人は、毎回同じ時間をかけて同じ金額で終わります。

報酬の受け取り方にも触れておきます。仲介を通す取引では、契約金額から手数料が引かれます。年間100万円の仕事で手数料が15%なら、15万円が消えます。中間マージンが乗らない直接の取引では、依頼する側は同じ予算でより多くを頼めて、受ける側の手取りは厚くなります。手数料0%という条件の価値は、金額の大小ではなく、同じ働きに対して手元に残る比率が違うという質の話です。

仕事の広がりを知るには、募集されている職務内容を眺めておくのが手っ取り早いです。画面設計から実装側まで踏み込む仕事の全体像はアプリケーション開発のお仕事に、業務の流れを整理して画面や資料に落とし込む仕事はAIコンサル・業務活用支援のお仕事に、広告やSNSの運用物を継続的に作る仕事はAI・マーケティング・セキュリティのお仕事にまとまっています。作る側の職種としての報酬水準を俯瞰したいならソフトウェア作成者の年収・単価相場が参考になります。

ツール選びで迷っている方は、現在の主要な選択肢の違いを整理したAdobe XDとFigma徹底比較｜デザイナーが選ぶべきツールはどっち？【2026年版】を読んでおくと、なぜ今この機能を学ぶ価値が高いのかが分かります。デザインと並行して文章の仕事も受けるなら、単価の上げ方を整理したWebライターが文字単価を上げる方法｜1円→5円にステップアップする戦略【2026年版】の考え方が応用できます。

オートレイアウトの学習は、覚える量が少なく、効果が出るまでが速い領域です。方向、間隔、余白、配置、そしてサイズ変更の3モード。この5項目を押さえて、ボタン1個、カード1枚、画面1枚の順に作ってみてください。1週間で、手で座標を置いていた頃には戻れなくなります。

よくある質問

Q. Figmaのオートレイアウトは無料プランでも使えますか？

使えます。オートレイアウトは基本機能のため、無料プランでも制限なく利用できます。有料プランが必要になるのは、共有ライブラリやバージョン履歴の長期保存、権限管理といった別の機能です。学習の段階で費用を心配する必要はありません。

Q. オートレイアウトを追加するショートカットは何ですか？

並べたい要素を複数選択して Shift と A を同時に押します。選択した要素を包む新しいフレームが作られ、そこにオートレイアウトが設定されます。あわせて、内側の要素を直接選ぶ Command を押しながらのクリックと、親の階層へ上がる Shift と Enter も覚えておくと作業が速くなります。