UnityでUIを作ろうと思ったら、Canvasという言葉が出てきますよね。
Canvasって何なのか、なぜ必要なのか、よく分からないという人もいるかもしれません。
この記事では、Canvasの役割とUIが表示される仕組みを初心者向けに噛み砕いて解説します。
UIが表示されない・ズレる原因にも触れ、UI理解の入口として説明していきましょう。
- Canvasとは何か
- Canvasの役割
- UIが表示される仕組み
- UIが表示されない・ズレる原因
- Canvasの使い方
Canvasは、UIを表示するためのコンテナです。
UIを作るには、Canvasが必要不可欠ですね。
＼読むだけで終わらせない！実際にゲームを作って実力をつけよう／
トレンド×入門に最適
Unity ノンフィールドRPG
＋スレスパ風JRPG講座
Unity6対応・スマホ化対応の最新カリキュラム。今もっとも人気のデッキ構築型ゲームをJRPGと組み合わせて実装。初心者が最初に選ぶ一本として最適です。
王道アクションに挑戦
Unity 2Dアクションゲーム
の作り方講座（ロックマン風）
ロックマン風の本格横スクロールACTをスマホ化・広告実装まで対応。7ステージ＋ラスボスという市販ゲームに近い本格構成で、リリースまで見据えて作れます。
3D入門に最適
ゼルダ風3Dアクションゲーム
の作り方講座
ゼルダの伝説・モンハン・原神のような3Dアクションをスマホ対応で作れる入門講座。初心者でも全16回でしっかり3D開発の基礎を習得できます。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
Canvasとは
Canvasは、UI要素を表示するためのコンテナです。
ボタンやテキストなどのUI要素は、Canvasの中に配置することで画面に表示されます。
Canvasの役割
Canvasの役割は、以下の通りです：
- UI要素のコンテナ：ボタンやテキストなどのUI要素を格納
- 表示の管理：UI要素の表示順や位置を管理
- スケーリングの管理：画面サイズに応じたUIのスケーリング
Canvasは、UIを表示するための基盤となるコンポーネントです。
なぜCanvasが必要なのか
Unityでは、3D空間とUI空間が別々に管理されています。
3D空間は、ゲームの世界そのものです。
一方、UI空間は、画面に表示されるUI要素の空間ですね。
Canvasは、このUI空間を定義するために必要です。
Canvasがないと、UI要素を画面に表示できません。
UIが表示される仕組み
UIがどのように表示されるのか、仕組みを説明しましょう。
CanvasとUI要素の関係
UI要素は、Canvasの子オブジェクトとして配置します。
以下のような構造になります：
- Canvas：親オブジェクト（UI空間の定義）
- Button：Canvasの子（ボタンUI）
- Text：Canvasの子（テキストUI）
- Image：Canvasの子（画像UI）
UI要素は、必ずCanvasの子として配置する必要があります。
レンダリングの順序
Unityでは、Canvasは最後にレンダリングされます。
つまり、以下のような順序で描画されます：
- 3Dオブジェクト（ゲームの世界）
- Canvas（UI要素）
この順序により、UIが常に最前面に表示されるようになっています。
Canvasが最後にレンダリングされることで、UIが他の要素に隠れないようになっています。
座標系
Canvasには、独自の座標系があります。
3D空間とは異なり、UI空間では画面の左上が(0, 0)となります。
以下のような座標系です：
- 左上：(0, 0)
- 右上：(画面幅, 0)
- 左下：(0, 画面高さ)
- 右下：(画面幅, 画面高さ)
UI空間の座標系を理解することで、UI要素を適切な位置に配置できます。
UIが表示されない・ズレる原因
UIが表示されない、またはズレてしまう原因は、いくつかあります。
よくある原因を説明しましょう。
原因1：Canvasが作成されていない
Canvasが作成されていない場合、UI要素を表示できません。
UI要素を作成すると、自動的にCanvasが作成されますが、手動で作成する場合もあります。
Canvasがないと、UI要素は表示されないので注意が必要ですね。
UI要素を作成する際は、Canvasが自動的に作成されることを確認しましょう。
原因2：Canvasの設定が間違っている
Canvasの設定が間違っている場合、UIが正しく表示されないことがあります。
以下のような設定を確認しましょう：
- Render Mode：Screen Space – Overlay、Screen Space – Camera、World Spaceのいずれか
- Canvas Scaler：画面サイズに応じたスケーリング設定
Canvasの設定を確認することで、表示の問題を解決できることがあります。
原因3：UI要素の位置が画面外にある
UI要素の位置が画面外にある場合、表示されません。
Canvasの座標系を確認して、UI要素が画面内に収まっているか確認しましょう。
AnchorやPivotの設定も、位置に影響を与えるので注意が必要です。
UI要素の位置を確認することで、表示の問題を解決できます。
Canvasの使い方
Canvasの基本的な使い方を説明します。
Canvasの作成
Canvasを作成する方法は、以下の通りです：
- 自動作成：UI要素（Button、Textなど）を作成すると、自動的にCanvasが作成される
- 手動作成：GameObject → UI → Canvasで手動で作成
通常は、UI要素を作成する際に自動的にCanvasが作成されるので、手動で作成する必要はありません。
Canvas Scalerの設定
Canvas Scalerは、画面サイズに応じたUIのスケーリングを制御します。
以下のような設定があります：
- Constant Pixel Size：ピクセルサイズを固定
- Scale With Screen Size：画面サイズに応じてスケーリング
- Constant Physical Size：物理サイズを固定
スマホゲームなど、様々な画面サイズに対応する場合は、「Scale With Screen Size」がおすすめです。
Canvas Scalerの設定により、様々な画面サイズに対応できます。
Render Modeの設定
CanvasのRender Modeには、以下の3つがあります：
- Screen Space – Overlay：画面に直接描画（最も一般的）
- Screen Space – Camera：カメラの前に描画
- World Space：3D空間内に描画
通常のUIでは、「Screen Space – Overlay」を使うことが多いですね。
用途に応じて、適切なRender Modeを選択しましょう。
記事を読んで「作ってみたい！」と思ったら！人気ゲームを題材にした講座で実力をつけよう
知識を読むだけで終わらせるのはもったいない。実際に手を動かしてゲームを1本完成させることで、理解が一気に深まります。人気タイトルをモデルにした講座で、ゲーム開発の第一歩を踏み出しましょう。
Unity ノンフィールドRPG＋スレスパ風JRPG講座【Unity6対応！トレンドのデッキ構築×JRPGをスマホ向けに作れる！】
- Unity6対応・スマホ化対応で最新環境のゲーム開発が学べる
- Slay the Spire風のデッキ構築システム×JRPGの組み合わせを実装
- 初心者でも取り組みやすい丁寧な解説構成
- ノンフィールドRPGとデッキ構築JRPGの2つを合わせて学ぶのがおすすめ
Unity ノンフィールドRPGの作り方講座＋Slay the Spire風デッキ構築JRPGの作り方講座は、今もっともトレンドのデッキ構築型ゲームシステムをJRPGと組み合わせて実装する方法を学べる講座です。
Unity6対応・スマホ化対応の最新カリキュラムで、コラムやTIPSで読んで「なるほど」と思った知識を、実際に動くゲームとして形にする体験ができます。
「Slay the Spireみたいなゲームを自分でも作ってみたい！」という人の最初の一歩として最適な講座です。
Unity6対応・スマホ化対応の最新カリキュラム
トレンドのデッキ構築×JRPGを最速で実装しよう
→ スレスパ風デッキ構築JRPG講座を見てみる
スマホ対応の最新環境で、ゲーム開発の第一歩を踏み出そう！
Unity 2Dアクションゲームの作り方講座（ロックマン風）【全16回！スマホ化・広告実装まで対応した本格横スクロールACTを作れる！】
- ロックマン・マリオ・カービィのような横スクロールACTをゼロから開発
- 7ステージ＋ラスボスステージの市販ゲームに近い本格的なゲーム設計
- スマホ化・AdMob広告実装まで対応してリリースまで見据えた構成
- 敵AI15体・多彩なマップギミック・武器システムを完全実装
- 完全オリジナルゲームをアセット不使用で素材提供付きで制作
Unity 2Dアクションゲームの作り方講座（ロックマン風）は、ロックマン・スーパーマリオ・星のカービィのような2D横スクロールアクションゲームを開発できるようになる本格的な講座です。
TIPSやコラムで学んだ当たり判定・物理挙動・敵AIの知識を、実際のゲームコードとして実装する体験が全16回に凝縮されています。スマホ化・広告実装まで対応しているため、作って終わりではなくリリースまで見据えた実践スキルが身につきます。
「読んで理解した知識を、動くゲームとして形にしたい」という人に強くおすすめの一本です。
スマホ化・広告実装まで対応した本格横スクロールACT
ロックマン風の2Dアクションゲームをリリースまで作り上げよう
→ 2Dアクションゲームの作り方講座を見てみる
広告収益まで視野に入れた実践スキルを今すぐ手に入れよう！
ゼルダ風3Dアクションゲームの作り方講座【全16回！初心者でも3Dアクションがスマホ対応で作れる！】
- ゼルダの伝説・モンハン・原神のような3Dアクションをゼロから開発
- 初心者でも取り組みやすい丁寧な解説構成
- スマホ化対応で実機で動かせるゲームが完成
- アセットを使った実践的なゲーム開発手法が身につく
- 画像・動画・全ソースコード公開の充実したサポート
ゼルダ風3Dアクションゲームの作り方講座は、ゼルダの伝説・モンハン・原神のような本格的な3Dアクションゲームを作りたい人におすすめの入門講座です。
コラム・TIPSで「3Dゲームはなんとなく難しそう」と感じていた人でも、全16回の丁寧な解説で確実に完成まで到達できます。スマホ化対応で実機で動かせるため、作った達成感がひときわ大きい講座です。
「3Dゲームの仕組みを理解した次は、実際に自分で作ってみたい」という人の最初の一歩として最適です。
初心者でも3Dアクションがスマホ対応で完成する
ゼルダ風3Dアクションゲームで3D開発の第一歩を踏み出そう
→ ゼルダ風3Dアクションゲームの作り方講座を見てみる
3D開発の壁を一気に突破！スマホで動くオリジナルゲームを完成させよう！
まとめ
この記事では、UnityのCanvasを初心者向けに解説しました。
重要なポイントをおさらいします。
- CanvasはUI要素を表示するためのコンテナで、UI要素のコンテナ、表示の管理、スケーリングの管理などの役割がある
- UIが表示される仕組みとして、UI要素はCanvasの子オブジェクトとして配置し、Canvasは最後にレンダリングされ、独自の座標系を持つ
- UIが表示されない・ズレる原因として、Canvasが作成されていない、Canvasの設定が間違っている、UI要素の位置が画面外にあるなどがある
- Canvasの使い方として、UI要素を作成すると自動的にCanvasが作成され、Canvas ScalerとRender Modeの設定が重要
- Canvasの設定を理解することで、UIが正しく表示されるようになり、様々な画面サイズに対応できる
Canvasは、UIを表示するために必要なコンポーネントです。
設定を理解すれば、UIを正しく表示できるようになりますよ。
Unity入門の森で、Canvasを含めたUI理解の入口として、Unityの基礎を体系的に学べます。
あなたのペースで、少しずつ進めていけば大丈夫です。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
コメント