UnityのUI（Canvas）システムを知ろう【Unityスタートガイド9-1】

2026-10-06

スコアの表示、スタートボタン、HPのゲージ・・・ゲームの画面には、プレイヤーに情報を伝えたり操作を受け付けたりする「UI」がたくさんあります。第9章では、UnityのUIの作り方を学んでいきます。まずはUIの土台になるCanvasから始めましょう！

この記事で学べること

UI（ユーザーインターフェース）とは何か
Canvasの役割と作り方
Render Mode（描画モード）の違い
Canvas Scalerで、いろいろな画面サイズに対応する方法
UIオブジェクトとワールドオブジェクトの違い（Rect Transform）
EventSystemの役割

前提知識

UI（ユーザーインターフェース）とは？

UIとは、プレイヤーとゲームをつなぐ「窓口」のことです。

情報を伝える：スコア、HP、残り時間、メッセージ
操作を受け付ける：ボタン、スライダー、文字の入力

UnityのUIは、すべてCanvas（キャンバス）という親オブジェクトの上に配置します。Canvasは「絵を描くためのキャンバス」のようなもので、UIの部品はこのキャンバスに描かれるイメージです。

UnityにはUIの仕組みが2つあります。この講座では、ゲームオブジェクトとして扱えて情報も多いuGUI（Canvasを使う方式）で説明します。もう1つのUI Toolkitは、慣れてから触ってみてください。

Canvasの作成と基本設定

Canvasを作成しよう

Hierarchyウィンドウで右クリック>UI>Canvasを選択
- Unityのバージョンによっては、メニューの名前が「UI (Canvas)」のように表示されることがあります

Canvasと一緒に、EventSystemというオブジェクトも自動で作られます（役割は後で説明します）。

スライム

Canvasを作ると、シーンビューに巨大な白い四角が出てきてビックリします・・・これはUIが「画面の大きさ」で表示されているからです。UIを編集するときは、Canvasを選んでFキーを押すと全体が見えますよ

Canvasに付いているコンポーネント

Canvas：UIの描画方法の設定
Canvas Scaler：画面サイズに合わせてUIの大きさを調整
Graphic Raycaster：ボタンなどのUIへのクリックやタッチを見つける

一つずつ見ていきましょう。

Canvasコンポーネントの設定

Render Mode（描画モード）

UIをどのように表示するかを決める設定です。3つのモードがあります。

Screen Space – Overlay
- 一番シンプルなモード。UIが常に画面の一番手前に表示される
- スコアやHPなど、普通のゲームのUIはこれでOK
Screen Space – Camera
- 指定したカメラの少し前にUIを置いて表示する
- UIにもポストプロセスなどのカメラの効果をかけたいときに使う
- Render Cameraにカメラを設定する必要があります
World Space
- Canvasを3Dの空間の中に置く
- キャラクターの頭の上のHPゲージや、ゲーム内の看板、VRのUIなどに使う

最初は「Screen Space – Overlay」のままでOKです。

Canvas Scalerで画面サイズに対応しよう

パソコンやスマホなど、画面の大きさはいろいろです。Canvas Scalerを設定しておくと、どの画面でもUIの見た目の割合がそろいます。

UI Scale Mode（スケールモード）

Constant Pixel Size（初期設定）
- UIを決まったピクセル数の大きさで表示する
- 画面が大きくなると、UIが相対的に小さく見える
Scale With Screen Size（オススメ）
- 基準の解像度を決めて、画面の大きさに合わせてUIを拡大・縮小する
- スマホやタブレットなど、いろいろな画面に対応しやすい
Constant Physical Size
- 実際の長さ（センチなど）が同じになるように調整する

Scale With Screen Sizeの設定

Reference Resolution：UIを作るときの基準の解像度
- 横長のゲームなら1920 x 1080がよく使われます
Match：画面の縦横比が基準と違うとき、横幅（Width）と高さ（Height）のどちらに合わせるか
- 横長のゲームなら0.5前後、縦持ちのスマホゲームならWidth寄りなど、ゲームに合わせて調整します

