ドット絵を動かすのに、最初から何十枚も描く必要はありません。32×32の小さなキャラクターなら、体を1ピクセル上下させ、影を少しつぶし、頂点で一拍止めるだけでも呼吸しているように見えます。
この講座のゴールは、自然につながる 4コマの待機モーション を完成させること。ゲーム用スプライトだけでなく、SNSアイコンやループGIFを作りたい人にも使える基本です。
ドット絵アニメーションは「枚数」より「一貫性」
ドット絵アニメーションは、同じ大きさの絵を少しずつ変えて連続再生する仕組みです。キャンバス、キャラの位置、輪郭線の太さ、パレットを全コマでそろえ、動かす部分だけを変えます。
小さな絵では1ピクセルの差が大きく見えます。静止画では気にならないずれも、ループするとちらつきになります。描き込みより先に、グリッドと基準点を決めましょう。
最初に決める4つの制限
- キャンバス：初回は32×32がおすすめ。アイコンなら16×16でも構いません。
- 色数：輪郭、ベース、影、ハイライトを含め4〜6色に絞ります。
- 拡大：2倍、3倍、4倍の整数倍で拡大し、補間はニアレストネイバーにします。
- 動き：「キャラがゆっくり呼吸する」のように一文で決めます。まばたき、ジャンプ、手振りを同時に始めません。
4コマ待機モーションの設計
| コマ | キャラクターの変化 | 固定するもの |
|---|---|---|
| 1 | 中間の姿勢。すべての基準 | 足元の中心、キャンバスサイズ |
| 2 | 体を1ピクセル上げ、少し縦長に | 目の間隔、パレット |
| 3 | 最高点で短く止める | 影の中心 |
| 4 | 下がりながら少しつぶす | 重心が左右へ流れないこと |
4コマを均等に変える必要はありません。最高点を長めに見せると軽く、下がる時間を短くすると弾む印象になります。
手順1：一色のシルエットで確認する
目、服の模様、ハイライトをいったん外し、外形だけを見ます。表示を実寸まで縮めても頭・胴体・足が判別できれば、動かしたときにも読みやすい形です。
最初の題材には、スライム、四角いロボット、キノコ、耳のある丸顔などが向いています。細いアクセサリーは後回しにします。
手順2：基準コマを複製する
1コマ目を3回複製し、必要なピクセルだけを動かします。毎回描き直すと、頭の幅や目の間隔、線の太さが変わり、再生時にちらつきます。
オニオンスキンが使える場合は前のコマを半透明表示します。ない場合は2コマを素早く切り替え、意図しない輪郭の変化を探します。
手順3：足元か影をアンカーにする
立っているキャラは足元の中央、浮いているキャラは影の中央を基準点にします。各コマを編集したら、同じ座標に戻っているか確認してください。
体が上がっても足元が安定していれば呼吸に見えます。足と影まで一緒に動くと、画面内でキャラ全体が滑って見えます。
手順4：輪郭とパレットをそろえる
全コマで同じ色を使います。1コマだけ似た新色が入ると、ループ中に発光しているようなノイズになります。光を動かしたいときは、既存のハイライトを移動します。
輪郭線も同様です。つぶしや伸びを表現している場所以外で、1ピクセル線が急に2ピクセルになっていないか確認しましょう。
手順5：再生しながらタイミングを決める
最初は遅く再生して、コマごとのずれを見つけます。整ったら速度を上げます。待機モーションは等間隔でなくてもよく、最高点を一拍長く、下降を短くすると自然です。
正解のFPSは用途によって変わります。数字より、動きが読めるか、最後から最初へ滑らかにつながるかを優先してください。GIFに書き出した後も再確認します。
手順6：副次的な動きは1つだけ
主動作が完成したら、まばたき、髪先の遅れ、マフラーの揺れ、ハイライトの移動、影の伸縮から1つ選びます。体より1コマ遅れて動かすと、重さが出やすくなります。
32×32では情報を増やしすぎると主動作が読めません。1つ追加して確認し、必要な場合だけ次へ進みます。
よくある失敗と直し方
- 左右にガタつく：足元や影のアンカーがコマごとにずれています。
- 輪郭がちらつく：複製後に線を誤って削ったか、線幅が変わっています。
- 溶けて見える：全身を変形させ、安定する部分がありません。
- 速すぎて読めない：大事なポーズの表示時間が足りません。
- 拡大するとぼける：平滑化補間を使っています。ニアレストネイバーで整数倍にします。
- ループの切れ目で跳ねる：4コマ目と1コマ目の距離が大きすぎます。
GIFを書き出す前のチェック
- 100%表示と拡大表示の両方で確認する。
- 10周以上再生し、足元、目、外周だけを順番に見る。
- SNSやプレビューにはGIF、きれいな静止画にはPNGを使う。ゲーム用は専用ツールで連番PNGやスプライトシートに整理する。
- JPEGは輪郭に圧縮ノイズが出るため、元データには使わない。
よくある質問
初めてなら何コマが適切ですか？
2〜4コマから始めましょう。呼吸、まばたき、小さなバウンドは十分表現できます。伝わりにくい場合は、枚数を増やす前にキーポーズの差を強くします。
16×16と32×32のどちらが初心者向けですか？
キャラらしさを残しながら1ピクセルの変化を学べる32×32がおすすめです。シルエットを徹底的に単純化したいときに16×16へ挑戦しましょう。
ドット絵アニメーションはゲーム専用ですか？
いいえ。SNSアイコン、スタンプ、Webサイトの装飾、ループGIFにも使えます。この講座では読みやすいループに集中し、方向別モーションや当たり判定は次の段階に分けています。