【実践記事・ADV編⑪】WebGLビルドとブラウザ公開——itch.ioとロリポップへのアップロード手順

対応バージョン：Unity 6.3 LTS（6000.3系）／WebGL出力 この記事はシリーズ全11回の最終回です。第10回ではキャラクター選択画面とエンディング分岐の設計を説明しました。実装と動作確認は各自のプロジェクトで行う必要があります。今回はそのゲームをWebGLでビルドし、ブラウザで公開するところまで進めます。 【PR】本記事にはアフィリエイトリンクを含みます。

目次

• はじめに
• 1. WebGLビルドの準備
• 2. ビルドの実行
• 3. ロリポップへのアップロード
• 4. index.htmlのレスポンシブ対応
• 5. itch.ioへのアップロード
• 6. 動作確認チェックリスト
• 完成したゲームを振り返る
• まとめ
• あわせて読みたいおすすめ書籍【PR】
• この記事を作成するにあたって参考にしたサイト

はじめに

前回までにゲームの進行設計を説明しました。前の回にはコード全文がない箇所もあるため、ビルド前に手元のプロジェクトが完成していることを確認してください。

今回はいよいよWebGLビルドを行い、ブラウザでプレイできる状態にして公開します。具体的には以下の4つを行います。

• UnityのWebGLモジュールをインストールしてビルドする
• ビルドしたファイルをロリポップサーバーにアップロードする
• ブラウザサイズに合わせてリサイズされるよう対応する
• itch.ioにもアップロードして公開する

1. WebGLビルドの準備

WebGLモジュールのインストール

UnityのWebGLビルドには専用モジュールが必要です。インストールされていない場合はFile → Build Profilesを開くと「No Web module loaded」と表示されます。

Install with Unity Hubボタンを押してUnity HubからWebGLモジュールをインストールしてください。インストール後はUnityの再起動が必要です。

Scene Listの確認

File → Build ProfilesでScene Listを確認します。以下の4シーンが正しい順番で登録されているか確認してください。

TitleSceneが必ず0番になっていることが重要です。 0番のシーンがゲーム起動時に最初に読み込まれます。

Player Settingsの設定

Build Profiles右上のPlayer Settingsを開いて、WebGL（地球アイコン）タブで以下を設定します。

Minimalテンプレートを選ぶと、余分なUnityロゴや枠がなくなりゲームだけがシンプルに表示されます。

Burst Compilationを無効にする

WebGLビルド時にBurst Compilationエラーが出る場合があります。

Burst関連のエラーが出た場合は、まずConsoleのエラーと使用中のパッケージ・Unityバージョンを確認してください。Burstを無効にする方法を試す場合も、機能や性能に影響がないか実機で検証します。

2. ビルドの実行

Build Profiles右下のBuildボタンを押してビルドフォルダを指定します。

ビルドには数分〜10分以上かかります。完了すると以下のようなログがコンソールに出ます。

Build completed with a result of 'Succeeded'と表示されれば成功です。

Brotli圧縮を選んだ場合の構成例です。実際のファイル構成や拡張子は、圧縮方式とビルド設定によって異なります。

（ビルドフォルダ）/
├── index.html          ← ゲームのエントリーポイント
├── Build/              ← ゲーム本体のファイル群
│   ├── *.wasm.br
│   ├── *.data.br
│   └── *.framework.js.br
├── TemplateData/       ← スタイルシートなど
└── StreamingAssets/    ← 追加アセット（あれば）

3. ロリポップへのアップロード

Brotli圧縮の問題

圧縮形式にBrotliを選んだWebGLビルドでは、ファイルに.brが付きます。圧縮形式はビルド設定によって異なります。これをそのままサーバーにアップロードしても、サーバーが正しいHTTPヘッダーを返さないと動作しません。

サーバーがUnityの配信要件に合うヘッダーを返さない場合は、契約環境で利用できる方法（.htaccessなど）で設定し、実際のHTTP応答を確認します。利用可能な方法は環境によって異なるため、Unityの配信手順を参照してください。

ファイルサイズの問題

ブラウザ版のロリポップ！FTPは1ファイルあたり10MBまでです。FTPソフトによる接続では制限が異なります（公式案内）。WebGLのビルドファイルはこれを超えることが多いため、FTPクライアントを使ってアップロードするか、itch.ioを利用するのが現実的です。

4. index.htmlのレスポンシブ対応

デフォルトのindex.htmlはゲームのサイズが固定されています。ブラウザのウィンドウサイズに合わせて自動リサイズされるよう、index.htmlを編集します。

