投稿ゲームの20MiBは何に使われるか：画像・音・コードの内訳

20MiBの枠は「どの数字」に対する上限か

内訳を数える前に、アソバースの投稿にかかる制限を整理します。20MiBだけを見ていると、別の上限に先に当たる場合があるためです。

• アップロードするファイル、上限：20MiB以内
• ZIP展開後の合計、上限：100MiB以内
• ZIP展開後のファイル数、上限：1,000ファイル以内
• 1ファイル、上限：30MiB以内
• アカウントごとの累計、上限：100アップロード・1GiBまで
• 1人あたりの回数、上限：UTCの1日で10回まで

注意したいのは、20MiBが「アップロードするファイル」にかかる上限で、ZIP展開後の合計は別に100MiBまで認められている点です。ZIPで送る場合、20MiBは圧縮後のZIPファイルのサイズを指します。そのため、フォルダの合計が20MiBを超えていても、ZIPにすれば収まることがあります。逆に、JPEGやMP3のように、すでに圧縮された形式のファイルはZIPにしてもほとんど小さくならないのが一般的です。

アップロード時にはSDKが自動で追加されます。これが容量の枠にどう数えられるかは、この記事では確かめられません。現在の案内で確認してください。

内訳を数える単位を決める

内訳は、次の三つの単位で数えると原因を絞りやすくなります。

1. 種類別の合計：画像・音・コード・フォント・その他に分け、それぞれのバイト数を合計します。全体のどこが重いかを見るための単位です。
2. ファイル別の大きさ：大きい順に上位5件ほどを並べます。種類別では見えない「1個だけ突出したファイル」を見つけるための単位です。
3. ファイル数：種類ごとに何個あるかを数えます。容量は小さくても、数が多いと1,000ファイルの上限に近づくためです。

表示の単位はMiBに統一します。1MiBは1,048,576バイトです。OSによってはMB（1,000,000バイト基準）で表示されるため、エクスプローラーやFinderの数字と、アップロード画面の20MiBを直接比べると、少しずれて見えます。比べるときは同じ単位に揃えてください。

測る対象は、ZIPにする前の作業フォルダです。ZIPの中身を後から展開して測ってもかまいませんが、そのときは直下に index.html があるかも一緒に見ておきます。

フォルダを選ぶだけの集計ページ

次のHTMLを size-check.html という名前で保存し、ブラウザで開いてください。外部ライブラリもサーバーも使いません。選んだフォルダの中身は、ブラウザ内で読まれるだけです。

<!doctype html>
<meta charset="utf-8">
<title>容量の内訳</title>
<input type="file" id="pick" webkitdirectory multiple>
<pre id="out">フォルダを選んでください</pre>
<script>
const groups = {
  画像: ['png','jpg','jpeg','gif','webp','avif','svg'],
  音: ['mp3','ogg','wav','m4a','flac','opus'],
  コード: ['js','mjs','html','css','json','wasm'],
  フォント: ['woff','woff2','ttf','otf']
};
const kindOf = ext => {
  for (const [name, list] of Object.entries(groups)) {
    if (list.includes(ext)) return name;
  }
  return 'その他';
};
document.getElementById('pick').addEventListener('change', e => {
  const files = [...e.target.files];
  const sum = {};
  let total = 0;
  for (const f of files) {
    const ext = f.name.split('.').pop().toLowerCase();
    const k = kindOf(ext);
    sum[k] = sum[k] || { bytes: 0, count: 0 };
    sum[k].bytes += f.size;
    sum[k].count += 1;
    total += f.size;
  }
  const mib = b => (b / 1048576).toFixed(2);
  let text = `ファイル数: ${files.length} / 合計: ${mib(total)} MiB\n\n`;
  Object.entries(sum).sort((a, b) => b[1].bytes - a[1].bytes).forEach(([k, v]) => {
    const pct = total ? (v.bytes / total * 100).toFixed(1) : 0;
    text += `${k}: ${mib(v.bytes)} MiB (${pct}%) ${v.count}個\n`;
  });
  const top = files.slice().sort((a, b) => b.size - a.size).slice(0, 5);
  text += '\n大きい順:\n' + top.map(f => `${mib(f.size)} MiB  ${f.webkitRelativePath}`).join('\n');
  out.textContent = text;
});
</script>

表示されるのは、合計とファイル数、種類別のMiBと割合と個数、そして大きい順の上位5件です。フォルダを選ぶとき、ブラウザから「アップロードしてよいですか」と確認されることがありますが、実際にはどこにも送信されません。

分類は拡張子だけで判断しています。.DS_Store のような隠しファイルや、ソースマップ（.map）、READMEなどは「その他」に入ります。「その他」が大きいときは、ほぼ確実に本番に不要なファイルが紛れています。

結果の読み方

