目次
はじめに
今回は 「UI Toolkit」だけ を使って、スマホのソーシャルゲーム風ホーム画面UIを作ってみました。
UI Toolkitは、コードを書かずにUIを作れる便利なツールです。
ただ、「ソシャゲ風の複雑なUIも作れるの？」と思う方もいるかもしれませんね。
この記事では、実際に作った手順をご紹介します。
UIの全体設計
まずは今回作るホーム画面のUI構成を簡単にご紹介します。
ソシャゲによくある
「トップバー・中央エリア・ボトムメニュー」の3つに分けて考えました。
それでは、この構成をもとに UXMLでUIを組み立てていきます。
1. プロジェクト準備
まずは UIを作る環境 を整えましょう。
Unityプロジェクトを作成
Unity Hubから新しいプロジェクトを作成します。
2Dでも3DでもOK ですが、UI Toolkitが使えるUnity6以降のバージョンを選びましょう。
UI Document作成
UI Toolkitでは 「UXMLファイル＋UIDocument」 が基本になります。
これでUIの見た目を作ったり、ゲーム画面に表示できるようになります。
① UIDocumentを作成
Hierarchy > Create > UI Toolkit > UI Document
② UXMLファイルを作成
Assets > Create > UI Toolkit > UI Document(UXML)
③ UIDocumentにUXMLをセット
UIDocumentを選び、「Source Asset」に作成したUXMLをドラッグ＆ドロップ
これでUIを作る土台ができました。
ゲームビューとPanelSettingsの設定
UIの見え方を確認しやすくするため、ゲームビューとUIのサイズ感を合わせます。
① ゲームビューのサイズを設定
ゲームビューの解像度を「1920×1080」など適切なものにします。
（今回は横画面のスマホUIなので横長推奨）
② PanelSettingsのScale Modeを変更
UIDocumentのPanelSettingsを開き、
Scale Mode を「Constant Pixel Size」にします。
→ UIのサイズが画面解像度に合わせて安定します。
UI Builderで開く
作成したUXMLをダブルクリックし、UI Builderを開きましょう。
これからはUI BuilderでUIを作り込んでいきます。
🛠️ 作業のコツ
UI Builderは稀に動作が不安定になることがあります。
Ctrl + Sでこまめに保存するのがおすすめです。
Match Game Viewにチェック
UI Builderの左側「uxml」を選び、「Match Game View」にチェック
→ ゲームビューと同じサイズでUIがプレビューされます
チェック後、「Fit Viewport」ボタンを押して画面全体を表示します。
フォントを用意する
日本語UIに必要なので、日本語対応のフォントをインポートします。
今回は「NotoSansJP」を使います。
➡️Noto Sans Japaneseダウンロードはこちら
- プロジェクト内に「Fonts」フォルダを作成
- ダウンロードしたフォントファイルをインポート
これで UIを作る準備が完了しました！
次はいよいよUIの各ブロックを配置していきます。
2. UXMLファイルを作成する
ここから 実際にUIの土台を作っていきます。
UI Toolkitでは 「UXMLファイル」にUI要素を配置してUIレイアウトを組みます。
今回はよくあるスマホゲームUIのように、
「トップバー・中央・ボトムメニュー」 の3つに画面を分ける構成を作ります。
画面全体の土台「MainContainer」を作成
まずは 画面全体を包むコンテナを作りましょう。
これが UIの親要素となります。
① VisualElementを配置
UI BuilderのLibraryから VisualElement をHierarchyにドラッグ＆ドロップ
② 名前を「MainContainer」に変更
Hierarchy上で右クリック → Rename
「MainContainer」と入力
🛠️ ポイント
VisualElementは「空のオブジェクト」のようなものです。
HTMLでいう <div> に近く、
中に他のUI要素を入れて使うための入れ物になります。
子要素（3つのエリア）を配置
続いて、MainContainerの中に 3つの子要素を配置し、
UIエリアごとにブロックを分けます。
① MainContainerを選択
HierarchyでMainContainerをクリック
② VisualElementを3つ配置
Libraryから VisualElement を3回ドラッグして MainContainerの子要素にします
③ それぞれ名前を変更
| VisualElement | 名前 |
| 1つ目 | TopBar |
| 2つ目 | MiddleArea |
| 3つ目 | BottomMenu |
これでUIは 縦に3つのエリアに分かれた構成になります。
🛠️ ポイント
Hierarchy上でもUI Builderのプレビューでも
要素が縦に並んでいることを確認しておきましょう。
（後でUSSでデザインを調整します）
UIの表示範囲を考える
ソシャゲのホーム画面は中央にキャラクターがいます。
上下にUIがあり、左右に少しボタンがある場合が多いかと思います。
今回は横画面で作成するため、上下のUIは画面を圧迫しすぎないよう、ほどほどのサイズにします。
- TopBar を選択し、 Flex Grow を「0」にします。
（これで高さは自動伸縮せず、決めたサイズを保ちます）
次に Size > Height を「20%」にします。 - MiddleArea も Flex Grow = 0 にし、 Height = 60% にします。
（ここがメインの表示エリアなので広めに取ります） - BottomMenu も同様に Flex Grow = 0、 Height = 20% にします。
これで3つの高さの合計が100%になり、画面全体をぴったり分割できます。
TopBarを選択し、Flex Growを「０」にし、SizeのHeightを「20%」に。
残り二つもFlex Growを「０」にし、SizeのHeightをMiddleAreaは「60%」、BottomMenuは「20%」にします。
これでUIの大まかな骨組みができました。
次はそれぞれのパーツを詳しく作り込んでいきます。
3. 各パーツを作り込んでいく
ここからはUIの 各エリアを具体的に作り込んでいきます。
まずは画面上部のトップバーからスタートします。
3-1. トップバーの作成
トップバーは「プレイヤーアイコン」や「スタミナバー」を表示するエリアです。
画面の一番上に固定されることが多いパーツですね。
① TopBarを2つのエリアに分ける
まずはTopBar内を「アイコン用」と「スタミナ用」に分けます。
- TopBarの子要素に VisualElement を2つ配置
- 名前を 「icon-area」「stamina-area」 に変更
TopBarの並び方向を横並びにします。
- TopBarを選択し Flex Direction → Row
見やすくするため 背景色も付けておきます。
🛠️ ポイント
Flex Direction: Row は「中身を横並び」にする設定。
これで アイコン(左) — スタミナバー(右) の配置がしやすくなります。
プレイヤーアイコンを作る
次は左上の「プレイヤーアイコン」エリアを作ります。
① icon-areaのサイズ指定
- icon-areaを選択
- Size → 200px × 200px
- Flex Grow → 0
② icon-area内にボタンを追加
- Button をドラッグしてicon-areaの子要素に
- 名前を 「icon-button」 に変更
Buttonの見た目を整えます。
- Size → 100% × 100%
- Margin / Padding → 0px
- Background Color → 黒
- Border Color → 白
- Border Width → 5px
- Radius → 100px（正円にする）
Buttonの文字は消しておきましょう。
- AttributesのText → 空欄に
③ ボタン内にLabelを配置
- Labelをicon-buttonの子要素に追加
- Text Color → 白
- Font → NotoSansJP-Medium
Labelを3つ複製しておきます（Ctrl+D）
icon-buttonを選択し
- Align Justify Content → center
各Labelの文字とサイズを設定して
プレイヤー情報（ランクなど）を表示できるようにします。
スタミナバーを作る
続いて 右側のスタミナバーを作成します。
① stamina-areaにProgressBarを追加
- ProgressBar をドラッグし子要素に追加
② stamina-areaのサイズ調整
- Flex Grow → 0
- Size Width → 30%
TopBarの並びを両端に振り分けます
- TopBarを選択
- Justify Content → space-between
これで
左：プレイヤーアイコン
右：スタミナバー
のトップバーが完成です。
3-2. サイドメニューの作成
次は 左右のサイドメニューを作ります。
「ミッション」「プレゼント」などのボタンを配置する部分です。
MiddleAreaを左右に分ける
- MiddleAreaの子要素に VisualElementを2つ配置
- 名前を 「LeftMenu」「RightMenu」 に変更
- 背景色も変更してわかりやすく
MiddleAreaの並びを横並びに
- Flex Direction → Row
- Justify Content → space-between
① LeftMenuのサイズ
- Flex Grow → 0
- Width → 20%
② RightMenuのサイズ
- Flex Grow → 0
- Width → 30%
💡 Flex Growって何？
Grow=1だと「余ったスペースを埋める」挙動になります。
サイズを 固定したいときはGrow=0 にします。
左メニューのボタンを作る
- LeftMenuに Button を追加
- Height → 18%
- Margin → 5px
- Padding → 0px
- Background / Border Color → 任意
- Border Width → 6px
5つに複製 (Ctrl+D)
右メニューのボタンを作る
- RightMenuに Button を追加
- Height → 40%
- Margin → 5px
- Padding → 0px
- Border設定 → 左メニューと同じ
- 2つに複製 (Ctrl+D)
ボタンの位置を下に揃える
- LeftMenu → Justify Content → flex-end
- RightMenu → Justify Content → flex-end
これで 左右のボタンが下揃えになります。
左メニューを細かく調整
- Button Width → 75%
- Background / Border Color変更
- Text → Font Size / Color変更
- Font → NotoSansJP-Medium
メニューが思いつかなかったので4つに減らしました
右メニューも調整
- Button Width → 任意（小さくする）
- Align Self → flex-end（右寄せ）
左右メニューがそれっぽく仕上がった！
次は 下部ナビゲーションメニューを作っていきます。
3-3ボトムメニューの作成
最後に画面下部のナビゲーションメニューを作ります。
ソーシャルゲームでよく見る「ホーム」「ガチャ」「メニュー」などのボタンが並ぶ部分です。
ボトムメニューの作成
まずは BottomMenu を選択し、Flex Direction を「row」に設定します。
これで子要素が横並びになります。
続いて Button をドラッグし、BottomMenuの子要素として追加します。
BottomMenuの Justify Content を「space-between」に変更すると、ボタン同士の間隔が自動で均等になります。
次にボタンのサイズを調整します。
Button を選択し、Size の Width を「20%」、Height を「50%」に設定します。
さらに BottomMenu の Align Items を「flex-end」に変更すると、ボタンが下端に揃います。
ボタンを微調整する
ボタンの配置を整えるポイントは Marginを0pxにする ことです。
これで Widthが20%のボタンが5つ、横幅ぴったりに収まります。
ここまでの作業では、レイアウトを作りながら見た目も少しずつ整えてきました。
次は、これまでインラインで設定していたスタイルを、USSファイルにまとめて整理していきます。
4. インラインスタイルをUSSにまとめる
作業が進んできたら、インラインスタイルをUSSにまとめて管理しやすくします。
USSファイルの作成
StyleSheetsの「＋」 > Create New USS
UI Toolkitフォルダに名前を付けて保存します。
インラインスタイルの抽出
- スタイルを変更した要素（VisualElementなど）をクリック
- 左に白い線があるプロパティ＝変更済みの箇所です
- その右側の「︙（三点リーダー）」をクリック
- 「Extract All Inlined Styles to Selector」→「New Class」を選択
クラス名を付けて保存
任意のクラス名をつけて「Create Class」をクリックします
例：main-container
→ USSファイルに .main-container が自動追加され、
対象の要素（MainContainer）にも .main-container クラスが付与されます。
すべての要素のインラインスタイルをクラス化する
複製したボタンは、最初のボタンだけクラスを作成すればOK
（クラスを作成したボタンはInspectorの白いラインが消えます。Attributesは残っていてOK）
2番目以降のボタンにはインラインスタイルが残っているので、
以下の方法でクラスを適用します。
クラス適用の方法
- 作成したクラスをHierarchy内のボタンにドラッグ
- 適用したら右クリックして「Unset all」しましょう
（Unset allしないとインラインスタイルが残ったままです）
クラスをドラッグして適用
クラスを適用したら右クリックして「Unset all」しましょう
Unset allしなかった場合
「Unset all」しないとインラインスタイルが残ったままになります。
プロジェクトのUXMLを確認すると、まだスタイル情報が埋め込まれているのがわかります。
UXML内のインラインスタイルがシンプルになっているか、こまめに確認しましょう。
完成
5. まとめ・感想
UI Builderを使うとコードを書かずにここまでしっかりしたUIレイアウトが作れるのが魅力です。
特にVisualElementとFlexbox（Flex Direction・Justify Contentなど）の使い方を覚えると、自由度の高いUI設計が可能になります。
また、「Flex Grow」「Align Items」などのプロパティの役割を視覚的に理解しながら作業できるため、CSSやレイアウトが苦手な方でも感覚的にUIを作れるのが強みだと感じました。
このようにUI Toolkitは「ソーシャルゲーム風のUI」も十分実現できるパワフルなツールです。
今後はUSSによる見た目のカスタマイズやC#での機能実装にも挑戦してみると、さらに理解が深まります。
ポチップ
