モーションスキル · rossark-motion-skill

コーディングAIに任せるだけでは4.5秒固まっていたマスコットが、アニメーターの原則を読ませると止まらず動き出しました

Claude CodeやCodexに追加するrossark-motionスキルは、アニメーターの原則、動きのエンジン、フレームごとに計測するツールをまとめて渡します。冒頭の動画は、あるチュートリアルチャンネルが同じマスコットの場面をスキルなしで一度、スキルを読ませてから一度作らせ、並べて比べたものです。公開当日に自分の運動アプリのマスコットに組み込んでデプロイした人まで、事例を集めました。

2026年10月26日·事例 3件

同じオレンジ色のマスコットを、スキルなしで作った版（左）とスキルを読ませてから作った版（右）で並べた比較画面 — チュートリアルチャンネルWifiCodingの比較動画です。1分21秒から、左がスキルなし、右がスキルを読ませた後です。出典：WifiCoding YouTube

rossark0/rossark-motion-skill — README（デモReveal・Garden・Chef・Orbit、MIT）, 2026-10-22

rossark-motion-skill SKILL.md — 原則12項目、まばたき・呼吸の数値、Webでも使える方法

ROSS — 'New skill: /rossark-motion-skill' 公開時の投稿, 2026-10-22（2026-10-26時点で表示166,761・いいね2,034・ブックマーク3,343）

このスキルは個人アプリ開発者のROSSが10月22日に公開しました。リポジトリでは、デモのイラストも動きもすべてテンプレートからコードで作ったと説明しています。 ROSSは自分のアプリのオンボーディング画面や決済画面のイラストを動かそうとしてこの方法を作り、公開時の投稿に「@rive_app is overkill. i just want my apps to feel alive.（Riveを使うほどではない。ただ自分のアプリが生きている感じになればいい）」と書いています。Riveはアプリのアニメーションを作る専門ツールです。

4日後の10月26日、この投稿の表示回数は16万6千回を超え、保存した人（ブックマーク3,343）がいいね（2,034）より多くなっていました。公開当日の夜には、フランス語を使うある開発者がこのスキルを自分の運動記録アプリのコーチのマスコットに組み込み、デプロイまで済ませています。

スキルには、アニメーターの原則12項目（場面全体を1つの時計で動かす、着地で体がつぶれてから元に戻る、まばたきは約110ミリ秒で閉じて190ミリ秒で開く、など）と、React Native・SwiftUI向けの動きのエンジン、結果をフレームごとに測るツールが入っています。Web用のテンプレートはありませんが、同じ方法がWebでも使えると書かれています。無料（MITライセンス）です。

Reference 01運動記録WebアプリSachaRbone Fitを自作して使っている開発者SachaRM7 · GitHub

じっと立っていた運動アプリのコーチが、スキル公開当日に、呼吸して応援するマスコットとしてアプリに登場しました

SachaRM7は、スキルの公開から5時間ほどで、コーチのマスコットを動かす変更（PR）をアプリに取り込み、デプロイしました。マスコットは「準備」「休憩」「応援」の3つの状態で、ゆったりと呼吸し、少しだけ傾きます。応援の動きは1回だけ再生され、画面外にあるとき、タブが非表示のとき、端末で「動きを減らす」設定がオンのときは動きが止まります。ごく小さく表示される場所では静止画のままにし、新しいライブラリは入れていません。

最初の変更には「Les images restent aplaties: yeux et bras ne bougent pas indépendamment.（画像が1枚にまとまっていて、目と腕が別々に動かない）」と書いています。続く変更では、イラストから腕と親指を切り離して個別に動かせるようにし、体は止めたまま前腕を上げ、1.8秒かけて親指を立てる動きを加えました。現在公開されている比較画面では、静止画の横でコーチが握った拳を上げて親指を立てる様子を、運動画面（40px）・ホーム（72px）・コーチ画面（120px）で実際に使われるサイズで見られます。

SachaRbone Fitのマスコット比較画面。左の静止画の横で、右のコーチが握った拳を下から持ち上げ、親指を立てる — 公開されている比較画面（/mascotte）の「よくやった（Bien joué）」状態を2026年10月26日に録画しました。左が静止画、右が動く版です。出典：SachaRbone Fit

Reference 02チュートリアル · Claude Codeのリポジトリを紹介するYouTubeチャンネルWifiCoding（マスコットはClaudeがテスト用に描いたもの）

スキルなしでは4.5秒固まっていたマスコットが、スキルをオンにすると休まずしゃがみ、跳び、着地しました

WifiCodingはClaudeに小さなオレンジ色のマスコットを描かせ、あたりを見回してまばたきし、跳び上がって封筒をつかむ10秒の場面を2回作らせました。1回はスキルなしで、もう1回はスキルを読ませてからです。

