はじめに
こんにちは!Unityの使い方シリーズ第11回へようこそ!
今回は、**UI(ユーザーインターフェース)**の作り方を一緒に学んでいきましょう。
ゲームやアプリを使っているとき、画面に表示される「ボタン」や「テキスト」、「スライダー」などを見たことがありますよね?これらのことを**UI(ユーザーインターフェース)**といいます。
例えば、
- 「スタート」や「リトライ」などのボタン
- プレイヤーのHPやスコアを表示するテキスト
- 音量調整のスライダー
これらのUIは、ゲームの操作や見た目をわかりやすくするために欠かせないものです。
今回の目標
この記事では、Unityで簡単なUIを作る手順を、ステップごとに詳しく解説します。
「ボタンを押したら文字が変わる」など、簡単な機能もつけてみましょう!

初心者でも大丈夫。ひとつずつ一緒に進めていくので、安心してくださいね!
それでは、UIの世界にチャレンジしていきましょう!🎮✨
1. UIを作ってみよう!
それでは、実際にUnityでUIを作っていきましょう!今回は、画面にボタンやテキストを追加して、シンプルなUIを作成します。
① キャンバス(Canvas)を追加しよう
UIを作るためには、まず「キャンバス(Canvas)」が必要です。キャンバスはUIを表示するための「土台」のようなものです。
- ヒエラルキーウィンドウで「右クリック」→「UI」→「Canvas」を選びます。
- すると、シーンにCanvasが追加され、画面の中に枠が表示されます。
ポイント
- キャンバスがないと、ボタンやテキストなどのUIは表示されません!
- 「Render Mode」はデフォルトで「Screen Space – Overlay」になっています。この設定なら、画面全体にUIが表示されます。
- 見づらい場合はシーンビューの上にある2Dボタンを押してみてください!

② ボタンを追加しよう
次に、画面にボタンを追加してみましょう。
- ヒエラルキーウィンドウで「右クリック」→「UI」→「Button」を選びます。
- シーンビューにボタンが表示されましたね!
- ボタンのテキストを変更する方法
- ヒエラルキーで「Button」→「Text」を選びます。
- インスペクターウィンドウで「Text」の内容を好きな文字に変えましょう。
例:「START」や「CLICK ME!」

※TextMeshProをインポートしていない場合このような画面が出てくるので、Import TMP Essentialsをクリックしましょう。

③ テキストを追加しよう
次に、画面にテキストを追加します。これでUIに文字を表示できるようになります。
- ヒエラルキーウィンドウで「右クリック」→「UI」→「Text – TextMeshPro」を選びます。
※「TextMeshPro」の確認画面が出た場合は、指示に従ってインポートしてください。 - シーンビューにテキストが表示されます。
- インスペクターウィンドウで文字の内容を変えましょう!
- 「Text Input」欄に表示したい文字を入力します。
- フォントのサイズや色も好きなように調整できます。

④ スライダーや画像を追加しよう
ボタンやテキストだけでなく、他のUI要素も簡単に追加できます。
スライダーを追加する
- ヒエラルキーウィンドウで「右クリック」→「UI」→「Slider」を選びます。
- シーンにスライダーが表示されます。
- インスペクターウィンドウでスライダーのサイズやデザインを調整しましょう。

画像を追加する
- ヒエラルキーウィンドウで「右クリック」→「UI」→「Image」を選びます。
- シーンに白い四角が表示されます。
- 画像を設定する場合は、プロジェクトウィンドウに画像を追加して、インスペクターの「Source Image」にドラッグ&ドロップします。


