【UI Toolkit】を使ってみよう！UI BuilderでシンプルUI作成

UI Toolkitとは？Unityの新しいUIシステムを解説
- UI Toolkitが優れている5つの理由（Canvasベースと比較）
- UI Toolkitの基本構成要素まとめ（UXML / USSなど）
UI Toolkitの始め方：プロジェクト設定とUIの作成手順
UI Builderとは？UIを直感的に作れるエディタを紹介
- Libraryパネルでよく使う項目
- USSでよく使うプロパティ
UI Builderを使って簡単なUIを作ってみよう
まとめ

UI Toolkitとは？Unityの新しいUIシステムを解説

UI Toolkitは、UnityでUI（ユーザーインターフェース）を作成するための新しいフレームワークです。
HTMLやCSSのような仕組みで見た目や動作を定義でき、Unityのエディタ拡張やゲームUIの両方に使えます。
従来のCanvasベースのUIより柔軟でパフォーマンスにも優れています。

UI Toolkitが優れている5つの理由（Canvasベースと比較）

処理が軽くなる

UI Toolkitでは、画面の一部だけを更新できるため、全体を作り直す必要がなく、動作がスムーズになります。

デザインの変更がしやすい

CSSのようなスタイルシートで見た目を管理できるので、色やサイズの変更を一括で行えます。

見た目と動きを分けて書ける

UIのデザイン（UXML）と動きを制御するスクリプト（C#）を分けて書けるため、コードが整理されて読みやすくなります。

共通パーツとして使い回しやすい

作ったUIを他のシーンやプロジェクトでも使い回しやすく、開発の効率が上がります。

UI Toolkitの基本構成要素まとめ（UXML / USSなど）

UXML

UIの構造（どこに何を配置するか）を決めるファイル。HTMLに似た記述で書かれる。

USS

UIの見た目（色や大きさ、位置など）を決めるスタイルシート。CSSに似た記述。

UI Document

UXMLファイルをUnityのシーンに表示させるためのコンポーネント。
UXMLを実際にゲーム上で使うための「橋渡し役」。

UI Builder

UXMLやUSSをノーコードで直感的に作れるツール。
見た目を確認しながら編集できる便利なエディタ。

UI Toolkitの始め方：プロジェクト設定とUIの作成手順

UnityでUI Toolkitを使うために必要な各要素を作成し設定します

UI Documentを作成

ヒエラルキーで右クリック → UI Toolkit → UI Document を作成

自動でUIToolkitフォルダとPanelSettingsが作成され「UIDocumentコンポーネント」がアタッチされてます

PanelSettingsの設定

今回はScaleModeを「PixelSize」にします

UXMLファイルを作成

UIの見た目を定義するUXMLファイルを作成

プロジェクトビューで右クリック → Create → UI Toolkit → UI Document（UXML）

ちょっとややこしいけど、こっちは「UXMLファイル」だよ！

HierarchyのほうのUIDocumentに作成したUXMLファイルを設定します

UXMLをダブルクリックしUI Builderを開きます

スタイルシートにあたるUSSは後ほど作成します

UI Builderとは？UIを直感的に作れるエディタを紹介

直感的にUXMLやUSSを設定できるUnityに備わっているエディタ

🎨 Viewport（表示ビュー）

実際のUIの見た目をプレビューしながら編集できるエリア。

🧱 Hierarchy（ヒエラルキー）

UIの構造をツリーで表示。親子関係もここで見える。

📋 Library（ライブラリ）

ボタンやラベルなどのUI要素。ここからドラッグして追加できる。

🔧 Inspector（インスペクター）

選んだUI要素のプロパティやスタイルを変更するところ。

🧩 StyleSheet（USS）

スタイル（見た目）を管理・編集するためのスタイル一覧。

Libraryパネルでよく使う項目

よく使う項目を紹介します
最初はこのへん覚えておくと安心です。

📦 Containers（レイアウト整理に便利）

VisualElement：空の箱みたいな存在。グループ分けや装飾に
ScrollView：スクロールできる枠（リスト表示に便利）
GroupBox：枠付きのグループ（見た目付きのまとまり）

📂 Controls（よく使う基本UI）

Label：文字を表示するためのパーツ（説明文や見出しに）
Button：クリックできるボタン（押すとイベントが起こる）
Toggle：チェックできるスイッチ（ON/OFFの設定など）
TextField：文字入力欄（プレイヤーの名前入力などに）
Foldout：開閉できるセクション（設定項目の整理にぴったり）
Slider：数値を調整できるスライダー（音量やHPバー用）
DropdownField：選択肢をプルダウンで選ぶタイプ
RadioButton：複数選択肢から1つを選ぶとき
Integer/ Float：数値だけ入力させたいときに便利

