Mesh Avatar Studio | 1枚のイラストから動く2Dメッシュアバターを作成！AIエージェントとローカルエディタを活用するオープンソースツール！

shinshin86氏（@shinshin86）による、1枚のイラストから動く2Dメッシュアバターを作成するオープンソースツール「Mesh Avatar Studio」を紹介！まばたきや口パク、首振り、髪の揺れに対応し、配信やWebアプリへの組み込みにも活用できます。

Mesh Avatar Studio

1枚のイラストから動く2Dメッシュアバターを作成するオープンソースツールです。
まばたきや口パク、首振り、呼吸、髪の揺れなどに対応。Claude CodeやCodexといったコーディングエージェントがアバターの設定やレイヤー画像を用意し、ローカルで動くエディタでプレビューを見ながら仕上げる構成になっています。

• 2Dメッシュアニメーション： まばたき、口パク、顔の向きや傾き、呼吸などを表現
• 髪や飾りの揺れ： 物理演算による髪の遅れや、飾りの振り子のような動きに対応
• プレビューを見ながら調整： パーツごとの制御点をドラッグして位置を修正
• 表情や描き分け画像： 笑顔や驚き、ウインクなどの表情や、目・口の差分画像を利用可能
• カメラ・マイク連携： 顔の動きの追従や、声の大きさに合わせた口パクに対応
• 配信・Web連携： OBSでの利用に加え、専用ランタイムによるWebアプリへの組み込みにも対応
• アバターの書き出し： 設定やレイヤー画像などを独自の「.mavatar」形式にまとめて共有可能1枚のイラストを動かす

アバター制作の流れ

まず、リポジトリを開いたClaude CodeやCodexに、手順書に沿ってイラストからアバターを作成するよう依頼します。素材には、正面向きのバストアップで背景が透明なPNG画像が推奨されています。
エージェントが作成したプロジェクトをエディタで開き、顔の向きや目の開閉、口の形を確認。パーツの位置を調整し、必要に応じて閉じた目や母音ごとの口の描き分け画像を追加して仕上げます。
描き分け画像がない状態でもメッシュ変形で動作しますが、差分画像を用意することで、まばたきや口の動きをより自然にできます。

コードはMITライセンスで公開されています。制作環境にはNode.jsやGitなどのセットアップが必要で、アバター作成には別途コーディングエージェントを利用します。
また、ChromeやEdgeで利用できる「Player」では、インストールせずにサンプルや作成済みの「.mavatar」ファイルを読み込み、顔や声に合わせて動かすことも可能です。

リンク