AI生成素材の解像度とファイルサイズ：ブラウザゲーム向け最適化
遊びをつくる執筆にClaudeを使用しています。
AI画像生成ツールで素材を作ると、デフォルト設定のまま出力された画像がそのままゲームに組み込まれがちです。1枚2〜5MBのPNGがキャラクター・背景・UIと重なれば、初回読み込みだけで数十MBになります。ブラウザゲームでは読み込み完了前に離脱されやすく、表示速度は体験の入口そのものです。 この記事では「どの解像度で生成するか」「どの形式・圧縮設定で書き出すか」「HTMLに組み込む際に何を変えるか」という三段階の判断基準を整理します。AI生成特有の注意点——高周波ノイズが多い・アルファチャンネルが必要な場合が多い——も含めて扱います。
この記事の目次
解像度の選び方：生成サイズと表示サイズを切り離して考える
AI画像生成ツールの多くは512×512や1024×1024を基準解像度として持っています。これはモデルの学習・推論に適したサイズであり、ゲームの表示サイズとは無関係です。「高解像度で生成した方がきれい」という感覚は正しいですが、表示サイズより大きければ情報量は捨てられるだけです。
表示サイズの確定が先です。 ゲーム画面が800×600であれば、背景画像は800×600（あるいは16:9なら1280×720まで）で十分です。スプライト（キャラクターや道具の切り抜き）なら実際にゲーム内で使う最大表示ピクセルを測り、それより1〜2割大きいサイズで生成する程度にとどめます。
生成サイズを大きくしたい理由が「細部の品質」にある場合、出力後に目的サイズへ縮小することで実質的な品質は確保できます。縮小時の補間でノイズが均され、かえってゲーム画面になじみやすくなるケースもあります。
解像度の目安（ブラウザゲーム）
- 背景・ステージ、推奨生成サイズ：1280×720 〜 1920×1080、表示想定：全画面
- キャラクタースプライト（大）、推奨生成サイズ：512×512、表示想定：128〜256px
- アイコン・UI部品、推奨生成サイズ：256×256、表示想定：32〜64px
- タイルセット1枚、推奨生成サイズ：512×512、表示想定：16〜32px/マス
この表はあくまで出発点です。実際の画面密度やゲームのアートスタイルによって変わるため、仮配置してから調整する習慣をつけてください。
ファイル形式の選択：PNG・WebP・JPEGの使い分け
AI生成画像はほとんどがPNGで出力されます。PNGは可逆圧縮でデータが劣化しませんが、ファイルサイズは大きくなりやすいです。ブラウザゲームでは用途に応じた形式への変換が基本です。
透過（アルファ）が不要な背景や一枚絵にはWebPかJPEGを使います。 WebPは同等の画質でJPEGより20〜30%小さくなることが多く、現在の主要ブラウザはすべて対応しています。JPEG品質70〜80が現実的な出発点で、縮小後の画像を書き出す際に設定します。
透過が必要なスプライトにはWebP（透過対応）かPNGを使います。 透過付きWebPはPNGより大幅に小さくなることがあり、アルファ付き素材の多いゲームで特に効果があります。
AI生成画像がPNGで出力される際に注意したいのが「不要な色情報の多さ」です。生成モデルは写真的なグラデーションを持つ画像を出力しやすく、PNGの圧縮効率が落ちます。こうした画像はJPEGやWebPへの変換で大きく縮小できます。
PNG圧縮レベルの調整も有効
PNGを使わざるを得ない場合（古い環境への対応など）は、PNG圧縮レベルを上げます。多くの画像ツールでは圧縮レベル0〜9を選べ、デフォルトは低めに設定されています。レベルを上げるとファイルサイズは下がりますが、書き出し時間が増えます。開発中はレベル低め、公開前に高めへ変換するワークフローが実用的です。
変換・最適化の手順
生成から組み込みまでの流れを一本化しておくと、素材が増えても対処しやすくなります。
- 生成直後のファイルを「オリジナル」フォルダに保存する。 AI生成素材は再生成に時間がかかるため、非圧縮・フル解像度のオリジナルを手元に残します。以降の変換はこのファイルを元にします。
- 用途に合わせてリサイズする。 表示サイズを確定し、それに合わせてキャンバスサイズを変更します。Squoosh（Googleが公開しているブラウザ上の画像変換ツール）やImageMagick（コマンドラインツール）など、無料で使えるツールで処理できます。
- 形式を選んで書き出す。 透過不要ならWebPかJPEG、透過必要なら透過WebPかPNGを選び、品質設定を調整します。Squooshはビフォーアフターをリアルタイムで比較しながら設定できるため、目視での品質確認がしやすいです。
- ファイルサイズを確認する。 目標は1スプライトあたり20〜50KB以内、背景1枚あたり150〜300KB以内です。超えているなら品質を下げるか解像度を再検討します。
- HTMLに組み込んで実際の速度を確認する。 ブラウザの開発者ツール（NetworkタブやLighthouseタブ）で読み込み時間を確かめます。特にキャッシュなしの初回読み込みに着目してください。
AI生成特有の落とし穴と対処
AI生成画像には通常の写真・手描き素材とは異なる特性があります。最適化の際に引っかかりやすい点を整理します。
高周波ノイズの多さ。 生成モデルは細かいテクスチャを好む傾向があります。背景のコンクリートや布地などにランダムなディテールが入ると、JPEGやWebPの圧縮でブロックノイズが目立ちやすくなります。ゲーム用途では生成プロンプトに「clean」「flat」「simple texture」などを加えてノイズを抑えるか、生成後にぼかし処理を軽くかけてから圧縮すると結果がなめらかになります。
意図しない透過領域。 PNG出力のスプライトで、背景除去ツールを使った後に半透明ピクセルが残ることがあります。そのままWebPに変換しても問題ありませんが、座標計算がずれやすくなるため、不要な余白は事前にトリミングしておきます。
色域のずれ。 AI生成ツールによってはsRGBではなく広色域プロファイルで出力するものがあります。ブラウザ表示では問題が出にくいですが、複数ツールを組み合わせると色のトーンがまちまちになることがあります。書き出し時にカラープロファイルをsRGBに統一することで揃えやすくなります。
アニメーション用スプライトシートの扱い。 複数フレームをタイル状に並べたスプライトシートをAIで生成した場合、1枚あたりのサイズが大きくなります。全フレームを一括で最適化する前に、フレームごとに不要なものがないか確認してから結合した方が無駄を省けます。
目標値の考え方：何KBなら「許容範囲」か
一般的にブラウザゲームの初回ロード（画像アセット合計）は1MB以内を目標にすることが多いです。シンプルなパズルやカードゲームなら500KB以下でも収まります。これはネットワーク環境の多様性と、スマートフォンでのプレイを想定した場合の実用的な目安です。
ただし「何KBが正解」は一律には決まりません。アクションゲームで大量のスプライトが必要な場合、2〜3MBになることもあります。重要なのは「読み込みが完了するまで何秒かかるか」であり、最終的にはブラウザの開発者ツールで計測して判断します。遅延読み込み（lazy loading）や分割読み込みで初回表示を軽くする手法もありますが、まず素材を適切なサイズに整えることが先決です。
次の行動
手元にあるAI生成素材を1枚選び、Squooshで表示サイズにリサイズしてからWebPで書き出し、元のPNGとファイルサイズを比較してみてください。多くの場合、体感画質を変えずに50〜70%削減できます。最適化した素材を使ったゲームはアソバースにZIPでまとめてそのまま投稿できます。
参考資料
- Squoosh 公式ドキュメント（Google Chrome Labs）
- WebP 仕様・対応状況（web.dev）
- Lighthouse パフォーマンス診断ガイド（Google Developers）
- ImageMagick 公式ドキュメント
