猫の歩きアニメーションの作り方｜After EffectsとAIで、実写の公園を歩く黒猫を作る6つの手順

お手本の動画と、この記事の進め方

きっかけは、mooographさんのYouTube動画「キャラクターのランサイクルと細い線のデザイン【After Effects】」です。

キャラクターが走り続ける「ランサイクル」を、ていねいに組み立てていく動画です。

動画を見て、この作り方で四本足の猫も歩かせられないかと考えました。

お手本との違いは3つあります。

お手本	この記事の作例	理由
二本足のキャラクター	四本足の黒猫	このブログの案内役が黒猫だからです。 四本足は足の順番がむずかしく、作りがいがあります。
走り続ける動き	歩いて、驚いて、跳ねる30秒	ひとつの場面として見られる短いお話にしました。
イラストの背景	Adobe Stockの公園の写真	アニメと実写を1つの画面に合わせる練習も兼ねています。

足を曲げる仕組みには、別売りのプラグインを使わず、After Effectsに最初から入っている機能だけを使いました。

この記事の画面は、筆者のMacのAfter Effects 2026で撮ったものです。

AIと一緒に作ると、どう進むのか

今回は、After Effectsの操作のほとんどをAI（Claude）にまかせました。

AIは、After Effectsを自動で動かす「スクリプト」という命令の文章を書きます。

それを実行すると、レイヤーや計算式やキーフレームが一気に組み上がります。

筆者は書き出された動画を見て、気になったところを短い言葉で伝えました。

このくり返しで、7回作り直しています。

筆者がAIに伝えた言葉と、それで変わったところを表にしました。

筆者が伝えたこと	AIが直したこと
「足を短くして」	足の付け根を下げて、胴と足の比率を猫に近づけました。
連続写真の画像を見せた	1887年の猫の連続写真に合わせて、足を出す順番と背中の高さを作り直しました。
「足の線を黒く」「顔はもっと丸く、ひげつきで」	足のふちを黒い線にして、顔を丸くし、白いひげを足しました。
「顔はサイトのアイコンの顔で」	このブログのアイコンの顔の画像を、そのまま頭として使いました。
「空も木も芝生もリアルに」	Adobe Stockの写真に背景を差し替えました。
「違和感なく、映画の1カットのように」	背景のぼけ、足もとの影、動きのぶれ、粒子、周辺の暗さを足しました。
「顔を少し大きく、二等身に」	頭を大きくして、位置を前に出しました。
「尻尾を常にくにゃくにゃ、激しく」	尻尾を、付け根から先へ波が伝わる動きに変えました。

やってみてわかったのは、AIは細かい数字を決めるのが得意で、人は「見て変だと感じる」ことが得意だということです。

「気持ち悪い」「なんか違う」という感想でも、AIは原因を探して直してくれました。

いちばん効いたのは、手本の写真を見せたことです。

言葉で「猫らしく」と言うより、見本を1枚見せるほうが、ずっと早く伝わりました。

先に覚えておきたい、5つのことば

ことば	意味
シェイプレイヤー	After Effectsの中で描く図形のレイヤーです。 猫の胴・足・尻尾は、すべてこれで描きました。
ヌル	画面には映らない「取っ手」のようなレイヤーです。 足の付け根や足首の位置を決めるのに使います。
親とリンク	あるレイヤーを、別のレイヤーにくっつけて一緒に動かす設定です。 胴を動かすと、足の付け根もついてきます。
エクスプレッション	プロパティに書く短い計算式です。 付け根と足先の位置から、ひざの位置を自動で計算させました。
スライダー制御	数字のつまみを足すエフェクトです。 「歩き」「ジャンプ」「しゃがみ」を0〜100で切りかえます。

作る順番は、6つの手順です

1. 体の部品を、シェイプレイヤーで描く。
2. ヌルで骨組みと、動かすための操作盤を作る。
3. エクスプレッションで、足を3節に曲げる。
4. 足先にキーフレームを打って、歩かせる。
5. スライダーで、ジャンプとしゃがみを切りかえる。
6. 実写の公園に、違和感なくなじませる。

