[Unity] uGUIのトグル(Toggle)の使い方

2025年5月21日

当ページのリンクには広告が含まれています。

トグル(Toggle)とは

トグル(Toggle)は、UnityのUIシステム(uGUI)における「オン／オフ」を切り替えられるチェックボックス形式のUIコンポーネントです。

トグル(Toggle)の主な特徴

特徴	内容
2状態を持つ	オン（✔付き）／オフ（✔なし）の2つの状態を切り替える
Booleanで状態管理できる	isOn プロパティで現在の状態を取得・設定可能
イベントに対応	状態が変化したとき onValueChanged イベントが発火する
グループ化が可能	ToggleGroup を使えば「ラジオボタン」のように排他的選択も可能になる
見た目を柔軟にカスタマイズ可能	チェックマーク・背景・トランジション・アニメーションも自由に設定可能

トグル(Toggle)の主な用途

用途	解説
オプション設定	BGMオン／オフ、通知オン／オフなどの設定切り替えに最適
選択肢の提示	複数選択や1つだけ選べる選択肢の切り替え
フラグ操作	ゲーム内のスイッチやモード変更の状態管理
UIの表示制御	トグル状態によって別のUIを表示・非表示する

トグル(Toggle)を構成するオブジェクト

Toggle
├── Background
│   └── Checkmark
└── Label

オブジェクト名	機能カテゴリ	役割
Toggle	本体	オン／オフの状態管理やイベント処理を行う。 Toggleコンポーネントを持つ。
Background	ビジュアル	トグルの背景枠。通常はチェックボックスやスイッチの外枠を表現する。 Imageコンポーネントを持つ。
Checkmark	表示制御	オン時に表示されるチェックマーク（✔）。デフォルトでToggle.graphic に設定される。 Imageコンポーネントを持つ。
Label	テキスト表示	トグルの説明テキスト。項目名や設定名などを表示（任意・TextまたはTMP対応） Textコンポーネントを持つ。

ImageとTextコンポーネントについては、下記の記事で詳しく解説しているので参照してください。

あわせて読みたい

[Unity] uGUIの画像(Image)の使い方はじめに UnityのuGUI(Unity GUI)におけるImageコンポーネントは、ユーザーインターフェースに画像を表示するための基本的な要素です。本記事では、Imageコンポーネント…

あわせて読みたい

[Unity] uGUIのテキスト(Text (Legacy))の使い方はじめに UnityのUIシステムであるuGUI(Unity GUI)には、テキストを表示するためのコンポーネントとしてText (Legacy) が用意されています。Text (Legacy) は、Unity 4….

トグル(Toggle)の基本的な使い方

トグル(Toggle)を使用するには、UI要素を配置するためのCanvasが必要です。
もし、シーンにCanvasが無い場合は、Canvasを作成してください。

キャンバス(Canvas)の作成：
「ヒエラルキー(Hierarchy)」ウィンドウを右クリック⇒UI⇒キャンバス(Canvas)
を選択してCanvasを作成します。

トグル(Toggle)の作成：
「ヒエラルキー」ウィンドウのCanvasオブジェクトを右クリック⇒UI⇒トグル(Toggle)
を選択してToggleをCanvasに追加します。

Toggleコンポーネントでは以下の項目を設定できます。

Interactable
遷移 (Transition)
ナビゲーション (Navigation)
可視化 (Visualize)
オンにする (Is On)
遷移を切り替える (Toggle Transition)
グラフィックス (Graphic)
グループ (Group)
値の変更時 (Boolean) (On Value Changed (Boolean))

順番に解説していきます。

Interactable

Toggleがユーザー操作を受け付けるかどうかを制御するプロパティです。

詳細は、Button (Legacy)の記事で解説していますので、そちらを参照してください。

あわせて読みたい

[Unity] uGUIのボタン(Button (Legacy))の使い方はじめに UnityのuGUIであるButton (Legacy)は、ユーザーインターフェース（UI）で最も基本的かつ頻繁に使用される要素の一つです。本記事では、Button (Legacy) の基本…

遷移 (Transition)

ボタンの状態（通常／ホバー／クリック／無効）に応じて、見た目を変える仕組みです。

詳細は、Button (Legacy)の記事で解説していますので、そちらを参照してください。

あわせて読みたい

ナビゲーション (Navigation)

キーボード・ゲームパッドなどの入力デバイスを使って UI を移動（フォーカス）するための制御機能です。

詳細は、Button (Legacy)の記事で解説していますので、そちらを参照してください。

あわせて読みたい

可視化 (Visualize)

Inspector の Navigation セクション右上に表示される Visualize ボタンをクリックすると、
Sceneビューに「矢印（Arrow）」が表示され、他のUIへのナビゲーション接続が見えるようになります。

これは、キーボードやゲームパッドによるUI移動経路を直感的に確認するためのデバッグツールです。

オンにする (Is On)

トグルが現在「オン」状態か「オフ」状態かを示すブール型のプロパティです。

トグルがON　⇒チェック状態
トグルがOFF　⇒非チェック状態

遷移を切り替える (Toggle Transition)

Toggle のオン／オフ状態が切り替わる際に、視覚的な変化（アニメーション）をどう表現するかを設定するプロパティです。
遷移モードを「None」、「Fade」から選択します。

Fadeモード
- チェック時：Checkmark（Toggle.graphic）の Alpha が 1（表示）
- 非チェック時：Alpha が 0（非表示）
- Color の A（透明度）成分を変化させて、ふわっと表示・非表示させる演出
Noneモード
- トグルの状態は変化しても、見た目に一切変化が起きない
- デザイナーが独自でスクリプトやアニメーションを制御したい場合に使う

グラフィックス (Graphic)

トグルの「チェック状態（オン／オフ）」を視覚的に示す UI 要素（主にチェックマーク）を指定するプロパティです。
初期状態では、Toggle -> Background -> Checkmark が自動的にセットされています。

グループ (Group)

この Toggle が「Toggle Group（トグルグループ）」に所属しているかどうかを設定するものです。

トグルグループとは、複数のToggleを1つの選択肢セットとして管理するコンポーネントです。
トグルに group を設定することで、排他的な選択（1つだけ選べるラジオボタン）を実現できます。

値の変更時 (Boolean) (On Value Changed (Boolean))

Toggle のオン／オフが切り替わったときに自動的に呼び出される UnityEvent（イベント）です。

イベントの引数はBoolean型で、現在のトグル状態(true=ON, false=OFF)が渡されます。

public void OnToggleChanged(bool isOn)
{
    if (isOn)
        Debug.Log("トグルがオンになりました");
    else
        Debug.Log("トグルがオフになりました");
}

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

[Unity] uGUIのRaw 画像(Raw Image)の使い方

[Unity] uGUIのトグル(Toggle)の使い方