公開日: 2026年8月6日 | 更新日: 2026年8月6日
ドット絵GIFの作り方：フレーム・速度・ループ・書き出し設定
ドット絵 GIF 作成で最初に迷いやすいのは、絵を細かく描くことよりも「何枚のフレームを用意し、どの速度で繰り返すか」です。この記事では、2〜4フレームの小さな動きから始めて、サイズ、色数、ループ、ファイル容量を調整し、ブラウザで見やすいGIFに書き出す手順をまとめます。
先に結論: 初めてなら、同じキャンバスに2〜4枚の差分を作り、まず0.2秒間隔で再生してください。速すぎるとポーズが読めず、遅すぎると動きが止まって見えるため、完成後に0.1秒・0.5秒・1秒を比較すると調整しやすくなります。
当サイトの無料ドット絵変換ツールには、変換画像をフレームとして追加し、GIFアニメーションへ書き出す機能があります。この記事ではツールのボタン説明だけでなく、素材を作る前の設計と、失敗したときの直し方まで扱います。
この記事で分かること
ドット絵GIFとは？静止画と何が違う？
ドット絵GIFは、同じサイズの画像を順番に表示して動きを見せる短いアニメーションです。1枚のPNGが一つのポーズを保存するのに対して、GIFは複数のフレームと表示時間を一つのファイルにまとめます。歩く、まばたきする、点滅する、水が揺れるといった小さな変化なら、少ない枚数でも十分に動いて見えます。
広い意味でのgifアニメ 作り方を探している場合も、最初に「動かす場所」と「戻るポーズ」を決めると考え方は同じです。ドット絵では1〜2ドットの変化が大きく見えるため、フレームを増やす前に基準線と色を固定することが重要です。
一方、ゲーム内で速度や再生状態を細かく制御する場合は、透過PNGのスプライトシートの方が扱いやすいことがあります。GIFはブログ、SNS、チャット、プレビュー向け、スプライトシートはゲームやWeb実装向け、と用途を分けると形式選びで迷いません。フレームを1枚に並べる方法はスプライトシートの作り方で詳しく確認できます。
作る前に決める4項目
先に絵を描き始めると、あとでキャンバスを揃えたり、フレームを作り直したりすることになります。次の4項目をメモしてから制作すると、短いループでも形が崩れにくくなります。
| 項目 | 初心者の基準 | 見直すポイント |
|---|---|---|
| キャンバス | 32×32 または 64×64 | 全フレームの幅・高さ・背景を揃える |
| フレーム数 | まず2〜4枚 | 動かす部分だけ差分を作り、増やしすぎない |
| 表示時間 | 最初は0.2秒 | 読みにくければ遅く、硬ければ一部だけ速くする |
| ループ | 開始ポーズへ自然に戻す | 最後のフレームを重複させて停止感を作らない |
小さく始めるコツ: 走る動きをいきなり8枚で作るより、立ち姿と一歩前へ出た姿の2枚で再生し、足や腕の差が伝わるかを確認してから中間フレームを足す方が修正しやすくなります。
ドット絵GIFの作り方：6ステップ
ここでは「変換画像を下絵にして、短いドット絵アニメーションを作る」流れを例にします。手描きソフトを使う場合も、キャンバスとフレームを揃える考え方は同じです。
1. 動かす場所を一つに絞る
最初は髪、腕、足、目、炎、水面など、動かす場所を一つ決めます。キャラクター全体を毎回描き直すのではなく、基準ポーズを固定し、変化が必要な部分だけを1〜2ドット動かすと、輪郭の揺れを抑えられます。
2. 全フレームのサイズと背景を揃える
32×32と64×64を混ぜたり、背景の位置をフレームごとに変えたりすると、再生時に画面全体が揺れます。透明背景を使う場合も、キャラクターの足元や基準線を同じ場所に置き、書き出し前に上下左右の余白を確認してください。
3. 2〜4枚の差分を作る
立つ→動く→戻る、閉じる→開く→閉じるのように、開始と終了がつながる組み合わせを作ります。まばたきなら目の開閉、点滅なら明るさの変更だけでも成立します。色数を増やすより、ポーズの差を優先すると小さい画像でも読みやすくなります。
4. フレームを同じ順番で追加する
フレーム名や並び順が入れ替わると、動きが逆戻りしたり、途中で別のポーズに飛んだりします。追加した直後に小さなプレビューを見て、開始ポーズ、動きの途中、戻りの順番になっているかを確認します。当サイトの変換ツールでは、変換結果を確認してから「フレーム追加」で現在のプレビューを登録できます。
5. 速度を変えてループを確認する
まず標準的な0.2秒で再生し、ポーズが読めない場合は0.5秒へ、動きが止まって見える場合は0.1秒へ調整します。全フレームを同じ速度にするだけでなく、動きを見せたいフレームを長めに置く考え方もありますが、最初は一律の速度で問題ありません。
6. GIFを書き出して実際の表示サイズで見る
編集画面の拡大表示だけで判断せず、完成したGIFをブラウザや投稿先の表示サイズで確認します。小さくしたときに輪郭が消えるなら、細部を増やすより色の明暗差を作り、動かない部分を整理してください。
フレーム数と速度の目安
GIFアニメの速度は、フレーム数だけでなく1枚を何秒表示するかで決まります。下表は制作開始時の目安であり、歩行、点滅、表情、背景のループなど用途に合わせて最後に調整してください。
| 表示時間 | 見え方 | 向く動き | 注意点 |
|---|---|---|---|
| 0.1秒 | 素早く切り替わる | 点滅、短い反応、勢いのある動き | ポーズの差が小さいとちらついて見える |
| 0.2秒 | 動きと読みやすさのバランス | 歩行、まばたき、短いループ | 最初の比較基準にしやすい |
| 0.5秒 | ゆっくり変化する | 表情、呼吸、ゆっくりした揺れ | フレーム数が少ないと停止に見えやすい |
| 1秒 | ポーズを見せる時間が長い | 案内、待機、明確な切り替え | ループの境目が目立つことがある |
当サイトのGIF機能には、高速0.1秒、標準0.2秒、遅め0.5秒、ゆっくり1秒の選択肢があります。まず標準で作り、同じフレームを速度だけ変えて比べると、絵の修正と再生速度の問題を切り分けられます。フレームは多いほど滑らかになりますが、ファイルサイズも増えるため、短い動きでは少ない枚数から始めるのが安全です。
ファイルサイズを抑えて見やすくする方法
ドット絵GIFが重くなる主な理由は、キャンバスが大きい、フレームが多い、色や背景の変化が広い、表示時間の違うフレームを大量に入れていることです。画質を落とす前に、動いていない背景を固定し、動く場所だけを変える構成にすると、見た目と容量を両立しやすくなります。
- キャンバスを先に決める: SNSアイコンや小さな装飾なら、完成後に整数倍表示する前提で小さく作る。
- 背景を毎回描き直さない: 背景が動かないなら基準フレームを共通にし、差分を最小限にする。
- 色数を目的に合わせる: 影色や輪郭色を増やす前に、明暗差が読めるかを確認する。
- 不要な中間フレームを減らす: 動きの意味が変わらない枚数は削り、再生速度で印象を整える。
- 投稿先で再確認する: SNSやチャットは再圧縮されることがあるため、元ファイルだけでなく公開後の表示を見る。
動かない・ちらつく・重いときの確認
| 症状 | よくある原因 | 先に試すこと |
|---|---|---|
| GIFが動かない | フレームが0枚、または同じ画像だけ | 2枚以上を登録し、各フレームに差分があるか確認する |
| 画面全体が揺れる | キャンバス位置や背景の基準がずれている | 足元・中心線・背景の固定位置を揃える |
| 動きが逆戻りする | フレーム順が前後している | 開始→中間→戻りの順に並べ直す |
| ちらついて見える | 色や輪郭がフレームごとに変わりすぎる | 動かない部分の色を固定し、差分を最小化する |
| ファイルが重い | 大きな画像、多数のフレーム、背景全体の変化 | キャンバス、色数、フレーム数の順に小さくする |
| 小さくすると読めない | 細部が多く、明暗差が不足している | 輪郭を整理し、重要な部分だけコントラストを残す |
大切な確認: GIFが生成できないときは、まずフレーム未登録のエラーを疑ってください。全体を描き直す前に、フレーム数、サイズ、並び順、表示時間を一つずつ確認すると原因を絞れます。
無料で試すときの使い分け
「gifアニメ 作成」や「gifアニメ 無料」で探す場合も、写真やイラストを下絵にして短い動きを試すなら、当サイトのドット絵変換ツールでサイズと色数を先に整え、そのプレビューをフレームとして登録する方法が手軽です。ピクセル単位で各フレームを描き込みたい場合は、Asepriteの使い方のような専用ソフトで差分を作ってからGIFを書き出します。
ゲームで使う予定があるなら、GIFだけで完成と決めず、同じフレームを透過PNGやスプライトシートにも整理しておくと後工程で使い回せます。「gif作成サイト」の比較だけで終わらせず、公開先の容量や透過条件も確認してください。配布素材を探している場合は、ドット絵アニメーションのフリー素材ガイドでGIF・WebP・スプライトシートと利用条件の違いも確認できます。
ドット絵GIFのよくある質問
ドット絵GIFは何枚のフレームから作れますか？
2枚から作れます。立つ・動く、閉じる・開くのように差分が分かる2枚を用意し、必要なら中間ポーズを追加してください。最初から枚数を増やすより、少ないフレームでループが自然かを見る方が修正しやすくなります。
GIFアニメの速度は何秒にすればよいですか？
最初は0.2秒が比較しやすい基準です。点滅や素早い反応は0.1秒、表情やゆっくりした揺れは0.5秒、ポーズを見せたい案内は1秒から試し、実際の表示サイズで調整してください。
スマホだけでドット絵GIFを作れますか？
ブラウザでフレーム追加とGIF書き出しに対応したツールなら、スマホでも作れます。ただし細かい修正は画面が狭いと難しいため、スマホでは速度とループの確認、細部の作画はPCや専用アプリという分担も現実的です。
GIFとスプライトシートはどちらを使えばいいですか？
ブログ、SNS、チャットでそのまま再生するならGIFが手軽です。ゲームやWeb実装で再生速度、向き、状態を制御するなら、透過PNGのスプライトシートが向いています。用途が決まらない場合は、同じフレームを両方の形式で保存しておくと安心です。
フレームを増やせば滑らかなGIFになりますか？
必ずしもそうではありません。フレームを増やしても、足元や背景の基準がずれていればちらつきます。まず基準線と色を揃え、動きが読める差分を作ってから中間フレームを追加してください。
GIFの容量が大きいときは何を削ればよいですか？
最初にキャンバスを小さくし、次に不要なフレームと背景の変化を減らします。最後に色数を見直します。輪郭や表情のような重要部分を残し、動かない場所の情報量を減らすと、見た目を保ちやすくなります。
まとめ
ドット絵 GIF 作成は、最初から滑らかな長編アニメーションを目指すより、同じキャンバスに2〜4枚の差分を作り、0.2秒で再生してから速度とループを調整する方が失敗しにくい方法です。動かす場所を絞り、背景と基準線を固定すれば、小さい画像でも動きが伝わります。
完成したら、実際の表示サイズ、ファイル容量、ループの境目を確認してください。ゲーム素材として使う場合は、GIFだけでなくスプライトシートの作り方も続けて確認すると、同じフレームを次の制作工程へ渡しやすくなります。
参考にした公式情報
- gif.js 公式リポジトリ：ブラウザでGIFを生成するライブラリの仕様確認先。
- MDN Web Docs：画像ファイル形式：Webで使う画像形式の基礎確認先。
本記事のフレーム数・速度・容量の目安は、初心者が短いループを作るための制作上の目安です。公開先やゲームエンジンの仕様に合わせて最終確認してください。