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

Posted on by

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設計 #デザイン設計 #作業効率化 #時短デザイン #デザイン効率化 #駆け出しデザイナー #今日の積み上げ