🎮 Unity WebGLでFUnityロゴ入りのオリジナルローディング画面を作る方法

AIと一緒に作るUnityアセット「FUnity」専用のローディング画面を作ってみました！

💡 はじめに
🧩 完成イメージ
🧱 手順① テンプレートフォルダを作る
📝 手順② index.html を作成
🖼 手順③ FUnityロゴを配置
⚙️ 手順④ テンプレートを選択
🚀 手順⑤ ビルドして確認！
🎨 カスタマイズのヒント
🧠 まとめ
✍️ あとがき
1. 🪄 関連記事

💡 はじめに

UnityでWebGLビルドをすると、デフォルトでは
青いローディングバーとUnityロゴが表示されます。

しかし、「FUnity」のような自作アセットやブランドを作る場合、
起動時から自分の世界観を演出したいですよね。

この記事では、FUnityロゴ入りのオリジナルローディング画面を
簡単に設定する方法を紹介します。

🧩 完成イメージ

起動時に FUnityロゴ と 「Loading…」テキスト が表示
読み込み完了後にUnity画面へスムーズに切り替わる
Unity公式ローディングバーは非表示

シンプルでスタイリッシュ。起動時からブランド感が出ます。

🧱 手順① テンプレートフォルダを作る

まず、以下のフォルダを作成します。

Assets/WebGLTemplates/FUnity/

UnityのWebGLビルド時は、このフォルダ内のindex.htmlが使われます。
（既存のテンプレート「Default」や「Minimal」をベースにしてもOK）

📝 手順② index.html を作成

次に、以下の内容をコピーして
Assets/WebGLTemplates/FUnity/index.html に貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>{{{ PRODUCT_NAME }}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html, body {
      background-color: #111;
      color: #fff;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    }

    #logo {
      width: 200px;
      height: auto;
      margin-bottom: 30px;
      animation: fadein 2s ease-in-out;
    }

    #loading-text {
      font-size: 20px;
      letter-spacing: 2px;
      animation: blink 1.2s infinite;
    }

    @keyframes fadein {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    canvas { display: none; } /* Unity起動まで非表示 */
  </style>
</head>

<body>
  <!-- 🔹 FUnityロゴを表示 -->
  <img id="logo" src="logo.png" alt="FUnity Logo">

  <!-- 🔹 ローディングテキスト -->
  <div id="loading-text">Loading...</div>

  <!-- 🔹 Unityビルド読み込み -->
  <script src="Build/{{{ LOADER_FILENAME }}}"></script>
  <script>
    createUnityInstance(document.body, {
      dataUrl: "Build/{{{ DATA_FILENAME }}}",
      frameworkUrl: "Build/{{{ FRAMEWORK_FILENAME }}}",
      codeUrl: "Build/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
      memoryUrl: "Build/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
      symbolsUrl: "Build/{{{ SYMBOLS_FILENAME }}}",
#endif
      streamingAssetsUrl: "StreamingAssets",
      companyName: "{{{ COMPANY_NAME }}}",
      productName: "{{{ PRODUCT_NAME }}}",
      productVersion: "{{{ PRODUCT_VERSION }}}",
    }).then((unityInstance) => {
      // ロード完了後、ロゴとテキストを非表示にしてUnityを表示
      document.getElementById("logo").style.display = "none";
      document.getElementById("loading-text").style.display = "none";
      unityInstance.canvas.style.display = "block";
    });
  </script>
</body>
</html>

🖼 手順③ FUnityロゴを配置

同じフォルダにロゴ画像を入れます。
ファイル名は logo.png にしてください。

Assets/WebGLTemplates/FUnity/logo.png

推奨サイズ：200x200pxの透過PNG

（ブログやブランド用に使っているFUnityロゴをそのまま流用できます）

⚙️ 手順④ テンプレートを選択

Unityエディタで以下の設定をします。

メニュー：Edit > Project Settings > Player
項目：Resolution and Presentation > WebGL Template
選択：FUnity

これでカスタムテンプレートがビルドに使われます。

🚀 手順⑤ ビルドして確認！

File > Build Settings > WebGL > Build をクリック。
出力フォルダ内の index.html をブラウザで開くと、
FUnityロゴ + Loading… 表示 → Unity起動 の流れになります。

🎨 カスタマイズのヒント

カスタマイズ箇所	内容
`background-color`	背景色を変更（例：白背景なら `#fff`）
`#loading-text`	「Loading…」を「読み込み中…」に変更
`fadein` / `blink`	CSSアニメーションを自分好みに調整
ロゴサイズ	`#logo { width: 200px; }` を変更