Unity UI Toolkitとは？使い方と導入方法を初心者向けに解説

ゲーム開発•2025/1/24

はじめに

Unityを使ってゲーム開発を進めるうえで、画面上のメニューや情報表示は欠かせません。初心者の方は、UIの作成方法に悩むことがあるかもしれませんが、UI Toolkitという仕組みを使うと画面要素を柔軟に配置できます。以前はIMGUIやUGUIが一般的でしたが、UI Toolkitは宣言的な書き方とスタイルシートを使ったデザインが可能で、保守しやすくなる傾向があります。コード量を抑えつつ、視覚的にもわかりやすいレイアウトを組める点は魅力的ではないでしょうか。

この記事では、UI Toolkitの基礎から導入方法、具体的な使い方までを初心者向けに整理していきます。実務で使う場面も考慮しながら説明していきますので、ゲーム開発に興味がある皆さんにとって、一歩踏み出しやすい内容になれば幸いです。

UI Toolkitの概要

UI Toolkitは、Unity 2021以降で標準的に利用されるUIシステムです。過去のIMGUIやUGUIと異なり、HTMLやCSSに近い概念で画面レイアウトやスタイリングを行う設計になっています。これにより、UIを構築する際の宣言的なアプローチが取りやすくなり、保守性や再利用性を高めることが可能です。

一方で、過去のUIシステムと大きく異なる面もあります。特に、VisualElementという要素を階層的に配置していく仕組みや、USS（Unity Style Sheets）によるスタイリングなどが新しいポイントとして挙げられます。このような変化に戸惑うこともあるかもしれませんが、学習コストをかけるだけのメリットがあるといえるでしょう。

主な特徴

UI Toolkitには、大きく分けて以下のような特徴があります。

宣言的なUI構築が可能
USSによる柔軟なスタイル設定
Editor拡張とRuntime UIを共通の基盤で扱える
Visual Scriptingとの連携もしやすい

これらのおかげで、ゲーム画面だけでなくUnityエディタの拡張ウィンドウも効率的に作成できます。また、慣れてくるとデザイナーとプログラマーが共同でUIを制作しやすくなります。

なぜUI Toolkitを使うのか

UI Toolkitを使うメリットをもう少し掘り下げてみましょう。 UGUIやIMGUIとの比較を通じて、どのような場面で役立つかをイメージしやすくなります。

UGUIやIMGUIとの違い

UGUIはゲームオブジェクトとしてのUIコンポーネントを扱う仕組みで、シーンごとにUIを管理する設計が基本です。一方のIMGUIは、エディタ拡張などで使われる即時描画型の仕組みで、スクリプト内でGUIコードを記述する形式が一般的です。

UI Toolkitは、これらと異なりHTML/CSS風の宣言的アプローチが可能で、レイアウトを階層的に定義してからスタイルを割り当てます。要素の依存関係が明確になるため、デザインを変更するときも柔軟に対応しやすい点が特徴的です。

実務での活用シーン

ゲーム開発中には、インベントリやステータス画面、メインメニューなどのUIを作成するタイミングがあります。 UI Toolkitを使うと、同じ仕組みを利用してエディタのカスタムウィンドウも作れるため、チーム内で作業効率を高めやすいでしょう。

また、複雑なデータを並べるツールをエディタ上に用意したいケースにも有効です。例えば、アイテムデータの一括管理ウィンドウや、ゲーム内テキストを管理するウィンドウなどをUI Toolkitで作っておくと、メンテナンスが楽になります。

導入方法の基本

UI ToolkitはUnity 2021以降で標準提供されていますが、プロジェクト設定によっては使用を有効化する必要がある場合があります。ここでは、Unityエディタ上でどのように設定を行えばよいかを説明します。

Package Managerの確認

Unity 2021以降では、UI Toolkitはデフォルトでインストールされている場合が多いです。ただし、プロジェクトによってはUI Toolkit関連のパッケージが古かったり、別バージョンが導入されていたりすることがあります。

Package ManagerでUnity UI Toolkitやcom.unity.uiなどを検索して、最新バージョンかどうか確認してみてください。もし古いバージョンが入っている場合は、アップデートを検討しても良いかもしれません。

プロジェクト設定

UI Toolkitには、Runtime UIとEditor拡張の両方を有効化するオプションがあります。 Project SettingsのEditorタブやPlayerタブを確認すると、UI Toolkitに関連する設定が含まれていることがあります。特に、Enable UI Toolkit for Editorといったオプションが表示されている場合はオンにしましょう。

基本的なUI構築の流れ

ここからは、UI Toolkitを使ったUI構築の一般的な流れを見ていきます。最初はエディタ拡張で使う方法に慣れるとよいかもしれません。

UXMLファイルとUSSファイル

