Unity UI レイアウト完全ガイド

初学者のための Layout Group × Layout Element の使い方

はじめに

UnityでUIを作るとき、「ボタンを縦に並べたい」「メニューを横に並べたい」「アイコンを格子状に並べたい」といった場面はとても多いです。
最初は RectTransform を手で動かして配置 してしまいがちですが、後から要素が増えると「並びが崩れる」「間隔がバラバラ」になってしまいます。
そこで活躍するのが Layout Group と Layout Element です。
この記事では、初学者でもわかるように「なぜ必要なのか」「どう組み合わせるのか」を丁寧に解説します。

1. Layout Group とは？

Layout Group は、子オブジェクトの配置を自動で並べてくれる仕組みです。
Unityには次の3種類があります：

  • Vertical Layout Group … 縦に並べる
  • Horizontal Layout Group … 横に並べる
  • Grid Layout Group … 格子状に並べる

これを「親オブジェクト」に付けるだけで、子要素を自動で整列できます。

2. Layout Element とは？

Layout Element は、子要素のサイズ希望を指定できるコンポーネントです。
設定できる主な項目は次の通り：

  • Min Width / Height … 最小サイズ（これ以下には縮まらない）
  • Preferred Width / Height … 理想サイズ（余裕があるときの大きさ）
  • Flexible Width / Height … 余ったスペースをどのくらい分配するか（比率指定が可能）

👉 ポイント：
Layout Group が並べる
Layout Element がサイズを伝える
という役割分担になっています。

3. Vertical Layout Group × Layout Element

基本

親に Vertical Layout Group を付けると、子要素は縦に並びます。
子に Layout Element を付けると高さを調整できます。

よくある使い方

固定サイズ

├─ ButtonA (Preferred Height = 100)
├─ ButtonB (Preferred Height = 200)
└─ ButtonC (Preferred Height = 100)

比率で高さを分配

├─ PanelA (Flexible Height = 1)
├─ PanelB (Flexible Height = 2)
└─ PanelC (Flexible Height = 1)

注意点： Content Size Fitter と併用すると、親の高さも自動調整されます。
リストを縦に並べたいときは Scroll View と組み合わせるのが定番です。

4. Horizontal Layout Group × Layout Element

基本

親に Horizontal Layout Group を付けると、子要素は横に並びます。
子に Layout Element を付けると幅を制御できます。

よくある使い方

固定幅メニュー

├─ ButtonA (Preferred Width = 150)
├─ ButtonB (Preferred Width = 150)
└─ ButtonC (Preferred Width = 150)

比率で幅を分配

├─ PanelA (Flexible Width = 1)
├─ PanelB (Flexible Width = 2)
└─ PanelC (Flexible Width = 1)

注意点： 入力フォーム（左にラベル、右に入力欄）などに便利です。

5. Grid Layout Group × Layout Element

基本

親に Grid Layout Group を付けると、子要素を格子状に整列できます。
Cell Size で1マスの大きさを指定し、Constraint で「列数固定」や「行数固定」が可能です。

よくある使い方

  • 均等マス目 → 3列固定のカレンダーUI
  • インベントリUI → アイテムアイコンを同じ大きさで並べる
  • 柔軟なサイズ調整 → Layout Elementで最小・推奨サイズを指定

注意点： Gridは「基本的に均等配置」なので、特定の要素だけ大きくするのは難しいです。

6. Scroll View との組み合わせ

要素が増えて画面に収まらない場合は Scroll View を組み合わせます。

  • 縦スクロール → Vertical Layout Group + Content Size Fitter
  • 横スクロール → Horizontal Layout Group + Content Size Fitter
  • グリッドスクロール → Grid Layout Group を Content に設定

こうすることで、自動でスクロール可能なリストやインベントリが完成します。

まとめ

  • Vertical Layout Group → ボタンやリストを縦に並べる
  • Horizontal Layout Group → メニューやフォームを横に並べる
  • Grid Layout Group → カレンダーやインベントリを格子状に並べる
  • Layout Element → 各要素のサイズ希望を伝える
  • Content Size Fitter → 親のサイズを自動調整

これらを正しく組み合わせれば、UIが勝手に整列してくれるので、あとから要素が増えても崩れません。
UI制作に慣れないうちは「とりあえずLayout Groupで並べる」ことを意識するだけで、作業が格段に楽になります。

訪問数 5 回, 今日の訪問数 1回

Canvas

Posted by hidepon