絵1枚から動くアバターを作る「Mesh Avatar Studio」、GitHubでスター260 | Mesh Avatar Studio

どんなアプリか

Turn one illustration into an animated 2D mesh avatar with a coding agent and a local editor

shinshin86 さん、GitHub リポジトリの説明

1枚のイラストから、まばたき・口パク・首振り・呼吸・髪揺れをする2Dメッシュアバターを作るツールです。アバターの下ごしらえはコーディングエージェントが行い、仕上げは手元で動くエディタで、プレビューを見ながら調整します。

作業は4段階です。1と4は、このリポジトリ内で動かす Claude Code か Codex が担当し、2と3はエディタで行います。エージェントは座標の読み取り精度の確認、リグの配置、レイヤーへの切り分け、決まったポーズでの見直しまでを、エージェント用のガイドに沿って進めます。

エディタでは、左でパーツを選んで画像上の点をドラッグすると、右のプレビューにすぐ反映されます。Pose test で首の回転・傾き・目閉じを、Lip sync で母音の口の形を確認できます。

描き起こした閉じ目や母音の口があると、まばたきや口パクがより自然になります。Codex は内蔵の画像生成でそれらを描いて取り込みます。Claude Code は画像を生成できないため、画像生成に渡すマスクとプロンプトを用意するところまでを行います。

Live のページでは、カメラを起動してキャリブレーションし、ミラー表示・感度・なめらかさを調整できます。マイクでの口パクも有効にできます。

配信では、Live のページを開いたまま、配信ビューの URL を OBS のブラウザソースとして追加します。背景は透過か緑を選べ、OBS 以外の取り込みソフトでは緑を選んでクロマキーをかけるよう案内されています。

コードは MIT ライセンスで公開されています。作ったプロジェクトは手元の projects/ フォルダに保存され、リポジトリにはコミットされません。Live 機能のカメラ映像とマイクの音声も端末の中に留まり、配信ビューに届くのはアバターの動きの数値です。

動かすには Node.js 22.17 以上が必要です。素材のイラストは、正面向き・胸から上・背景透過の PNG がいちばんよい結果になると README に書かれています。

推奨の組み合わせは、Claude Code なら Claude Opus 5.5、Codex なら GPT-6.1 Sol です。

Windows で使う場合は、エージェントに作業させる前に projects/ フォルダを自分のアカウントで作っておくよう案内されています。別のアカウントやサンドボックス内のエージェントが作ったフォルダは、権限の関係でエディタから読めない場合があります。

同梱のサンプル Miko は MIT ライセンスの対象外です。自分の作品の一部として使ったり改変したりはできますが、単体や素材集としての再配布はできません。