GodotゲームをWebにエクスポートする方法（HTML5ガイド、2026年版）

GodotはHTML5とWebAssemblyとしてWebにエクスポートします。つまり、ダウンロードもプラグインも不要で、ゲームがブラウザのタブで動作します。リンクを貼り付けてクリックすればすぐにプレイできる、これが最速でプレイアブルなビルドを人に届ける方法です。

「Webにエクスポートする」には実は2つの作業があります。ファイルを生成するのは簡単で1分ほどで完了します。しかし、それらのファイルをブラウザで実際に動かすのは別の話で、ほとんどの人がここでブラックスクリーンに遭遇します。スレッド化されたWebAssemblyビルドが依存する2つの特定のHTTPヘッダーを、モダンなブラウザが要求するためです。このガイドでは両方のステップ、正確な設定、そしてほとんどのエクスポート失敗を引き起こす3つのエラーを解説します。

このガイドはGodot 4と、Godot 4と互換性のあるSummer Engineに適用されます。同じエクスポートパイプラインを使用しているためです。プレーンな言語でゲームを説明してビルドした場合でも、エクスポートステップは手書きのGodotプロジェクトとまったく同じです。

{/* IMAGE: The Godot Export dialog open with a Web preset selected, the Export Project button highlighted. 1200x675 editor screenshot. */}

「Webエクスポート」が実際に生成するもの

エクスポートすると、Godotは単一のファイルではなく、静的アセットの小さなフォルダを書き出します。

• index.html はすべてを読み込むページです。ブラウザが開くのはこのファイルです。
• .wasmファイル はWebAssemblyにコンパイルされたGodotエンジン本体です。最も大きなパーツです。
• .pckファイル はゲームデータです。シーン、スクリプト、アセットがまとめてパックされています。
• .jsファイル はエンジンをページに接続するローダーのグルーコードです。
• スレッドとサウンドのための .worker.js と .audio.worklet.js が含まれることもあります。

これらはすべて同じ場所に置き、HTTPで配信する必要があります。index.htmlをダブルクリックしても動作しません。これが最初のつまずきポイントです。この点については後で詳しく説明します。

ステップ1：エクスポートテンプレートのインストール

Godotはエディタとエクスポートテンプレートを別々に配布しています。テンプレートとは、ブラウザ向けのWebAssemblyビルドを含む、各プラットフォーム向けに事前ビルドされたエンジンバイナリです。新規インストール直後にはこれらが入っていません。

エディタからエクスポートテンプレートを管理を開き、ダウンロードしてインストールをクリックします。これにより、使用しているエンジンのバージョンに対応したテンプレートが取得されます。

このプロセス全体で最も重要なルールがあります。テンプレートはエンジンのバージョンと完全に一致している必要があります。 4.3用のテンプレートは4.4からエクスポートしたプロジェクトでは動作しません。バージョンの不一致は、ヘッダーの問題に次いでWebビルドが壊れる2番目に多い原因です。エンジンを更新したら、テンプレートも再インストールしてください。

ステップ2：Webエクスポートプリセットの追加

プロジェクトからエクスポートを開き、追加をクリックしてWebを選択します。

オプションのパネルが表示されます。デフォルト値は概ね適切ですが、Web向けには2つの設定が重要です。

• エクスポートタイプ。「通常」を選ぶとスレッド化ビルドが得られます。これはより高速でデフォルト設定です。以前は特殊なヘッダーを送信できないホスト向けに非スレッド化フォールバックがありましたが、Godot 4ではほぼ常にスレッド化ビルドを選び、以下で説明するようにホスト側でヘッダーを設定する方がよいでしょう。
• **VRAMテクスチャ圧縮。**対象とするプラットフォームのボックスにチェックを入れます。ブラウザはほとんどのマシンで「デスクトップ用」パスを使用するので、それをオンのままにしてください。モバイルブラウザではモバイル圧縮オプションも必要になる場合があります。

ヘッドインクルードとカスタムHTMLシェルは、変更する理由がない限り空のままにしてください。デフォルトのシェルが読み込みとプログレスバーを処理してくれます。

ステップ3：プロジェクトのエクスポート

出力先フォルダを選択します。web-buildなどの名前で空のフォルダを新規作成して、出力ファイルが他のものと混ざらないようにしましょう。