表示された数字は、次の順に読むと判断しやすくなります。

1. まず「ファイル別の上位5件」を見る

最大のファイル1個が、合計の大半を占めていないか確認します。1個のBGMや1枚の背景画像が突出しているなら、全体を広く削るより、その1個を直すほうが早く済みます。逆に、上位5件が小さく横並びなら、種類別の割合のほうに答えがあります。

2. 種類別の割合から疑う場所を決める

• 画像が大半の場合：画面に表示する大きさより、ずっと大きい画像を入れていないかを疑います。たとえば、画面上では数百ピクセルの表示なのに、元画像が数千ピクセルというケースです。
• 音が大半の場合：WAVのまま入れていないか、BGMが必要以上に長くないかを疑います。ループさせる曲を、長い1曲として入れている場合もあります。
• コードが大半の場合：ライブラリの複製、開発用に残した大きなJSON、同じ処理の別バージョンなどを疑います。コード自体が数MiBになるのは珍しく、多くはデータや同梱物です。
• その他が目立つ場合：不要なファイルです。ソースマップ、元データ、バックアップの置き忘れを探してください。

3. ファイル数も確認する

ファイル数が数百に近いときは、容量より1,000ファイルの上限が先に問題になるかもしれません。小さな画像を大量に並べているなら、1枚にまとめる（スプライトシートといいます）ことで、数を減らせます。

減らす順番と起こりやすい誤り

減らすときは、「効果が大きい順」ではなく、「動作を壊しにくい順」に進めると失敗が減ります。次の順を目安にしてください。

1. 不要なファイルを外す：「その他」に入ったバックアップや元データを、公開用フォルダから出します。動作に影響しないので、最初に済ませるのが安全です。
2. 突出した1ファイルを直す：大きい画像は、表示サイズに合わせて縮小します。音声は、WebPやOggなど、より小さくなる形式への変換を検討してください。変換後の見た目と聞こえ方は、必ず自分の目と耳で確かめます。
3. 同じ素材の重複を消す：同じ画像が別フォルダに複製されていないか探します。消したら、参照しているパスも直してください。
4. コードを整理する：使っていない関数やライブラリを外します。圧縮（ミニファイ）ツールを使う場合は、動作確認を必ず挟みます。

起こりやすい誤りは次のとおりです。

• 一度に全部変える：画像・音・コードを同時に直すと、どの変更が効いたのか、どの変更で壊れたのか分からなくなります。1回に一つだけ変えて、集計し直してください。
• MBとMiBを混同する：同じ「20」でも、MBとMiBでは約5%違います。上限ぎりぎりのときは、この差で超過します。
• 圧縮済みの形式を、ZIPで縮めようとする：JPEGやMP3は、ZIPにしても大きくは変わらないのが一般的です。縮めたいなら、ファイル自体を作り直す必要があります。
• ZIPにフォルダごと入れる：フォルダを丸ごと圧縮すると、index.html が一段下の階層に入ります。入口は直下の index.html なので、ZIPを開いたとき最初の階層に見えるかを確認してください。
• 絶対パスで素材を読んでいる：素材は相対パスで指定します。ファイルを移動したり、名前を変えたりしたら、参照も直します。
• 圧縮のしすぎ：画像を小さくしすぎると、拡大表示のときにぼやけます。音を圧縮しすぎると、ノイズが目立ちます。許せる品質の下限は、作品ごとに自分で決めます。

記録の取り方

変更ごとの効果を残しておくと、次の作品でも役に立ちます。次のような表を、紙でもメモアプリでもかまいませんので、作ってみてください。

• 0、変えたこと：（変更前）、合計（MiB）：、画像：、音：、コード：、その他：、動作確認：
• 1、変えたこと：、合計（MiB）：、画像：、音：、コード：、その他：、動作確認：
• 2、変えたこと：、合計（MiB）：、画像：、音：、コード：、その他：、動作確認：

変更前（0回目）を必ず残します。変更ごとに集計し直し、「動作確認」の欄には、実際に最初から最後まで遊んで、画像が欠けたり音が鳴らなかったりしないかを書いてください。容量が減っても、動かなくなっては意味がありません。

最終的に、ZIPにした状態で、ファイルのサイズが20MiB以内かを確かめます。展開後の合計や、ファイル数が上限内かも、あわせて見ておきます。

次の行動

まず、手元のゲームのフォルダで集計ページを開き、種類別の割合と上位5件を表に書き写してください。次に、一番大きいファイルから1個だけ直し、集計し直して、減った量を記録します。数字が出そろったら、アソバースの投稿画面で、現在の案内に載っている上限と見比べてください。

参考資料

• アソバース 作品投稿の現在の案内（アップロード上限・ファイル構成）
• MDN Web Docs「input 要素」の webkitdirectory 属性