Unity入門

【Unity】Canvasの使い方｜Render Mode、Canvas Scaler、Raycast、表示・非表示

  /

UnityでUIを作るとき、Canvas（キャンバス）はすべてのUI要素のプラットフォームとなる重要な要素です。

  • UIを正しい位置・サイズで表示したい
  • 画面サイズが変わってもレイアウトを崩さないように（レスポンシブ対応）
  • UIのパフォーマンスを最適化して、ゲームを軽くしたい

Canvasの設定を間違えると、UIが合わない、サイズが合わない、動作が重くなるような問題が発生することもあります。
この記事では、Canvasの基本から最適な設定方法、描画モードの違い、スクリプト制御、パフォーマンス最適化まで詳しく解説します！

目次
  1. この記事でわかること
  2. UnityのCanvasの使い方
    1. Canvasの役割
    2. Canvasの追加方法と構成要素
    3. CanvasのRender Mode（描画モード）
    4. Render Mode（描画モード）の選択
  3. 画面サイズに応じたUIの調整（Canvas Scaler）
  4. Raycast処理（Graphic Raycaster）
  5. スクリプトでCanvasを操作する
    1. Canvasの表示・非表示
  6. パフォーマンス最適化
    1. 不要なCanvasの更新を減らす
  7. まとめ

この記事でわかること

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

UnityのCanvasの使い方

Canvasの役割

Canvasは、Unity のUI（Text、Button、Image など）を表示するための基盤となるコンポーネントです。
すべてのUI要素はCanvasの子オブジェクトとして配置される必要があります。

・UIをワールド空間（3D空間）や画面上に配置できる
・スケーリングやアンカーを設定して、解像度に適応
・描画順序を管理して、UIの優先度を調整できる

※ この他にも以下のサイトを参考にしてください。

【2025年版】Unity Editorの画面構成と操作方法を分かりやすく解説Unity初心者向けに、エディタの画面構成と基本操作を詳しく解説します。主要なウィンドウの役割やショートカットキーを紹介し、効率的な作業をサポートします。...
【Unity】TextMeshProの使い方 | スクリプト、フォントの追加、日本語化対応、表示の切り替えUnityのTextMeshProをマスターしよう！スクリプトでの操作方法、フォント追加の手順、日本語対応の設定まで詳しく解説。初心者でもすぐに使えるサンプルコード付き！...
【Unity】Image・Panelの使い方 | 画像変更、色変更、alpha、spriteUnityのImageやPanelを自在に操作！画像の変更、色の設定、アルファ（透明度）調整、Spriteの適用方法まで詳しく解説。初心者でもすぐに実装できるサンプルコード付き！...

Canvasの追加方法と構成要素

① Hierarchyから追加

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

② Canvasの構成要素

Unity Canvasの導入の画像
コンポーネント名役割主な機能
CanvasUI の土台UI を描画するための基本コンポーネント
Canvas ScalerUI のスケール調整画面サイズに応じて UI の大きさを自動調整
Graphic RaycasterUI のクリック判定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を描画UIに遠近感を出したい場合
World SpaceUIを3Dオブジェクトとして配置3DのUI、VR/ARのUI

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

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

Unity CanvasのRenderModeの画像

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

CanvasのCanvasScaler要素を正しく設定することで、画面サイズが変わってもUIが崩れないように調整できます。

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

Raycast処理（Graphic Raycaster）

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

Unity CanvasのGraphick Raycasterの画像
設定名説明主な用途
Ignore Reversed Graphics裏向き（背面）の UI を無視 する画面に見えていない UI をクリック対象外にする
Blocking ObjectsNone（UIのみ） / Two D（2Dオブジェクト） / Three D（3Dオブジェクト） / All（すべて）をブロック対象にするUI をクリックしたとき、背後の 3D/2D オブジェクトに影響させたくないとき
Blocking Maskレイヤー単位で クリックをブロックするオブジェクトを制御特定のレイヤーのオブジェクトだけ UI のクリックを無効化したいとき

※ ブロックとは例えばUIの後ろに3Dオブジェクトがある場合に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);
    }
}

パフォーマンス最適化

不要なCanvasの更新を減らす

・Canvasの更新が頻繁に発生すると、パフォーマンスが低下する
・UIが頻繁に更新される場合、キャンバスを分けて管理すると負荷軽減！
・Graphic Raycasterを必要ない場合はオフにする

canvas.pixelPerfect = false; // ピクセルパーフェクトを無効にして軽量化

まとめ

・CanvasはUnityのUIを描画する基盤となるコンポーネント
・レンダリングモードを正しく選択
・CanvasScaler を設定すれば、画面サイズが変わってもレイアウトが崩れない
・スクリプトでCanvasを制御可能
・Canvasの最適化を行い、パフォーマンスを維持！

Canvas
関連記事