スプライトシートの作り方 — 総合ガイド
スプライトシートとは何か、どう作るのか、ゲームエンジンでどう使うのか。無料オンラインジェネレーターを含む4つの作成方法を比較し、Unity・Godot・Phaser・Pixi.jsでの実装手順、テクスチャブリーディングなどの問題対処法まで、この1ページですべてわかる総合ガイドです。
スプライトシートの仕組み
スプライトシートとは？
スプライトシートとは、複数の画像を1枚のテクスチャにまとめたファイルです。ゲームやWebアプリのパフォーマンスを大幅に向上させる基本テクニックです。
パフォーマンス向上
1枚の画像をまとめて読み込むことで、HTTPリクエストとGPUのテクスチャ切り替えを大幅に削減。描画処理が高速化します。
スムーズなアニメーション
シート内の各領域がアニメーションの1フレームに対応。ゲームエンジンがフレームを順番に切り替えることで、滑らかな動きを表現します。
メモリ効率
GPUは少数の大きなテクスチャを効率的に処理します。スプライトをパッキングすることで、個別ファイルのオーバーヘッドやパディング分のメモリ浪費を抑えられます。
アセット管理の簡素化
関連するスプライトが座標マップ（JSON/XML/CSS）と共に1ファイルに収まり、バージョン管理や配布がシンプルになります。
スプライトシートを作る4つの方法
ワークフロー、予算、技術レベルに合った方法を選びましょう。
オンラインスプライトシートジェネレーター（無料）
無料のSprite Sheet Makerに画像をアップロードし、ドラッグ＆ドロップで配置。パディングやレイアウトを調整して、PNG＋JSON/CSS/XML付きのZIPをダウンロード。どのブラウザでも動作 — インストール不要、アカウント不要、完全無料。
TexturePacker（有料デスクトップアプリ）
業界標準のデスクトップアプリ。高度なパッキングアルゴリズム、メッシュスプライト、マルチパック、主要ゲームエンジンすべてに対応しています。無料版あり（ポリゴントリミング等の機能制限付き）、Pro版は$40。
Aseprite / Photoshop（手動）
お好みのツールでフレームを1枚ずつ制作。Asepriteにはスプライトシート書き出し機能が内蔵されています。Photoshopでは手動配置またはスクリプトが必要。ピクセル単位の精密な制御が必要な場合に最適です。
コード（Python / Node.js）
Python PIL/PillowやNode.js Canvasでプログラム的に画像を結合。CI/CDパイプライン、バッチ処理、独自のパッキングロジックが必要な場合に最適です。
スプライトシートを作る 4 つの方法
ステップバイステップ：オンラインでスプライトシートを作成
ソフトウェアのインストール不要 — ブラウザだけで最速でスプライトシートを作成する方法。
ステップ1：フレームをアップロード
PNG/JPG/WebP画像をアップロードエリアにドラッグ＆ドロップ。ファイル名順に自動ソートされます。GIFをアップロードしてフレームを自動抽出することも可能です。
ステップ2：配置と設定
グリッド・水平・垂直レイアウトから選択。列数、フレーム間のパディング、背景色を設定できます。「均一サイズ」を有効にすると、全フレームが同じサイズにスケーリングされます。
ステップ3：プレビューと調整
設定変更がリアルタイムでスプライトシートに反映されます。アニメーションプレビューでフレーム順序とタイミングを検証し、グリッドオーバーレイで配置を確認できます。
ステップ4：ZIPをダウンロード
「ZIPダウンロード」をクリックすると、スプライトシートPNGと選択した形式（JSON Hash、JSON Array、CSS、XML TextureAtlas）の座標ファイルをまとめて取得できます。
ゲームエンジンでのスプライトシートの使い方
主要なゲームエンジンやWebフレームワークごとに、スプライトシートの読み込みとアニメーション方法を紹介します。
Phaser（JavaScript）
this.load.atlas()でJSON Hashを読み込み、this.anims.create()でアニメーションを定義。PhaserはJSON Hash・JSON Arrayの両フォーマットをネイティブサポートしています。
Unity（C#）
PNGをインポートしSprite Modeを「Multiple」に設定。Sprite Editorでスライス後、Animatorコンポーネントでアニメーション化。TexturePackerのUnityプラグインも利用可能です。
Godot（GDScript）
AnimatedSprite2DとSpriteFrames、またはSprite2DとAnimationPlayerを使用。Godot 4ではRegionを有効にしてアトラステクスチャとして利用できます。
Pixi.js（JavaScript）
PIXI.Assets.load()でJSONアトラスを読み込み、テクスチャ配列からAnimatedSpriteを作成。PhaserとJSON形式が共通なので、同じアセットを使い回せます。
CSSスプライト（Web開発）
background-imageでスプライトシートを指定し、background-positionで個別アイコンを表示。HTTPリクエストを削減し、Webページの読み込みを高速化する定番テクニックです。
スプライトシートのベストプラクティス
デバイスやゲームエンジンを問わず最適に動作するスプライトシートを作成するためのガイドラインです。
2のべき乗サイズを使用
GPUテクスチャは256、512、1024、2048、4096ピクセルなどの寸法で最も効率的に動作します。古いハードウェアでのテクスチャパディングによるメモリの無駄を避けられます。
1〜2pxのパディングを追加
フレーム間のパディングはテクスチャブリーディング（隣接フレームがにじむアーティファクト）を防ぎます。特にバイリニアフィルタリング使用時に重要です。
フレームサイズを統一
すべてのアニメーションフレームを同じサイズにすると、描画処理が安定します。サイズが異なる場合は「均一サイズ」オプションで正規化できます。
ファイル名は論理的に
「walk_001.png」「walk_002.png」のような命名規則を使うと、自然な順序でソートされます。インポート時にフレームが正しい順序で並びます。
仕様と制限
マーケティング文句ではなく、実際の事実。
よくある質問
スプライトシートのよくある問題と解決法
開発中に遭遇しやすい問題とその対処法をまとめました。
テクスチャブリーディング
スプライトの端に隣接フレームの色が細い線として表示される現象。バイリニアフィルタリングが隣のピクセルを参照するために発生します。対処法：フレーム間に1〜2pxのパディングを追加し、エンジンでNearest Neighborフィルタリングを有効にしてください。
フレームの順序がバラバラ
アニメーション再生時にフレームが入れ替わる問題。ソースファイルのゼロパディングされた番号付けがされていない場合に発生します。対処法：walk_001.png、walk_002.pngのように命名してからアップロードしてください。
透明背景が黒や白になる
エクスポートしたスプライトシートでスプライトの背景が単色になる問題。ソース画像がアルファ透過ではなく単色背景を使用している場合に発生します。対処法：アップロード前にソースPNGの背景が透明であることを確認してください。
モバイルGPUでシートが大きすぎる
モバイルデバイスでスプライトシートが黒く表示されたりクラッシュする問題。多くのモバイルGPUは4096×4096ピクセルまでのテクスチャしかサポートしていません。対処法：大きなシートを4096px以内の複数の小さなシートに分割してください。
今すぐスプライトシートを作成
画像をアップロードして、数秒でゲーム対応のスプライトシートを作成。無料、登録不要です。