UI Toolkitでは、画面構造を定義するUXMLファイルと、スタイルを定義するUSSファイルを組み合わせてUIを作ります。 UXMLはHTMLに近いシンタックスで要素を階層的に記述し、USSはCSSライクな文法でスタイルを定義します。

この組み合わせにより、UIの見た目と構造を分離できるので、コードをすっきりさせやすいです。また、慣れれば要素の配置やスタイル変更を素早く行えるため、デザインを頻繁に変更する案件にも対応しやすいでしょう。

EditorWindowの作成例

UI Toolkitを使ったEditorWindowを作る場合の流れを簡単に示します。

UXMLファイルとUSSファイルを作成する
C#のコードでEditorWindowを継承したクラスを用意する
UXMLとUSSを読み込んで、WindowのrootVisualElementにアタッチする

実際に、以下のようなコードを書くと、UXMLとUSSを読み込んでWindowに表示できます。


using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;

public class SampleEditorWindow : EditorWindow
{
    [MenuItem("Tools/Sample Editor Window")]
    public static void ShowWindow()
    {
        var window = GetWindow<SampleEditorWindow>();
        window.titleContent = new GUIContent("Sample UI");
        window.Show();
    }

    private void OnEnable()
    {
        // UXMLの読み込み
        var uxmlPath = "Assets/UI/SampleLayout.uxml";
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>(uxmlPath);
        VisualElement root = visualTree.Instantiate();

        // USSの読み込み
        var ussPath = "Assets/UI/SampleStyle.uss";
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>(ussPath);

        // root要素に追加
        root.styleSheets.Add(styleSheet);

        // Windowに要素を追加
        rootVisualElement.Add(root);
    }
}

SampleLayout.uxml と SampleStyle.uss はあらかじめプロジェクト内で作成しておき、要素を配置しておきます。実際にウィンドウを開いてみると、UXMLで定義した要素が表示されるはずです。

実務で役立つUI Toolkitの機能

UI Toolkitには、多様なUI要素が用意されています。ボタンやテキストフィールドだけでなく、リストビューやツリービューといった複雑な表示をサポートするコンポーネントもあります。

リストビューの活用

リストビューは、大量の項目をスクロール表示するのに適しています。エディタ拡張でプロジェクト内のアセットを一覧表示したり、ゲーム中に装備アイテムを一覧で見せるような場面で使えるでしょう。

リストビューを使うときは、データソースの設定と要素の生成処理を実装します。具体的には、makeItemとbindItemというコールバックを通じて表示要素をカスタマイズできます。

バインドとコールバック

UI Toolkitには、バインド機能を使ってデータとUIをひも付けする仕組みがあります。たとえば、ScriptableObjectを利用している場合に、値変更時にUIを自動更新できるように設定できる場合があります。

また、ボタンを押したときの動作などは、C#コード側でコールバックを設定することが一般的です。 UI要素のRegisterCallback<ClickEvent>メソッドを使ったり、Button型のclickedイベントを使ったりして制御します。

RuntimeでUI Toolkitを使う

ここまではEditor拡張の話が中心でしたが、ゲームの実行時UIとしてもUI Toolkitは利用できます。 Unity 2022以降では、ランタイムでもUI Toolkitを使ったUIが徐々に本格的にサポートされるようになってきました。

スクリーンUIとしての配置

UGUIと同様、キャンバスのような仕組みがあるわけではなく、UIDocumentコンポーネントをシーンに置いてUXMLをロードする形式です。このコンポーネントを使ってUXMLとUSSを指定するだけで、シーン内にUIを表示できます。

ランタイムでUIを表示する際も、エディタ拡張とほぼ同じやり方で要素を配置し、スタイリングを施します。ゲーム上でのボタン操作やテキスト表示も、同様にコールバックやデータバインドで扱えます。

レイアウトの考え方

UI Toolkitでは、フレックスレイアウトを採用しています。要素の親子関係で、方向や折り返しなどをUSSで指定できるため、複雑なUIも段組みしやすいです。

一方で、UI要素間のマージンやパディングはUSSで記述する形になるため、最初はCSSに慣れていないと戸惑うかもしれません。しかし、一度慣れれば表示倍率の違いに自動対応しやすいので、解像度ごとの調整がスムーズになります。

実践的なカスタマイズ例

UI Toolkitを使い慣れてくると、エディタツールやランタイムUIをより深く作り込む場面も出てきます。ここでは、少し発展的なカスタマイズのヒントを紹介します。

テーマ切り替え

USSを複数用意しておき、暗色テーマと明色テーマを切り替えるような仕組みを作れます。特定のタイミングでスタイルシートを差し替えることで、同じUXMLでも異なるデザインを適用することが可能です。

