SVGって動くんだ！くまの画像に「手を振って」と頼んでみました
こんにちは、neco.です🐈⬛
いつも使っているキャラクターの画像、ちょっと手を振ってくれたらかわいいですよね。
9月7日の朝ライブでは、SVGにしたくまの画像を、Codexにお願いして動かしてみました。
結果は……動きました！
ただ、手の振り方がちょっと独特で、ライブでは「工事現場にいそう」という話にも（笑）。
今回は、きれいに仕上がった完成品のお披露目ではなく、画像に動きを付けてみた実験のお話です。
入力したプロンプトと、できあがった様子をそのまま残しておきますね。
そもそも、SVGってどんな画像？
SVGは、線や図形の位置などをデータで表す画像の形式です。
点の集まりで表すPNGやJPEGに対して、線や曲線の描き方を持っているイメージ。
図形として作られた部分は、拡大しても輪郭をきれいに保ちやすいのが特徴です。
ライブでは、同じくまの画像をいくつかの方法でSVGにした結果を並べて見ていました。
元の絵に近いものもあれば、雰囲気が変わるものもあって、作り方でかなり違うんですよね。
その中で、元のくまの雰囲気に近いと感じたのが、VTracerを使ったもの。
VTracerは、PNGやJPEGなどをSVGに変換するためのツールです。
今回、動かす対象にしたのは、この方法で作ったくまでした。
「手を挙げてふる」で頼んでみる
使ったのはCodexの画面です。
すでにくまの画像とSVGを扱っていた会話の続きで、こんなふうにお願いしました。
プロンプト：ライブで実際に入力した内容（改行のみ整理）
VTracer使って作った上記のクマさんを動かしたい
手を挙げてふる、アニメーションにできる？
44分00秒付近。右側には、それまでに作ったSVGの比較も見えています。
「上記のクマさん」で通じたのは、同じ会話の中ですでに対象の画像を見せていたからです。
新しい会話で試す時は、自分の画像やSVGも一緒に渡して、どれを動かすかがわかるようにしてくださいね。
ライブでは、その前に「VTracerを使ってSVG画像を作って」と頼むことも話していました。
流れとしては、まず画像をSVGにして、次に動きをお願いする、という2段階です。
VTracer自体が手を振らせるツールというわけではありません。
今回はSVGへの変換と、Codexに動きを付けてもらう作業を組み合わせています。
できた！でも、腕がちょっと不思議（笑）
しばらく別の話題を見てから結果を開くと、くまの腕が動いていました。
以下の2枚は、同じアニメーションをライブ中の別の時点でキャプチャしたものです。
画面内で拡大率も変えて見ていたので、くまの大きさは違います。
52分09秒付近。拡大して、腕の付け根や模様を見ていた場面です。
52分21秒付近。静止画では止まっていますが、ライブでは腕が上下していました。
体の花の模様など、元の絵の雰囲気が残っているのはうれしいところ。
一方で、腕はすっと長く伸びていて、自然な手振りというより、棒のような部分が上下している感じでした。
「動かして」と日本語でお願いして、実際に動くところまでは進められた。
でも、キャラクターらしいかわいい動きにするには、もうひと工夫ほしい。
今回の結果は、まさにそんな状態でした。
次は、動かす腕がわかる素材を用意したい
この結果を見ながら、ライブでは改善のアイデアも出ました。
元の画像だと腕の形がわかりにくいので、最初から腕を上げた絵を用意する。
あるいは、腕のパーツを分けて渡す。
そうすると、動かしたい部分を伝えやすそうだね、という話です。
ここは、その場で修正して成功した結果ではなく、次に試す案です。
「この方法なら必ず自然に動く」とまでは確認していません。
次に試すための依頼例：ライブの会話をもとに整理したもの（未実演）
このくまの腕を、もう少し自然に手を振る動きにしたいです。
元の画像では腕の形がわかりにくいので、
腕を上げた参考画像や、分けた腕のパーツが必要か教えてください。
動きの細かいコードを先に考えるより、まず「どの部分を、どう動かしたいか」をはっきりさせる。
そして、できたものを見て「この腕は少し不自然だね」と具体的に伝える。
ライブで結果を見ながら話していた流れは、ほかの画像を試す時にも使えそうです。
小さな動きから、試してみるのもおもしろい
SVGは静止した図やアイコンだけでなく、動きを付けることもできます。
たとえば、位置を変えたり、回転させたりする仕組みがあり、MDNのSVG解説にもアニメーションの例が載っています。
ただし、ライブでは今回の出力がどの仕組みを使ったかまでは確認していません。
今回はくまの手振りを試しましたが、「自分のキャラクターに、小さな動きを足したい」という入口としては楽しかったです。
一発で理想どおりにならなくても、結果を見ながら次の頼み方を考えられるのが、こういう実験のおもしろいところですね：）
出典
画像の引用
- 本文の画面画像は、上記のneco.のYouTubeアーカイブからキャプチャしました。
著者
neco. 🐈⬛
AI活用コンサル／ITエンジニア。朝ライブや勉強会で、仕事に使えるAI活用法を発信しています。
AI neco の図書館