あやね
Figmaのオートレイアウトは、要素の並び方、間隔、余白をルールとして設定する機能です。ボタンの文字を変えたり、カードを追加したりしたときの配置調整に役立ちます。
チームで画面を確認する場合は、UIデザインをチームでレビューする方法と合わせて、変更理由と確認条件を共有しておくと判断がぶれません。
手動で配置した画面では、一つの要素を変えるたびに周囲も動かす必要があります。オートレイアウトで構造を決めておけば、内容が変わっても設定に沿って配置が調整されます。
この記事では、方向、パディング、サイズ変更などの基本設定と、実際の画面で使い分ける方法を紹介します。
1.Figmaのオートレイアウトとは？
オートレイアウトはフレームに適用する機能です。子要素を縦、横、グリッドなどの流れに配置し、文字量や要素数の変化に合わせてレイアウトを調整できます。
例えば、ボタンを文字の長さに合わせて広げたり、カードの追加に応じて一覧を伸ばしたりできます。親と子のサイズ変更の設定を組み合わせて、画面幅に対応する構成を作ります。
使い始めは、ボタンや入力欄など小さな部品を題材にすると設定の違いを理解しやすくなります。短い文字だけでなく、長いラベルや複数行の説明も入れてみましょう。
主に、次のような作業に役立ちます。
-
文字や画像の量が変わる部品のサイズを調整する。
-
画面幅に合わせて要素の並び方や占める幅を変える。
-
余白や間隔をそろえ、手動で位置を直す作業を減らす。
2. オートレイアウトを使う15のポイント
まず方向と余白を決め、次に親と子のサイズ変更を設定します。表示が崩れたら、どの要素の設定が原因か順に見ていきましょう。
① 追加と解除の操作を覚える
頻繁に使う操作から覚えると、構造を作る作業が速くなります。オートレイアウトを解除する操作と、フレーム自体を解除する操作は区別しましょう。
-
追加する：対象のレイヤーを選択してShift + Aを押します。
-
解除する：対象のフレームを選択し、右パネルでオートレイアウトを削除します。
-
解除後は通常のフレームになり、要素の位置を個別に調整できます。
-
設定を再利用したい部品は、コンポーネントとして管理します。
-
複製した部品に長い文字を入れ、サイズ変更の結果を確認します。
-
よく使う部品をライブラリにまとめると、同じ設定で画面を追加できます。
② 並べる方向を決める
フレーム内で要素を縦に積むか、横に並べるかを選びます。縦のカード一覧と横のボタン群では、適した方向が異なります。
グリッドや折り返しも、画面の構造に合わせて選びます。要素の並び順が読み順と一致しているか、狭い画面でも確認しましょう。
③ 内側の余白を調整する
パディングは、フレームの内側と子要素の間に設ける余白です。ボタンなら文字の周囲、カードなら画像や本文の周囲にあたります。
上下左右を同じ値にするか、辺ごとに分けるかを選びます。まず数値で基準を設定し、実際の文字量と並べたときの見た目を確認しましょう。
④ 親と子のサイズ変更を分けて設定する
幅と高さには、それぞれサイズ変更のルールを設定できます。どの要素の大きさを基準にするかによって使い分けます。
-
Fixed（固定）: 選択したレイヤーの幅または高さを指定値に保ちます。コンテンツの長さに合わせて自動で広がる設定ではありません。
-
Hug contents（内容に合わせる）: オートレイアウトのフレームが、子要素とパディングを収める大きさに調整されます。
-
Fill container（コンテナを埋める）: オートレイアウト内の子レイヤーが、親フレームの利用可能な幅または高さを占めるように伸びます。親フレーム自体を拡大する設定ではありません。
⑤レイアウト内のアイテムの整列
右パネルの整列設定で、フレーム内の子要素をどの位置にそろえるか選びます。上端、中央、下端など、内容の関係が分かる位置を選びましょう。
間隔を固定すると、要素の間に指定した距離を保てます。並び全体をどこへ寄せるかも合わせて設定します。
利用可能な領域に合わせて間隔を広げたい場合は、自動の間隔を使います。フレームを広げたり狭めたりして、余白が意図した場所にできるか確認しましょう。
⑥ 通常の並びから外して配置する
閉じるボタンや通知バッジを通常の並び順とは別の位置に置く場合は、「オートレイアウトを無視」（旧名：絶対位置）を使います。対象は親フレーム内に残りながら通常の配置フローから外れ、他の子要素の位置に影響しません。親のサイズ変更への対応は制約で設定します。
右パネルで「オートレイアウトを無視」を有効にした後、親フレームに対する制約を設定します。右上の通知バッジなら、右端と上端からの位置を保つ構成にできます。
⑦ 要素間の間隔をそろえる
要素と要素の間の距離は、パディングとは別に設定します。カード内の見出しと本文、一覧のカード同士など、関係に応じて間隔を分けましょう。
数値を変えながら、長い文字列でも窮屈にならないかを確認します。要素を重ねる場合は、重なり順と操作する領域も一緒に調整してください。
⑧ 並び順を変更する
フレーム内の要素をドラッグすると、並び順を変更できます。画面の見た目だけでなく、情報を読む順序も意識して配置しましょう。
- レイヤーパネルで対象を確認し、必要な位置へ移動します。
- 移動後に間隔とサイズ変更の設定が保たれているか確認します。
⑨ テキストの基準線をそろえる
文字サイズが異なるテキストを横に並べる場合、ボックスの中央ではなく文字の基準線をそろえると読みやすくなります。
テキストのベースラインをそろえる設定を使い、実際のフォントで見た目を確認します。アイコンを添える場合は、文字との位置関係も合わせて調整しましょう。
⑩ 長いテキストの表示を決める
ラベルや説明が長くなったときに、折り返すか、省略するかを決めます。重要な情報を隠さず、画面の用途に合う表示を選びましょう。
テキストの省略設定を使う場合は、最大行数や表示幅も確認します。省略された内容を別の場所で読めるかも検討してください。
⑪ 線の太さとレイアウトの関係を確認する
枠線のあるカードや入力欄では、線の太さが余白や全体サイズにどう影響するかを確認します。線をレイアウト計算に含める設定も、隣の部品と並べて見比べましょう。
⑫ 間隔を自動調整する
先頭と末尾をフレームの両端に配置したい場合は、間隔を自動に設定します。幅を変えて、途中の要素が重なったり離れすぎたりしないか確認してください。
⑬ 入れ子の構造をたどる
複数のフレームが入れ子になっているときは、親と子を区別して選択します。キャンバス上で選びにくい要素は、レイヤーパネルで階層を確認すると見つけやすくなります。
-
親フレームと、その中にある子要素の名前を確認します。
-
調整したい余白が親のパディングなのか、要素間の間隔なのかを切り分けます。
-
一つの設定を変え、影響する範囲を確認します。
-
目的の部品が分かる名前を付けて、次の編集でも探しやすくします。
⑭ 要素を置く階層を確認する
ドラッグした要素がどのフレームの子になったかによって、サイズや配置の動作が変わります。意図しない場所へ入った場合は、レイヤーパネルで親を確認しましょう。
装飾を通常の並びから外したい場合は「オートレイアウトを無視」を使います。単にフレームの外へ動かすことと、配置フローから外すことは区別してください。
⑮ 重なりのある部品を設計する
通知バッジや重なるアバターでは、通常の並びと重ねて置く要素を分けて考えます。親フレームのサイズを変更し、重なる位置と表示順が保たれるかを確認しましょう。
3.さらに踏み込んだヒント
3.1 必要な部分に適用する
一定の間隔で並ぶ要素にはオートレイアウト、親に対する位置を保つ要素には制約が役立ちます。画面全体を一つの方式に統一せず、部品の構造に合わせて組み合わせましょう。
3.2 コンポーネントと組み合わせる
繰り返し使うボタンやカードにオートレイアウトを設定し、コンポーネントにします。インスタンスに長い文字や別の画像を入れても使えるように、サイズ変更と余白を調整しましょう。
4. Pixsoでレイアウトを組む
Pixsoでも、要素の間隔、余白、サイズ変更を設定して画面を作れます。同じボタンやカードを題材にすると、普段の制作に必要な機能を比較しやすくなります。
FigmaやSketchの対応ファイルを取り込んで、画面を編集しながらチームで検討できます。必要なファイル数や共有機能に合わせて、料金ページからプランを選びましょう。
実務で崩れを防ぐ確認手順
設定を終えたら、短いラベルだけで判断せず、実際の利用条件に近い内容で確認します。まずボタンの文言を長くし、次にカードを追加して一覧を伸ばします。最後に狭い画面幅へ切り替え、折り返し・省略・スクロールのどれを採用するかを決めてください。
- 構造：親フレーム、子レイヤー、通常の並びから外す要素を分ける。
- サイズ：固定・内容に合わせる・コンテナを埋めるを幅と高さごとに確認する。
- 状態：空、長文、エラー、読み込み中の表示でも余白が保たれるか試す。
- 共有：判断した理由をコメントに残し、同じ部品を使う画面へ反映する。
レビュー対象を一つのファイルにまとめる場合は、前段で案内したチームレビューのページを参照し、変更点と確認条件を同じ場所で共有すると、設定値だけを伝えるより認識をそろえやすくなります。
まとめ
まず、文字量が変わるボタンかカードを一つ作りましょう。親と子のサイズ変更、余白、間隔を設定し、長い文字や狭い幅でも構造を保てるか試すことが、使いやすい部品を作る近道です。
