UI Builder で MainMenu を作る（Unity 6対応）

2025年10月22日

1. UI Builder を開く

• Unity メニューからWindow > UI Toolkit > UI Builder を選択。
• 専用ウィンドウが開きます（Hierarchy, Library, Inspector, Canvasビューが並んでいる）。

---

2. 新しい UXML を作成

1. UI Builder 上部の New をクリック。
2. 名前を入力（例: MainMenu.uxml）し、Assets/UI/UXML/ フォルダに保存。
3. Canvasビューに空のルート要素が表示されます。

---

3. VisualElement を配置

• Library から VisualElement をドラッグ → ルートの子に追加。
• 名前を Root に変更。
• Inspector で Flex Layout を有効化 → Column（縦並び）に設定。

---

4. Label（タイトル）を配置

1. Library から Label をドラッグ。
2. 名前を Title に変更。
3. Text に「UI Toolkit サンプル」と入力。
4. Inspector > Style でフォントサイズを 28 に設定。

---

5. Button を配置

• Library から Button を 2つ追加。
  1. StartButton → Text:「スタート」
  2. SettingsButton → Text:「設定」

---

6. USS（スタイル）を作成

1. UI Builder 上部メニューから New StyleSheet を選択。
2. 名前を MainMenu.uss として保存（Assets/UI/USS/ に配置）。
3. ルートにアタッチする。

スタイルの例（UI Builderのインスペクタから設定可能）：

• Root
  • Align Items: Center
  • Justify Content: Center
  • Gap: 16px
• Title
  • Font Size: 28
  • Font Style: Bold
• StartButton / SettingsButton
  • Font Size: 18
  • Padding: 10px 20px

UI Builderで設定したスタイルは USS ファイルに自動保存されるため、テキストエディタでも確認・編集できます。

---

7. UIDocument に割り当てる

1. Hierarchy で UIRoot を作成。
2. UIDocument コンポーネントを追加。
3. Source Asset に MainMenu.uxml を指定。

Gameビューで実行すると、MainMenuが表示されます。

---

8. ボタンにスクリプトを紐づける

MainMenuController.cs

using UnityEngine;
using UnityEngine.UIElements;

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

    private void OnEnable()
    {
        var root = uiDocument.rootVisualElement;
        var startButton = root.Q<Button>("StartButton");
        var settingsButton = root.Q<Button>("SettingsButton");

        startButton.clicked += () => Debug.Log("スタートが押されました");
        settingsButton.clicked += () => Debug.Log("設定が押されました");
    }
}

UIRoot にアタッチして実行すれば、ボタンをクリックしたときにログが出ます。

---

まとめ

• UI Builder を使えば、UXML/USSファイルは自動生成される
• 開発者は GUI操作で UIを作れる → 生成されたファイルを直接編集して調整も可能
• 学習用には「UI Builderで作成 → ソースコードを確認」で、内部構造の理解も深まる

---