テキスト、ボタン、画像の基本UI要素【Unityスタートガイド9-2】

2026-10-06

9-1でCanvasの準備ができたので、いよいよUIの部品を置いていきます。文字・ボタン・画像・パネルの4つと、画面サイズが変わってもずれない配置のしかた（アンカー）を覚えれば、タイトル画面ぐらいならすぐ作れるようになります！

この記事で学べること

Text（TextMeshPro）の作成と基本設定
Button（ボタン）の作成と、クリックしたときの処理の設定
Image（画像）の配置とスプライトの設定
Panel（パネル）で背景やグループを作る方法
Rect TransformとAnchor（アンカー）での配置
実践：シンプルなタイトル画面の作成

前提知識

UnityのUI（Canvas）システムを知ろう

UIの部品の共通点

UIの部品には、次のような共通点があります。

Canvasの子として置く
位置と大きさはRect Transformで決める
見た目はImageやTextMeshProなどの描画用のコンポーネントで決める
Hierarchyで下にあるものほど手前に表示される

Text（テキスト）の作成と設定

テキストを作る

HierarchyでCanvasを右クリック>UI>Text – TextMeshPro
シーンに「New Text」と表示される

初めて作るときに「TMP Importer」のウィンドウが出たら、Import TMP Essentialsを押してください（9-1で説明したとおりです）。

テキストの基本設定

Text Input：表示する文字
Font Size：文字の大きさ
Vertex Color：文字の色
Alignment：文字の配置（左揃え・中央揃え・上下の位置など）
Wrapping：枠の幅で折り返すかどうか

日本語を表示するには

最初から入っているフォント（LiberationSans SDF）は英語用なので、そのままでは日本語が「□」で表示されます。日本語のフォントの作り方は、9-3の記事で詳しく説明します。

TextMeshProのFont Assetの欄の右にある丸いボタンをクリック
9-3で作った日本語のフォントアセットを選ぶ

Button（ボタン）の作成とクリックイベント

ボタンを作る

Canvasを右クリック>UI>Button – TextMeshPro
ボタンが表示される。ボタンの子に、文字用のText (TMP)も作られます

ボタンのしくみ

Button：クリックを受け付けて、登録した処理を呼ぶ
Image：ボタンの見た目（背景の画像や色）
子のText (TMP)：ボタンに書かれた文字

Interactable：チェックを外すと押せなくなる（グレーになる）
Transition：マウスを乗せたとき・押したときの見た目の変化（色が変わるColor Tintが初期設定）

クリックしたときの処理を設定する

ボタンが押されたときに、スクリプトのメソッドを呼んでみましょう。

「TitleMenu」という名前でスクリプトを作る

using UnityEngine;

public class TitleMenu : MonoBehaviour
{
    // ボタンから呼ぶメソッドはpublicにする
    public void OnStartButtonClicked()
    {
        Debug.Log("スタートボタンが押された！");
    }
}

Hierarchyで右クリック>Create Emptyを作り、名前をTitleMenuにして、TitleMenuスクリプトをアタッチ
ボタンを選び、On Click ()の「＋」を押す
「None (Object)」の欄に、HierarchyのTitleMenuオブジェクトをドラッグ＆ドロップ
右の「No Function」のプルダウンから、TitleMenu>OnStartButtonClicked()を選ぶ

再生してボタンを押し、Consoleにメッセージが出れば成功！

ボタンから呼べるのはpublicのメソッドだけです（6-6で作ったメソッドの前にpublicを付けます）
実際のゲームでは、ここで8-3の記事で紹介したシーンの切り替え（SceneManager.LoadScene）などを呼びます

Image（画像）の配置とスプライト設定

画像を作る

Canvasを右クリック>UI>Image
白い四角（画像がまだ設定されていない状態）が表示される

画像（スプライト）を設定する

画像ファイルをProjectウィンドウにドラッグ＆ドロップで取り込む
取り込んだ画像を選び、InspectorのTexture Typeを「Sprite (2D and UI)」にしてApply（Universal 2Dのプロジェクトなら最初からSpriteです）
ImageのSource Imageに、画像をドラッグ＆ドロップ

画像のサイズ調整

Width / Height：Rect Transformで画像の大きさを指定
Set Native Size：画像の元の大きさに合わせる
Preserve Aspect：チェックすると、縦横の比率を保ったまま表示する

Panel（パネル）で背景を作る

パネルを作る

Canvasを右クリック>UI>Panel
画面いっぱいに、半透明の白い背景が表示される

Panelは、実は「画面いっぱいに広がったImage」です。

パネルの使い道

背景：テキストやボタンの後ろに敷く
グループ：関係するUIをパネルの子にまとめておくと、パネルをSetActive(false)するだけでまとめて隠せる（6-9の記事で紹介しました）
暗幕：色を半透明の黒にすると、後ろのゲーム画面を暗くしてメニューを目立たせられる

Rect TransformとAnchorによる配置

Anchor（アンカー）とは

アンカーは、UIを配置するときの「基準の場所」です。画面の大きさが変わっても、アンカーを基準にした位置が保たれます。

アンカーが「右上」なら、画面が広くなってもUIは右上にくっついたまま
アンカーが「中央」なら、いつも画面の中央から同じ距離の場所

Anchor Presetsを使う（オススメ）

Rect Transformの左上の四角いアイコン（Anchor Presets）をクリック
一覧から、基準にしたい場所をクリック

キーを押しながらクリックすると便利です

Shiftを押しながら：Pivot（回転や拡大の中心）も同じ場所に設定される
Altを押しながら：UIの位置も、その場所に移動する
Shift+Altを押しながら：アンカー・Pivot・位置をまとめて設定（一番よく使います）

