Electron製モダンPNGtuberアプリ

PNGTuber Studio

React + Pixi.jsで構築されたモダンなElectronアプリ。リップシンク・ボビング・まばたき・表情切替をシンプルなセットアップで実現。

開発者 jo372

ライセンス完全無料

プラットフォーム Win / macOS / Linux

技術スタック Electron / React

GPU WebGL推奨（内蔵で十分）

リップシンクボビングまばたき表情切替クロスプラットフォーム React + Pixi.js

概要

PNGTuber StudioはElectron + React + Pixi.jsで構築されたモダンなPNGtuberアプリケーションです。マイクのリップシンク、ボビング（揺れ）アニメーション、自動まばたき、表情切替といった基本機能をモダンなUIでシンプルに提供します。 Node.jsがあればnpm installと npm startだけで起動できる手軽さが特徴で、初心者でも比較的セットアップしやすい設計になっています。 Windows / macOS / Linuxのクロスプラットフォームに対応しており、OBSのウィンドウキャプチャで配信に使用できます。

主な特徴

👄

マイクリップシンク

マイク入力の音量を検出して、声に合わせてキャラクターの口が動くアニメーション。

🌊

ボビングアニメーション

キャラクターが上下に軽く揺れるボビングアニメーションで生き生きとした印象を演出。

👀

自動まばたき

ランダムなタイミングで自動まばたきし、自然な動きを付加する機能。

😊

表情切替

あらかじめ用意した複数の表情画像を配信中にホットキーで切り替えられる。

🎨

モダンUI (React)

React製のクリーンなUIで設定が直感的。見た目が整っていて使いやすい。

⚡

Pixi.jsレンダリング

WebGLベースのPixi.jsで軽量・滑らかなアニメーションを実現。

メリット / デメリット

メリット

セットアップが簡単（npm install → npm start）
モダンなUIで設定が分かりやすい
Windows / macOS / Linux対応のクロスプラットフォーム
Pixi.jsで軽量・滑らかなアニメーション
完全無料のオープンソース
必要最低限の機能が揃っておりシンプルに使える

デメリット

機能はシンプルで、高度な演出には物足りない
Node.js環境が必要（初心者は躓くことがある）
顔追跡・Twitch連携などの高度な機能はなし
他ツールと比べてエフェクトや動きの種類が少ない
コミュニティや日本語ドキュメントが少ない

システム要件

Win / macOS / Linux

GPU

内蔵GPU で十分

必須ソフト

Node.js + npm

カメラ

不要

インターネット

初回npm install時のみ

OBS連携

ウィンドウキャプチャ

料金

無料

完全無料 / オープンソース (GitHub)

Node.js・npmは無料。追加費用は一切なし。

導入手順

Node.jsのインストール

nodejs.orgから最新のLTS版をインストールする。npmも同時にインストールされる。

リポジトリをクローン

git clone https://github.com/jo372/PNGTuber.git

GitHubからソースコードを取得する。

依存パッケージをインストール

cd PNGTuber && npm install

必要なNode.jsパッケージを一括インストール。時間がかかる場合がある。

アプリを起動

npm start

アプリが起動したら、キャラクター画像（口開き/口閉じ）をセットする。

OBSにウィンドウキャプチャを追加

OBSで「ウィンドウキャプチャ」ソースを追加してアプリウィンドウを取り込む。クロマキーで背景を透過させる。

運営イメージ

キャラ画像をセット

→

マイクを接続

→

ボビング+リップシンク

→

OBSで配信

口開き画像と口閉じ画像の2枚を用意してアプリにセットするだけで基本的なPNGtuber配信が始められる。キャラクターは常にゆったりとボビング（上下揺れ）し、マイクで話すと口が開くリップシンクが動作する。自動まばたきも設定でONにでき、静止しているキャラにも生命感が宿る。 OBSのウィンドウキャプチャでアプリを取り込んでゲーム映像や背景画像と合わせて配信するのが一般的な使い方。シンプルで機能が少ない分、初心者が最初の一歩を踏み出すのに適したツール。

こんな人におすすめ / おすすめしない