GitHubで話題のplayerとは？声に合わせて口パクする2.5Dキャラを、ブラウザで小さく作って動かしてみた

2026年11月9日付のGitHubスターランキングで3位だった「player」を紹介します。声や顔の動きに合わせて、2.5Dのキャラクターをウェブページの中で動かす道具です。

この連載ではいつも、同じ考え方のものを当社で小さく作り、記事の中で触れるようにしています。今回は、文字を入れると口を動かして「話す」キャラクターです。

playerとは

livliv-dev/player（スター 1,408・Apache-2.0 ライセンス。2026年11月10日朝の時点）

キャラクター作りのサービス「LivLiv」が公開した、ウェブ用のキャラクターの再生プログラムです。数行のコードで、ページや配信の画面、アプリにキャラクターを置けます。

• 口パク: マイクの声や音声・動画のファイルに合わせて口が動く
• 顔の追従: カメラに映った人の顔の動きを、キャラクターがまねする（ブラウザの中で処理）
• 軽い: ほかのライブラリに頼らず、本体は圧縮して約 30KB
• いろいろな形式: LivLiv のほか、VRM（3D のアバター）や PNGTuber（2 枚の絵を切り替える形式）も同じ書き方で動かせる

すぐに使えるキャラクターが 21 体付いていますが、これらはプログラム本体と違うライセンスで、Apache ライセンスの対象外です。使うときは、キャラクターごとの条件を確認する必要があります。

同じ考え方で、話すキャラクターを作ってみた

下のデモは、文字を入れて「話す」を押すと、キャラクターが口を動かして話す仕組みです。カーソル（スマホは指）を動かすと、髪・顔・体が少しずつ違う量だけずれて、立体的に見えます。これが「2.5D」と呼ばれる見せ方です。

文字を「あいうえお」と「ん」の口の形に置き換えて、順に動かしています（音声は出ません）。本家は実際の声の大きさや響きから口の開き具合を計算するので、もっと自然に動きます。

このデモは本家のソフトではありません。playerのコードやキャラクターは使わず、READMEを読んで同じ考え方を当社が書き起こしたものです。playerも公開から1週間ほどで、中身を確かめていないプログラムは、本番環境の情報がある開発用のパソコンでは実行しないことにしています。

作ってみて分かったこと

いちばん感じたのは、キャラクターを「動画」ではなく「数値」で動かすと、ずっと軽く、ずっと応用がきくということです。

動画で用意したキャラクターは、セリフを変えるたびに作り直しになります。数値で動かすなら、新しい音声を渡すだけで口が合います。見ている人のカーソルや声に反応させることもできます。

一方で、絵の分け方には手間がかかります。髪・顔・目・口を別々の層に分けておかないと、2.5Dの動きは作れません。デモでも、層を分けて描く部分がいちばん時間がかかりました。本家が「キャラクターを作るAIの道具」も合わせて公開しているのは、そのためだと思います。

どんなところで使えそうか

• サイトの案内役: トップページで、キャラクターがサービスを紹介する
• チャットボットの顔: 当社のサイトの右下にも質問に答えるチャットがあります。回答をキャラクターが話すようにすると、親しみやすくなります
• 配信・オンライン説明会: 顔を出さずに、キャラクターで話す

「サイトにキャラクターを置きたい」「AIのチャットを作りたい」といったご相談があれば、お気軽にどうぞ。

※ 説明は2026年11月10日時点のリポジトリのREADMEにもとづいています。