Unity UI: Vertical Layout Group とインベントリ一覧実装の徹底解説

2025年10月6日

UIでアイテムやカードを縦に並べたいとき、毎回位置を調整するのは大変です。

ここで活躍するのが Vertical Layout Group。UI要素を縦に自動整列させ、要素数が増減してもきれいなレイアウトを維持してくれます。

今回は Inspector 項目の詳細解説 に加え、インベントリ一覧UIの具体例 をセットで紹介します。

Vertical Layout Group とは？

Vertical Layout Group は 子オブジェクトを縦に整列 させるコンポーネントです。

ScrollView やメニューリスト、カードUIなど「縦リストUI」を構築する際に必須の要素となります。

Inspector 項目の解説

Padding

Left / Right / Top / Bottom内側の余白を確保。UIの窮屈さを解消。

Spacing

要素同士の間隔（縦方向）。例：16px なら常に16pxの余白が入る。

Child Alignment

子要素の整列基準。Upper/Middle/Lower × Left/Center/Right を選択可能。

Reverse Arrangement

並び順を逆転。通常「上→下」を「下→上」に。チャットログUIに便利。

Control Child Size

Width / Height子要素のサイズを親が制御するか。幅や高さを自動調整できる。

Use Child Scale

子オブジェクトの Scale を考慮するかどうか。通常はオフでよい。

Child Force Expand

Width / Height余白を埋めるように子要素を広げる。→ Width=オンにすれば「横幅いっぱい」に揃う。

詳細

Vertical Layout Group の Inspector 項目を、インベントリ一覧（縦リスト）での実戦目線まで踏み込んで詳しく解説します。

Inspector 項目の「本当のところ」

（Vertical Layout Group / Unity 6 + uGUI 2.x）

1) Padding

何を制御：コンテナ（Layout Group を付けた RectTransform）の内側余白。単位は Canvas Scaler の基準解像度に基づくUI単位。
効き方：子要素の「並べ始め位置」と「並べ終わり位置」を内側へ押し込みます。
使い分けの目安
- スマホ：左右 16〜24 / 上下 12〜20 くらいが視認性と密度の妥協点。
- SafeArea を別で処理しているなら、Padding は純粋に“デザイン上の余白”に集中。

2) Spacing

何を制御：子と子の“間”の固定距離（縦方向）。
効き方：各アイテムの直後に Spacing 分の空きが入る。
Tips：マイナス値も設定可能（密着 or 重ね効果）。通常は 8〜16 程度が見やすい。

3) Child Alignment

何を制御：「子の束」全体を、親の余白内でどこに寄せるか。
垂直方向の意味：総高さ < 親高さのとき、Upper/Middle/Lower が束の縦位置を決める。
水平方向の意味：Left/Center/Right が各行の横方向の寄せを決める（後述の Control Child Size (Width) が OFF のとき特に意味が出る）。
実例
- Upper Left：リストを上詰め・左寄せで開始（メニューや設定リストに多い）。
- Lower Center：チャット風で下詰め中央寄せなど。

4) Reverse Arrangement

何を制御：並べる向きを反転（通常：上→下、反転：下→上）。
よくある用途：チャット・ログ、更新が下に溜まる系。スクロールの起点と合わせて設計。

5) Control Child Size（Width / Height）

何を制御：子のサイズを“レイアウト側が上書きするか”のスイッチ。
縦レイアウトの前提
- Height（メイン軸）…子の高さを 子の Preferred Height（なければ内容由来の推定値）に“揃えて”配置。
- Width（クロス軸）…子の横幅を親に合わせて“上書き”できる（Stretch相当）。
OFF の挙動：その軸サイズは子自身の RectTransform（sizeDelta / anchors）に任せる。
実戦ルール
- インベントリの“幅いっぱいカード”にしたい → Width = ON。
- カード高さをデザインで統一したい → 各カードに Layout Element（Preferred Height=固定値） を設定し、Height = ON にする。
- 子が自前で高さを可変計算（Content Size Fitter など）するなら Height = OFF にして干渉を避ける。

6) Use Child Scale（Width / Height）

何を制御：子の Transform.localScale をサイズ計算に反映させるか。
効き方：Scale が 2 なら理論上、その軸サイズを 2 倍として扱う。
注意：見た目とヒット領域・マスクがズレやすく、再計算も増えるため基本はOFF。
使い所：意図的に“拡大縮小で段差を付ける”特殊UIのみ。

7) Child Force Expand（Width / Height）

