Auto Layoutとは？初心者向け完全ガイド｜Figmaで効率よくデザインするための基本
Figmaを使っていると、よく出てくる言葉のひとつに「Auto Layout（オートレイアウト）」があります。
Figma初心者の方の中には、
「Auto Layoutって何？」
「普通に図形やテキストを並べるだけではダメなの？」
「設定項目が多くて難しそう…」
と感じている方も多いのではないでしょうか。
Auto Layoutは、最初こそ少し難しく感じますが、Figmaで効率よくデザインするためには非常に重要な機能です。
特に、ボタン、カード、メニュー、フォーム、リスト、
ヘッダーなど、Webデザインでよく使うパーツを作るときにとても役立ちます。
Auto Layoutを使えるようになると、文字数が変わってもボタン幅が自動で調整されたり、
要素を追加しても間隔がきれいに保たれたり、レスポンシブに対応しやすいデザインを作れるようになります。
この記事では、Figma初心者の方に向けて、Auto Layoutとは何か、どんな場面で使うのか、
基本的な使い方やメリット、よくある失敗までわかりやすく解説します。
Auto Layoutとは？
Auto Layoutとは、簡単に言うと「要素の並びや余白を自動で調整してくれる機能」です。
通常、Figmaでテキストやボタン、画像などを配置する場合、自分で位置や余白を調整します。
例えば、ボタンを作る場合、
- 長方形を作る
- テキストを置く
- 中央に揃える
- 余白を調整する
- 文字が増えたらボタン幅を広げる
という作業が必要になります。
しかし、Auto Layoutを使えば、文字数が増えてもボタンの幅が自動で広がります。
例えば、
「送信」
という短い文字から、
「無料で資料請求する」
という長い文字に変更しても、Auto Layoutを設定しておけば、
左右の余白を保ったままボタンサイズが自動で調整されます。
これにより、毎回手作業でサイズや余白を直す必要がなくなります。
Auto Layoutを使うべき理由
Auto Layoutを使うべき一番の理由は、デザインの修正に強くなるからです。
Web制作では、最初に作ったデザインがそのまま完成することはほとんどありません。
実際には、
「ボタンの文言を変えてください」
「項目を1つ追加してください」
「カードの文章量が増えました」
「スマホ表示も考えてください」
「余白を全体的に揃えてください」
といった修正がよく発生します。
Auto Layoutを使っていない場合、こうした変更のたびに手作業で要素を動かす必要があります。
一方で、Auto Layoutを使っていれば、要素の追加やテキスト変更に合わせてレイアウトが自動で調整されます。
つまり、修正にかかる時間を大幅に減らせるのです。
Auto Layoutでできること
Auto Layoutでは、主に以下のようなことができます。
要素を縦または横に並べる
Auto Layoutを使うと、複数の要素を縦方向または横方向にきれいに並べることができます。
例えば、横並びのナビゲーションメニューや、縦に並ぶカードリストなどに使えます。
手作業で配置すると、少しずつズレてしまうことがありますが、
Auto Layoutなら一定のルールに沿って配置されるため、見た目が安定します。
要素同士の間隔を設定できる
Auto Layoutでは、要素と要素の間隔を数値で指定できます。
例えば、
- メニュー同士の間隔を24px
- カード同士の間隔を32px
- アイコンとテキストの間隔を8px
のように設定できます。
これにより、デザイン全体の余白に統一感が出ます。
Webデザインでは、余白の統一感がとても重要です。
余白がバラバラだと、見た目が雑に見えてしまいます。
Auto Layoutを使うことで、余白のルールを保ちやすくなります。
内側の余白を設定できる
Auto Layoutでは、パディングと呼ばれる内側の余白も設定できます。
例えば、ボタンの場合、
- 上下：12px
- 左右：24px
のように設定すると、文字の周りにきれいな余白を持ったボタンを作れます。
テキストが変わっても、この余白は維持されます。
そのため、ボタンやラベル、カードなどのパーツ作成にとても便利です。
中央揃えや左揃えができる
Auto Layoutでは、要素の揃え方も設定できます。
例えば、
- 左揃え
- 中央揃え
- 右揃え
- 上揃え
- 下揃え
などを指定できます。
これにより、要素を手作業で微調整しなくても、きれいに整列させることができます。
Auto Layoutが特に便利なパーツ
Auto Layoutは、さまざまなデザインパーツで使えますが、特に便利なのは以下のようなパーツです。
ボタン
Auto Layoutを最初に練習するなら、ボタンがおすすめです。
ボタンは、テキストの長さによって横幅が変わることが多いパーツです。
Auto Layoutを設定しておけば、文言が変わっても左右の余白を保ったまま自然にサイズが変わります。
例えば、
「詳細を見る」
から
「無料でお問い合わせする」
に変更しても、ボタンの形が崩れません。
カードデザイン
ブログ一覧や商品一覧、サービス紹介などでよく使うカードデザインにもAuto Layoutは向いています。
カードの中には、
- 画像
- タイトル
- 説明文
- ボタン
など複数の要素が入ります。
Auto Layoutを使えば、各要素の間隔を一定に保ちながら、文章量の違いにも対応しやすくなります。
メニュー
ヘッダーのナビゲーションやフッターメニューにもAuto Layoutは便利です。
メニュー項目が増えたり減ったりしても、間隔を自動で保てるため、レイアウトが崩れにくくなります。
フォーム
お問い合わせフォームや予約フォームのデザインでもAuto Layoutは活躍します。
ラベル、入力欄、補足テキスト、エラーメッセージなどを整理しやすくなり、見た目も整いやすくなります。
Auto Layoutの基本的な使い方
Auto Layoutの基本的な使い方はとてもシンプルです。
まず、Auto Layoutを適用したい要素を選択します。
次に、右側のパネルからAuto Layoutを追加します。
ショートカットを使う場合は、Macなら「Shift + A」で追加できます。
Auto Layoutを追加すると、選択した要素がフレーム化され、
その中で余白や方向、間隔などを設定できるようになります。
最初は難しく考えず、
- 横に並べたいのか
- 縦に並べたいのか
- 要素同士の間隔は何pxにするのか
- 内側の余白はどれくらいにするのか
この4つを意識するだけで十分です。
初心者がまず覚えるべき設定
Auto Layoutにはいろいろな設定がありますが、初心者のうちはすべて覚える必要はありません。
まずは次の4つを覚えましょう。
方向
方向は、要素を縦に並べるか、横に並べるかを決める設定です。
横並びのボタンやメニューなら横方向。
カード内の画像、見出し、本文、ボタンのように上から下へ並べる場合は縦方向を使います。
間隔
間隔は、要素同士の距離を決める設定です。
例えば、アイコンとテキストの間を8pxにしたり、カード同士の間を24pxにしたりできます。
パディング
パディングは、外枠と中身の間の余白です。
ボタンやカードの内側の余白を整えるときによく使います。
揃え位置
揃え位置は、要素を左に寄せるのか、中央に置くのか、右に寄せるのかを決める設定です。
中央揃えにしたいボタンや、左揃えにしたいカードなど、目的に合わせて使い分けます。
Auto Layoutを使うメリット
Auto Layoutには多くのメリットがあります。
修正が楽になる
一番大きなメリットは、修正が楽になることです。
テキストが増えても、要素を追加しても、Auto Layoutが自動で調整してくれるため、手作業の修正が減ります。
特に、複数ページのWebサイトやLPを制作するときには大きな効果を感じられます。
デザインに統一感が出る
Auto Layoutを使うと、余白や配置を数値で管理できます。
そのため、同じようなパーツを作るときに、毎回同じ余白を保ちやすくなります。
結果として、デザイン全体に統一感が出ます。
コーディングしやすくなる
Auto Layoutで整理されたデザインは、コーダーにとっても見やすいデータになります。
要素の間隔や構造が明確になるため、HTMLやCSSに落とし込みやすくなります。
特に、FlexboxやCSS Gridの考え方に近い部分もあるため、Web制作との相性が良いです。
レスポンシブデザインに強くなる
Auto Layoutを使うと、画面幅やコンテンツ量に応じた柔軟なデザインを作りやすくなります。
スマホ、タブレット、PCなど、複数の画面サイズを考えるWebデザインでは、非常に重要な考え方です。
Auto Layoutとコンポーネントの相性
Auto Layoutは、コンポーネントと組み合わせることでさらに便利になります。
例えば、ボタンをコンポーネント化する場合、Auto Layoutを設定しておけば、
どの文言に変更しても自然な余白を保てます。
また、カードコンポーネントを作る場合も、タイトルや本文の長さが変わっても崩れにくくなります。
実務では、Auto Layoutとコンポーネントをセットで使うことが多いです。
この2つを使えるようになると、Figmaでのデザイン制作がかなり効率化されます。
初心者がやりがちな失敗
Auto Layoutは便利ですが、初心者がつまずきやすいポイントもあります。
何でもAuto Layoutにしてしまう
Auto Layoutは便利ですが、すべての要素に設定すればよいわけではありません。
一度しか使わない装飾や、自由な位置調整が必要なデザインまでAuto Layoutにすると、
逆に扱いにくくなることがあります。
「並び」「余白」「サイズ調整」が必要な場所に使うのがおすすめです。
親と子の関係がわからなくなる
Auto Layoutでは、親フレームと子要素の関係が大切です。
どのフレームにAuto Layoutが設定されているのか、どの要素がその中に入っているのかを理解しないと、
思ったように動かないことがあります。
最初は、ボタンのような小さなパーツから練習すると理解しやすいです。
余白を感覚で設定してしまう
Auto Layoutを使っていても、余白の数値がバラバラだと統一感が出ません。
8px、16px、24px、32pxなど、ある程度ルールを決めておくとデザインが整いやすくなります。
Auto Layoutを学ぶ順番
初心者の方は、次の順番で学ぶと理解しやすいです。
まずはボタンを作ってみましょう。
次に、アイコン付きボタンを作ります。
その次に、カードデザインを作ります。
さらに、カードを複数並べてリストを作ってみます。
最後に、ヘッダーやフォームなど少し複雑なパーツに挑戦するとよいでしょう。
いきなり大きなレイアウトを作ろうとすると難しく感じます。
小さなパーツから少しずつ慣れていくことが大切です。
実務でAuto Layoutを使う場面
実務では、Auto Layoutはかなり多くの場面で使われます。
例えば、LP制作では、ボタン、CTA、カード、FAQ、料金表などに使われます。
コーポレートサイトでは、ヘッダー、フッター、お知らせ一覧、サービス紹介、採用情報などに使われます。
アプリデザインでは、リスト、タブ、メニュー、フォーム、モーダルなどでよく使われます。
特に、同じようなパーツが繰り返し出てくるデザインでは、Auto Layoutを使うことで制作スピードが大きく変わります。
まとめ
Auto Layoutは、Figmaで効率よくデザインするために欠かせない機能です。
最初は設定項目が多くて難しく感じるかもしれませんが、基本はとてもシンプルです。
要素を縦または横に並べる。
間隔を決める。
内側の余白を決める。
揃え位置を決める。
まずはこの4つを意識するだけで、Auto Layoutの基本は十分に理解できます。
Auto Layoutを使えるようになると、ボタンやカード、フォーム、メニューなどを効率よく作れるようになります。
さらに、修正にも強くなり、デザインの統一感も出しやすくなります。
Figma初心者の方は、まずボタン作成からAuto Layoutを練習してみてください。
小さなパーツから慣れていけば、少しずつ複雑なレイアウトにも対応できるようになります。
Figmaを実務で使いたい方にとって、Auto Layoutは必ず覚えておきたい基本機能です。
ぜひ今回の内容を参考に、次のデザイン制作からAuto Layoutを活用してみてください。