スキルなしの版では7つのミスが出ました。1つの時計ではなく5つのタイマーがばらばらに動き、ポーズごとにぴたりと止まり、4.5秒間まったく体が動かない区間がありました。跳ぶ前にしゃがむことも、着地で体がつぶれることもなく、葉っぱはジャンプに合わせて揺れず、目は封筒を追いませんでした。スキルをオンにした版は、跳ぶ前にしゃがみ、着地では体がつぶれてから元に戻りました。スキルに入っている計測ツールで測ると、体が止まっている最長の時間は4.5秒から0.3秒に縮みました。

チャンネルはこう締めくくっています。「the difference between the left and the right is exactly the difference between something animated and something alive.（左と右の違いは、まさに『動いているもの』と『生きているもの』の違いだ）」

Reference 03公式デモ · スキルを作った個人アプリ開発者ROSS

作者ROSSのデモでは、水をやると花が咲き、ひっくり返したパンケーキがシェフの帽子に落ちてからフライパンに戻ります

リポジトリには、子どもがスマートフォンの画面の中に降り立ってボールを蹴り、手を振るReveal以外にもデモがあります。Gardenは、女の子が水をやると芽が伸びて花が咲き、蝶が飛んできた後、花びらが散ってまた芽に戻る10秒の場面です。Chefは、シェフが2回目にパンケーキを返すと、パンケーキがシェフの帽子の上に落ち、滑ってフライパンに戻る9.6秒の場面です。

公式デモRevealのGIF。スマートフォンの画面の中に赤いボーダーの服を着た子どもが降り立ち、ボールを蹴って手を振る9秒のループ — 公式デモRevealです。出典：rossark-motion-skill GitHub

公式デモGardenのGIF。女の子が水をやると芽が伸びて花が咲き、蝶が飛んでくる場面 — 公式デモGardenです。出典：rossark-motion-skill GitHub

公式デモChefのGIF。シェフがひっくり返したパンケーキがシェフの帽子の上に落ち、フライパンへ滑り落ちる場面 — 公式デモChefです。出典：rossark-motion-skill GitHub

みんなの反応

よかったという声

“使うと効く場面・キャラやマスコットを、待機中も生きてるように見せたいとき・連打や動きの途中で触られる要素（ガクガク → ふわっと1回で着地）・跳ねる・着地など、重さを出したい動き”
Codexの本を書いたWebエンジニアが、Codexでスキルなしとスキルありを21秒の左右比較動画で比べた後に投稿したものです。Webで試しています。
@suna_gaku · Xx.com
“a tiny bit of motion makes a half-built app feel alive. smart skill to have around”
ほんの少し動きがあるだけで、作りかけのアプリが生きているように感じられる。手元に置いておきたい賢いスキルだ
iPhoneアプリの開発過程を公開している開発者が、作者がこのスキルでアプリのキャラクターたちを動かした動画に付けた返信です。
Cupsey(@cupseycode) · Xx.com

物足りなかったという声

“効かない場面・ボタン、タブ、単純なアイコン（素の Codex で十分）・派手さを出したいとき（控えめな動きになる）トークン消費は約 1.4 倍。影や瞬きなど細かい部分は少し手直しが必要でした”
@suna_gaku · Xx.com
“It is a method, not magic, so you still need to look at the result. And Claude told me itself that it did not watch the two videos. It checked the frames and the numbers instead.”
方法であって魔法ではないので、結果はやはり自分の目で見る必要がある。Claude自身も、2本の動画を見たわけではなく、代わりにフレームと数値を確認したと言っていた
WifiCoding · YouTubeyoutube.com
“Really want to use this, but my mascot is just PNG assets”
本当に使いたいけれど、自分のマスコットはPNG素材しかない
家計簿アプリを一人で作っている開発者が、公開時の投稿に付けた返信です。
İlker(@piecheckapp) · Xx.com

始め方

Claude CodeやCodexなどのコーディングエージェントに、下の依頼を貼り付けるだけです。動かすイラストは、目・腕・体が別々のパーツに分かれたSVGである必要があります。そうなっていれば、各パーツが個別に動きます。

はじめの依頼
https://www.working-ref.com/ja/reference/rossark-motion-2026-10 を読んで、GitHubのrossark0/rossark-motion-skillスキルをインストールしてください。次に、私のプロジェクトのイラストと画面を見て、動かすとよさそうなものを3つ提案してください。私が1つ選んだらすぐに始めてください。選ぶものがなければ、マスコットが待機中に呼吸してまばたきするところから始めてください。他人のキャラクターではなく、私が持っているオリジナルのイラストだけで作業し、結果はブラウザやアプリの画面ですぐ確認できるようにしてください。

このリファレンスを共有

毎週1回・無料

このリファレンスは役に立ちましたか？

毎週あふれるAIニュースから
BEST 3つだけ、受信箱へ

Work Smarter with AI

購読完了次号から受信箱でお会いしましょう。