Unity Canvasの使い方｜描画モード・Canvas Scaler・UI表示

Canvasは、ボタンや文字、画像などのUIを表示するための土台です。画面に重ねるメニューならScreen Space – Overlay、ゲーム空間に置くUIならWorld Spaceを選びます。この記事では描画モード、画面サイズへの対応、クリック判定、表示の切り替えを順に確認します。

Canvasの基本とレンダリングモードの違い
画面サイズに応じたレスポンシブUIの作り方（CanvasScalerの設定）
スクリプトでCanvasを操作する方法
パフォーマンス最適化（バッチング・描画負荷の削減）

Canvasとは？
Canvasの使い方
スクリプトでCanvasを操作する
1. Canvasの表示・非表示
パフォーマンス最適化
まとめ

Canvasとは？

CanvasはUIを描画するための土台 です。
ボタン、テキスト、画像、スライダーなどのUIコンポーネントは必ずCanvasの子オブジェクトとして配置されます。

特徴

UI専用の描画領域
- UIの前後関係はRender Modeで変わります。Screen Space – Overlayはゲーム画面に重なりますが、Screen Space – CameraやWorld Spaceでは、UIより手前の3Dオブジェクトが前に表示されることがあります。
スケーリング制御
- 「Canvas Scaler」を使うことで、画面サイズに応じてUIを拡縮できます。例えばスマホやPCで同じUIを違和感なく表示可能。
複数Canvasで描画負荷を分割できる
- UIが多い場合、Canvasを分けることで不要な再描画を減らせます。

Canvasの使い方

Canvasの追加方法と構成要素

① Hierarchyから追加

・ [Hierarchy] → [右クリック] → [UI] → [Canvas]を選択
・ Canvasオブジェクトがシーンに追加される

② Canvasの構成要素

コンポーネント名	役割	主な機能
Canvas	UI の土台	UI を描画するための基本コンポーネント
Canvas Scaler	UI のスケール調整	画面サイズに応じて UI の大きさを自動調整
Graphic Raycaster	UI のクリック判定	UI のタッチやクリックを検出し、他のオブジェクトと判定を調整

CanvasのRender Mode（描画モード）

Canvasには、3つのRender Mode（描画モード）があり、それぞれのUIの表示方法が異なります。

➡2DゲームやHUDなら「Screen Space – Overlay」がおすすめ
➡カメラに合わせて動かしたい場合は「Screen Space – Camera」
➡ワールド空間にUIを配置したい場合は「World Space」

Rendering Mode	特徴	用途
Screen Space – Overlay	画面の一番上にUIを描画	UI（メニュー、HUDなど）
Screen Space – Camera	指定したカメラから一定距離にUIを配置	シーン内の物体との前後関係を持たせたい場合
World Space	UIを3Dオブジェクトとして配置	3DのUI、VR/ARのUI

Render Mode（描画モード）の選択

Render Modeを変更することでレンダリングモードを選択できる。

画面サイズに応じたUIの調整（Canvas Scaler）

Canvas Scalerで画面サイズに応じた拡縮を設定します。Scale With Screen Sizeを選び、Reference Resolutionを設計時の解像度に合わせましょう。縦横比が変わる場合はScreen Match Modeに加え、各UIのRect Transformのアンカーも調整します。Scalerだけで配置が自動的に整うわけではありません。

UI Scale Mode	特徴	おすすめの用途
Constant Pixel Size	解像度に関係なく、UIのサイズを固定ピクセルで表示	固定解像度のアプリ
Scale With Screen Size （おすすめ）	画面サイズに合わせて UIを拡大・縮小する	スマホ・タブレット向けのアプリ
Constant Physical Size	UIを物理サイズ（cm, inch）で統一	VRやARなど、デバイスごとに物理的なサイズを揃えたいとき

Raycast処理（Graphic Raycaster）

UIのクリック判定の設定をするコンポーネントです。

設定名	説明	主な用途
Ignore Reversed Graphics	裏向き（背面）の UI を無視する	画面に見えていない UI をクリック対象外にする
Blocking Objects	UIへのレイキャストを遮るColliderの種類。Noneは遮断なし、Two Dは2D、Three Dは3D、Allは両方	UIより手前にある物体の向こう側をクリックさせたくないとき
Blocking Mask	レイキャストを遮るColliderのレイヤーを指定	特定のレイヤーのオブジェクトだけ UI のクリックを無効化したいとき

Blocking Objectsは、手前のColliderでUIへの入力判定を遮る設定です。UIを押したときに背後のゲーム処理も動く問題は別で、ゲーム側の入力処理でUI上かどうかを判定します。

スクリプトでCanvasを操作する

Canvasの表示・非表示

➡ゲーム開始時にUIを表示/非表示することが可能です！

using UnityEngine;

public class CanvasManager : MonoBehaviour
{
    public Canvas gameCanvas;

    public void ShowCanvas()
    {
        gameCanvas.gameObject.SetActive(true);
    }

    public void HideCanvas()
    {
        gameCanvas.gameObject.SetActive(false);
    }
}