変更のポイントは<canvas>要素のスタイルです。

#unity-canvas {
    width: 100vw;
    height: calc(100vw * 9 / 16);
    max-height: 100vh;
    max-width: calc(100vh * 16 / 9);
}

このCSSは16:9を保つ設定例です。生成HTMLのインライン指定やJavaScriptが優先される場合があるため、必要に応じてWebテンプレート側を調整し、埋め込み・全画面・解除後の表示を実際に確認してください。

5. itch.ioへのアップロード

ZIPファイルの作り方

ビルドフォルダの中身をZIP圧縮します。index.htmlがZIPのルートに来るようにしてください。

（正しい構成）
game.zip/
├── index.html    ← ZIPのルートにindex.html
├── Build/
└── TemplateData/

（間違い）
game.zip/
└── BuildFolder/
    ├── index.html
    ├── Build/
    └── TemplateData/

フォルダごとZIPする場合はindex.htmlの位置と必要ファイルの相対パスを確認し、アップロード後に動作を確認してください。

itch.ioの設定

itch.ioのダッシュボードでCreate new projectを開いて以下を設定します。

Viewport dimensionsは例えば960×540に設定します。 1920×1080のままだと、画面や埋め込み設定によってスクロールが必要になる場合があります。表示品質はキャンバスの描画解像度、端末の画面密度、表示倍率などに左右されます。アップロード後に実際の画面で確認してください。

6. 動作確認チェックリスト

• [ ] タイトル画面が表示される
• [ ] スタートボタンでゲームが始まる
• [ ] セリフが正しく表示される
• [ ] キャラクターをクリックすると話題カードが開く
• [ ] TRUE END・BAD ENDどちらも到達できる
• [ ] タイトルへ戻るボタンが動作する
• [ ] ブラウザのウィンドウサイズを変えても正しくリサイズされる
• [ ] 全画面表示・解除後もレイアウトが崩れない

完成したゲームを振り返る

この記事シリーズでは、企画・設計から始まり、会話システム・フラグ管理・キャラクタークリック・エンディング分岐・WebGL公開まで、ミステリーADVゲームの設計と実装の一部を紹介しました。省略された箇所は別途実装・検証が必要です。

完成した「波無島事件」はこちらでプレイできます。

まとめ

WebGLビルドで詰まりやすいポイントは以下の3つです。

TitleSceneを0番に設定する。 忘れるとゲームではなくメインシーンから始まってしまいます。

Brotli圧縮時はContent-EncodingとMIMEタイプを確認する。 サーバーによっては.htaccessの追加が必要です。

ZIPはindex.htmlがルートに来るように作る。 フォルダごとZIPするミスが多いので注意してください。

ゲームが完成したら、itch.ioのページURLをSNSやブログでシェアしてみましょう。

あわせて読みたいおすすめ書籍【PR】

シリーズを通じて参考になった書籍をまとめて紹介します。本セクションにはアフィリエイトリンクを含みます。

• 『Unityの教科書 Unity 6完全対応版』（北村愛実 著／SBクリエイティブ） ── シリーズ全体を通じて基礎として参照し続けた一冊。Unity 6対応で安心して使える定番入門書
• 『楽しく学ぶ Unity「2Dゲーム」作りのきほん』（森巧尚 著／マイナビ出版） ── 2D特化の入門書。UIやシーン管理など、今回のゲームで使った要素を丁寧に解説
• 『作って学ぶゲームプログラミング Unity まるっと入門 Unity6完全対応』（トライタム 著／吉谷幹人 監修） ── WebGLビルドや公開設定など、今回の実装に直結する内容を含む
• 『ゲームシナリオの書き方 第2版』（佐々木智広 著／SBクリエイティブ） ── アドベンチャーゲームのシナリオ構成・分岐設計・矛盾のないセリフの書き方を体系的に学べる一冊
• 『作って学べる Unity本格入門 Unity6対応版』（賀好昭仁 著／技術評論社） ── シリーズを読み終えてさらにステップアップしたい人向けの中級者向け書籍

※このセクションのリンクはアフィリエイトリンクであり、商品が購入された場合、サイト運営者に紹介料が支払われることがあります【PR】。

この記事を作成するにあたって参考にしたサイト

• Unity – Manual: Web Build folder（Unity公式ドキュメント）
• Unity – Manual: Deploy a Web application（Unity公式ドキュメント）
• Uploading HTML5 games（itch.io公式ドキュメント）
• 前回の実践記事「【ADV編⑩】キャラクター選択画面とエンディングへの道——フラグ連鎖と自動遷移の設計」（本サイト内）