何を制御：余った空間を子に強制配分するか。
正確な挙動：ON にした軸は、子の Flexible 値が 0 でも 1 とみなす（全員に“伸び代”を与える）。
縦レイアウトでの意味
- Width…横方向の余白を“均等に”子へ配分 → 全カードが横いっぱいに伸びる（最もよく使う）。
- Height…親の縦が余ったら各カードに縦余白を割り振る。通常はスクロール前提なので OFF が多い。
実戦ルール
- “横いっぱい”にしたい → Child Force Expand: Width = ON（併せて Control Child Size: Width も ON 推奨）。
- “縦の等間伸縮”は UX が崩れやすい → Height = OFF が無難。

相互作用（ここが分かると迷わない）

A) Layout Element との関係

Preferred：Control Child Size（該当軸）が ON のとき、子の実サイズの目標として使われる。
Min / Max：グループは Min ≤ 実サイズ ≤ Max の範囲で調整する。Max 未設定なら無制限。
Flexible：余り空間の配分“比率”。Child Force Expand が ON だと、Flexible=0 の子にも最低1が付与され、余りが均等配分される。

B) Anchors / sizeDelta との関係

Control Child Size = OFF の軸は、子のアンカー設定次第。
例：幅は自前で Stretch（左右アンカー）にしているなら、Width=OFF のままでも横いっぱいになる。
ただし グループが幅を管理する設計に揃えるほうが、Prefab（カード）を他画面に再利用しやすい。

C) Content Size Fitter との組み合わせ

推奨パターン（ScrollViewのContent）
- Content に Vertical Layout Group と Content Size Fitter（Vertical Fit=Preferred Size / Horizontal Fit=Unconstrained） を併用。
- これで 中身に応じて Content 高さが伸びる。ScrollRect が正しくスクロール範囲を計算する。
やってはいけない
- 親子で相互にサイズを参照しあう構成（親にも Fitter、子にも Fitter で往復参照）は無限再レイアウトの温床。

典型シナリオ別「チェックの組み合わせ」

目的	Control Child Size	Child Force Expand	補足
横いっぱいのカード	Width=ON / Height=ON	Width=ON / Height=OFF	カードに Preferred Height を与える（例 120）
子の横幅は自前（画像比率保持）	Width=OFF / Height=ON	Width=OFF / Height=OFF	子側を Stretch しない。画像は AspectRatioFitter 等で制御
チャット風（下から積む）	Width=ON / Height=ON	Width=ON / Height=OFF	Reverse Arrangement=ON、Alignment=Lower… 系
可変高テキスト（折り返し）	Height=OFF	Height=OFF	子に Content Size Fitter（Vertical Fit=Preferred）／親は Spacing で間隔

インベントリ一覧（実戦の“定番設定”）

Padding：16
Spacing：8〜16
Child Alignment：Upper Left か Upper Center
Control Child Size：Width=ON, Height=ON
Child Force Expand：Width=ON, Height=OFF
各カード（Prefab）に Layout Element（Preferred Height=100〜140）
ScrollView の Content に Vertical Layout Group + Content Size Fitter（Vertical=Preferred）

これで「幅いっぱい・高さ統一・行間一定」の読みやすいリストが、要素数の増減に強い形で完成します。

よくあるハマり／デバッグ

子の幅が伸びない
- Control Child Size: Width が OFF、または Child Force Expand: Width が OFF。いずれか（多くは両方）を ON に。
高さがバラつく
- カードに Layout Element の Preferred Height がない。統一値を入れる。
スクロール範囲が合わない
- Content Size Fitter（Vertical=Preferred）が入っていない、または無限再計算が発生。親子の Fitter 構成を見直す。
更新直後にレイアウトが崩れる（大量 Add / Enable 切替）
- 直後に LayoutRebuilder.ForceRebuildLayoutImmediate(content) を 1 回だけ呼んでレイアウト確定を促す（頻発は避ける）。
- 頻発させるとパフォーマンスに悪影響が出るので注意。

インベントリ一覧への応用

基本構造

InventoryPanel (ScrollView)
 └ Viewport
    └ Content (Vertical Layout Group + Content Size Fitter)
       ├ ItemCard (Prefab + Layout Element)
       ├ ItemCard
       └ ItemCard ...

Content に Vertical Layout Group を設定
各ItemCardに Layout Element を付与し、Preferred Height を指定（例: 120）
ScrollRect と組み合わせて大量のアイテムでもスクロール可能

推奨設定例

Padding = 16
Spacing = 8〜16
Child Alignment = Middle Center
Control Child Size → Width = ON
Child Force Expand → Width = ON

→ すべてのカードが横幅いっぱいに整列し、見やすいリストを自動生成できる。

実装サンプルコード

[SerializeField] RectTransform content;        // Contentオブジェクト
[SerializeField] GameObject itemCardPrefab;    // プレハブ

void AddItem(string itemName, int quantity)
{
    var card = Instantiate(itemCardPrefab, content);
    var controller = card.GetComponent<ItemCardController>();
    controller.Setup(itemName, quantity);
}