課題
このブログの案内役のキャラクター、PAGEを、1枚の絵のまま瞬きや口パクをさせる仕組みを、AIと一緒に自作した。検証用のキャラで作り直しを重ね、PAGEとほかの3人に広げるまで、4日かかった（2026年10月4日〜7日）。
その直後に、1枚の絵からLive2D風のアバターを作るツール「Mesh Avatar Studio」が公開されたのを、Xで知った。考え方は、自分たちの仕組みとかなり近い。
となると気になるのは、「これを使えば、あの4日は要らなかったのか」になる。
解決できるようにすること
1枚のキャラクター絵を動かしたい人が、Mesh Avatar Studioを使うか、自分で作り込むかを判断できるようにする。あわせて、使うときに先に知っておきたい点（背景、瞬き、外部へ送る画像）も整理する。
先に結論
PAGEとLEAFの2人で試して、自作の仕組みと比べた。
- エージェントにアバターを作ってもらうのに約10分、目と口の描き分けの絵を足すのに約20分。1人あたり約30分で、首振り・呼吸・髪の揺れ・口の形まで動いた
- 元の絵に背景が付いていると、体を傾けたときに背景の四角い板ごと回る。背景を透明にした絵なら起きなかった
- 瞬きの途中のコマには、ツールにも自作にも、灰色のにじみが出た。この点では、どちらかがはっきり上ということはなかった
- 唇の色や8種類の表情のような、キャラごとの細かい調整は自作のほうが上だった
- 一時停止中に「目の開き」を0にしても閉じない小さな癖を見つけ、作者にGitHubで報告した。その日のうちに修正され、修正版で閉じることを確かめた
この記事でわかること
- Mesh Avatar Studioで、1枚の絵から何がどこまで動くか
- 試すときの流れと、画像がどこへ送られるか
- 自作の仕組みと同じキャラで比べた、目・瞬き・傾けたときの違い
ここで、こう思う人もいるかもしれない。
「ツールで30分なら、もう自作する意味はないのでは？」
今回の結果では、そうとまでは言えなかった。速さと動きの多さはツールが大きく上回る。一方で、キャラごとの細かい調整は、自作の仕組みに分があった。
Mesh Avatar Studioとは
1枚のイラストから、まばたき・口パク・首振り・呼吸・髪の揺れをする2Dのアバターを作るツール。2026年10月4日にGitHubで公開された。作者はshinshin86さんで、AIキャラクターと会話できる「AITuber OnAir」を開発している人になる。作者の投稿によると、公開から3日でGitHubのスターが400を超えている。
作り方は、自分のパソコンのClaude CodeかCodexに、リポジトリの手順書どおりに作業させる形。エージェントが絵を部品に分け、目や髪の動く範囲を決める。ずれたところは、ブラウザーで開くエディタで点をドラッグして直す。閉じた目や「あ・い・お」の口は、画像生成で描き分けた絵に切り替える。
作者は、Live2D風にはなるが、Live2Dそのものを置き換えるツールではない、とも注意している。Live2Dならではの表現を使っていた人には、引き続きLive2Dをすすめている。
| 項目 | 内容 |
|---|---|
| 料金 | 無料。コードはMITライセンス |
| 必要なもの | Node.js 22.17以上、Python 3.10以上とuv、Claude CodeかCodex |
| おすすめのモデル | Claude CodeならOpus 5.5、CodexならGPT-6.1 Sol（READMEの記載） |
| 描き分けの絵 | Codexの画像生成で作る。Claude Codeは依頼文の用意まで |
安全性と、画像がどこへ送られるか
試す前に、GitHubで中身を確かめた。
- コードはすべて公開されていて、READMEの説明と照らし合わせられる
- インストールで自動的に動く処理は、広く使われている部品2つ（esbuildとfsevents）だけだった
- エディタは自分のパソコンの中だけで動く（
127.0.0.1で起動する） - 手順書には、自分の画像はツールのフォルダの中に置き、外へ出さないと書かれている。外へ送るのは描き分けの絵を作るときだけで、本人が同意してから、という決まりになっている
つまり、外へ送られる可能性があるのは、描き分けの絵を作る段階だけになる。今回はCodexの画像生成を使ったので、PAGEとLEAFの絵と、目・口の範囲を示すマスクが、OpenAIへ送られた。自分のキャラの絵を外へ出したくない場合は、ここで止めるか、手元の画像編集ソフトで描き分けを用意することになる。
カメラで動かす配信機能もあるが、作者の説明では、映像と音声は手元のパソコンだけで処理される。今回はカメラの機能は試していない。
なお、同梱のサンプルのキャラクターはMITライセンスの対象外で、別の利用ガイドラインがある。この記事では、サンプルが写った画面は載せていない。
試した環境と流れ
試したのは2026年10月8日、macOS（Apple Silicon）で、Node.js 24.20.0、ツールのコミットは3e8f4e9。
コマンドの実行やエージェントへの依頼は自分で行い、手順の組み立てと、できた画像・動きの確認はAIに手伝ってもらった。ツールのコードは、AIに実行させず、読んで確かめるところまでにした。
流れはこうなった。
- リポジトリを取ってきて、
npm installとnpm run devでエディタを開き、サンプルが動くことを確かめる - ツールのフォルダでClaude Code（Opus 5.5）を開き、手順書に沿ってPAGEの絵からアバターを作ってもらう
- Codexで、目3種類（閉じ・半目・笑い目）と口4種類（あ・半開きのあ・い・お）の描き分けの絵を作って取り込む
- 同じことをLEAFでも行う。LEAFは、macOSの「背景を削除」で背景を透明にした絵を使った
エージェントは最初に、絵の座標を正しく読めるかのテストをして、合格を報告してきた（ずれの中央値は約1px）。PAGEのアバターは約10分、描き分けの絵の作成と取り込みは約20分で終わった。
期待どおりだった点
- 顔を左右に30度向けても、傾けても、メッシュの裂けや、あご・耳の欠けは出なかった
- 描き分けの絵を入れると、閉じた目がきれいになった。描き分けの前は、閉じた目の上にまつ毛の跡と灰色のにじみが残っていた
- 口は「あ・い・お」で形が変わり、話しているように見える
- 描き分けの絵を取り込むとき、ツールが「目や口の外まで描き変えていないか」を測って、ずれた絵を弾いてくれた。実際、画像生成が目の外まで描き変えた絵は一度弾かれた。最終的には、Codexが目や口の外側を元の絵の画素に戻してから取り込んでいる
気になった点
背景が付いた絵だと、傾けたときに背景ごと回る
PAGEの絵は紺の背景付きのまま使った。すると、体を傾けたときに、背景の四角い板ごと回って、端が見えた。LEAFは背景を透明にしてから試したので、この問題は起きなかった。
READMEにも、背景が透明なPNGがいちばんきれいに仕上がると書かれている。背景付きの絵しかない場合は、先に背景を透明にしておくのが近道になる。
ただ、LEAFは背景と上着がどちらも紺だった。macOSの「背景を削除」は上着を残してくれたけど、髪のすき間や輪郭に背景の紺が少し残った。エージェントが色の違いで消してくれたものの、細かい点はまだ残っている。
瞬きの途中に、灰色のにじみが出る
瞬きを1コマずつ見ると、閉じ始めや開き始めのコマに、目のまわりの灰色のにじみが見えた。これは自作の仕組みでも出ていた。
上の段は、ツールのエディタの小さなプレビュー（418px四方）を録画して拡大したもので、下の段より粗い。そのため、にじみの大きさを正確に比べることはできない。言えるのは、どちらにも瞬きの途中のにじみがある、というところまでになる。
そのほかの小さな点
- PAGEのポニーテールは、ほとんど揺れなかった。エージェントは、根元が首の高さにあり、揺れが頭の動きと一緒になるためと見ていた
- 待機中に、目が半目の絵になっている時間が長く、少し眠そうに見えることがあった
- 閉じた目の片方の上に、元のまぶたの線が薄く残った
- 本やランタンのような持ち物は、体と一緒に動くだけで、指や小物は動かない
一時停止中に閉じない癖は、報告したその日に直った
エディタで待機中の動きを一時停止し、「目の開き」のスライダーを0まで下げると、半目のまま止まった。一時停止していなければ、0でしっかり閉じる。
LEAFで描き分けの絵を入れる前と後で試すと、入れる前は閉じ、入れた後は半目で止まった。描き分けの絵があるときだけ起きる癖のようだったので、作者にGitHubのIssueで報告した（Issue #12）。
報告したその日のうちに、作者が修正を公開した（PR #13）。一時停止中でも、目の描き分けの絵がすぐ切り替わるようにする修正だった。翌日、修正を取り込んだ版（コミットbd0998b）で同じ操作をすると、LEAFもPAGEもしっかり閉じた。
自作の仕組みと比べると
同じPAGEの絵で、閉じた目と半目を並べるとこうなる。
比べた結果をまとめると、こうなる。
| 比べたところ | Mesh Avatar Studio | 自作の仕組み |
|---|---|---|
| 作るのにかかった時間 | 1人あたり約30分 | 4人で4日（作り直しを含む） |
| 動き | 首振り、傾き、呼吸、髪の揺れ、口の形まで | 瞬き、口パク、8種類の表情、小さな揺れ |
| 閉じた目 | 描き分けの絵できれいに閉じる。片方の上に元の線が薄く残る | きれいに閉じる |
| 瞬きの途中 | にじみが出る（プレビューが小さく粗い） | にじみが出る |
| 口 | 歯や口の中まで描いた大きな口 | 元の絵に合わせた小さな口 |
| 背景付きの絵 | 傾けると背景ごと回る | 顔の周りだけ動くので問題なし |
| キャラごとの調整 | 手順は共通。細かい調整はエディタで | 唇の色と艶、目頭、閉じた目のキーなどを個別に調整 |
口パクの動きと、髪の揺れ方は、動画では比べていない。
どんな人に向くか
- 1枚のキャラクター絵を、まず手早く動かしてみたい人
- 首振りや口の形まで、ひととおり動くアバターがほしい人
- Claude CodeかCodexを使っていて、エージェントに作業を任せることに慣れている人
逆に、キャラごとの細かい表現（唇の色、決まった表情）を作り込みたい人や、自分のキャラの絵を外部の画像生成へ出したくない人は、自作や手描きの描き分けと組み合わせることを考えたほうがいいと思う。
今回は確認できなかったこと
- 口パクの動きと、髪の揺れ方の比較
- カメラで動かす配信機能
- Windowsでの動作
- 描き分けの絵を手元の画像編集ソフトで用意した場合の仕上がり
現時点の判断
| 項目 | 内容 |
|---|---|
| 結論 | 1人あたり約30分で、首振りや口の形まで動くアバターが作れた。背景は透明にしてから使う。瞬きの途中のにじみは、ツールにも自作にも残った |
| 自作との使い分け | 速さと動きの多さはツール、キャラごとの細かい調整は自作が上 |
| 確認日 | 2026-10-08（macOS、コミット3e8f4e9、Claude Code Opus 5.5とCodex）。一時停止中の修正は2026-10-09にコミットbd0998bで確認 |
この結果を受けて、次は自作の仕組みとツールの良いところを組み合わせた形を試すつもりでいる。
1枚の絵からここまで動かせるツールを無料で公開し、報告した癖もその日のうちに直してくれた作者のshinshin86さんに、感謝している。描き分けた絵に切り替える考え方は、次の試作でも参考にさせてもらっている。
同じ状況に陥ったときの回避策
- 背景付きの絵しかないときは、先に背景を透明にしてから作る
- 描き分けの絵を作る前に、自分のキャラの絵が外部の画像生成へ送られてよいかを決めておく
- 瞬きの見た目は、通常の速さだけでなく、閉じ始めや開き始めのコマで止めて確かめる
- 一時停止中にスライダーを0にしても閉じた目にならないときは、最新版に更新する（2026-10-08の修正より前の版で起きる）
次に読むなら
自作の仕組みを作った4日間の記録はこちら。最初の試作から、何を確かめ、どこで作り直したかをまとめている。
- 1枚絵を動かすアニメーションの試作で、AIの「完成」が6回作り直しになった話 — AIの「完成」の報告を、どこで確かめればよかったかが分かる
PAGEからほかの3人に広げたときの記録はこちら。どこでつまずき、何を直したかを、修正前後の画像つきでまとめている。
- 1枚絵キャラの瞬き・口パクを4人に広げたら、自動チェックは合格なのに目元と唇に違和感が残った話 — 自作の仕組みで、目元と唇の違和感をどう見つけて直したかが分かる
公式Source・運営者情報
この記事の紹介動画
この記事の内容を、ブログの案内役のPAGEと、SNSを担当しているLEAFが動画で紹介している。
この記事は、筆者が2026年10月8日にMesh Avatar Studioを試した記録と、自作のアニメーションの作業記録（2026年10月4日〜7日）を基に、独自調整したAIが下書きを作成し、筆者が事実確認・編集を行った上で公開しています。PAGEとLEAFの目と口の描き分けの絵は、Codexの画像生成で作成しています。
