Unityバージョン：6000.0.31f1
UnityでゲームやアプリのUIを作るとき、ボタンや画像をきれいに並べたいというシーンは多いですよね。しかし、手動で位置を調整していると、時間がかかる上に、画面サイズや解像度が変わるとレイアウトが崩れてしまうこともあります。
そんなときに役立つのが、Unityのレイアウトコンポーネントです。この記事では、特にHorizontal Layout Groupを中心に、初心者でも迷わず使える方法を詳しく解説します。Vertical LayoutやGrid Layoutとの違いもわかるので、UI作りに自信がない方でも安心です。
レイアウトコンポーネントとは？
Unityには、UIオブジェクトを自動で整列させる仕組みがあります。
例えば、ボタンを5つ横に並べたいとき、手動で位置を調整すると結構大変です。Pixel単位で揃えるのは難しく、さらに画面サイズが変わると再調整が必要になります。
これを解決してくれるのがレイアウトコンポーネントです。自動で整列してくれるので、作業が非常に効率化されます。
代表的なレイアウトコンポーネントは次の3つです。
| コンポーネント | 整列方向 | 用途 |
|---|---|---|
| Horizontal Layout Group | 横方向 | ボタンや画像を横並びにしたいとき |
| Vertical Layout Group | 縦方向 | メニューやリストを縦に並べたいとき |
| Grid Layout Group | 格子状 | アイテム一覧やインベントリUI |
メリット
- 手動で位置を微調整する手間を大幅に減らせる
- 複数画面サイズに対応しやすくなる
- UIの見た目を均等に整えることができる
Horizontal Layout Groupの基本的な使い方
1. CanvasにPanelを作る
まず、UIの親オブジェクトとしてPanelを作ります。
Panelは子オブジェクトをまとめる「箱」のような存在です。
例えば、横並びにしたいボタンや画像は、このPanelの中に入れます。
2. PanelにHorizontal Layout Groupを追加
次にPanelを選択し、Inspector → Add Component → Layout → Horizontal Layout Groupを追加します。
これだけで、Panel内の子オブジェクトが自動で横方向に整列されるようになります。
3. 子オブジェクトを配置
Panelの子オブジェクトとして、ButtonやImageを置きます。
Horizontal Layout Groupを追加すると、自動で横方向に並び、左から右へ順番に整列されます。
4. 間隔やパディング、位置を調整
Horizontal Layout Groupには、細かい調整用の項目があります。
- Spacing
子オブジェクト間の距離を指定できます。例えばSpacingを10に設定すると、ボタン同士の間隔が10px空きます。 - Padding
Panelの端から子オブジェクトまでの余白を調整できます。上下左右それぞれ個別に設定可能です。
この調整だけで、UIが一気に整って見やすくなります。
また、位置については、Child AlignmentからPanelのどこに配置するかを選択できます。
中央揃えをしたいときは、Middle Centerなどを選択します。
子オブジェクトのサイズを自動調整する
Horizontal Layout Groupには、子オブジェクトのサイズを自動で揃えるオプションもあります。
| オプション | 説明 |
|---|---|
| Child Control Width / Height | 子オブジェクトの幅や高さを自動で調整 |
| Child Force Expand (Unity5.xまで) | チェックを入れると、子オブジェクトがPanel内で均等に伸びる |
| Use Child Scale (Unity 6から) | 子オブジェクトの RectTransform のスケール値 を考慮してレイアウトされます。 |
この設定を使うと、ボタンや画像のサイズがバラバラでも自動で均一サイズに揃えられます。
特に、異なる解像度や画面サイズに対応する際に便利です。
Use Child Scaleについて
例えば、ボタンの一つのスケールが他より小さかった場合、通常はスケールは考慮されずに他のボタンと同じサイズとしてレイアウトされますが、
Use Child Scaleにチェックを入れることで、スケール値も考慮したレイアウトがされます。
Vertical LayoutやGrid Layoutとの違い
Vertical Layout Group
- 縦方向に自動整列します
- メニューやチャットリストなどのUIに便利
- Horizontal Layoutと同じようにSpacingやPaddingを調整可能
Grid Layout Group
- 縦横両方で整列
- アイテム一覧やショップ画面のUIに最適
- Cell SizeやSpacingで細かく調整できる
まとめ
- Horizontal Layout Groupは横方向に自動で整列
- 間隔やサイズも簡単に調整可能
- VerticalやGrid Layoutと組み合わせると、UI作りが格段に楽になる
UIの整列を手作業で行うのは意外と大変ですが、レイアウトコンポーネントを使うことで効率よくきれいなUIが作れます。
用途に合わせてコンポーネントを選択しましょう。
