🗂️ スプライトシートジェネレーター

概要

このツールはブラウザのCanvas APIを使い、画像をすべてデバイス上でコンパクトなPNGスプライトシートにパックします。サーバーには何もアップロードされません。必要なだけ画像をドロップし、最大行幅とスプライトごとのパディングを設定すると、パッカーが行ごとに配置して無駄なスペースを最小化します。生成後は結合されたPNGをダウンロードし、CSSスニペットをコピーできます。スニペットにはスプライトごとのクラスとbackground-image・background-position・width・heightの正しい値が含まれており、スタイルシートにそのまま貼り付けられます。

使い方

1. アップロードエリアに画像をドラッグ＆ドロップするか、クリックして複数ファイルを一度に選択してください。
2. 最大行幅（ピクセル単位）と各スプライト周囲のパディングを設定して、どれだけ密にパックするかを調整してください。
3. 「スプライトシートを生成」をクリックして、すべての画像を1枚のPNGにパックし、キャンバス上で即座にプレビューを確認してください。
4. 生成されたCSSをコピーしてください。各スプライトには正確なbackground-position・width・heightの値を持つ専用クラスが付きます。
5. PNGスプライトシートをダウンロードし、CSSをプロジェクトのスタイルシートに貼り付ければ完了です。

よくある質問

画像はサーバーにアップロードされますか？

いいえ。すべてCanvas APIを使ってブラウザ内で動作します。ファイルがデバイスの外に出ることはありません。

1枚のスプライトシートに何枚の画像を追加できますか？

厳密な上限はありません。ブラウザのメモリが許す限り何枚でも画像をパックできます。最高のパフォーマンスのために、個々のスプライトのサイズは適度に保ってください。

最大行幅の設定は何をするものですか？

パッカーが新しい行を開始する前に、各スプライト行が広がれる最大幅を制限します。大きな値ほど横長のシートになり、小さな値ほど縦長・細いシートになります。

生成されたCSSをそのままプロジェクトで使えますか？

はい。各スプライトクラスには、ダウンロードしたPNGへのbackground-image URL、background-position、width、heightが含まれています。任意のスタイルシートに貼り付け、HTML要素にクラスを適用するだけです。

入力スプライトにどの画像形式が使えますか？

ブラウザがデコードできる形式であれば何でも対応 — PNG・JPEG・WebP・GIF・SVG・AVIFなど。出力スプライトシートは最大互換性のために常に単一のPNGです。