これでUIの基本的なパーツが作成できました!
次のステップでは、UIに簡単な機能を追加して、動かしてみましょう!😊✨
2. UIに機能を追加しよう
次は、作成したUIに機能を追加してみましょう!
例えば、「ボタンをクリックすると、画面のテキストが変わる」というシンプルな動きを作ります。
① スクリプトを作成しよう
まずは新しいスクリプトを作成します。
- プロジェクトウィンドウを右クリックし、「Create」→「C# Script」を選びます。
(Unity6では「Create」→「Scripting」→「C# Script」) - 名前を「ButtonClickTMP」と付けましょう。
② スクリプトの中身を書く
作成したスクリプトをダブルクリックして開き、以下のコードを入力します:
using UnityEngine;
using TMPro; // TextMeshProを使うための名前空間
public class ButtonClickTMP : MonoBehaviour
{
// TextMeshProのテキストを参照する変数
public TMP_Text displayText;
// ボタンがクリックされたときに実行する関数
public void OnButtonClick()
{
displayText.text = "clicked!";
}
}
ポイント:
TextMeshPro
を使うためには、**TMP_Text
**型を使用します。通常のText
とは異なるので注意しましょう。- Text(Legacy)の場合は変数をこのように書きます。public Text displayText;
③ スクリプトをアタッチしよう
次に、このスクリプトをUIのボタンに関連付けます(アタッチします)。
- ボタンオブジェクトをヒエラルキーで選びます。
- 作成した「ButtonClickTMP」スクリプトをボタンにドラッグ&ドロップします。
- ボタンのインスペクターウィンドウを確認し、スクリプトが追加されていることを確認しましょう。
④ TextMeshProのテキストオブジェクトを設定する
ボタンをクリックしたときに変更するTextMeshProのテキストを設定します。
- ヒエラルキーにある「Text – TextMeshPro」オブジェクトを選びます。
- スクリプトの「displayText」項目に、このText – TextMeshProオブジェクトをドラッグ&ドロップします。

⑤ ボタンのクリックイベントを設定する
最後に、ボタンをクリックしたときに実行される関数を設定します。
- ボタンオブジェクトを選び、インスペクターの「On Click ()」項目を見つけます。
- 「+」ボタンをクリックして新しいイベントを追加します。
- 「ButtonClickTMPスクリプト」がアタッチされているオブジェクトを指定します。
- 関数一覧から「ButtonClickTMP → OnButtonClick」を選びます。

⑥ シーンを再生して確認しよう!
ここまで設定できたら、シーンを再生して動作を確認しましょう!
- ボタンをクリックすると、TextMeshProのテキストが「clicked!」に変わります。

この手順を覚えれば、もっと複雑なUIの動きも作れるようになります。
次は、スライダーや他のUI要素に動きをつけてみるのもいいですね!😊✨
6. まとめ
今回はUnityを使ってUI(ユーザーインターフェース)を作成する方法を紹介しました。
- キャンバス(Canvas) を追加する
- ボタンやTextMeshProのテキスト を配置してデザインする
- スクリプト でボタンをクリックしたときの動きを作る

これらのステップで、シンプルなUIが作れるようになりましたね!ボタンやテキストはゲームやアプリ制作に欠かせない要素です。少しずつできることを増やして、もっと高度なUIにも挑戦してみましょう!
Unity初心者でも簡単!アセットを活用してゲーム開発を加速しよう!
Unity Asset Storeには、初心者でもすぐに使える便利なアセットがたくさんあります。
でも「どれを使えばいいの?」「どう活用すればいいの?」と迷っていませんか?
この記事では、初心者向けのおすすめアセットとその活用法を詳しく解説!
ゲーム開発をもっと楽しく、効率的に進めたいなら必見です!
よくある質問
- Qキャンバス(Canvas)が見えません。どうすればいいですか?
- A
シーンビューの上にある「2D」ボタンをクリックすると、UIが見やすく表示されます。また、キャンバスの「Render Mode」が「Screen Space – Overlay」になっているか確認してください。
- QTextMeshProのテキストが表示されません。どうしたらいいですか?
- A
TextMeshProを初めて使うときは、パッケージがインストールされているか確認してください。Unityが「TextMeshProの導入」を促すダイアログを表示する場合があるので、その指示に従ってインポートしましょう。
- QTextMeshProと普通のテキスト(UI Text)は何が違うのですか?
- A
TextMeshProは、普通のテキストよりもきれいな表示ができ、文字の装飾や細かいデザイン調整が可能です。特に高解像度の画面やゲームでは、TextMeshProが推奨されています。