【初心者向け】Unityで簡単フェードイン・フェードアウトを実装する方法｜UIにも使える基本テクニック

1. はじめに｜フェード演出はゲームの印象を左右する！

ゲームの世界にスッと入り込ませたり、場面転換を自然に見せたりするために欠かせないのが「フェードイン・フェードアウト」などの演出です。

たとえば、画面が真っ暗な状態からじわっと表示されるオープニング。あるいは、ゲームオーバー時にゆっくり画面が暗くなっていく演出。こういった演出があるだけで、「あ、このゲームちゃんと作られてる！」と感じる方も多いはずです。

でも、「そんなのプロじゃないと無理そう…」と思っていませんか？

大丈夫です！Unityには「CanvasGroup」や「コルーチン」などを使って、初心者でも簡単にフェードイン・フェードアウトを実現できる方法があります。

この記事では、UIパネルやテキストなどを対象に、スムーズなフェード演出を実装する方法を、図やコードと一緒にわかりやすく解説していきます。もちろん、後半では3Dオブジェクトに応用するテクニックもご紹介！

「ちょっとした演出でゲームをワンランクアップさせたい！」という方は、ぜひ最後まで読んでみてくださいね。

2. フェード処理の基本｜CanvasGroupを使った方法

まず、UnityでUIのフェードイン・フェードアウトを実現するうえで便利なのが CanvasGroup（キャンバスグループ） というコンポーネントです。

● CanvasGroupってなに？

CanvasGroup は、UIの透明度やクリック操作の有効／無効を一括でコントロールできる便利な機能です。
このコンポーネントを使うと、画像・テキスト・ボタンなどを まとめて透明にしたり、見えない状態でもクリックできなくしたり できます。

特に「α（アルファ）値」と呼ばれる 透明度を0〜1の間で操作することで、ゆっくりと画面を表示／非表示にする、いわゆる「フェード」処理が可能になります。

● どこで使われるの？

フェード演出が使われる例としては、以下のようなシーンが挙げられます。

• タイトル画面の登場演出（フェードイン）
• ボタンを押した後に画面を真っ暗にする演出（フェードアウト）
• ゲームオーバーやシーン切り替え時の演出
• チュートリアルやイベント時の注意テキスト表示　など

つまり、ゲーム全体の演出をより自然でスムーズに見せるための必須テクニックなんです！

● 初心者にもおすすめな理由

初心者にもCanvasGroupがおすすめな理由はズバリ、

✅ UI要素にアタッチするだけ
✅ コードも数行で動く
✅ Unityの標準機能で追加インストール不要

という手軽さ。
特別なアセットやプラグインがなくても、Unity標準の機能だけで本格的な演出ができるのは嬉しいですよね！

3. フェードイン・フェードアウトを実装してみよう

ここからは、実際にUnityでフェードイン・フェードアウトを実装する手順を一緒に進めていきましょう！
今回は「ボタンを押すと画面がフェードアウトする」というシンプルな演出を例に解説していきます。

3-1. UIにCanvasGroupを追加しよう

まずはフェード対象となるUIに「CanvasGroup」コンポーネントを追加します。

1. ヒエラルキー（Hierarchy）ウィンドウで、対象のUI（例：Panel）を選択
2. インスペクター（Inspector）で「Add Component」をクリック
3. 「CanvasGroup」と入力して追加

これで透明度をコントロールする準備ができました！

3-2. フェード用スクリプトを作成しよう

次に、透明度を徐々に変化させるスクリプトを作成します。

📌 プロジェクトウィンドウを右クリック「Create」→「C# Script」を選んで、新しいスクリプトを作成し、「FadeController」と名前を付けます。

作成したスクリプトをダブルクリックして、以下のコードを貼り付けましょう。

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class FadeController : MonoBehaviour
{
    public CanvasGroup canvasGroup;
    public float fadeDuration = 1.0f;

    public void FadeOut()
    {
        StartCoroutine(Fade(1, 0));
    }

    public void FadeIn()
    {
        StartCoroutine(Fade(0, 1));
    }

    IEnumerator Fade(float start, float end)
    {
        float t = 0f;
        while (t < 1f)
        {
            t += Time.deltaTime / fadeDuration;
            canvasGroup.alpha = Mathf.Lerp(start, end, t);
            yield return null;
        }
        canvasGroup.alpha = end;
    }
}

💡 補足：もっと簡単にフェードを作りたい方へ！

「スクリプトを書くのがちょっと苦手…」という方には、DoTween Pro というアセットがおすすめです！

👇 Unity公式アセットストアで大人気！
🔗 DoTween Pro（DOTween Visual Editor対応）はこちら

このアセットを使えば、プログラムを書かなくてもノードベースでアニメーションやフェード演出を作ることができます。
しかも、タイムライン制御やシーン遷移とも相性抜群。初心者でもゲームの演出がグッと本格的になりますよ！

3-3. スクリプトをUIにアタッチしよう

作成したスクリプトを、対象のUI（Panelなど）にドラッグ＆ドロップでアタッチします。
アタッチ後、インスペクターで「CanvasGroup」の欄に、さきほど追加したCanvasGroupをドラッグして設定してください。

3-4. ボタンからスクリプトを呼び出そう

次に、UIボタンとスクリプトを連携します。

1. ヒエラルキーで「Button」を選択
2. インスペクターの「OnClick()」イベントに「FadeController」がついているオブジェクトをドラッグ
3. ドロップダウンから FadeController → FadeOut() を選択

これでボタンを押すと、ゆっくりフェードアウトされるようになります！

4. 3Dオブジェクトへの応用

CanvasGroupはUI専用ですが、3Dオブジェクトでもフェード演出を実現したいことってありますよね？
たとえば、敵が倒れて消えるときにスーッと透明になるような演出。これもUnityなら簡単に作れます！