メインファイル名は、ゲームの名前ではなくindex.htmlにしてください。itch.ioを含むほとんどのホストは、エントリポイントとしてindex.htmlを探します。mygame.htmlという名前にすると、ホストはそれを見つけられず、ゲームの代わりに空のディレクトリ一覧が表示されてしまいます。

プロジェクトをエクスポートをクリックします。数秒でフォルダに先ほど挙げたファイルが揃います。これで簡単な方の作業は完了です。

{/* IMAGE: A file explorer showing the exported web-build folder contents: index.html, .wasm, .pck, .js files. 1000x500. */}

ステップ4：ヘッダーの問題をわかりやすく解説

ここが、多くのチュートリアルでは触れられない部分であり、初めてのWebエクスポートでブラックスクリーンになる主な理由です。

Godot 4のスレッド化ビルドはSharedArrayBufferを使用します。これはWebAssemblyエンジンが複数のスレッドで動作できるようにするブラウザの機能です。セキュリティ上の理由から、ブラウザは特定の2つのHTTPレスポンスヘッダーを含むページを配信する場合にのみSharedArrayBufferを有効にします。

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

この2つのヘッダーにより、ページはブラウザが「クロスオリジン隔離」状態と呼ぶ状態になります。これらがないと、SharedArrayBufferは未定義となり、エンジンはスレッドの起動に失敗し、黒いキャンバスとSharedArrayBuffer is not definedまたはcrossOriginIsolated is falseというコンソールエラーが表示されます。

これらをGodotで設定するわけではありません。ファイルを配信するサーバー側で設定します。これが全てのポイントです。そこから3つのことが導かれます。

1. ハードドライブから直接index.htmlを開いても、ヘッダーを送信するサーバーが存在しないため決して動作しません。
2. カスタムヘッダーを送信できないホスト（例えばプレーンなGitHub Pages）では、そのままではスレッド化ビルドを動かせません。
3. 自動的にヘッダーを送信するホスト（適切な設定をしたitch.io）ではそのまま動作します。

ステップ5：アップロード前にローカルでテストする

アップロードしてリフレッシュしながらWebエクスポートをデバッグするのは避けましょう。まず自分のマシンでヘッダーを設定したローカルサーバーを使ってテストしてください。

Pythonがインストールされている場合、最も手軽な方法は、両方のヘッダーを付けてフォルダを配信する小さなスクリプトです。これをweb-buildフォルダ内にserve.pyとして保存してください。

import http.server, socketserver

