概要

今回はUI ToolkitとJetBrains社のAIコーディングエージェント「Junie」を使ってUIを構築する手順を共有します。ClaudeCodeでも同様にできると思います。

本文

1. UI Toolkit

UI Toolkitはこちらの動画がわかりやすく解説してくれているので参考にしてベース部分を作ってみます。

30分で分かる！Unity UI Toolkit 入門～ランタイム編～

とりあえず動画を参考にこんな感じのUIを作ってみました。

コードはこんな感じです。各ボタンを押すとログを表示するだけです。


public class Strawman : MonoBehaviour
{
    private void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;
        root.Q<Button>("button-dance").clicked += () => Debug.Log("dance");
        root.Q<Button>("button-spin").clicked += () => Debug.Log("spin");
        root.Q<Button>("button-flip").clicked += () => Debug.Log("flip");
    }
}

2. AI

AIコーディングエージェントに指示をします「このプロジェクトの概要を確認して。」

UIToolkit関連のファイルをちゃんと把握してくれています。

次にUIを調整してもらいます「ボタンパーツの色を赤色にして太文字にして」

UnityEditor画面を確認すると、ちゃんと赤文字 & 太字になっていました！

最後にUIとコードの連携も試してみます「ボタンの左隣に数字の連番を表示してもらいたいの。そして、ボタンを押したときにログを表示するようにしてあるけど、この表示内容を連番の数字を表示するように変更して。」

ボタンの左隣に連番が振られて、実行してボタンを押してみるとちゃんと対応した数字が表示されました（ボタンのサイズが文字列の長さになってしまいましたが、ここは手作業で直してもいいし、再度AIに指示をしても良い許容範囲だと思います）


public class Strawman : MonoBehaviour
{
    private void Start()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;
        root.Q<Button>("button-dance").clicked += () => Debug.Log("1");
        root.Q<Button>("button-spin").clicked += () => Debug.Log("2");
        root.Q<Button>("button-flip").clicked += () => Debug.Log("3");
    }
}

まとめ

ClaudeCodeとMCPを使ってUIを作る方法もありますが、思ったようにいかなかったり、特にInspectorのアタッチが高確率で失敗するのが現状だと思います。
今回のUIToolkitはAIコーディングエージェント(たぶんClaudeCodeでもOK)との相性が良さそうに思いました。準備も大変じゃないしトラブルも少なそうでした。

ただ、大多数のUnityユーザーの方はuGUIをメインに使われてると思うので、UIToolkitの学習コストがネックになりそうです。

上記の動画でも触れられていますが、FigmaからUIToolkitに変換するアセットもあるのでこちらを検討してみても良いかもしれないですね。
Figma to UI Toolkit Converter（依存パッケージが2つ必要なのでご注意を）