インベントリのスロットを20個、座標をちまちま調整しながら手で並べた。翌日「1行あたり5個から6個に変えたい」と言われて、20個ぜんぶ並べ直し——UIの整列を手作業でやっていると、この作業は仕様変更のたびにやってきます。
並べる仕事はUnityに任せましょう。Layout Groupは、親に付けるだけで子のUIを自動整列させるコンポーネントです。アイテムが増えても減っても、行数が変わっても、配置は常に自動で整います。Canvasとアンカーの土台は Canvas入門 を先にどうぞ。
この記事でわかること
- 3種のLayout Groupの使い分け——Horizontal・Vertical・Grid
- Padding・Spacingでレイアウトの寸法を作る
- Content Size Fitter——「内容に合わせて伸びる」パネル
- Layout Elementで個別の例外を作る
- あるあるトラブル——「子を手で動かせない」の正体
- 実践：ScrollView＋Gridでインベントリを組む
3種のLayout Groupと使い分け
Layout Groupは3種類。どの方向に並べたいかで選ぶだけです。
| コンポーネント | 並び方 | 代表的な使いどころ |
|---|---|---|
| Horizontal Layout Group | 横一列 | 画面下のボタンバー、タブ、ハートのHP表示 |
| Vertical Layout Group | 縦一列 | 設定項目のリスト、チャットログ、リザルトの行 |
| Grid Layout Group | 格子 | インベントリ、ステージ選択、ガチャ結果 |
使い方は共通で、親オブジェクトに追加して、子をぶら下げるだけです。
- 空のUIオブジェクト（例:
ItemContainer）を作り、Vertical Layout Groupを追加します。 - そ の子としてボタンやパネルを置くと——置いた瞬間、勝手に整列します。
- 子を増やす・減らす・順番を入れ替える（Hierarchyでドラッグ）だけで、配置は常に追従します。
tips HorizontalとVerticalは子の「サイズも」管理しようとします（Child Force Expand等）。まずはChild Force Expandのチェックを外し、Child Controls Sizeもオフにして「並べるだけ」から始めると、挙動が予想しやすくなります。
寸法を作る——Padding・Spacing・Child Alignment
整列した後の「余白」と「詰め方」は、3つのプロパティで決まります。
- Padding: グループの外枠と子の間の余白です（左右上下を個別に指定）。額縁の内側の余白と考えてください。
- Spacing: 子と子の間隔です。Gridでは縦横それぞれ指定できます。
- Child Alignment: 子をグループのどこに寄せるか（左上・中央・右下など9択）です。
GridにはさらにCell Size（全スロット共通のマス目サイズ）とConstraint（列数・行数の固定）があります。「1行6列で固定したい」ならFixed Column Count = 6——冒頭の 「5個から6個に変えたい」は、この数字を1つ変えるだけになります。
Content Size Fitter——内容で伸びるパネル
Layout Groupは子を並べますが、親パネル自身の大きさは変えません。「会話ウィンドウをセリフの行数に合わせて伸ばしたい」「チャットログを増えたぶんだけ長くしたい」——そんな 「内容で伸びる」パネル には、Content Size Fitterを併用します。
- Layout Groupが付いた同じオブジェクトに
Content Size Fitterを追加します。 - 伸ばしたい方向のFitをPreferred Sizeにします（縦に伸ばすなら
Vertical Fit）。
これで「子の合計サイズ＋Padding」にぴったり合わせて、パネル自身が伸縮するようになります。この組み合わせは次の実践（ScrollView）でも主役です。
Layout Element——個別の例外を作る
「リストの中で、この項目だけ高さを2倍にしたい」「この区切り線だけは整列に参加させたくない」——個別の例外は、子の側にLayout Elementを付けて指示します。
| プロパティ | 意味 |
|---|---|
| Min Width / Height | これ以上は縮まない最小サイズ |
| Preferred Width / Height | 基本はこのサイズにしたい（一番よく使う） |
| Flexible Width / Height | 余った空間をどれだけ吸収するか（比率） |
| Ignore Layout | 整列から完全に除外する |
「基本はPreferred、詰まったらMinまで縮み、余ったらFlexibleが吸う」という優先順位です。まずはPreferredで個別サイズ指定、Ignore Layoutで除外の2つを覚えれば十分です。
あるあるトラブルと直し方
子のRectTransformが手で動かせない
Layout Groupの子を選ぶと、RectTransformの数値がグレーアウトして動かせません。バグではなく、「この値はLayout Groupが管理中」という表示です。
- 位置を変えたい → Hierarchyの並び順を変える（整列順＝Hierarchy順です）
- サイズを変えたい → Layout ElementのPreferredで指示する
- 1つだけ自由にしたい → Ignore Layoutをオンにする
「手で動かす」のではなく「Layout Groupに指示する」に頭を切り替えるのがコツです。
Content Size Fitterの競合警告
親のLayout Groupの子にContent Size Fitterを付けると、「親が子のサイズを制御しているのに、子も自分のサイズを決めようとしている」という競合警告が出ます。Content Size Fitterを付けるのはレイアウトの一番外側（親側）だけ、が基本ルールです。
追加した瞬間だけ配置がズレる
レイアウトの再計算はフレームの終わりにまとめて行われます。子をスクリプトで追加した直後に位置を取得すると、整列前の座標が返ることがあります。すぐに正しい位置が必要な場合はLayoutRebuilder.ForceRebuildLayoutImmediate(rectTransform);で即時再計算させます。
実践：ScrollView＋Gridでインベントリを組む
RPGの持ち物画面、サバイバルクラフトの素材一覧、ローグライトの取得アイテム—— 「増え続けるアイテムを格子に並べてスクロールさせる」 インベントリUIは、Layout Groupの集大成です。ScrollViewと組み合わせて通しで作ります。
UIの組み立て（コード不要の部分）:
- 「UI > Scroll View」を作成し、不要な横スクロールを切ります（
Horizontalオフ） - ScrollViewの中のContentオブジェクトに、
Grid Layout Groupを追加——Cell Size 100×100、Spacing 10、Constraint: Fixed Column Count = 5 - 同じContentに
Content Size Fitterを追加し、Vertical Fit: Preferred Sizeに——アイテムが増えるとContentが縦に伸び、スクロール範囲が自動で追従します - アイテムスロットのPrefab（Image＋アイコン用の子Image）を1つ作ります
スクリプト——スロットを生成してContentにぶら下げるだけです。
using System.Collections.Generic;
using UnityEngine;
public class InventoryUI : MonoBehaviour
{
[SerializeField] private Transform content; // ScrollViewのContent
[SerializeField] private ItemSlot slotPrefab; // スロットのPrefab
private readonly List<ItemSlot> slots = new List<ItemSlot>();
// アイテム取得時に呼ぶ
public void AddItem(ItemData item)
{
// Contentの子として生成するだけで、Grid Layout Groupが自動配置する
ItemSlot slot = Instantiate(slotPrefab, content);
slot.Setup(item);
slots.Add(slot);
}
// 全消去して作り直す（ソートやフィルタの後などに）
public void Refresh(List<ItemData> items)
{
foreach (ItemSlot slot in slots)
{
Destroy(slot.gameObject);
}
slots.Clear();
foreach (ItemData item in items)
{
AddItem(item);
}
}
}
注目してほしいのは、座標計算のコードが1行もないことです。Instantiate(slotPrefab, content)で子にする——やることはそれだけで、「どのマスに置くか」「何行目になるか」「スクロール範囲をどれだけ伸ばすか」はすべてLayout Group側の仕事になります。
ポイントは2つです。 「並べる仕事はUIに、データの仕事はコードに分ける」（コード側はアイテムのListを管理するだけ。表示の都合が混ざらないので、ソートもフィルタも Listの操作 そのものになります）と、 「Contentの構成は Grid Layout Group＋Content Size Fitter のセットで覚える」（この2点セットはランキング表・ステージ選択・ガチャ結果と、スクロールする一覧すべてに使い回せます）。スロットにアイテム名を出すなら TextMeshPro、クリックで使う・装備するなら ボタンとイベント処理 と組み合わせてください。
おまけ：先に知っておくと良いこと
- レイアウト再計算は軽くない: Layout Groupは子が増減・変形するたびに再計算が走ります。毎フレーム動かすUI（HPバーの伸縮など）をLayout Groupの管理下に置くのは避け、静的なリスト・グリッドに使うのが適材適所です。
- 入れ子にできる: 「縦に並んだ行の中で、横にアイコンが並ぶ」はVerticalの子にHorizontalを入れて作ります。ただし深い入れ子は再計算コストと予測しづらさが増えるので、2段までが実用的な目安です。
- 数百スロットを超えたら: 全スロットを実体化すると重くなります。見えている分だけ生成し使い回す「仮想化スクロール」が次のステップです（オブジェクトプール の考え方のUI版です）。
- アイテムデータ側の設計: スロットに渡す
ItemDataは ScriptableObject で作ると、データとUIがきれいに分離できます。
まとめ
- 並べる仕事はコードや手作業ではなくLayout Groupに任せる——横はHorizontal、縦はVertical、格子はGrid。
- 余白はPadding（外枠）とSpacing（間隔）。Gridの列数はConstraintで固定できる。
- 内容で伸びるパネルは Layout Group＋Content Size Fitter（Preferred Size） のセット。
- 個別の例外はLayout Element（Preferredでサイズ指示・Ignore Layoutで除外）。
- 子が手で動かせないのは仕様——Hierarchyの並び順とLayout Elementで指示する。
- ScrollViewのContentにGrid＋Content Size Fitterで、スクロールする一覧は全部作れる。
あなたのプロジェクトのインベントリ、スロットの座標はまだ手で並べていますか？ その20個、Layout Groupなら5分で「仕様変更に強いUI」に変わります。