Figmaのオートレイアウトとは

Figmaを使い始めると、かなり早い段階で出てくるのが「オートレイアウト」という機能です。

最初は少し難しく感じるかもしれません。

「普通に四角やテキストを並べるだけじゃダメなの？」

「オートレイアウトを使うと何が便利なの？」

「どこに使えばいいの？」

このあたりでつまずく人は多いと思います。

結論から言うと、Figmaのオートレイアウトは、要素同士の並び・余白・サイズ調整を自動で管理しやすくする機能です。

もっと簡単に言えば、デザインのパーツを“きれいに並べて、あとから修正しやすくするための仕組み”です。

オートレイアウトとは

Figmaのオートレイアウトは、フレームの中にある要素を一定のルールに沿って自動で並べる機能です。

たとえば、ボタンを作るときに、

テキストの左右に余白をつける

テキストが長くなったらボタンの幅も広がる

複数のボタンを横並びにする

カードを縦に等間隔で並べる

要素を追加しても自動で下にずれる

このような調整をしやすくなります。

Figma公式でも、オートレイアウトはコンテンツの変更に合わせてデザインを動的に調整し、レスポンシブなデザイン作成に役立つ機能として説明されています。

なぜオートレイアウトが必要なのか

オートレイアウトを使わなくても、見た目だけならデザインは作れます。

ただし、問題は「修正が入ったとき」です。

たとえば、ボタンの文字を「詳しく見る」から「無料体験に申し込む」に変えたとします。

オートレイアウトを使っていない場合、文字が長くなった分、自分でボタンの幅を広げたり、左右の余白を調整したりする必要があります。

一方、オートレイアウトを使っていれば、テキストの長さに合わせてボタンのサイズを自動で調整できます。

つまり、オートレイアウトは「最初にきれいに作るため」だけではなく、「あとから崩れにくくするため」に使う機能です。

ここを理解していないと、Figma上ではきれいに見えていても、少し修正しただけでレイアウトが崩れるデータになってしまいます。

オートレイアウトでできること

オートレイアウトで主にできることは、以下のような内容です。

1. 要素を縦や横にきれいに並べられる

オートレイアウトでは、要素を縦方向または横方向に並べることができます。

たとえば、カード内の

見出し

説明文

ボタン

を縦に並べたり、ヘッダー内のナビゲーションを横に並べたりできます。

Figmaでは縦方向のフローはy軸に沿って、横方向のフローはx軸に沿って要素を配置する仕組みになっています。

2. 余白をルール化できる

オートレイアウトを使うと、要素同士の間隔を数値で管理できます。

たとえば、

見出しと本文の間は16px

カード内の余白は24px

ボタン内の左右余白は20px

というように、余白を感覚ではなくルールとして設定できます。

これがかなり重要です。

デザインが素人っぽく見える原因の多くは、色やフォントだけではなく、余白がバラバラなことです。

オートレイアウトを使うと、余白のズレを減らせるので、デザイン全体に統一感が出やすくなります。

3. 中身に合わせてサイズを変えられる

オートレイアウトでは、要素のサイズを中身に合わせて自動調整できます。

たとえば、ボタンのテキストが長くなったとき、ボタンの幅も一緒に広がるようにできます。

逆に、親要素の幅に合わせて中の要素を広げることもできます。

これは、Webデザインにかなり近い考え方です。

HTML/CSSでいうと、display: flex; や gap、padding に近い感覚です。

Figmaでオートレイアウトに慣れておくと、実装時のレイアウト設計も考えやすくなります。

4. 要素を追加・削除しても崩れにくい

たとえば、3つのカードを縦に並べているデザインがあるとします。

あとからカードを1つ追加した場合、手作業で位置を調整していると、下の要素を全部ずらす必要があります。

しかし、オートレイアウトを使っていれば、追加したカードに合わせて他の要素も自動で移動します。

これは、ブログ一覧、FAQ、料金表、スタッフ紹介、施工実績など、同じ形の要素が並ぶセクションでかなり便利です。

オートレイアウトを使うべき場所

初心者がまず使うべき場所は、以下です。

ボタン

一番わかりやすいのはボタンです。

ボタンは、

テキスト

左右の余白

上下の余白

アイコン

矢印