class Handler(http.server.SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
        super().end_headers()

with socketserver.TCPServer(("", 8000), Handler) as httpd:
    print("Serving on http://localhost:8000")
    httpd.serve_forever()

python serve.pyを実行してhttp://localhost:8000を開きます。ここでゲームが読み込まれれば、エクスポートは正しく行われており、残りの問題はGodotではなくホストの設定の問題です。

スクリプトを書きたくない場合は、Godotエディタのリモートデバッグ実行オプション（再生ボタン横のドロップダウン「ブラウザで実行」）を使うと、正しく設定されたローカルサーバーが自動的に起動してビルドが開きます。開発中の素早い動作確認として最適です。

ステップ6：ホスティング

itch.io（最も簡単、無料）

共有やゲームジャムには、この方法をお勧めします。

1. web-buildフォルダ全体をzip圧縮します。親フォルダではなく中身をzipにして、index.htmlがzipのトップレベルにあるようにしてください。
2. itch.ioで新しいプロジェクトを作成し、プロジェクトの種類をHTMLに設定します。
3. zipをアップロードし、このファイルはブラウザで再生されますにチェックを入れます。
4. 埋め込みオプションで、ゲームの解像度に合わせたビューポートサイズを設定し、itch.ioがオプションを提供している場合はSharedArrayBufferサポートにチェックを入れます（2つのヘッダーを自動設定してくれます）。

itch.ioはヘッダーを自動的に処理してくれるため、最も抵抗の少ない方法です。上記のスクリプトでローカルでは動くのにitch.ioで動かない場合は、ほぼ必ずSharedArrayBufferのトグルが原因です。

Netlify、Vercel、または独自サーバー

これらのホストではカスタムヘッダーを設定できるため、設定さえすればスレッド化ビルドは問題なく動作します。

Netlifyでは、デプロイルートに_headersファイルを追加します。

/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

Vercelでは、vercel.jsonのheadersルール下に同じ2つのヘッダーを設定します。独自のnginxやApacheサーバーでは、locationブロックに追加します。原則はどこでも同じです。ページとアセットに対してこの2つのヘッダーを送信することです。

GitHub Pages

プレーンなGitHub Pagesではカスタムヘッダーを送信できないため、スレッド化ビルドはそのままでは動作しません。クライアント側でヘッダーを注入する小さなService Worker（「coi-serviceworker」アプローチが一般的です）を使ったワークアラウンドがありますが、これは回避策であり、すべてのブラウザが対応しているわけではありません。GitHub Pagesが必須条件であれば、このワークアラウンドを追加することを覚悟してください。そうでなければ、itch.ioやNetlifyを使う方が手間が省けます。

ブラックスクリーンを修正する：3つの質問チェックリスト

黒いキャンバスが表示されたら、ブラウザの開発者コンソールを開き（F12を押してコンソールタブを選択）、最初の赤いエラーを読んでください。3つの原因のどれかに当てはまるはずです。

1. ファイルを直接開きましたか？ URLがfile://で始まっていれば、それが原因です。上記のローカルスクリプトを使ってHTTPで配信してください。
2. エラーにSharedArrayBufferまたはcrossOriginIsolatedが含まれていますか？ ヘッダーが欠けています。ホスト側でヘッダーを追加するか、itch.ioのSharedArrayBufferトグルをオンにしてください。
3. エラーにバージョンやテンプレートの読み込み失敗が含まれていますか？ エクスポートテンプレートがエンジンのバージョンと一致していません。エクスポートテンプレートの管理から再インストールしてください。

Webエクスポートの失敗の90%はこれら3つのどれかです。ゲームにより深いバグがあると判断する前に、順番に確認していきましょう。

ブラウザに引き継がれないもの

Webエクスポートは本物ですが、URLを持つデスクトップ版ではありません。いくつかの点で動作が異なります。

• ファイルシステムへのアクセスはサンドボックス化されています。セーブデータはディスク上のフォルダではなく、ブラウザのIndexedDBに保存されます。Webをターゲットにする場合は、セーブシステムをこれに合わせて設計してください。
• ネイティブプラグイン（デスクトップ向けにコンパイルされたGDExtensionライブラリ）は通常ブラウザで動作しません。ネイティブの.dllや.soをリンクするものは、Web互換の代替手段が必要か、Webビルドでは削除する必要があります。
• ロードサイズはどこよりも重要です。 Webではゲームが始まる前に、プレイヤーがエンジン、データパック、すべてのアセットをダウンロードします。Webをメインチャンネルにするなら、テクスチャを圧縮し、未使用のアセットを削除し、3Dのスコープを現実的に保ちましょう。重い3Dゲームは初回読み込みが30〜100MBになることもあり、モバイル回線では辛いです。
• 音声レイテンシはブラウザではデスクトップより若干高くなります。通常は問題ありませんが、タイミングがシビアなリズムゲームでは気になることがあります。

Summer Engineでゲームを作った場合

Summer EngineはGodot 4と互換性があり、同じHTML5とWebAssemblyパイプラインを使用しているため、上記のエクスポートステップはまったく同じです。違いはより上流にあります。プレイヤーコントローラー、シーン設定、ゲームロジックを手書きする代わりに、欲しいものをプレーンな言語で説明すると、AIがそれをビルドします。共有する準備ができたら、ここで説明した通りにWebにエクスポートするだけです。

Webエクスポートは無料プランに含まれています。ビルドとエクスポートは無料で、有料プランはより高いAI使用量とチームの機能のみをカバーしているため、アイデアから誰かがクリックできるリンクまでの全工程は無料で試すことができます。

まだプロジェクトを始めていない場合、Web対応のビルドへの最速ルートは、移動とカメラがすでに設定されているテンプレートから始め、その上に欲しいメカニクスを説明し、上記の6つのステップに従ってブラウザで公開することです。白紙のプロジェクトからプレイ可能なitch.ioのリンクまでの全工程は、1日の午後に収まります。