Unity × DOTween × CanvasGroup でシンプルに実装するフェード付きシーン切り替え

2025年10月30日

1. はじめに
2. CanvasGroup を使う理由
3. 実装チュートリアル
4. まとめ

はじめに

シーンを切り替えるときに画面がいきなり切り替わると、プレイヤーに違和感を与えてしまいます。

そこでよく用いられるのが フェードアウト → シーン切り替え → フェードイン の演出です。

今回は、CanvasGroup と DOTween を組み合わせて、最小限のコードでシンプルにフェード付きシーン切り替えを実装する方法を紹介します。

CanvasGroup を使う理由

Image のアルファ値を直接操作する方法でもフェードは可能ですが、CanvasGroup を使うと以下の利点があります。

alpha を変えるだけでUI全体を一括で透明化できる
blocksRaycasts を使えば、フェード中のクリックやタップを無効化できる

シーン切り替えには最適な仕組みです。

実装チュートリアル

Step 1. フェード用UIの準備

UI > Canvas を作成
子に UI > Image を追加し、画面全体を覆うように設定
名前を「FadePanel」とし、色を黒に設定
CanvasGroup コンポーネント を追加
- alpha = 1（最初は黒画面）
- interactable = true
- blocksRaycasts = true

Step 2. フェード制御スクリプト

using UnityEngine;
using UnityEngine.SceneManagement;
using DG.Tweening;

public class SceneFader : MonoBehaviour
{
    [SerializeField] private CanvasGroup fadeCanvasGroup;
    [SerializeField] private float fadeDuration = 1.0f;

    private void Start()
    {
        // シーン開始時はフェードイン
        fadeCanvasGroup.alpha = 1;
        fadeCanvasGroup.DOFade(0, fadeDuration)
            .OnComplete(() =>
            {
                fadeCanvasGroup.blocksRaycasts = false; // 入力有効化
            });
    }

    public void FadeToScene(string sceneName)
    {
        // フェードアウト後にシーンをロード
        fadeCanvasGroup.DOFade(1, fadeDuration)
            .OnStart(() =>
            {
                fadeCanvasGroup.blocksRaycasts = true;  // 入力無効化
            })
            .OnComplete(() =>
            {
                SceneManager.LoadScene(sceneName);
            });
    }
}

Step 3. セットアップ

SceneFader を Canvas にアタッチ
fadeCanvasGroup に FadePanel を割り当てる
fadeDuration にフェード時間を指定（例：1秒）

Step 4. ボタンから呼び出す

public class TitleMenu : MonoBehaviour
{
    public void OnClickStart()
    {
        FindObjectOfType<SceneFader>().FadeToScene("GameScene");
    }
}

Unity の Button コンポーネントの OnClick() に OnClickStart を登録しましょう。