などを含むことが多いため、オートレイアウトとの相性が非常に良いです。

特に、テキストが変わってもボタンの余白を一定に保てるのが大きなメリットです。

カード

サービス紹介、実績紹介、お客様の声、ブログ一覧などのカードにも向いています。

カード内の見出し、本文、画像、ボタンなどをオートレイアウトで組んでおくと、情報量が変わっても整えやすくなります。

ヘッダーやナビゲーション

メニュー項目を横に並べるヘッダーにも使えます。

各メニューの間隔を一定にできるので、手作業で並べるよりもズレにくくなります。

FAQ

質問と回答を縦に並べるFAQも、オートレイアウトを使うと管理しやすくなります。

質問項目を追加したり、回答文が長くなったりしても、レイアウトが崩れにくくなります。

オートレイアウトで初心者がつまずきやすいポイント

オートレイアウトは便利ですが、最初は少し混乱しやすいです。

特につまずきやすいのは、以下の3つです。

1. フレームとグループの違いが曖昧

オートレイアウトは基本的にフレームに適用します。

ただグループ化するだけでは、余白や並びを柔軟に管理できません。

「一つのかたまりにしたい」だけならグループでもできますが、「中身に合わせてサイズや余白を管理したい」ならフレーム＋オートレイアウトを使うべきです。

ここを間違えると、後から修正しにくいデータになります。

2. Hug contentsとFill containerがわかりにくい

Figmaのオートレイアウトでは、サイズ設定として「中身に合わせる」「親に合わせて広がる」といった考え方があります。

ざっくり言うと、

Hug contents：中身に合わせてサイズが決まる

Fill container：親の幅や高さに合わせて広がる

Fixed：固定サイズにする

というイメージです。

最初は全部を完璧に理解しようとしなくて大丈夫です。

まずはボタンで「Hug contents」を使って、テキストに合わせてボタンが伸びる感覚をつかむと理解しやすいです。

3. 何でもオートレイアウトにしようとする

これも初心者がやりがちなミスです。

オートレイアウトは便利ですが、すべてに使えばいいわけではありません。

装飾パーツや自由に配置したい背景要素まで無理にオートレイアウトに入れると、逆に扱いづらくなります。

大事なのは、「並び」「余白」「サイズ変化」を管理したい部分に使うことです。

オートレイアウトを使うとデザインが上達する理由

オートレイアウトを使うと、ただ見た目を作るだけではなく、構造を考えるようになります。

たとえば、

この見出しと本文の余白は何pxか

カード同士の間隔は統一されているか

テキストが増えたらどうなるか

スマホ幅になったらどう並ぶか

実装するときに再現しやすいか

こういう視点が自然に入ってきます。

つまり、オートレイアウトは単なる便利機能ではなく、Webデザインを構造的に考えるための練習にもなります。

特にWeb制作をしている人にとっては、Figma上のデザインと実装のズレを減らすためにも、かなり重要な機能です。

最初に覚えるべき使い方

最初から複雑なレイアウトを組む必要はありません。

まずは以下の順番で練習するといいです。

テキストを選択する

Shift + Aでオートレイアウトを適用する

上下左右のpaddingを設定する

背景色と角丸をつけてボタンにする

テキストを変更して、ボタン幅が自動で変わるか確認する

Figma公式でも、オートレイアウトはレイヤーを選択してShift + A、または右サイドバーから追加できると案内されています。

まずはボタンからで十分です。

ボタンで理解できたら、次にカード、FAQ、ヘッダー、セクション全体へと広げていくと、かなり使いやすくなります。

まとめ

Figmaのオートレイアウトとは、要素の並び・余白・サイズ調整を自動で管理しやすくする機能です。

見た目を整えるだけでなく、あとから修正しやすく、崩れにくいデザインデータを作るために役立ちます。

特に、ボタン、カード、FAQ、ヘッダー、ブログ一覧など、同じルールで要素を並べる部分では積極的に使うべきです。

最初は難しく感じるかもしれませんが、Webデザインをするなら避けて通れない機能です。

逆に言えば、オートレイアウトを使えるようになると、Figmaの作業効率もデザインの再現性もかなり上がります。

まずはボタンからでいいので、実際に触りながら「中身に合わせて伸びる」「余白が自動で保たれる」という感覚をつかんでみてください。