手順1：体の部品を、シェイプレイヤーで描く

最初に、胴・頭・足4本・尻尾・影を、それぞれ別のシェイプレイヤーとして描きます。

部品を分けておくと、あとで1つずつ動かせます。

顔だけは、このブログのアイコンに使っている猫の顔の画像を読みこみました。

ひげは画像の上に、シェイプの線で描き足しています。

色は真っ黒ではなく、少し茶色を混ぜた黒（#2A2826）にしました。

真っ黒より、写真の中でなじみやすくなります。

手順2：ヌルで骨組みと操作盤を作る

次に、目に見えない「ヌル」で骨組みを作ります。

足1本につき、付け根のヌルと、足先のヌル（コントロール）を1つずつ置きます。

付け根のヌルは胴に「親とリンク」でくっつけます。

足先のヌルは胴にはくっつけず、地面に置いたままにします。

こうすると、胴が前に進んでも足先は地面にとどまり、足がちゃんと地面をけって見えます。

いちばん上の「ジャンプコントロール」には、スライダーを3つつけました。

猫全体の動きは、このつまみで切りかえます。

手順3：エクスプレッションで、足を3節に曲げる

ここがいちばんの山場です。

猫の足は、付け根・ひじ（ひざ）・足首・足先の3節でできています。

付け根と足先の位置が決まれば、間の関節の位置は計算で出せます。

エクスプレッションは、パスのストップウォッチを Option を押しながらクリックすると書けます。

計算の考え方は、次の3つです。

1. 付け根から足首までの長さをはかる。
2. その長さより少し長い「骨」を、まん中で折り曲げる。
3. 前足はひじが後ろへ、後ろ足はひざが前へ出るように、曲げる向きを決める。

3つ目が猫らしさの決め手です。

最初の試作では、前足も後ろ足も同じ向きに曲がっていて、筆者は「足が不自然」と感じました。

AIに伝えると、前足と後ろ足で曲げる向きを逆にする1行が足されました。

これだけで、急に動物らしい歩き方になりました。

手順4：足先にキーフレームを打って、歩かせる

足の形ができたら、足先のヌルにキーフレームを打って歩かせます。

1歩は1秒、24コマでくり返すようにしました。

足を出す順番は、1887年に写真家のエドワード・マイブリッジが撮った、猫が歩く連続写真を手本にしました。

猫はふつう、左後ろ、左前、右後ろ、右前の順に足を出します。

同じ側の後ろ足が、前足を追いかけるように出るのが特徴です。

連続写真を見て、ほかに2つ気づきました。

1つ目は、歩いているときの背中がほとんど上下しないことです。

2つ目は、後ろ足の太ももは胴の中に隠れていて、外から見える足は思ったより短いことです。

この2つに合わせて、背中のでっぱりを消し、足を短くしました。

手順5：スライダーで、ジャンプとしゃがみを切りかえる

11秒すぎに、猫は茂みから出てきたネズミに驚いて跳ねます。

この動きは、手順2で作った3つのスライダーで切りかえました。

「歩き」を0にすると足のくり返しが止まり、「ジャンプ」を100にすると足が空中の形になります。

跳ぶ直前に「しゃがみ」を一瞬だけ上げると、ためてから跳ぶ感じが出ます。

着地のときにも、もう一度しゃがませると、重さが伝わります。

手順6：実写の公園に、違和感なくなじませる

最後に、背景をAdobe Stockの公園の写真に差し替えました。

筆者がAIに伝えたのは、「違和感なく、映画の1カットのように」という言葉です。

AIは、次の5つの仕上げを足しました。

