CSSスプライトアニメーション生成
複数画像やスプライトシートから
CSSアニメーション用コードを自動生成
📏 分割・コマ設定
⚙️ アニメーション設定
🎞️ フレーム順序
ドラッグで入替
CSSスプライトアニメーション生成ツールの概要
CSSスプライトアニメーション生成ツールは、複数のフレーム画像やスプライトシートから、CSSのanimationプロパティとsteps()関数を用いたアニメーション用コードを自動生成する無料のオンラインツールです。
GIFアニメーションとは異なり、CSSスプライトは画質の劣化がなく、再生速度・方向・繰り返し回数などをCSS上で後から柔軟に変更できるのが特徴です。また、半透明の表現（アルファチャンネル）も綺麗に維持できます。
画像の読み込みから結合、CSSコードの生成に至るまで、すべての処理はブラウザ内で完結するため、サーバーに画像が送信されることはありません。安心かつ高速にご利用いただけます。
CSSスプライトの作り方
画像の読み込み
すでに結合済みのスプライトシートを選択するか、複数のフレーム画像をアップロードして1枚の画像に結合させます。
アニメーションの調整
プレビュー画面を確認しながら、画像の列数・行数、再生速度（duration）、再生方向などを設定します。
コードと画像の取得
完成したスプライトシート画像をダウンロードし、自動生成されたCSSおよびHTMLコードをコピーしてプロジェクトに組み込みます。
CSS property解説
CSS animation + steps() の仕組み
steps() 関数は、CSSの animation-timing-function の値の一つです。通常のアニメーション（ease や linear）が滑らかに値を補間するのに対し、steps() は指定されたステップ数で「段階的」に値を変化させます。
スプライトアニメーションでは、この特性を利用して background-position をコマ数分だけ一気に移動させることで、パラパラ漫画のようなフレームアニメーションを実現しています。
| プロパティ | 説明 | スプライトでの役割 |
|---|---|---|
| animation-timing-function | アニメーションの進行速度の曲線 | steps(コマ数) を指定し、滑らかな移動を防止。 |
| background-position | 背景画像の表示位置 | @keyframes内で移動させることでコマ送りを行う。 |
| animation-duration | 1回のアニメーションにかかる時間 | アニメーションの再生速度（FPS）を決定する。 |
アニメーション関連の用語集
- スプライトシート (Sprite Sheet)
- 複数の小さな画像（フレーム）を、格子状に並べて1枚の大きな画像にまとめたもののこと。HTTPリクエストの回数を減らし、ウェブページの読み込み速度を向上させる効果があります。ゲームのキャラクターアニメーション等で古くから使われています。
- steps() 関数
- CSSのイージング関数の一つ。指定した数だけ段階的に値を変化させます。例えば
steps(4)なら、開始から終了までを4等分し、カクカクとした動きを作ります。スプライトアニメーションには必須の関数です。 - @keyframes
- CSSでアニメーションの進行に合わせたスタイルの中間状態を定義する規則。スプライトアニメーションでは、0%（最初）から100%（最後）にかけて、
background-positionを画像の幅分だけ移動させる設定を記述します。 - background-position
- 要素の背景画像を表示する初期位置を指定するCSSプロパティ。スプライトアニメーションでは、この位置をマイナス方向にずらしていくことで、枠の中に表示される画像を切り替えています。
- アルファチャンネル (Alpha Channel)
- 画像データにおいて、透明度（透過率）の情報を保持するデータ領域。PNG形式などで利用でき、GIFのような二値の透明度（完全な透明か不透明か）ではなく、半透明の美しいグラデーションなどを表現できます。CSSスプライトはこれを綺麗に扱えるのが利点です。
よくある質問
- Q.アップロードした画像はサーバーに保存されますか？
- いいえ、保存されません。当ツールはすべての画像処理（読み込み、結合、コード生成）をお客様のブラウザ内（ローカル環境）でのみ実行します。外部サーバーへデータが送信されることはないため、機密情報を含む画像でも安全にご利用いただけます。
- Q.GIFアニメーションとCSSスプライトの違いは何ですか？
- GIFアニメは1つの画像ファイル単体で動くため手軽ですが、最大256色制限があり、半透明が綺麗に表現できません。対してCSSスプライトは、PNG画像等を使うため画質が高く、CSSを使って後から再生速度、逆再生、ホバー時の停止などを柔軟に制御できる点が大きなメリットです。
- Q.複数サイズの画像を結合できますか？
- CSSスプライトの仕組み上、各コマ（フレーム）のサイズ（幅と高さ）はすべて統一されている必要があります。サイズの異なる画像を複数アップロードした場合、ツール内で自動的に最大のサイズに合わせて配置されますが、意図した表示にならない可能性があるため、事前に画像サイズを揃えておくことを推奨します。
- Q.スマートフォンやRetinaディスプレイで画像がぼやけます。対策は？
- 高解像度ディスプレイ（Retinaなど）で綺麗に表示させるには、実際に表示したいサイズの2倍（またはそれ以上）の解像度でスプライトシートを作成してください。その後、CSSの
background-sizeプロパティを使って、実際の表示サイズに縮小指定することで、鮮明なアニメーションが実現できます。 - Q.作成したスプライトシートの推奨サイズはありますか？
- 一般的に、画像サイズは縦横2048px以内に収めることを推奨します。特にモバイル端末の場合、画像サイズが大きすぎるとメモリを圧迫し、アニメーションがカクついたり、クラッシュの原因になることがあります。可能であれば1024px×1024px以下に最適化すると安全です。
活用シーン
ローディングアニメーション
ウェブサイトやアプリの読み込み中に表示する、オリジナルのスピナーやプログレスバーのアニメーション作成に最適です。CSSで軽量に動作し、デザインに合わせた滑らかな半透明表現が可能です。
キャラクターの動作（ゲームUI）
ブラウザゲームやインタラクティブなサイトでの、キャラクターの「歩く」「走る」「ジャンプ」などの動作ループを作成できます。CSSを切り替えるだけで動作を変更できるため実装が容易です。
インタラクティブなUIアイコン
ボタンをホバーした時や、お気に入り（ハート）をクリックした時のダイナミックなアイコン変化アニメーションに。:hover やクラスの付与でアニメーションをトリガーできます。
高品質なバナー広告の制作
ファイルサイズ制限のあるバナー広告で、GIFの画質劣化を避けつつ動きを出したい場合に有効です。PNGの圧縮技術と組み合わせることで、高画質で目を引くアニメーションバナーが制作できます。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。