Figmaで作る“崩れないUI”の設計術：Auto Layout完全攻略ガイド

Figmaを使っていて、こんな経験はありませんか？

• Auto Layoutを入れた瞬間、UIが壊れる
• テキストを変えたらボタンが暴れる
• 余白が意図しない方向に増える
• 「Hug / Fill / Fixed」がよく分からない

実はこれ、Auto Layoutの使い方が間違っているのではなく、
“設計の順番”と“考え方”を知らないだけ というケースがほとんどです。

この記事では、

• なぜUIが崩れるのか
• Auto Layoutの正しい設計思考
• 崩れないUIを作るための具体ルール

を、初心者にも分かる言葉で完全攻略 します。

なぜAuto LayoutでUIは崩れるのか？

結論から言うと、原因はほぼこの3つです。

1. 構造を決めずにAuto Layoutをかけている
2. Hug / Fill / Fixedを理解していない
3. 親と子の役割が曖昧

Auto Layoutは「魔法」ではなく、
ルール通りに組めば必ず安定する仕組み です。

逆に言えば、
設計を考えずに使うと100%崩れます。

崩れないUIの基本原則（超重要）

まず、これだけは必ず覚えてください。

Auto Layout設計の3原則

1. UIは必ず「部品単位」で作る
2. 余白はPaddingで管理する
3. サイズはHugを基本に考える

この3つを守るだけで、
Auto Layoutの失敗は激減します。

Step1：Auto Layoutは「小さいUI」から使う

初心者がやりがちな失敗がこれ

画面全体にいきなりAuto Layoutをかける

これはほぼ確実に崩れます。

正解ルート

ボタン → カード → セクション → 画面

Auto Layoutは、
小さいUI → 大きいUI の順で使うのが鉄則です。

Step2：Hug / Fill / Fixed を“役割”で理解する

ここがAuto Layout最大の鬼門です。

Hug contents（基本）

• 中身に合わせてサイズが決まる
• ボタン・タグ・テキストは基本これ

「中身が主役」のUI

Fill container

• 親のサイズいっぱいに広がる
• カード内のテキストエリアなど

「枠に合わせるUI」

Fixed

• サイズを絶対に変えたくないとき
• アイコン・画像など

「サイズ固定UI」

初心者向け黄金ルール

テキスト・ボタン → Hug  
コンテンツエリア → Fill  
アイコン・画像 → Fixed

Step3：PaddingとGapは「数値で設計」する

UIが崩れる人ほど、
余白を「なんとなく」で作っています。

おすすめの余白ルール

• Padding：8 / 12 / 16 / 24
• Gap：8 or 16

※ 8の倍数 を基本にすると整いやすいです。

余白を数値で管理すると、
UIは一気に安定します。

Step4：親と子の役割を明確にする

Auto Layoutでは、
「誰がレイアウトを管理しているか」 が重要です。

悪い例

• 親も子もサイズ指定
• 子が勝手に伸びる

良い例

• 親：並び・余白を管理
• 子：中身だけを管理

レイアウトは親、サイズは子
この役割分担を守りましょう。

Step5：ネスト（入れ子）を怖がらない

「Auto Layoutが複雑になるのが怖い…」
という人も多いですが、実は逆です。

ネストしないUI

→ 無理な設定が増えて崩れる

ネストしたUI

→ 役割が分かれて安定する

例：カードUI

カード（縦Auto Layout）
 ├ 画像
 ├ テキストエリア（縦Auto Layout）
 │   ├ タイトル
 │   └ 説明文
 └ ボタン

ネスト＝整理整頓 です。

Step6：崩れたときの最強リセット術

Auto Layoutが暴れたときは、
慌てずこれを試してください。

即効リセットチェックリスト

• 子要素を一度すべて Hug に戻す
• Padding / Gap を見直す
• 不要なFixedを外す
• Resize to fit（⌘⇧⌥R） を使う

ほとんどの崩れは、これで直ります。

実務で使えるAuto Layout設計テンプレ

ボタン

• テキスト：Hug
• Frame：Auto Layout
• Padding：12 / 16

カード

• 親：縦Auto Layout
• 子：Hug / Fixed / Fill を役割で分ける

リスト

• 行：横Auto Layout
• 親：縦Auto Layout

Auto Layoutが使える人の思考法

上手い人は、こう考えています。

• 「これは伸びる？伸びない？」
• 「余白はどこが管理する？」
• 「このUIは部品として再利用できる？」

Auto Layoutは操作ではなく設計

まとめ｜崩れないUIは“設計”で決まる

Auto Layoutは、

難しい機能
ではなく
UIを安定させるための設計ツール です。

今回のポイントを守れば、

• UIが崩れない
• 修正が怖くない
• 作業スピードが上がる
• 実務でも通用する

そんなFigmaスキルが身につきます。

まず意識する3つだけ

1. 小さいUIからAuto Layout
2. Hugを基本に考える
3. 余白はPaddingで管理

ここから始めてみてください。

#Figma #フィグマ #Figma初心者 #Webデザイン勉強中#UIデザイン #デザイン独学 #AutoLayout #崩れないUI #UI設計 #Figma設計 #デザイン設計 #作業効率化 #時短デザイン #デザイン効率化 #駆け出しデザイナー #今日の積み上げ

Favorite