USSでよく使うプロパティ

📦 表示関連

Opacity
要素の透明度を調整できます。
→ 0にすると完全に透明、1にすると完全に表示。
Display
noneにすると要素ごと消えます。
→ Webサイトのレスポンシブデザインなどでもよく使われます。
Visibility
hiddenにすると見た目は消えますが、スペースは残ります。

DisplayとVisibilityの違いは混同しやすいので注意！

📐 位置とレイアウト

Position
Absoluteに設定すると、要素を自由な位置に配置できます。
→ 例：Top50px、Left50pxでずらす

Flex
子要素の並びを決めます。
- row：横並び
- column：縦並び

Align
要素の揃え方を設定します。
- AlignItems / JustifyContent：子要素の位置
- AlignSelf / AlignContent：自分自身の位置

AlignItemを変更

JustifyContentを変更

AlignSelfをcenterにし全体の中央に

📏 サイズ・間隔・装飾

Size
% を使うと画面サイズに応じて伸縮可能。レスポンシブなUIに便利！
Spacing
- Margin：外側のスペース
- Padding：内側のスペース

「余白を取る」か「内側を詰める」かで使い分けよう！

Color / Background / Border
色、背景、枠線などの見た目を整えるプロパティです。

🌀 その他便利なプロパティ

Transform
- Scale：サイズの拡大・縮小
- 例：ボタンを押すと少しだけ大きくなるアニメーションに使える！

UI Builderを使って簡単なUIを作ってみよう

今回は、実際にUI Builderを使って「ラベル＋ボタン」のような簡単なUIを作ってみます。
難しいコードは一切書かずに進めていきます！

UI Builderの表示設定
UI要素を追加する
Inspectorで見た目を調整
USS（スタイルシート）を作成する
セレクタで汎用的に使えるようにする

1. UI Builderの表示設定

まずはHierarchyのuxmlを選択して、Inspectorから「MatchGameView」にチェックを入れましょう。
Gameビューと同じサイズでプレビューされるようになります。

次に、Viewportの「FitViewport」をクリックすると、ウィンドウに合わせたプレビューになりUI全体が見やすくなります。

最大化でフィットするとこんな感じ

2. UI要素を追加する

UIの基本要素をいくつか追加してみましょう。今回は、全体の枠になるVisualElementと、その中に配置するButtonを追加してみます。

LibraryパネルからVisualElementをドラッグ＆ドロップしてHierarchyに追加
　→ これは背景やレイアウトの枠として使えます。

その中に Button をドラッグして追加してみましょう。
　→ 画面にボタンが表示されるはずです。

3. Inspectorで見た目を調整

追加した要素の見た目をちょっとだけ変えてみましょう。

VisualElement を選択して、右側の Inspector パネルで次のように設定
　- 背景色：Background で色を選択
　- サイズ：Width や Height に数値を入力（例：300 × 200）
Button を選択して
　- テキスト：Text プロパティに好きな文字を入力（例：「スタート」など）
　- サイズや色も、同様に調整できます

VisualElementを選択しBackGroundのColorを変更

サイズを変更

FlexのGrowを0に

こうしないと勝手に画面を埋めようとしてしまう

Buttonの見た目も変更

4. USS（スタイルシート）を作成する

StyleSheetsの「＋」ボタンから、新しいUSSファイルを作成します。

「Create New USS」→フォルダを選択し保存。

USSが作成された

これがCSSのような役割を持つ「見た目のルールブック」になります。

4.5 インラインスタイルをUSSにまとめる

InspectorでVisualElementを選ぶと、左に白いラインが付いた部分が見つかると思います。

これは、手動で変更したスタイルがUXMLファイル内に直接書かれている状態です。
これをUSSに移すと、後からスタイルの再利用や調整がしやすくなります。

✅ 抽出の手順：

スタイルを変更した要素（VisualElementなど）をクリック
左に白い線があるプロパティが、変更済みの箇所
その部分の右にある「︙（三点リーダー）」をクリック
「Extract All Inlined Styles to Selector」「New Class」を選択

🧠 クラス名をつけて保存

任意のクラス名をつけて「Create Class」をクリック
例：main-container

すると、USSファイルに .main-container が自動で追加されます。

VisualElementを選択し「︙（三点リーダー）」をクリック

「Extract All Inlined Styles to Selector」「New Class」を選択

名前を付けてCreateClass

USSに「.main-container」が追加された

この名前（クラス）をUIに付けることで、
同じスタイルを他の場所にも簡単に使い回せるよ！

プロジェクト内のUSSを開くことでセレクタを見ることができる

💡 セレクタってなに？

