Stamp Studio
記事一覧へ

アニメーション

キャラクターの動き、どう整える? 位置補正と12・16・20コマを比較

AIで作ったキャラクターの動きがカクつくので、足元をそろえたり、動画から取り出すコマ数を変えたりしてみました。同じ2秒を12・16・20コマで見比べながら、私が感じたことをGIFと一緒にお話しします。

検証記録:同じ2秒のダンスを12・16・20コマで見比べてみました
キャラクターの動き、どう整える?という見出しと、ジャンプの準備・跳躍・着地を表すイメージイラスト

AIでキャラクターを動かしてみると、ちゃんと動いているのに、どこかカクついて見えることがありました。どこが気になるのか見つけやすいように、まずは片手でバイバイする動きから始めました。この記事では、そこで気になったことを一つずつ試しながら、ジャンプするダンスや動画を使った作り方へ進んでいった様子をお話しします。

お手本の画像を用意して、ハム子に動いてもらう

今回登場するハム子は、丸い身体、大きな瞳、ピンクのリボンが特徴のハムスターです。この見た目をお手本にして、AIに手振りやダンスを描いてもらいました。

この記事では、動きを1コマずつ並べた画像を「スプライトシート」、コマを順番に再生する動くPNG画像を「APNG」と呼んでいます。記事の中の動く画像は、見やすいようにGIFという形式に変換して載せています。まずは、動きを見比べてもらえたらうれしいです。

通常のハム子の正面・斜め・側面を並べた基準画像
正面・斜め・横から見たハム子。この画像をAIへ渡し、同じ見た目で描いてもらいます。

最初は片手でバイバイする動作から始め、そのあと走り出す姿やジャンプを含むダンスも試しました。途中でGoogle Flowという動画を作るサービスも使っています。最後には、ひとつの動画の同じ部分から12・16・20コマを取り出して、見え方を比べてみました。

手だけを振ってほしいのに、身体まで揺れてしまう

手振りなら、動いてほしいのは片手だけ。足と身体が動かないはずなので、どこがずれているか分かりやすそうだと思いました。まずは、片手だけでバイバイする12コマをChatGPTに描いてもらいました。「身体の大きさや足の位置をそろえて」と伝えたのですが、1コマずつ切り出して再生すると、足元が少しずつずれていました。手だけを振ってほしいのに、身体まで動いて見えてしまいます。

そこで、両足の下のほうを目印にして、足元の中心と高さをそろえてみました。各コマの絵を上下左右へ動かしただけで、大きさを変えたり、顔を描き直したり、途中の絵を増やしたりはしていません。

絵をどれくらい動かしたか、詳しく見る

画像全体を、横方向で約−17〜+27px、縦方向で0〜7px動かしています。pxは画像を作る小さな点「ピクセル」の数です。動かした手やリボンが欠けないように、周りの余白も増やしました。

左が補正前、右が足元の位置補正後。同じ余白と倍率で12コマを再生
左が調整前、右が足元をそろえたあとです。どちらも12コマで、1回の動きは1.2秒。絵の大きさと周りの余白をそろえて並べています。

見比べてみると、だいぶよくなったなと感じました。パッと見た印象では、ちゃんとバイバイしているように見えます。ただ、よく見ると顔や身体の形には微妙な揺れが残っていて、位置をそろえるだけでは、形の変化まで直すところには至りませんでした。比較のGIFでは、調整前にも同じ余白を付け、同じ大きさで表示しています。

ここで気になったのが、大きく動くときはどうなるのだろう、ということです。その場で手を振るなら足元をそろえられますが、ジャンプする足まで同じ位置に戻したら、跳んでいる感じがなくなってしまいます。走り出す姿も試したものの、動きがよくなったか少し分かりにくかったので、次はダンスを見てみることにしました。

その場の手振りから、ジャンプするダンスへ

次は、左右のステップと小さなジャンプを組み合わせたダンスです。画像を作るAIに20コマを描いてもらいました。「同じ位置から撮ったように描く」「身体の大きさを保つ」「しゃがんでから跳び、着地する」といった順序も伝えています。

ステップとジャンプを描いた、5列×4行の20コマのハム子
ダンスの20コマを1枚に並べた画像です。左から右、上から下の順に再生します。
20コマのスプライトシートを2秒のAPNGにしたダンス
20コマを2秒で再生したダンスです。絵の位置は調整せず、そのまま動かしています。

私には、これでもかなりカクついて見えました。コマを増やせば解決するのかなと思っていたのですが、そう簡単ではなさそうです。途中の姿勢や身体の形が少しずつ変わってしまうと、枚数が増えても違和感は残るのだと感じました。AIへの伝え方もまだ工夫できそうですが、今回はどの言葉が効くかまでは調べていません。

ダンスのカクつきが気になり、動画でも試してみる

そこで、同じハム子の画像をGoogle Flowにも渡して、踊ってジャンプする動画を作ってもらいました。登場するのはハム子1体。撮る位置は動かさず、背景は白、文字は入れないように伝えています。文字が欲しくなったら、後から重ねようと考えました。

できた動画を見ると、やはり動きがスムーズだなと感じました。今回のようにキャラクターが1体なら、目立つ絵の崩れも気にならず、これなら使えそうだと思います。

動画は約10秒で、1秒あたり24コマの絵が使われていました。この「1秒に何コマあるか」を表すのがfpsという数字です。今回は、動画から一部を取り出して、動くスタンプ用の画像にしてみます。

元動画の2〜4秒を切り出したものです。ハム子の周りを切り取り、小さくしていますが、1秒あたり24コマの細かさはそのままです。音声は外しています。

