Character Motion Studio
Character Motion StudioLearnパペットとタイムライン
PUPPET / TIMELINE / KEYFRAME

パペットとタイムラインでアニメーション化する|曲げたのに再生すると戻る理由

パペットで髪や尻尾を曲げられたのに、再生すると動かない。ここで混同しやすいのが、「形を編集すること」と「その形を時間軸へ記録すること」は別だという点です。

公開:2026年9月26日更新:2026年9月30日現行実装に合わせて状態キー説明を更新
先に押さえるポイント

パペットでピンを動かす操作は「形を作る」操作です。アニメーションにするには、異なる時刻へパペット状態を記録し、その間を補間させます。Character Motion StudioではTransform・Puppet・Bone・Pathが別々のキーデータを持ち、タイムライン側でそれらの時刻をまとめて見せています。

変形と「時間軸への記録」は別

パペット機能でイラストを曲げると、その場では形が変わります。しかし、それだけで時間変化が作られたとは限りません。

「イラストを変形すること」と「変形した状態を時間軸へ記録すること」は別です。

パペット
画像内部の形を曲げる・潰す・しならせる。
パペットキー
特定時刻のピン位置を記録する。
タイムライン
複数の時刻にある状態を並べ、その間を再生する。

パペットで曲げるだけでは「動き」にならない

例えば尻尾を右へ曲げた時点では、「右へ曲がった尻尾」という一つの形を作っただけです。アニメーションにするなら、別の時刻にも異なる状態を用意します。

TAIL LOOP 0.0秒:まっすぐ\n0.5秒:右へ曲がる\n1.0秒:まっすぐ\n1.5秒:左へ曲がる\n2.0秒:まっすぐ

この考え方自体は一般的なキーフレームアニメーションと同じです。開始と終了の状態を置き、その間を補間して動きを作ります。

キーフレームの基本を先に押さえる

「フレーム」「キーフレーム」「キーポーズ」は似た言葉ですが同じではありません。キーフレームは、時間上のある地点へ値を記録するものです。

30fpsの2秒動画に60フレームあっても、60個のキーフレームが必要なわけではありません。0秒と2秒へ異なる値を置けば、その間はソフトが補間できます。

「キーフレームとは?フレーム・キーポーズ・状態キーとの違い」では、この基礎からCharacter Motion Studioの状態キー表示まで整理しています。

Character Motion Studioの現行キー構造

現行実装では、すべての状態を一つのキーフレームへ保存しているわけではありません。種類ごとに別のキーデータを持っています。

種類現行の保存単位主な内容
TransformLayerTransformKeyframex / y / width / height / scale / rotation / opacity
PuppetPuppetPinKeyframeその時刻のパペットピン位置
BoneRigKeyframeボーンごとの回転・X/Yオフセット
PathPath側のキーフレームアンカー・ハンドルなどのPath状態

タイムラインはこれらのキー時刻をまとめて表示できますが、内部保存は別です。特にPath変形は独立したPathキーフレームとして管理されます。

「状態キー」はUI上の見せ方として考える

Character Motion Studioのタイムラインでは◆を「状態キー」と表示しています。これは、ユーザーが「この時間のキャラクター状態」を一つの地点として捉えやすくするための見せ方です。

ただし、現行の◆ボタンがTransform・Puppet・Bone・Pathを一括で一つのデータへ保存するわけではありません。

現在の共通◆ボタンが直接追加・削除するのはTransformキーフレームです。パペット・ボーン・Pathはそれぞれ別の記録系統を持ちます。一方、タイムライン上の◆表示自体は、それらのキー時刻を集約して「この時刻に何らかの状態がある」と見せます。

以前の記事表現を修正しました

「◆を押すと位置・回転・パペット・ボーンを全部まとめて保存する」という説明は、現行コードとは一致しません。状態キーは一括保存フォーマットではなく、複数のキートラックを同じ時刻の状態として理解しやすくするUI概念として扱う方が正確です。

再生すると元へ戻るときに確認すること

パペットを動かしたのに再生すると元へ戻る場合は、その形がパペットキーフレームとして時間軸へ残っているかを確認します。

その場では曲がる
パペット自体の変形処理は動いている。
再生すると戻る
その時刻にパペットキーがない、または別時刻のキーが適用されている可能性を確認する。
途中で形が変わらない
開始側と終了側で異なるパペット状態が記録されているか確認する。

Transformの◆だけを追加しても、パペットピン位置が自動で同じキーへ統合されるわけではありません。この点を分けて確認すると原因を追いやすくなります。

髪や尻尾は「根元から先端まで同時に動かさない」

髪や尻尾を自然に見せるときは、全体を同時に同じ量だけ動かすより、根元・中間・先端へ時間差を作る方が柔らかく見えます。

根元
固定側に近く、動きを小さくする。
中間
根元と先端の曲がり方をつなぐ。
先端
少し遅れて大きめに動かすと、しなりを出しやすい。

ピン配置そのものは「パペットピンはどこに置く?」で詳しく整理しています。

最初は3つの状態だけでも動く

複雑な動きを最初から作る必要はありません。まずは「基本形 → 変形 → 基本形」の3状態で十分です。

THREE STATES 0秒:基本形\n ↓\n1秒:髪・尻尾を変形\n ↓\n2秒:基本形

ここから中間の状態を追加し、速度・しなり・余韻を調整します。パペットがゴムのように伸びる場合は、時間軸より先に変形範囲やピン配置を見直します。

パペットがゴムのように伸びる原因と直し方 →

移動までパペットで作らない

キャラクター全体の移動、回転、拡大縮小はTransformで作れます。パペットは髪・服・尻尾・柔らかな身体など、形自体を変えたい部分へ使います。

動きまず使う機能
画面内を移動Transform
近づく・遠ざかるScale
髪・服・しっぽを曲げるPuppet
腕・脚を関節として動かすBone / パーツ回転
長い髪や尻尾の流れを作るPath変形

パペット・ボーン・パス変形の違いも合わせて読むと、タイムラインへ置く前の機能選択を整理できます。

PUPPET TO TIMELINE

形を作ることと、時間へ残すことを分ける。

まず小さな変形を作り、その状態がどのキーとして記録されるかを確認します。Transformとパペットを別々に理解すると、再生時の戻りや意図しない変形を切り分けやすくなります。

まとめ

パペットで曲げることと、パペット状態を時間軸へ記録することは別です。アニメーションには、異なる時刻に異なる状態が必要です。

Character Motion Studioでは、Transform・Puppet・Bone・Pathが別々のキーデータを持ちます。◆の「状態キー」はそれらの時刻を一つのキャラクター状態として理解しやすくするUI上の考え方であり、現行実装では全データを一括保存する単一キーフレームではありません。

次に読む

Timeline cluster