仕上げ	やり方	効果
背景のぼけ	背景の写真に「ブラー（カメラレンズ）」を半径4で。	カメラのピントが猫に合っているように見えます。
足もとの影	黒に近い緑の楕円を、ガウスでぼかして足の下に置く。	猫が地面に立っているように見えます。
動きのぶれ	コンポジションとレイヤーのモーションブラーをオン。	跳ねたときの速さが、写真のぶれと同じ感じになります。
粒子	調整レイヤーに「ノイズ」を2.5%だけ。	アニメのつるっとした面に、写真と同じざらつきが乗ります。
周辺の暗さ	黒い平面に、ぼかした丸いマスクを反転して重ねる。	目線が画面のまん中の猫に集まります。

もう1つ、背景の写真を30秒かけて76%から80%まで、ゆっくり拡大しています。

カメラがじわっと寄っていくように見えて、止まった写真が「映像」に変わります。

できあがりを、コマ送りで見てみましょう

完成した動画から、歩いている途中を0.125秒ずつ6コマ取り出しました。

足の順番と、尻尾の動きに注目してください。

尻尾は最後に「常にくにゃくにゃ、激しく」と伝えて作り直した部分です。

はじめは小さく揺れるだけでしたが、付け根から先へ波が伝わる計算に変えると、ぐっと生き物らしくなりました。

猫らしく見せる3つのコツ

1. 前足と後ろ足で、曲がる向きを逆にする。
   前足はひじが後ろ、後ろ足はひざが前です。
2. 足は短めに、背中は平らに。
   猫の太ももは胴の中に隠れています。
3. 尻尾は止めない。
   体が止まっていても、尻尾が動いていれば「生きている」と感じます。

うまくいかないときは、ここを見てください

困ったこと	見るところ
画面の上に、エクスプレッションのエラーの帯が出る	どのレイヤーの何行目かが帯に出ます。 レイヤー名を変えると、計算式の中の名前と合わなくなって止まることがあります。
ひざが逆に曲がってしまう	曲げる向きの「＋」と「−」を入れかえます。 前足と後ろ足で逆にするのを忘れていないか確認します。
足が地面をすべって見える	足先が地面についている間に、足先のキーフレームが動いていないか確認します。
書き出したのに、動画が古いまま	同じ名前のファイルがあると、上書きされずに止まることがありました。 名前に「v2」「v3」とつけて書き出すと確実です。
ショートカットが効かない	日本語入力がオンだと、U や E が文字として入ってしまいます。 英数入力に切りかえてから押してください。

よくある質問

まとめ

猫の歩きアニメーションは、足の順番と、ひじとひざの向きさえ押さえれば、標準機能だけで作れます。

いちばんむずかしい計算はAIにまかせ、人は「変だ」と感じたところを伝える役に回ると、短い時間で仕上がりが上がりました。

まずは1本の足だけ、付け根と足先のヌルをつないで曲げてみてください。

足が1本動けば、残りの3本はコピーして向きを変えるだけです。

あわせて読みたい、After Effectsの作り方

• 文字PVの作り方｜After Effectsで文字が飛びこむ動画を9つの手順で作る
• モーショングラフィックスの作り方｜After Effects初心者でも7つの手順で作れる
• インフォグラフィックアニメーションの作り方｜After Effectsで円グラフ・棒グラフ・数字を動かす7つのしくみ

After Effectsをこれから使うなら

この記事の作例は、After Effectsの単体プランか、Creative Cloudのプランで作れます。

まずは無料体験で、足を1本だけ曲げてみるのがおすすめです。

使い続けるかどうかは、作ってみてから決めて大丈夫です。

スポンサーリンク（PR）

After Effectsの無料体験を見る（PR）

After Effectsの料金を見る（PR）

Creative Cloudのプランを見る（PR）

※上記はアフィリエイトリンクです。

参考：mooograph「キャラクターのランサイクルと細い線のデザイン【After Effects】」（YouTube）。

歩き方の手本：Eadweard Muybridge『Animal Locomotion』（1887年）の猫の連続写真（ウィキメディア・コモンズ）。

背景素材：Adobe Stock（公園の写真 #284675859、茂みの写真 #296242324）。

作り方は動画を参考にし、キャラクター・動き・数値・背景は筆者がAI（Claude）と作り直したものです。