1枚の絵からLive2D風のアバターを作る『Mesh Avatar Studio』を公開するまで

絵からLive2D風のアバターを作成したい方はぜひ！

1枚のイラストから、まばたき・口パク・首振り・呼吸・髪の揺れをするアバターを作るツール『Mesh Avatar Studio』をGitHubで公開しました。

絵を渡すと、手元の Claude Code や Codex がアバターの下地を作り、ずれたところはエディタで点をドラッグして直せます。
（ちなみにDeepSeek Harnessなどでもご利用いただけているので、様々なAIエージェントで動かせそうです！）

このツールは、9月の終わりに「Opus 5.5 で静止画を Live2D っぽく動かせるらしい」と試してみたところから始まり、AITuber OnAir のサンプルとして公開し、最後にツールにまとめる、という順番で作ってきました。

その間の様子は X に逐一投稿していたので、この記事ではそれを一つにまとめて、どういう流れでここまで来たのかを書き残しておきます。

きっかけ: 1枚の絵を「Live2D風にして」と頼んでみた

AITuber OnAir では、これまで PSD・Live2D・VRM・PNGTuber など、いろいろな形式のアバターで AI キャラと会話できるサンプルを用意してきました。

（このような形で日々開発内容をあげているので、よろしければXもチェックしてみてください）

9月の終わりに、X で「Opus 5.5 なら静止画を Live2D っぽく動かせる」という話題を見かけたので、自分も試してみました。

絵を1枚渡して「Live2D風にして」と頼んだだけで、1回目のレスポンスからかなりの出来でした。
手と顔の分離が怪しかったので、そこだけ指摘して、2回の往復でここまで動きました。

パーツ分けをせず、1枚絵のままでここまで動かせたのは驚きでした。

改善を重ねる

その後も Opus 5.5 に何度か改善をお願いしました。

使ったのは、顎に手をついているイラストです。手が顔に重なっている絵ですが、手と顔の分離も良い感じにしてくれました（髪飾りはちょっと揺れすぎでしたが）。

目と口は Codex の ImageGen に描いてもらう

ここまで来ると、粗が目立つのは目と口でした。

閉じた目や「あ」「お」の口は、元の絵には描かれていないので、メッシュを変形させるだけでは自然に作れません。

そこで、粗が出ていた部分は Codex の ImageGen で補い、パーツのつなぎこみは Opus 5.5 に任せる、という分担にしてみました。

ImageGen に描いてもらったのは、目と口の差分の絵です。まばたきや笑い目、母音ごとの口の絵が入ったことで、口パクや表情の切り替えまでできるようになりました。

AITuber OnAir のサンプルとして公開

こうして作った Live2D 風のアバターを、AITuber OnAir のサンプルとして公開しました。

まばたき、髪の揺れ、表情の切り替え、声に合わせた口パクまで動き、そのまま AI キャラとして会話できます。API キーがなくても、口の形や表情の動きは試せます。

あわせて、このアバターでニュース番組風の縦動画を書き出すサンプル（node-mesh-newsdesk）も入れています。

Live2D 風のアバターをAITuberや動画のAIコメンテーターなど、様々な用途で使えるので、是非上記リンクからサンプルをチェックしてみてくださいね！

どうやって動かしているか

このアバターの見た目を自然にしているのは、次の3つです。

1. パーツを分けて、隠れていた部分を描き足す。 手や房飾り、目の部品を別のレイヤーに切り出し、手の後ろに隠れていたあごや首は描き足して埋めています。こうしておくと、手が動いても穴が見えません。

2. メッシュと重みで変形させる。 頭の回転や呼吸、髪の揺れは、メッシュの頂点を「どこがどれだけ動くか」の重みで動かしています。髪や房飾りは、ばねの物理演算で揺らしています。

3. 差分の絵に切り替える。 閉じた目や「あ・い・お」の口は、変形で無理に作らず、画像生成で描いた差分の絵に切り替えています。

メッシュの変形が担っているのは 2 だけで、見た目の自然さは 1 と 3 の比重がかなり大きいです。

