マガジン

ゲームをZIPで配布するときのフォルダ構成の正解

遊びを届ける

執筆にClaudeを使用しています。

箱に収めたゲーム模型を三段の台へ取り出し、ファイル投稿での公開を表したイラスト。
記事のテーマをもとに制作したAI生成イラスト。

ZIPにまとめたゲームを受け取った人が「解凍したら大量のファイルが散らばった」「どれを開けばいいかわからない」と感じたとき、ゲームの内容より先に印象が悪くなります。フォルダ構成は見た目の問題ではなく、プレイヤーが迷わず起動できるかどうかに直結する設計の問題です。 「正解」は一つではありませんが、判断の根拠になる原則はあります。この記事では、ブラウザゲームをZIPで配布する場面を中心に、フォルダ構成で決めるべき項目と、よくある失敗パターンを順に整理します。

この記事の目次
  1. ZIPを解凍した直後の状態が最初の関門です
  2. ルートフォルダ内の配置をどう決めるか
  3. パスの書き方がフォルダ構成と連動します
  4. よくある失敗と防ぎ方
  5. アソバースへのZIP投稿で気をつけること
  6. 次の行動

ZIPを解凍した直後の状態が最初の関門です

解凍直後にプレイヤーの目に入るのは、ZIPの中に「一つのフォルダ」があるか、「複数のファイルが直接並んでいる」かのどちらかです。

複数ファイルが直接並ぶ構成を「フォルダなし展開」と呼びます。これは解凍先のディレクトリにファイルがばらまかれるため、プレイヤーのデスクトップや任意のフォルダが汚れます。受け取る側の操作ミスも起きやすく、一般的には避けるべき構成です。

推奨するのは「ルートフォルダあり展開」です。ZIPの中にゲーム名のフォルダを一つ作り、その中にすべてのファイルを収める形です。解凍すると mygame/ というフォルダが一つできるだけなので、受け取る側が整理しやすくなります。

ルートフォルダ内の配置をどう決めるか

ルートフォルダの中身は、ゲームの規模によって変わります。ただし、どの規模でも共通して守ると良い原則があります。

エントリポイントはルート直下に置く

index.html など、ブラウザで最初に開くファイルはルートフォルダのすぐ下に置きます。サブフォルダの奥に入れると「どれを開けばいいか」がわかりません。READMEも同じ階層に置くと、プレイヤーが先に読める状態になります。

アセットはサブフォルダでまとめる

画像・音声・フォントなどのファイルは、ルートに直接並べると数が増えたときに見通しが悪くなります。assets/・images/・sounds/ のような名前のフォルダにまとめるのが一般的です。名前の付け方に厳密な決まりはありませんが、一度決めたら作品内で統一することが大切です。

スクリプトや設定ファイルも分ける

JavaScriptファイルが複数ある場合は js/ や scripts/ にまとめます。CSSは css/ や styles/ に置くと、HTMLとの役割の分離が明確になります。

最小構成の例を挙げると、以下のようになります。

mygame/
├── index.html
├── README.txt
├── assets/
│   ├── images/
│   └── sounds/
├── js/
│   └── main.js
└── css/
    └── style.css

ファイルが数点しかない小規模なゲームなら、assets/ の中をさらに分けなくても構いません。判断の目安は「同じ種類のファイルが3つ以上並んだらサブフォルダを作る」です。

パスの書き方がフォルダ構成と連動します

フォルダ構成を変えると、HTMLやJavaScript内に書いたファイルパスも変わります。ここを合わせ忘れると、ローカルで動いていたゲームが解凍後に動かなくなります。

相対パスを使う場合、index.html から見た位置でパスを書きます。たとえば assets/images/bg.png を参照するなら <img src="assets/images/bg.png"> と書きます。絶対パス(/Users/... のようなローカルのフルパス)がコードに残っていると、他の人の環境では必ず失敗するので、ZIP化する前に確認が必要です。

確認の手順としては、ローカルでフォルダをどこか別の場所にコピーし、そこから index.html を開いて動作するかを試すのが確実です。元の場所でしか動かないなら、絶対パスや環境依存のパスが残っている可能性があります。

よくある失敗と防ぎ方

失敗① ルートフォルダがない

ZIPを開いたら index.html や画像が直接並んでいる状態です。解凍先にファイルが散らばります。ZIPを作るときは、フォルダごと圧縮するか、作成ツールのオプションで「フォルダを含める」を選びます。

失敗② フォルダが二重になっている

mygame.zip を解凍すると mygame/mygame/index.html になるケースです。フォルダを右クリックで圧縮したときに起きやすい構造です。解凍後のパスを意識しながら、一度試し解凍して確認する習慣をつけると防げます。

失敗③ 開発環境のゴミファイルが混入する

.DS_Store(macOS)・Thumbs.db(Windows)・node_modules/(Node.js開発環境)などが含まれると、ZIPのサイズが不必要に増えたり、受け取る側が混乱したりします。ZIP化の前に不要ファイルを除外するか、.gitignore に準じたリストで管理すると効率的です。

失敗④ ファイル名に日本語や空白を使う

日本語ファイル名はOSや解凍ツールによって文字化けすることがあります。index.html・bg_01.png のようにアルファベット・数字・アンダースコアだけで構成するのが安全です。フォルダ名も同様です。

アソバースへのZIP投稿で気をつけること

アソバースはZIPファイルの直接投稿に対応しています。投稿後にプレイヤーがブラウザで動かす形になるため、ローカルで動いた構成がそのまま機能するかを確認しておくことが重要です。

特に注意が必要なのは、外部CDNやインターネット接続が必要なリソースです。ZIPに含まれていないファイルをネット経由で読み込む場合、公開環境でも通信できることを前提とした設計になります。ZIP内だけで完結するゲームなら、その心配はありません。投稿前にファイルサイズや対応形式について、アソバースの公式サイトで最新の条件を確認してください。

次の行動

手元のゲームフォルダをルートフォルダあり展開の構成に整えてから、別の場所にコピーして index.html を開き、すべての素材が正しく読み込まれるかを確認してください。問題なく動いたら、ゴミファイルを除いてZIP化し、試し解凍で構造を目視確認してから配布・投稿に進みます。アソバースへのZIP投稿は公式サイトの投稿ページから行えます。