UIオブジェクトとワールドオブジェクトの違い

ワールドオブジェクト

3Dや2Dのゲームの世界に置くオブジェクト
Transformで位置・回転・大きさを決める

UIオブジェクト

Canvasの上に置くオブジェクト
Rect Transform（四角形の位置と大きさ）で配置を決める
画面の「どこを基準にするか」を決めるアンカー（Anchor）がある

アンカーのおかげで、「画面の右上から少し内側」のように、画面の大きさが変わってもずれない配置が出来ます。アンカーの使い方は、次の9-2の記事で説明します。

EventSystemの役割

Canvasと一緒に作られたEventSystemは、UIの操作を管理するオブジェクトです。

マウス・タッチ・キーボード・ゲームパッドの入力を受け取る
どのUIがクリックされたかを見つけて、そのUIに知らせる
ボタンのクリックやスライダーのドラッグを動かす

Unity6の新しいプロジェクトでは、6-7で説明したInput Systemを使うので、EventSystemにはInput System UI Input Moduleが付いています。古い記事に出てくる「Standalone Input Module」は、古い入力の仕組み用のものです。Standalone Input Moduleが付いている場合は、Inspectorに表示される「Replace with InputSystemUIInputModule」のボタンで置き換えましょう。

シーンにはEventSystemが1つ必要です。消してしまうとボタンが押せなくなります。

実際にCanvasを使ってみよう

Canvasに、テキストとボタンを置いてみましょう。

手順1：テキストを作る

HierarchyでCanvasを右クリック>UI>Text – TextMeshPro
- 初めて作るときは「TMP Importer」というウィンドウが出るので、Import TMP Essentialsを押します（TextMeshProで文字を表示するのに必要なファイルが取り込まれます）
ゲームビューに「New Text」と表示されればOK

手順2：ボタンを作る

Canvasを右クリック>UI>Button – TextMeshPro
ゲームビューにボタンが表示されればOK

UIのメニューには「Legacy」という項目の中に古いTextやButtonもありますが、この講座ではTextMeshPro（TMP）の方を使います。文字がきれいに表示でき、今のUnityの標準です
TextMeshProの詳しい使い方や、日本語を表示する方法は9-3の記事で説明します

注意点や小ネタ

UIの重なり順

同じCanvasの中のUIは、Hierarchyで下にあるものほど手前に表示されます。重なり順を変えたいときは、Hierarchyで並び順を入れ替えましょう。

Canvasは分けて使える

UIが多くなってきたら、Canvasを複数に分けると管理しやすくなります。

タイトル画面用のCanvas
ゲーム中のHUD（スコアやHP）用のCanvas
ポーズメニュー用のCanvas

Canvasの中身が1つでも変わると、そのCanvas全体が描き直されます。スコアのように頻繁に変わるUIと、ほとんど変わらない背景のUIを別のCanvasにしておくと、動作も軽くなります。複数のCanvasの重なり順は、CanvasコンポーネントのSort Orderで決まります（大きいほど手前）。

フェアリー

最初は1つのCanvasで大丈夫！UIが増えてきて「ごちゃごちゃしてきたな」と思ったら分けてみてね

よくあるエラーと対処法

エラー：UIの部品がCanvasの外に作られた

原因：UIの部品は、必ずCanvasの子である必要があります。Canvasがない状態でUIを作ると、Unityが自動で新しいCanvasを作ります
対処法：意図しないCanvasが増えていたら、UIを使いたいCanvasの中にドラッグ＆ドロップして、不要なCanvasを削除する

エラー：EventSystemが2つある

原因：UIを作るたびにEventSystemが増えた、または別のシーンからコピーした
対処法：EventSystemは1つあれば十分なので、余分なものを削除する

エラー：UIが画面に表示されない

原因：UIがCanvasの子になっていない、Canvasの外（画面の外）に配置されている、またはRender ModeがScreen Space – Cameraなのにカメラが設定されていない
対処法：HierarchyでCanvasの子になっているか確認する。Render ModeをScreen Space – Overlayにして確認する