shinshin86/mesh-avatar-studio

これは何？

主な機能

• 011枚の画像から、まばたき、会話、首振り、呼吸、髪の揺れをアニメーション化します。
• 02コーディングエージェントにイラストからリグとレイヤーを作成させます。
• 03ドラッグ可能な制御点とライブプレビューを備えたローカルエディターを利用できます。
• 04ポーズテストと母音のリップシンクチェックを行えます。
• 05アバターを単一の.mavatarファイルとして書き出し、インポートできます。
• 06透明背景のBrowser Sourceを通じて、顔のトラッキングによる動きをOBSに配信できます。

ユースケース

• 自分のキャラクターイラストから、ライブ配信用のVTuber風アバターを作成する。
• 3Dモデルを使わずに、動くプレゼンターをOBSのシーンに追加する。
• 完成した2Dアバターを、持ち運び可能な単一ファイルとして他の人と共有する。
• 何もインストールせずに、ブラウザーで顔トラッキングによるアバターの動きを試す。

クイックスタート

1. 1

   Node.js 22.17+ と Git をインストールします

2. 2

   セットアップコマンドを実行してプロジェクトを作成します

   npx create-mesh-avatar-studio
3. 3

   プロジェクトフォルダーに移動します

   cd mesh-avatar-studio
4. 4

   エディターを起動し、表示された URL を開きます

   npm run dev

使う前に知っておきたいこと

• !自分のイラストからアバターを作成するには、Claude Code や Codex などのコーディングエージェントが必要です。
• !ライブ配信とエディターを利用するには、ローカル開発サーバー（npm run dev）の起動が必要です。
• !Windows では、別のアカウントやサンドボックス化されたエージェントが作成したフォルダーは、権限を変更しないと読み取れない場合があります。

トピック

よくある質問

mesh-avatar-studio とは？

1枚のイラストから、コーディングエージェントで準備しローカルエディターで調整できる、まばたきや会話、揺れに対応した2Dメッシュアバターを作成します。 Mesh Avatar Studioは、通常は正面を向いた頭から肩までの透明背景PNG 1枚から、まばたきや会話、首振り、呼吸、髪の揺れを表現する2Dアバターを作成します。Claude CodeやCodexなどのコーディングエージェントが、プロジェクトのエージェントガイドに従って画像からリグとレイヤーを準備します。ライブプレビュー付きのローカルエディターでは、制御点をドラッグして配置を修正し、レイヤーを再構築できます。

mesh-avatar-studio は無料で使えますか？ライセンスは？

mesh-avatar-studio は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

mesh-avatar-studio は今もメンテナンスされていますか？

活発にメンテナンス中。mesh-avatar-studio の最終コミットは 2026年10月19日 です。

mesh-avatar-studio は何に使えますか？

自分のキャラクターイラストから、ライブ配信用のVTuber風アバターを作成する。 3Dモデルを使わずに、動くプレゼンターをOBSのシーンに追加する。 完成した2Dアバターを、持ち運び可能な単一ファイルとして他の人と共有する。 何もインストールせずに、ブラウザーで顔トラッキングによるアバターの動きを試す。

mesh-avatar-studio のインストール方法は？

Node.js 22.17+ と Git をインストールします セットアップコマンドを実行してプロジェクトを作成します: npx create-mesh-avatar-studio プロジェクトフォルダーに移動します: cd mesh-avatar-studio エディターを起動し、表示された URL を開きます: npm run dev

mesh-avatar-studio はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/shinshin86/mesh-avatar-studio