セレクタとは、「USS（スタイルシート）内で使う 見た目のルール に付ける名前タグ」のことです。
.main-container のように「ドット（.）」から始まる名前で定義されます。

USSでこのセレクタを作り、UIの要素にクラス名として適用することで、見た目が変わります。

🧩 クラスとセレクタの違い

用語	説明	例
クラス（class）	UI要素に付ける名前（UXMLやUI Builder側）	class=”main-container”
セレクタ（selector）	USS内で定義する「このクラス名の見た目ルール」	.main-container { padding: 10px; }

つまり：
クラスは「UIにつける名前」
セレクタは「その名前に紐づくスタイルのルール」

✅ セレクタを使うメリット

見た目の管理がラクに！
インラインのままでは UXML がごちゃつきがち → USSにまとめてスッキリ
再利用しやすい：複数のUI要素に同じスタイルが適用できる
編集も簡単：USSだけを直せばOK！

🔰 UI Builder初心者でも「スタイルはUSSにまとめる」習慣をつけると、見た目の統一や修正がぐっと楽になるよ！

クラスの確認

VisualElementをもとにセレクタを作成したのでクラスがすでに適用されている。

5. セレクタで汎用的に使えるようにする

新しくVisualElementを作成し、.main-containerクラスを適用します

VisualElementを配置

.main-containerクラスを適用

💡こんな感じで簡単に同じ設定を反映させることができる

動きのあるボタンを作ってみた！

ボタンにマウスを乗せたり、クリックしたときに“ぷにっ”と動くような表現をつけてみましょう。

🧱 構成（Hierarchy）

VisualElement（main-container）
├ Button（←左側のボタン）
└ Button（←右側のボタン）
VisualElement（bottom-container）

🎨 USS（スタイル）

以下のようなスタイルを設定しています：

.main-container {
    background-color: rgba(255, 255, 255, 0);
    height: 80%;
    width: 100%;
    flex-direction: row;
    align-items: flex-end;  //　子要素を下から配置する
    justify-content: space-between;
}

.bottom-container {
    height: 20%;
    width: 100%;
    background-color: rgba(249, 255, 158, 0.5);
}

.move-button {
    background-color: rgba(93, 109, 126, 0.2);
    height: 60%;
    width: 10%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    border-color: rgba(148, 242, 255, 0.5);
    color: rgba(148, 242, 255, 0.5);
    font-size: 56px;
    transition-duration: 0.3s;
    border-top-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 5px;
}

.move-button:hover {
    border-left-color: rgba(52, 73, 94, 0.5);
    border-right-color: rgba(52, 73, 94, 0.5);
    border-top-color: rgba(52, 73, 94, 0.5);
    border-bottom-color: rgba(52, 73, 94, 0.5);
    color: rgba(52, 73, 94, 0.5);
    scale: 1.02 1.02;
    background-color: rgba(93, 109, 126, 0.5);
}

.move-button:active {
    background-color: rgba(93, 109, 126, 0.6);
    scale: 0.97 0.97;
}

✨ 疑似クラス :hover と :active

マウス操作時に見た目の変化をつける「疑似クラス」を使います。

🖱️ .move-button:hover
ボタンにマウスが乗ったときのスタイルです

色を変える
ボタンを少し大きく（scale: 1.02）

👆 .move-button:active
ボタンがクリックされたときのスタイルです

ボタンを少し小さく（scale: 0.97）
背景色を少し濃く

⏱️ transition-duration: 0.3s;

この設定で、変化にアニメーションの滑らかさが生まれます。
0.3秒かけて変化するので、カチッとした見た目から、ふわっと変わる演出になります。

ボタンを押した時にプログラムを実行する方法

今回は、Canvasベースで作っていた「プレイヤー視点を変更するプログラム」を、
UI Toolkitで作ったボタンからも動かせるようにしてみます！

🏗️ 事前準備（Hierarchyとスクリプト）

Hierarchyに空のオブジェクト「UIManager」を作成
UIController.cs スクリプトを作成
UIControllerをUIManagerにアタッチ

🖌️ UIBuilder側の設定

ButtonにIDをつける
例：「LeftButton」「RightButton」など

👉 こうしておくと、スクリプト側から簡単にボタンを取得できます！

📜 スクリプト側の書き方

UIController.cs

using UnityEngine;
using UnityEngine.UIElements;

public class UIController : MonoBehaviour
{
    [SerializeField] private UIDocument uiDocument;

    private void OnEnable()
    {
        var root = uiDocument.rootVisualElement;

        Button leftButton = root.Q<Button>("LeftButton");
        if (leftButton != null)
        {
            leftButton.clicked += () => 
            {
                CameraManager.Instance.TurnLeft();
            };
        }

        // 右ボタンも同様に設定
    }
}