UI Builder を使った UI 作成チュートリアル（Unity 6対応）

2025年11月14日

Unity 6 では、従来の uGUI（Canvas ベースの UI システム）に加えて、新しい標準 UI として UI Toolkit が正式に採用されました。

UI Toolkit は、HTML/CSS に近い構造と、軽量で柔軟なレイアウトシステム（Flexbox）を備えており、特に「設定画面」「メニュー画面」「リスト表示」などの アプリ型 UI ではuGUI よりもシンプルで扱いやすいのが特徴です。

さらに、Unity には UI Toolkit 専用のエディタUI Builder（ユーアイ・ビルダー） が標準搭載され、UI を コードを書かずに視覚的に作成 することが可能になりました。

本記事では、

• UI Builder を使った UI の基本作成
• ボタンの配置
• C# スクリプトと連携して動作させる方法
• PanelSettings の設定手順
• “外部 USS を作らなくても良い理由（インラインスタイルの仕様）”

を、Unity 6 の最新仕様に沿ってわかりやすく解説します。

Unity 6 時代の UI 作成において「まず最初に知っておくべき内容」をシンプルなチュートリアル形式でまとめましたので、ぜひ一緒に UI Toolkit の基礎を身につけていきましょう。

---

実装結果

1. UI Builder を開く

Unity メニューから：

Window → UI Toolkit → UI Builder

を選びます。

初回は以下のウィンドウが表示されます。

• Library（UIパーツ）
• Hierarchy（UIの階層）
• Viewport（プレビュー）
• Inspector（設定）
• StyleSheets（見た目）

手書きで UXML を書く必要はありません。

---

2. 新しい UXML を作成する

Viewport の上部メニュー →

File → New

作成したら：

File → Save（保存） → main.uxml という名前にする

保存場所は：

Assets/UI/main.uxml

など分かりやすい場所に置きます。

---

3. UI にボタンを配置する

UI Builder 左の Library から：

Controls → Button

をドラッグして Canvas に配置します。

Inspector の設定例

• name：myButton
• text：押す

この “name” がスクリプト側で検索するときに必要になります。

---

4. C# スクリプトを作る

UIController.cs（例）

using UnityEngine;
using UnityEngine.UIElements;

public class UIController : MonoBehaviour
{
    void OnEnable()
    {
        // UI Document を取得
        var doc = GetComponent<UIDocument>();
        var root = doc.rootVisualElement;

        // UXMLで name="myButton" とした要素を取得
        var button = root.Q<Button>("myButton");

        // クリックイベントを登録
        button.clicked += OnButtonClicked;
    }

    void OnButtonClicked()
    {
        Debug.Log("ボタンが押されました！");
    }
}

ポイント：

• root.Q<Button>(“myButton")→ name 指定で UXML の要素を取得
• .clicked +=→ UI Toolkit のクリックイベント

---

5. シーンに UI を表示する

シーンに GameObject を作成し、次をアタッチします：

1. UIDocument　（Add Componentで追加）
2. UIController　（作成したスクリプトをアタッチ）

UIDocument の設定

Panel SettingsにGamePanelSettingsを指定

先にGamePanelSettingsを作成します

1. Project ウィンドウで、UIフォルダを選択し右クリック
   Create → UI Toolkit → Panel Settings Asset
2. できたアセットにGamePanelSettingsと名前をつける

Source Assetにmain(Visual Tree Asset)を指定

Inspector → UIDocument

これで UI Builder で作ったUIがシーンに表示されます。

---

6. ゲームを再生してテストする

Play を押して、ボタンをクリック。

Console に：

ボタンが押されました！

と表示されれば成功です。

---

7. ここまでの構成を図で整理

[UI Builder]
   ├─ main.uxml（Buttonを配置）
   └─ main.uss（スタイル定義）　＊今回はインライン仕様なのでありません

[Unity Scene]
   UIDocument
      ├─ Source Asset：main.uxml
      └─ UIController.cs（ボタンイベント登録）

UI は UXML/USS で管理され、動作は C# が担当するという完全な分離構造です。

---

8. UI Toolkit + UI Builder を使うメリット

1. UXML を手書きしなくて良い（GUI で完結）

現場でも UI Builder が標準です。

2. スマホUIに強い（Flexbox レイアウト）

SafeArea 対応も容易。

3. uGUI より軽く、階層も綺麗

Canvas 破壊問題も起きない。

4. スタイルは CSS のように記述

Web経験のある人は理解しやすい。

ボタン以外の基本的なコントロールの扱い

---