ちなみに、サンプルの口の絵は「あ」「半開きのあ」「い」「お」の4枚です。「え」は半開きのあを少し横に広げて、「う」はおを少し狭めて使い回しています。

誰でも使えるように、ツールにする

サンプルを公開したあと、「1枚の絵から誰でも作れたら面白そう」と思い、この仕組みをツールにまとめ始めました。

別のイラストで、今度は Codex だけで試してみたところ、最初からそれなりに良い感じで動きました。一方で、目や口の開け閉めは、やはり差分の絵を描いて組み込んだほうが品質が上がります。

そこで、Claude Code で作る場合も含めて、差分の絵は Codex の ImageGen に頼む流れをツールに組み込みました。

下は、別のイラストで、口をメッシュの変形だけで動かしたもの（左）と、ImageGen で描いた口の差分に切り替えたもの（右）を並べた画像です。

『AI エージェントでメッシュアバターの下地を作り、細かな部分は Codex と ImageGen で補う』
今のところ、これが一番うまくいくやり方だと思いました。

Mesh Avatar Studio の使い方

そうしてできたのが Mesh Avatar Studio です。
今まで書いてきた内容を詰め込み、なるべく再現性高く一枚の絵からLive2D風アバターを誰でも作れるようにしました。

自分のイラストからアバターを作る手順は4つです。

1 と 4 はリポジトリのフォルダで動かすコーディングエージェント（Claude Code または Codex）が行い、2 と 3 はエディタで行います。
（私は動作未確認ですが、他のAIエージェントでもうまく動くとのことです！）

1. エージェントにアバターを作ってもらう。 リポジトリのフォルダで Claude Code か Codex を開き、イラストを渡して「docs/agent-guide.md に沿って、この画像からアバターを作って」と頼みます。エージェントは手順書に沿って、リグの配置、レイヤーの切り出し、決まったポーズでの仕上がりの確認まで進めます。

2. プロジェクトを開いて確認する。 エディタの「ポーズ確認」で顔の向きや傾き、目の開閉を、「口の動き」で母音ごとの口の形を確かめます。

3. おかしいところをドラッグで直す。 パーツを選ぶと画像の上に点が出るので、ドラッグして位置を直します。変更はプレビューにすぐ反映されます。目や手の輪郭を変えたときは、「保存してレイヤーを作り直す」を押すと、数秒でレイヤーを作り直します。

4. 目と口の描き分け画像を作る。 「描き分け画像」の欄で「目」「口」にチェックを入れ、表示された文章を Codex に貼り付けると、Codex が画像生成で絵を作って取り込みます。Claude Code は画像を生成できないため、Claude Code 向けの文章では、画像生成に渡すマスクと依頼文を用意するところまでを頼みます。

推奨の組み合わせは、Claude Code なら Claude Opus 5.5、Codex なら GPT-6.1 Sol です。
正面向きのバストアップで、背景が透明な PNG がいちばんきれいに仕上がります。

まず動きを見てみたい方は、同梱のサンプル（チャイナドレスのミコ）をエディタで開けます。Node.js 22.17 以上が必要です。

npm install
npm run dev

詳しい使い方は README にまとめています。
https://github.com/shinshin86/mesh-avatar-studio

AITuber OnAir で動かしたいとき

Mesh Avatar Studio で作ったアバターは、今のところ AITuber OnAir のサンプルにそのまま読み込むことはできません。

AITuber OnAir には、自分が以前作ったメッシュアバターで会話するサンプル（react-mesh-avatar-app）を置いています。

自分の AITuber で同じように動かしたい方は、このサンプルを AI エージェントに読ませて、作ったアバターで動くように実装してもらう形になります。
https://github.com/shinshin86/aituber-onair/tree/main/packages/core/examples/react-mesh-avatar-app

おわりに

「Opus 5.5 で静止画を動かせるらしい」と試したところから、AITuber OnAir のサンプル、そして誰でも使えるツールまで、10日ほどでここまで来ました。

自分の絵を動かしてみたい方は、ぜひ試してみてください😊