「UIを置いたのに、Gameビューに何も出ない」
そんな状態で立ち止まっていませんか。
ButtonやImageを作る前に、Canvasの設定を押さえておくと、あとからのトラブルがぐっと減ります。
Canvasは画面上のUIを描画する土台です。
この記事では、作成手順からRender Mode、Canvas Scalerまで、実際のゲーム画面に合わせた数値例も交えて説明します。
- CanvasとCanvas Scalerの違いが分からず、設定画面がよくわからない…
- スマホとPCでUIの位置やサイズがバラバラになってしまう。
- UIを追加したのに画面に表示されない原因がつかめない。
✨ この記事でわかること
- HierarchyからCanvasを作成する手順
- Render Mode（Screen Space / World Space）の選び方
- Canvas Scalerで解像度に強いUIを作る設定
- UIが表示されないときのチェックリスト
- 150Buttonや151Imageを載せる前の土台づくり
＼プログラミング未経験でも大丈夫！まずは1本作り切ろう／
初心者が最初に選ぶならコレ
Unity ノンフィールドRPG
＋スレスパ風JRPG講座
Unity6対応・スマホ化対応の最新カリキュラム。「何から始めればいいかわからない」という初心者でも、ステップごとに手を動かすだけでRPGが完成します。
憧れのアクションゲームに挑戦
Unity 2Dアクションゲーム
の作り方講座（ロックマン風）
初心者でもロックマン風の横スクロールACTが作れる講座。7ステージ＋ラスボスという本格構成で、スマホ化・広告実装まで対応。「自分のゲームをリリースしたい」夢を叶えます。
3Dゲーム開発の入口はここ
ゼルダ風3Dアクションゲーム
の作り方講座
「3Dゲームって難しそう…」と感じている初心者向けの講座。全16回でゼルダ風3Dアクションがスマホ対応で作れるようになります。3D開発の基礎がしっかり身につきます。
Canvasとは何か
Canvasは、UI要素をまとめて描画するための親オブジェクトです。
Button・Image・TextMeshProなど、UI系コンポーネントは必ずCanvasの子として配置されます。
HierarchyでUIメニューから何かを追加すると、CanvasとEventSystemが自動で作られることも多いです。
| コンポーネント | 役割 |
|---|---|
| Canvas | UI全体の描画モードと描画順を管理する |
| Canvas Scaler | 画面サイズが変わってもUIの見た目を保つ |
| Graphic Raycaster | クリックやタッチの当たり判定を行う |
土台が正しくないと、子のButtonをいくら調整しても表示が崩れます。
まずCanvas側を整えてから、個別のUIパーツを置いていきましょう。
Canvasの作成手順
新規シーンにUIを追加するときは、次の流れが基本です。
- STEP1Canvasを追加
Hierarchyで右クリック → UI → Canvasを選びます。
EventSystemも同時に作られます。
- STEP2Render Modeを決める
Screen Space-Overlayが一般的です。
3D空間にUIを置くならWorld Spaceを選びます。
- STEP3Canvas Scalerを設定
UI Scale ModeをScale With Screen Sizeにし、Reference Resolutionを決めます。
- STEP4子UIを配置
ButtonやImageをCanvasの子として追加し、RectTransformで位置を調整します。
タイトル画面なら1920×1080、縦スクロールのスマホゲームなら1080×1920をReference Resolutionにする例が多いです。
プロジェクトの主なターゲット解像度に合わせて数値を決めておくと、あとからの調整が楽になります。
Render Modeの選び方
CanvasコンポーネントのRender Modeは、UIをどこに描画するかを決めます。
多くの2Dゲームやメニュー画面では、Screen Space-Overlayが第一候補です。
Screen Space-Overlay
カメラの前にUIを重ねて表示します。
設定がシンプルで、HUDやタイトル画面に向いています。
Sort Orderの数値が大きいCanvasほど手前に描画されます。
Screen Space-Camera
指定したカメラの前にUIを描画します。
3D空間の奥行きと連動させたいときや、ポストエフェクトの影響を受けたいときに使います。
Render Cameraにメインカメラを割り当て忘れると、UIが見えなくなるので注意してください。
World Space
UIを3D空間のオブジェクトとして配置します。
看板や頭上の名前表示など、ゲーム世界の中にUIを置きたい場面で活躍します。
RectTransformのスケールが小さすぎると見えないので、Scaleを調整する必要があります。
迷ったらScreen Space-Overlayから始めましょう。
特殊な演出が必要になったら、Screen Space-CameraやWorld Spaceへ切り替える流れで十分です。
Canvas Scalerで解像度に強いUIを作る
Canvas Scalerは、画面の縦横比が変わってもUIが破綻しないようにする設定です。
UI Scale ModeをScale With Screen Sizeにし、Reference Resolutionに基準サイズを入力します。
| 設定項目 | おすすめ値の目安 | 効果 |
|---|---|---|
| Reference Resolution | 1920×1080（横画面）または1080×1920（縦画面） | この解像度を基準にUIがスケールされる |
| Match | 0（幅優先）〜1（高さ優先）の間で調整 | ワイド画面と縦長画面のどちらを優先するか決める |
| Reference Pixels Per Unit | 100（デフォルトのままが多い） | スプライトとUIのスケール基準を揃える |
Constant Pixel Sizeのままだと、解像度が変わるとボタンが極端に大きくなったり小さくなったりします。
スマホとPCの両方を想定するなら、Scale With Screen Sizeへの変更を最初のうちに済ませておきましょう。
UIが表示されないときのチェックリスト
UIが見えない原因は、だいたい次のどれかに当てはまります。
- CanvasのRender Modeとカメラ設定が食い違っている（Screen Space-CameraでEvent Camera未設定など）
- Canvasや子UIのScaleが0に近い、または画面外に飛び出している
- CanvasのSort Orderが低く、別のCanvasに隠れている
- UIオブジェクトのActiveがオフになっている
- Gameビューのアスペクト比が極端で、意図しない位置にUIがある
SceneビューでRectTransformの枠を確認し、Gameビューの解像度を実機に近い値へ切り替えてみてください。
150Buttonや151Imageを置いても表示されない場合は、まずCanvas側の設定を疑うのが近道です。
Playモード中だけUIが消えるときは、スクリプトでSetActive(false)していないかも確認しましょう。
編集モードでは見えているのに実行時だけ消えるパターンはよくあります。
スタート画面を作るときの配置例
タイトル画面では、Canvasの子に背景Image、中央にスタートButton、上部にロゴImageを置く構成が定番です。
Anchor Presetsで画面中央や四隅にピン留めすると、解像度が変わっても位置が安定します。
RectTransformのAnchorを左上固定のまま中央に置くと、画面サイズ変更でズレやすくなります。
Canvasの設定が済んだら、153TextMeshProでラベルを整え、150ButtonにOnClickを登録する流れへ進めます。
記事を読んで「作ってみたい！」と思ったら！初心者でも1本完成できる講座で実力をつけよう
知識を読むだけで終わらせるのはもったいない。実際に手を動かしてゲームを1本完成させることで、理解が一気に深まります。プログラミング未経験からでも取り組める講座で、ゲーム開発の第一歩を踏み出しましょう。
Unity ノンフィールドRPG＋スレスパ風JRPG講座【Unity6対応！初心者でもデッキ構築×JRPGをスマホ向けに作れる！】
- Unity6対応・スマホ化対応で最新環境のゲーム開発が学べる
- Slay the Spire風のデッキ構築システム×JRPGの組み合わせを実装
- 初心者でも迷わず進められる丁寧な解説構成
- ノンフィールドRPGとデッキ構築JRPGの2つをまとめて学べるセット講座
Unity ノンフィールドRPGの作り方講座＋Slay the Spire風デッキ構築JRPGの作り方講座は、プログラミング未経験の初心者でも取り組みやすい、ステップバイステップ形式の講座です。
Unity6対応・スマホ化対応の最新カリキュラムで、読んで「なるほど」と思った知識を、実際に動くゲームとして形にする体験ができます。
「何から始めればいいかわからない…」という初心者が最初に選ぶ一本として最適な講座です。
Unity6対応・スマホ化対応の最新カリキュラム
ゼロからでもRPGを完成させよう
→ スレスパ風デッキ構築JRPG講座を見てみる
初心者でもスマホ対応のRPGが作れる！まずは1本完成を目指そう！
Unity 2Dアクションゲームの作り方講座（ロックマン風）【全16回！初心者でもスマホ化・広告実装まで対応した本格横スクロールACTが作れる！】
- ロックマン・マリオ・カービィのような横スクロールACTをゼロから開発
- 7ステージ＋ラスボスステージの本格的なゲーム設計を初心者でも実現
- スマホ化・AdMob広告実装まで対応してリリースまで見据えた構成
- 敵AI15体・多彩なマップギミック・武器システムを完全実装
- 完全オリジナルゲームをアセット不使用で素材提供付きで制作
Unity 2Dアクションゲームの作り方講座（ロックマン風）は、ロックマン・スーパーマリオ・星のカービィのような2D横スクロールアクションゲームを、初心者でもゼロから開発できるようになる講座です。
全16回で当たり判定・物理挙動・敵AIの知識を実際のゲームコードとして実装する体験が詰め込まれています。スマホ化・広告実装まで対応しているため、「作って終わり」ではなくリリースまで見据えた実践スキルが身につきます。
「憧れのアクションゲームを自分の手で作ってみたい」という初心者に強くおすすめの一本です。
スマホ化・広告実装まで対応した本格横スクロールACT
初心者でもロックマン風2Dアクションをリリースまで作り上げよう
→ 2Dアクションゲームの作り方講座を見てみる
初心者でも本格ACTが完成する！広告収益まで視野に入れた実践スキルを手に入れよう！
ゼルダ風3Dアクションゲームの作り方講座【全16回！初心者でも3Dアクションがスマホ対応で作れる！】
- ゼルダの伝説・モンハン・原神のような3Dアクションをゼロから開発
- 「3Dは難しそう」と感じている初心者でも取り組みやすい丁寧な解説構成
- スマホ化対応で実機で動かせるゲームが完成
- アセットを使った実践的なゲーム開発手法が身につく
- 画像・動画・全ソースコード公開の充実したサポート
ゼルダ風3Dアクションゲームの作り方講座は、「3Dゲームは難しそう…」と感じている初心者こそおすすめの入門講座です。
全16回の丁寧な解説で、ゼルダの伝説・モンハン・原神のような本格的な3Dアクションゲームを確実に完成まで導きます。スマホ化対応で実機で動かせるため、初めて3Dゲームを作り上げた達成感がひときわ大きい講座です。
「3Dゲームを自分でも作れるか試してみたい」という初心者の最初の一歩として最適です。
初心者でも3Dアクションがスマホ対応で完成する
ゼルダ風3Dアクションゲームで3D開発の壁を一気に突破しよう
→ ゼルダ風3Dアクションゲームの作り方講座を見てみる
全16回でスマホで動くオリジナル3Dゲームを完成させよう！
まとめ
CanvasはUI表示の土台です。
Render Modeで描画方法を決め、Canvas Scalerで解像度差に耐える設定を入れておきましょう。
表示トラブルはカメラ割当・Sort Order・RectTransformの位置を順に確認すると切り分けやすくなります。
UI全体の設計を段階的に学びたい方は、Unity入門の森の教材も参考にしてみてください。
タイトル画面からHUDまで、Canvasを軸にしたUI実装を通しで追える内容もあります。
コメント