ここでは、マテリアルの透明度（アルファ値）を変更する方法を紹介します。

● Step1：マテリアルの設定を変更しよう

まずは対象の3Dオブジェクトに透明化できるマテリアルを設定しましょう。

1. ヒエラルキーで3Dオブジェクトを選択（Cubeなど）
2. インスペクターで「Mesh Renderer」→「Material」を確認
3. マテリアルを選択して、Rendering Modeを「Opaque」から「Fade」または「Transparent」に変更します

これで、スクリプトから透明度をコントロールできるようになります。

● Step2：スクリプトを作成しよう

先ほどと同じように、新しいスクリプトを作成します。

📌 プロジェクトウィンドウを右クリック「Create」→「C# Script」を選んで、「ObjectFader」と名前を付けてください。

以下のコードを貼り付けましょう。

using UnityEngine;
using System.Collections;

public class ObjectFader : MonoBehaviour
{
    public float fadeDuration = 1.0f;
    private Material mat;

    void Start()
    {
        mat = GetComponent<Renderer>().material;
    }

    public void FadeOut()
    {
        StartCoroutine(FadeTo(0f));
    }

    public void FadeIn()
    {
        StartCoroutine(FadeTo(1f));
    }

    IEnumerator FadeTo(float targetAlpha)
    {
        Color color = mat.color;
        float startAlpha = color.a;
        float t = 0f;

        while (t < 1f)
        {
            t += Time.deltaTime / fadeDuration;
            color.a = Mathf.Lerp(startAlpha, targetAlpha, t);
            mat.color = color;
            yield return null;
        }

        color.a = targetAlpha;
        mat.color = color;
    }
}

● Step3：オブジェクトにスクリプトをアタッチ

このスクリプトも対象の3Dオブジェクトにドラッグ＆ドロップでアタッチします。
フェードさせたいときに FadeOut() や FadeIn() を呼び出せば、透明度が徐々に変化するようになります。

● ポイント：Shaderの設定にも注意！

透明度がうまく変わらない場合は、Standard Shader の Rendering Modeが「Fade」や「Transparent」になっているか、もう一度チェックしてください。
また、URP（Universal Render Pipeline）などを使っている場合は、Shader Graphなどのカスタム設定が必要なケースもあります。

この方法を使えば、UIだけでなく3Dキャラクターや背景などのオブジェクトも自然にフェード演出が可能になります！

5. まとめ｜簡単な演出でゲームのクオリティUP！

いかがでしたか？

フェードイン・フェードアウトと聞くと「ちょっと難しそう…」と思われがちですが、
Unityでは CanvasGroup や マテリアルの透明度 を使うことで、初心者でも簡単に実装できることがわかりましたね！

UIに使えば、シーン遷移やタイトル表示がグッとスマートに。
3Dオブジェクトに使えば、敵キャラの消滅や魔法演出などのリアルさがグンとアップします！

とくに、この記事で紹介したスクリプトはいろんな場面に応用が効く汎用的な書き方になっているので、プロジェクトに合わせてコピペ＆改造するだけでOKです♪

「演出がうまくできると、なんだかゲームがワンランク上に見える…！」
そんな感覚を、ぜひ体験してみてくださいね。

🎁 さらに手軽に演出を強化したい方におすすめ！

記事内ではスクリプトでの実装方法をご紹介しましたが、
「もっと楽にフェード演出やUIアニメーションを作りたい！」という方には、DoTween Pro がぴったりです。

🟢 DOTween Pro（Visual Editor対応）
👉 公式ストアで詳細を見る

DoTween Proを使えば、コードを書かずに視覚的な操作でフェードや移動、回転などの演出が可能になります。
UIのアニメーション、ゲーム演出、シーン遷移にも大活躍。
初心者からプロまで、Unity演出の時短アイテムとして定番のアセットです。

演出のクオリティを一気に引き上げたい方は、ぜひチェックしてみてください！

あわせて読みたい

ゲームの演出やUIまわりをさらに強化したいあなたにおすすめの記事を紹介します！

• 🎨 Unityスクリプト入門：オブジェクトを徐々に透明にするテクニック
  　→ Materialを使った透明処理をもっと深掘り！
• 🔀 Unityでオブジェクトの表示切り替えを簡単に！SetActiveの使い方
  　→ 表示・非表示の切り替え方法を学べます。
• 🎛️ Unity初心者必見！簡単にボタンの色や背景を変える方法
  　→ ボタンの見た目も一工夫して、より印象的に！
• 🧱 Unity UIの基本操作（TextMeshPro導入含む）
  　→ より美しいテキスト演出がしたい人におすすめ！
• 🔄 UnityでUIパネルを順番に表示・非表示する方法【初心者向け】
  　→ 複数UIの切り替え演出にピッタリです！

よくある質問（FAQ）

関連記事:

Unityスクリプト入門：オブジェクトを徐々に透明にするテクニックUnityのスクリプト設計を改善！SOLID原則で整理する方法【完全解説】Unityの非同期処理！Coroutineとasync/awaitの違いと使い方Unityのコードをきれいに保つ！依存性注入（DI）の基本と実装方法【実践】UnityでJSONデータ管理！セーブ＆ロードを最適化する方法【Unity C#】カスタムイベントの作り方！EventとActionを使いこなそうUnityのシリアライズ完全ガイド！データの保存・読み込みを自由自在にUnityのオブジェクト指向設計！継承・ポリモーフィズム・インターフェースを徹底解説【Unity 2D】シャドウバース風カードゲームの作り方！手札生成＆ドラッグ操作（パート3）【実践】UnityのAddressablesでロード時間を劇的短縮！ゲーム開発の最適化テクニック