Unity UI: Vertical Layout Group を活用したインベントリ一覧UIの実装

2025年10月6日

Unityでアイテムやカードを縦に並べるUIを作るとき、位置やサイズを毎回手動で調整するのは非効率です。

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

この記事では Inspectorの詳細解説と、インベントリ一覧用の最小プレハブ設計、さらに実装のサンプルコードをまとめます。

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

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

https://soft-rime.com/post-25955/

1. Vertical Layout Group の基本
2. Inspector 項目の詳細解説
3. インベントリ一覧に最適な構成
- 3.1. 親側（ScrollView＋Content）
- 3.2. 子側（ItemCard）
4. 実装コード例
- 4.1. InventoryListController
- 4.2. ItemCardController
5. よくあるハマり／デバッグ
6. まとめ

Vertical Layout Group の基本

役割：子オブジェクトを縦方向に整列させるコンポーネント
典型用途：リストUI（インベントリ一覧、設定メニュー、チャットログなど）
強み：Padding/Spacing/Alignmentを指定するだけで統一感あるレイアウトを自動生成

Inspector 項目の詳細解説

Padding

コンテナ内の上下左右の余白
スマホUIでは左右16〜24px、上下12〜20px程度が見やすい

Spacing

子要素間の縦方向の間隔
8〜16px程度が標準。負の値も指定できる（重ね効果）

Child Alignment

子要素の束全体の位置
Upper Left：一般的なリスト
Lower Center：チャットログ風

Reverse Arrangement

並び順を反転（下から上に積む）
チャットやログUIに便利

Control Child Size

子のサイズを親が上書きするかどうか
Width=ON → 横幅いっぱい
Height=ON → 各カードの Preferred Height に従う

Use Child Scale

子の Scale をサイズ計算に反映するか
基本OFFでOK（特殊UI用）

Child Force Expand

余った空間を強制的に配分するか
Width=ON → 横幅いっぱいに広げる（推奨）
Height=OFF → 高さはScrollViewでスクロール

インベントリ一覧に最適な構成

親側（ScrollView＋Content）

InventoryScroll (Prefab)
└─ Viewport
   └─ Content (Vertical Layout Group + Content Size Fitter)

Content 設定
- Padding: 左右16, 上下12
- Spacing: 12
- Child Alignment: Upper Center
- Control Child Size: Width=ON, Height=ON
- Child Force Expand: Width=ON, Height=OFF
- Content Size Fitter: Vertical Fit=Preferred

子側（ItemCard）

ItemCard (Prefab)
├─ LeftIcon (optional)
└─ TextArea
   ├─ NameText (TMP)
   └─ SubText (TMP)

RectTransform: Anchors = Top Stretch
Layout Element: Preferred Height=120
NameText: Font Size=42、Overflow=Ellipsis
SubText: Font Size=32、Color=#666

実装コード例

InventoryListController

using UnityEngine;

public class InventoryListController : MonoBehaviour
{
    [SerializeField] RectTransform content;       // Content
    [SerializeField] GameObject itemCardPrefab;   // ItemCardプレハブ

    public void AddItem(string name, int count, string note = null)
    {
        var go = Instantiate(itemCardPrefab, content);
        var card = go.GetComponent<ItemCardController>();
        card.Setup(name, count, note);
    }
}

ItemCardController

using TMPro;
using UnityEngine;
using UnityEngine.UI;

public class ItemCardController : MonoBehaviour
{
    [SerializeField] TMP_Text nameText;
    [SerializeField] TMP_Text subText;

    public void Setup(string itemName, int count, string note = null)
    {
        if (nameText) nameText.text = itemName;
        if (subText)  subText.text  = $"x{count}" + (string.IsNullOrEmpty(note) ? "" : $"｜{note}");
    }
}