UI Toolkitなら、エディタツールの見た目を暗色に合わせるなどの工夫も容易になります。また、ゲーム内で昼夜を切り替えるような演出の一部として、UIのカラーテーマを変更するといった応用も考えられます。

カスタム要素を作る

UI Toolkitでは、C#スクリプトでカスタムVisualElementクラスを作り、UXML上で使えるようにする方法があります。これにより、特定の機能やデザインをひとまとめにして再利用しやすいです。

例えば、プログレスバーやカウントダウンタイマーなど、独自の見せ方をするUIを共通化すると、プロジェクト全体での開発効率が上がるはずです。

スタイル設定のコツ

UIを作成する際、USSをどのように書くかがUI Toolkitでのデザイン性を左右します。ここでは、スタイル設定で押さえておきたいポイントを紹介します。

クラスを活用する

HTML/CSSと同様、複数の要素に共通のスタイルを適用したい場合はクラスを割り当てます。 UXML上の要素にclass="xxx"という記述をし、USSで.xxx { ... }という形でスタイルを定義すると、多数のUI要素を一括管理しやすくなります。

複数のクラスを同時に指定することもできるので、レイアウト用のクラスと色指定用のクラスを分けて管理するなど、スコープを分割するやり方も便利です。

フレックスボックスを理解する

UI Toolkitはフレックスボックスを基本とするレイアウトを実現しています。 flex-directionやjustify-contentなどCSSに近いプロパティを使うことで、要素を横並びや縦並びに自在に配置できます。

例えば、メニュー画面のボタンを横一列に配置したいなら、以下のようなUSSを記述します。


.menu-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

こういった設定を利用すると、ボタンの数が増減しても自動的に中央寄せのレイアウトを保てるので、メンテナンス性が高まります。

よくある疑問と解決策

UI Toolkitを初めて触るときに、初心者の方が感じやすい疑問点をいくつか挙げてみます。ここを押さえておくとトラブル回避につながります。

マウスイベントが反応しない

要素にクリックイベントをつけたのに反応しない場合、スタイルでpointer-eventsを無効にしているケースや、配置の重なり順が原因の場合があります。 USSでpointer-events: none;と設定していないかを確認し、必要に応じてz-indexや要素の順序を調整してみましょう。

ランタイムで表示が崩れる

Editor上ではきれいに配置されていても、実際のランタイムで解像度が異なるとUIが崩れるケースがあります。フレックスレイアウトや相対指定をうまく使いながら、縦横比に応じてサイズが変わるように工夫すると、解決しやすいです。

実務で使うときは、チームメンバー同士でUXMLやUSSの管理ルールを決めておくと、ファイルの散在や命名規則の不一致を防ぎやすくなります。

エディタ拡張とゲームUIを一元管理する利点

UI Toolkitの利点として、エディタ拡張とランタイムUIを同じ基盤で扱える点が挙げられます。これにより、以下のようなシーンでメリットを感じることが多いでしょう。

デザイナーとプログラマー間の連携

CSSに近いUSSを使うことで、デザイナーがUIデザインの大枠を担当し、プログラマーが機能的な部分を組み込むといった分業がやりやすくなります。エディタ用のウィンドウも同じ仕組みで作れるため、デザイナーがエディタのレイアウトをある程度コントロールできるのも特徴です。

テストやデバッグの効率化

UI ToolkitのEditorWindowでデバッグツールを作ると、ゲームのステート管理や実行時のログ表示などを1つの画面でまとめてチェックできます。同じUI要素を使いまわすことで、バグ修正も一元化しやすくなるかもしれません。

ちょっとした注意点

現時点では、まだUGUIほど情報が多くない場合や、特定の機能が完全にサポートされていないケースも存在します。そのため、最新のUnityバージョンで追加された機能を利用する場合は、公式ドキュメントを細かくチェックすると安心ですね。

また、UI Toolkitを用いたAsset Storeのプラグインなどは増えてきていますが、それでもUGUI対応が主流という現実もあります。プロジェクトの要件や開発チームのスキルセットを考慮して、UI Toolkitを導入するタイミングを検討するとスムーズでしょう。

UXMLやUSSは再利用性が高いファイル形式なので、一度作った要素を複数のシーンやウィンドウで流用しやすいです。

まとめ

UI Toolkitは、今後のUnity開発で注目度が増していくUIシステムだといえます。宣言的なアプローチやスタイルシートの管理がしやすいので、複数人での共同作業にも向いています。

エディタ拡張とランタイムのUIを同じスキームで作れるため、ゲーム全体のUI管理を一元化しやすいです。慣れるまではUSSやUXMLの書き方が難しく感じるかもしれませんが、少しずつ触れてみるとメリットを体感できるでしょう。

複雑なUIを構築する機会があるなら、UI Toolkitの機能を試しながらプロジェクトに取り入れてみてください。