代表的なプリセット

中央（middle / center）：画面の中央が基準
左上（top / left）：画面の左上が基準
右下（bottom / right）：画面の右下が基準
ストレッチ（stretch）：親の大きさに合わせて伸び縮みする（一覧の一番右・一番下）

位置と大きさの数字

アンカーの種類によって、Rect Transformに表示される数字が変わります。

アンカーが1点のとき（中央、右上など）
- Pos X / Pos Y：アンカーからの位置
- Width / Height：幅と高さ
ストレッチのとき
- Left / Right / Top / Bottom：親の端からどれだけ内側にするか
- すべて0にすると、親とぴったり同じ大きさになる

実践：シンプルなタイトル画面を作ろう

ここまでの内容で、タイトル画面を作ってみましょう。

背景パネル（Panel）
背景画像（Image）
タイトルの文字（Text – TextMeshPro）
スタートボタン（Button – TextMeshPro）

手順1：Canvasの準備

新しいシーンを作り、Canvasを作る
9-1のとおり、Canvas ScalerをScale With Screen Size（1920 x 1080）にしておく

手順2：背景パネル

Panelを作る
アンカーはストレッチのまま（Left・Right・Top・Bottomをすべて0）
ImageのColorを半透明の黒にする

手順3：背景画像

Panelを右クリック>UI>Imageで、Panelの子としてImageを作る
Anchor PresetsでShift+Altを押しながらストレッチ（右下の角）をクリック
Source Imageに背景の画像を設定する
背景画像が手前に来てしまったら、HierarchyでImageをPanelの一番上に移動する（上にあるものほど奥に表示されます）

手順4：タイトルの文字

Canvasを右クリック>UI>Text – TextMeshProを作り、名前をTitleTextにする
Anchor PresetsでShift+Altを押しながら、上・中央（top / center）をクリック
Pos Yを-200ぐらいにして、少し下に下げる
Text Inputを「My Game」、Font Sizeを72、Alignmentを中央揃えにする

手順5：スタートボタン

Canvasを右クリック>UI>Button – TextMeshProを作り、名前をStartButtonにする
アンカーは中央のまま、Width 300、Height 80にする
子のText (TMP)の文字を「START」にする
上の「クリックしたときの処理を設定する」の手順で、TitleMenuのOnStartButtonClicked()を登録する

完成！

ゲームビューの解像度を切り替えても、タイトルは上に、ボタンは中央に、ずれずに表示されていれば成功です！

注意点や小ネタ

UIの名前を付けよう

UIの部品は増えやすいので、何の部品か分かる名前を付けておきましょう。

TitleText：タイトルの文字
StartButton：スタートボタン
BackgroundImage：背景画像
MainMenuPanel：メインメニューのパネル

Panelでグループにまとめる

Canvas
├── BackgroundPanel (Panel)
│   └── BackgroundImage (Image)
├── MainMenuPanel (Panel)
│   ├── TitleText (Text - TextMeshPro)
│   └── StartButton (Button)
└── SettingsPanel (Panel)
    └── BackButton (Button)

画面ごとにPanelを分けておくと、「設定画面を開く」は「SettingsPanelをSetActive(true)にする」だけで出来ます。

透明度

UIの透明度は、ColorのA（アルファ）で調整します。0で完全に透明、最大で不透明です。

スライム

ボタンを置いたのに、なぜか押せない・・・

フェアリー

透明なPanelが上にかぶさっていないか確認してみて！見えなくてもクリックを吸い取っちゃうんだ。ImageのRaycast Targetのチェックを外すと、クリックを通すようになるよ

よくあるエラーと対処法

エラー：日本語が「□」で表示される

原因：Font Assetが日本語に対応していない
対処法：9-3の記事の手順で日本語のフォントアセットを作り、Font Assetに設定する

エラー：ボタンが押せない

原因：EventSystemがない、ButtonのInteractableが外れている、または透明なUIが上にかぶさっている
対処法：EventSystemを確認する。上にかぶさっているUIのRaycast Targetのチェックを外す

エラー：画像が設定できない（Source Imageにドロップできない）

原因：画像のTexture TypeがSpriteになっていない
対処法：画像を選び、Texture Typeを「Sprite (2D and UI)」にしてApplyする

エラー：解像度を変えるとUIがずれる・画面の外に出る

原因：アンカーが中央のままになっている、またはCanvas ScalerがConstant Pixel Sizeのまま
対処法：置きたい場所に合わせてアンカーを設定する。Canvas ScalerをScale With Screen Sizeにする

まとめ

Text – TextMeshPro：文字を表示する（日本語は9-3で）
Button：On Click ()にpublicのメソッドを登録して、押されたときの処理を呼ぶ
Image：Source Imageにスプライトを設定する
Panel：背景やグループに使う
アンカー：Anchor PresetsをShift+Altを押しながらクリック。ストレッチのときはLeft・Right・Top・Bottom

次のステップ

次は、TextMeshProで日本語を表示する方法と、文字をきれいに見せる設定を学びましょう：

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

コメント一覧（2件）

TextMeshProで美しいテキストを表示しよう【Unityスタートガイド9-3】 | あのゲームの作り方Web版 より:

2026-10-06 14:00

[…] テキスト、ボタン、画像の基本UI要素 […]

返信
入力系のUIを作ろう：InputField・Slider・Toggle・Dropdown【Unityスタートガイド9-5】 | あのゲームの作り方Web版 より:

2026-10-07 12:00

[…] テキスト、ボタン、画像の基本UI要素 […]

返信