ZIPで公開したゲームが開かない：index.htmlの位置と相対パス
遊びをつくる執筆にClaudeを使用しています。
ZIPファイルを投稿したのに、ゲームが真っ白だった、エラーが出た、画像だけ表示されない——こうした症状のほとんどは、ZIPの中でのindex.htmlの置き場所か、ファイル間の相対パスの書き方が原因です。コードそのものは正しくても、ファイル構成が一つ違うだけで動かなくなります。 この記事では「ZIPを解凍した直後に何が起きているか」を起点に、よくある構成ミスのパターンと、それぞれの直し方を具体的に説明します。AIツールでゲームを生成してそのままZIP化した場合も、手作業でフォルダを整えた場合も、確認すべき点は同じです。
ブラウザがゲームを読む仕組みを先に理解する
ZIPを投稿すると、サーバー側でアーカイブが展開され、その中のindex.htmlをエントリーポイントとしてブラウザに渡します。ここで重要なのは「どの階層にあるindex.htmlを起点にするか」という規則です。
アソバースを含む多くのホスティング環境では、ZIPを展開したときに最初に現れるindex.html、つまりZIPのルート直下にあるものが読み込まれます。展開後のディレクトリ構造が次のようになっていれば問題ありません。
（ZIPのルート）
├── index.html
├── style.css
├── main.js
└── images/
└── player.pngところが実際に投稿されるZIPの中身を見ると、構成が一段ずれていることが非常に多くあります。
「フォルダごとZIP化」が引き起こすズレ
最もよくある失敗が、プロジェクトフォルダをそのままZIP化するパターンです。たとえばmygameというフォルダを右クリックして「圧縮」すると、ZIP内の構造は次のようになります。
mygame.zip
└── mygame/
├── index.html
├── style.css
└── main.js展開するとmygame/index.htmlが存在しますが、ZIPのルートにはindex.htmlがありません。この状態では環境によってはゲームが開かず、404エラーや空白画面になります。
修正方法は二通りあります。
- フォルダの中に入ってから、ファイルをすべて選択してZIP化する。フォルダ自体を選ばないことが重要です。
- ZIPを一度展開し、mygameフォルダを開いた中身を再圧縮する。
OSによってZIP化の操作が異なります。macOSの「圧縮」はフォルダを選ぶとそのフォルダごと包むため注意が必要です。Windowsの「送る→圧縮フォルダー」も同様です。どちらの場合も、index.htmlがZIPのルートに来ているかを7-ZipやArchive Utilityなどで解凍せず中身だけ確認する習慣をつけておくと、投稿前に気づけます。
相対パスのよくある書き方ミス
構造が正しくても画像・音声・スクリプトが読めない場合は、index.htmlの中のパス指定を確認します。
絶対パスが混入している
AIツールでコードを生成したとき、ローカルで動作確認した環境のパスがそのまま出力されることがあります。
<!-- NG: ローカル絶対パス -->
<img src="C:/Users/yourname/mygame/images/player.png">
<script src="/Users/yourname/mygame/main.js"></script>ブラウザはサーバー上でこのパスを解決できないため、ファイルが見つからずエラーになります。すべて相対パスに書き直してください。
<!-- OK: 相対パス -->
<img src="images/player.png">
<script src="main.js"></script>`../`で一つ上に出てしまっている
index.htmlがルートにある場合、../で上の階層を参照しようとしても、ZIP展開後にはその上の階層にゲームのファイルは存在しません。参照がZIPの外に出てしまうイメージです。index.htmlと同じ階層か、その配下のフォルダに全リソースを収め、パスも./か相対的なフォルダ名から書き始めるのが安全です。
大文字・小文字の不一致
ローカルのWindowsやmacOS（デフォルト）ではファイル名の大文字小文字を区別しないため、Images/Player.PNGでもimages/player.pngでも開けます。ところがサーバーのLinux環境では厳密に区別されます。ローカルで動いていたのに本番で画像が出ない、という症状の原因の一つがこれです。
ファイル名とパスの大文字小文字を統一するルールを決めておくと安全です。一般的には小文字のみ・スペースなし・アンダースコアかハイフン区切りにしている作者が多くいます。
投稿前の自己チェックリスト
ZIP化する前に次の点を確認すると、よくあるミスの大半を防げます。
- index.htmlがZIPのルート直下にあるか（フォルダに入っていないか）
- HTML内のすべてのsrc・hrefが相対パスになっているか
- 参照しているファイル名と実際のファイル名の大文字小文字が一致しているか
- 参照しているファイルがZIPの中に実際に含まれているか（フォントや音声ファイルの入れ忘れに注意）
- ローカルで最後に動作確認したあと、ファイルを追加・削除していないか
特に4番は見落とされやすいです。ゲームエンジンや素材生成ツールが出力したファイルの中に、ライセンス上の理由で別途用意が必要な素材が含まれていないことがあります。ファイルが参照されているのにZIP内に存在しなければ、ロードエラーになります。
それでも動かないときの切り分け手順
上記を確認しても改善しない場合は、次の順で原因を絞り込みます。
ステップ1：ローカルで展開して確認するZIPを一度ローカルに展開し、そのindex.htmlをブラウザで直接開きます。ここで動かなければ、ZIP化・投稿以前にコード自体の問題があります。
ステップ2：ブラウザの開発者ツールでエラーを確認するF12キーで開発者ツールを開き、「コンソール」タブと「ネットワーク」タブを確認します。コンソールには読み込めなかったファイルのパスが表示されます。ネットワークタブでは赤く表示されているリクエストが失敗したファイルです。パス名がそのまま出るため、何が見つからないかを特定できます。
ステップ3：パスを一つずつ確認するエラーに表示されたパスと、ZIPの中の実際のパスを照合します。このとき、ZIPを展開せずに中身を確認できるツール（7-Zip、The Unarchiverなど）を使うと、展開後の構造を事前に把握できます。
次の行動
まずZIPをローカルに展開し、index.htmlがルート直下にあるかとブラウザ開発者ツールのエラーを確認してください。パスの問題が解消したら、アソバースにZIPを投稿して動作を確認します。投稿後も同じ開発者ツールで読み込みエラーが出ていないかチェックする習慣をつけると、公開直後の不具合を素早く発見できます。