元の動きが分かる動画を開く

画像で描いてもらったダンスと動画のダンスは、振り付けまでぴったり同じではありません。別の動きでも同じようにうまくいくかは、これから試してみたいところです。少なくとも今回のダンスでは、動画で作る方法に手応えを感じました。

動くスタンプに使いたくて、白い背景を消してみる

動画の最初の4秒から20コマを取り出し、白い背景を残したものと、背景を透明にしたものを作ってみました。透明にするほうは、大きな画像の状態で背景を消してから、小さくしています。

ハム子は頬やお腹も白いので、白いところを全部消してしまうと、身体に穴が開いてしまいます。そこで、画像の外側からつながっている白っぽい背景を消し、身体の中の白は残すようにしました。今回は記事のために別の画像処理で試したもので、Stamp Studioの背景除去機能を使った画像ではありません。

左が白背景あり、右が背景除去後のハム子
左が白い背景を残したもの、右が背景を消したものです。右のチェック柄は、透明になったところを見やすくするために付けています。

よく見ると、足元に影や背景が少し残っています。ここは好みが分かれそうだなと思いました。地面に立っている感じがあってよいとも見えますし、すっきり消したいとも思います。今回は影を整えて付けたわけではないので、全部消すものと、きれいな影を付け直すものを、また見比べてみたいです。

動画の動きを残すには、何コマ取り出せばよさそう?

ここで気付いたのが、同じ20コマでも、何秒の動きにするかで見え方が変わることです。4秒に20コマを使うと1秒あたり5コマ、2秒なら1秒あたり10コマになります。同じ枚数でも、短い区間に使うほうが動きを細かく残せるんですね。

今度はコマ数の違いを見たかったので、同じ動画の2〜4秒を使いました。ステップからジャンプの準備、跳び上がって着地するところまでが入っています。どれも同じ2秒で再生し、絵の大きさや背景の消し方もそろえています。

コマの取り出し方や設定を詳しく知りたい方へ

コマは時間の間隔が均等になるように選び、元動画の中でその時刻に最も近い絵を使いました。終わりの4.000秒は重複して含めていません。使用した設定はこちらです。

条件共通の設定
元の動画1280×720px、約10秒・240コマ
入力同じ24fpsのMP4、2.000〜4.000秒
出力190×244px、透過APNG、2秒
画像処理同じ固定クロップと背景除去。位置補正・速度変更なし
エンコードPillow 12.3.0、RGBA。Stamp Studioのエンコーダーではありません
再生比較しやすいように無限繰り返し。ループ境界は未調整
左から12・16・20コマを共通の時計で再生する比較
左から12・16・20コマ。すべて同じ2秒で再生しています。ジャンプや手足の動きを見比べてみてください。

記事のGIFは、元のAPNGから色や表示時間を調整して作った、見るための画像です。私が見比べたのは元のAPNGで、下のファイルサイズもそのAPNGのものです。

私は、跳び上がるところと降りるところ、腕や足が引っかかって見えないかを中心に見てみました。最後から最初へ戻るところはまだつなぎを整えていないので、そこはいったん気にせず、途中の動きを比べています。

コマ数ファイルサイズ見比べて私が感じたこと
12約536KB(536,023 bytes)画像で描いてもらったものより滑らか。でも腕や足の引っかかりが少し目立つなと感じました
16約716KB(716,474 bytes)少し引っかかるところはありますが、これでも十分使えそうだと思いました
20約894KB(894,281 bytes)動きが丁寧で、ふわっとジャンプしている感じがいいなと思いました

私の感覚では、16コマと20コマの差は「使えるかどうか」より、動きの雰囲気の違いに近いです。もちろん、これは今回のダンスを見た私の感想なので、ぜひご自身でも見比べてみてください。ファイルサイズも絵や作り方によって変わります。

12コマの元APNG / 16コマの元APNG / 20コマの元APNG

コマ数比較のGIF / SNS用の比較動画

動画から作った動きに、文字も重ねてみたい

今回のダンスなら、私は16コマを基本にして、ジャンプの柔らかさを大切にしたいときは20コマを選びたいです。12コマも、もっと単純な動きなら合うかもしれません。

今やってみたいのは、Flowでキャラクターを動かし、動画からコマを取り出して背景を消し、動く画像にしてから文字を重ねる作り方です。Stamp Studioの合成の実験室では、動くAPNGに画像や文字の素材を重ねられます。動きと文字を別々に作れば、言葉や置く場所もあとから変えやすそうです。文字入りの完成品は、これから試してみます。

それから、正面だけでなく、斜め前から見た動きも試したいと思っています。同じ動作・再生時間・コマ数にして、顔やリボン、手足がどう見えるか比べてみたいです。繰り返しのつなぎや影の残し方、別のキャラクター、文字を重ねたときの読みやすさも気になります。

最初は、AIへの伝え方を変えればカクつきも直せるのかな、と考えていました。試していくうちに、絵の位置をそろえることや、何秒の動きを何コマにするかも大事なのだと感じています。少しずつ条件を変えて見比べると、次にどこを直したいかが見えてきました。

試した日:2026年10月5日。手振りはChatGPT、走り出す姿と20コマのダンスはこの制作で使った画像生成AI、動画はGoogle Flowで作りました。Flowのモデル名や設定画面は手元に残していません。この記事では、今回の素材を見ながら私が感じたことをお話ししています。

アイキャッチは制作のテーマを表すイメージイラストです。本文の比較GIF・動画は実際の検証素材から作成しています。