AI は Live2D をリギングできない
でも結果は意外と良かった
Live2D のリギングはエディタ上でマウスを使って調整するしかなく、AI エージェントが手を出せません。今回は Opus 5.5 と協力し、2D アニメーションの基本的な原理だけで、1 枚のイラストから首振り、まばたき、おしゃべり、カメラの動きへの追従ができる 2Dパペットを作りました。9 つのステップそれぞれにやり方、合格基準、理由を付け、よくある質問はつまずきの種類ごとにまとめています。
1 枚のイラストと 9 つのステップ
先に遊びたい方は、記事末尾の「遊んでみる」へどうぞ。カメラをオンにすると、カノがあなたの動きについてきます。
ウーパールーパーの少女カノ（中国語では花野、英語では Kano、韓国語では카노）です。名前はウーパールーパーの故郷であるソチミルコ湖に由来し、ナワトル語で「花畑」を意味します。彼女は 2Dパペットで、1 枚のイラストを 83 レイヤーに分解し、首を振り、まばたきをし、話し、26 種類の動作をこなします。カメラに映るあなたの動きにも追従します。
このプロジェクトでは Live2D のエディタを一度も開いていません。Live2D のメッシュと変形はエディタ上でマウスを使って調整するしかなく、公式にはプログラムからメッシュを変更するインターフェースがないため、AI エージェントが手を出せないのです。そこで今回は 2D アニメーションの基本的な原理だけを使ってパペットの効果を自分たちで再現したところ、意外にも出来上がりは良好でした。分担は、私が絵を見て判断を下し、Opus 5.5 がコードを書いて数値を測るというものです。作業は 2026-10-08 に始め、10-14 にウェブページに公開しました。ウェブ版ではあえてテクスチャを縮小しているため、近くで見ると元のバージョンより少しぼやけます（理由はステップ 9 にあります）。
なぜ Live2D のエディタを使わないのか
Live2D がやっていることは、分解すればどれもグラフィックスの基本です。メッシュ変形、前後のレイヤーの視差、ボーン、画像の差し替え。エディタはそれらをマウス操作にまとめています。公式が外部プログラムに提供するインターフェースには、メッシュの頂点を変更する機能がありません（2026-10 時点で調査）。モデルの再生に使う Cubism Core はプログラムから読み取れるので、ステップ 1 では公式のサンプルを使って計測できます。今回はこれらを 1 つずつコードで書き直しました：
| Live2D のワークフローで人の手が担う部分 | 今回の置き換え | ステップ |
|---|---|---|
| イラストレーターがイラストをレイヤー分けした PSD にする | 画像編集で隠れた部分を描き足し、レイヤー分解モデルでレイヤーに分ける | 2、3 |
| 首を振る複数の角度で、マウスでメッシュを引っ張って横顔にする | 各頂点に深度を持たせ、プログラムで変位を計算する | 1、4 |
| 腕に回転デフォーマを付ける | 3 本のボーンで曲げ、大きな動きは画像を差し替える | 5 |
| パラメータのキー値の上に、口・眉・目の形を配置する | オプティカルフローで口と眉を動かし、まばたきの瞬間に目を差し替える | 6 |
| タイムライン上でモーションカーブを引く | プログラムでキーフレームを書く | 7 |
9 つのステップ一覧
| ステップ | やり方 | 合格基準 | ツール |
|---|---|---|---|
| 1 テンプレートを測る | プロのパペットが首を振るとき、各レイヤーがどれだけ動くかを測る | 比率表 1 枚 | Cubism Core |
| 2 描き足し | 隠れた部分を画像編集で補う | スケール差 ≤ 3%、回転 ≤ 1.5° | ChatGPT、OpenCV |
| 3 レイヤー分解 | モデルでレイヤーに分け、ピクセルは元の画像のものに戻す | 重ね直した差が 0.035/255 | See-through |
| 4 首振り | 頂点だけを動かし、画像は差し替えない | 比率がテンプレートと合う | PixiJS |
| 5 腕 | 小さい角度は曲げ、大きな動きは画像を差し替える | 手の切り替え時に半透明のフレームが 0 | ChatGPT |
| 6 表情 | 口と眉は動かし、目はまばたきの瞬間に差し替える | 半透明のフレームが 0 | OpenCV オプティカルフロー |
| 7 モーション | プロのリズムを参考に、キーフレームを自分で並べる | 26 種類のモーションがすべて動く | — |
| 8 カメラ | 顔と上半身を別々の経路で追跡する | 実際の人でのキャリブレーション 8 項目がすべて正しい | MediaPipe |
| 9 ウェブ公開 | 公開版は解像度を下げ、外部への通信を遮断する | 読み込み 17.5 → 5.4 秒 | Cloudflare Workers |
首振りは、前のステップの不具合が最初に表に出るステップです。描いていない部分が見えたらステップ 2 に戻って描き足し、2 本目の輪郭が出たらステップ 3 に戻ってレイヤー分解をやり直します。
まずプロのテンプレートを測り、「似ているかどうか」を数値にする
手を動かす前に、プロのパペットが首を振るとき、各レイヤーがどれだけ動くかを測ります。
やり方
- Live2D 公式の Cubism Core で人型のサンプルモデルを 12 体読み込み、首振りのパラメータを限界まで振る
- 顔の輪郭の変位を 1 として各レイヤーの相対変位を計算し、12 体の中央値を取る
| レイヤー | 首振り時の相対変位（顔の輪郭 = 1） |
|---|---|
| 後ろ髪 | 0.06 |
| 耳 | 0.49 |
| 前髪 | 1.25 |
| 目 | 1.44 |
| 鼻 | 2.06 |
合格基準
12 体すべてで向きが一致し、カメラに近いレイヤーほど大きく動き、後ろ髪はほとんど動きません（2026-10-09 に測定。公式サンプルのスタイルを表すにすぎません）。
理由
目で見るだけでは「紙切れっぽい」ことしか分からず、どのレイヤーを直すべきかは分かりません。比率表があったので、第 4 版では測った途端に後ろ髪が 0.40、耳が 0.90 で、前後の奥行きが潰れていると分かりました。
メイン画像は 1 枚、隠れた部分は別に描く
正面のイラストには、髪の後ろや腕の後ろにあるものが描かれていません。それらは別に描き起こす必要があります。
やり方
- ChatGPT の画像編集を使い、メイン画像をベースに、1 枚につき 1 か所だけ変更する
- 編集した画像を ECC（画像位置合わせの手法の 1 つ）でメイン画像に合わせ直す。位置合わせでは変更していない部分だけを見る
| 編集画像 | 補うもの |
|---|---|
| 坊主頭 | 頭の形、耳、首 |
| のっぺらぼうの顔 | 顔のパーツの下にある肌 |
| 後ろ髪だけ残したもの | 前髪に隠れた髪 |
| 腕を除いたもの | 腕に隠れた服 |
| 閉じた目、開いた口 | まぶた、口の中 |
| 手を振るなど 6 組のポーズ | 大きな動きの腕（ステップ 5） |
合格基準
位置合わせ後のスケール差が 3% 以内、回転が 1.5° 以内、変更していない部分の平均色差が 12/255 未満。超えたら生成し直します。
理由
第 2 版では数式で作った曲面を使って正面の絵から側面を推定しようとしましたが、新しい情報は何も得られず、首を振ると 1 枚の紙が回っているように見えました。
レイヤー分解のあと、見えている部分は元の画像のピクセルに戻す
レイヤー分解はモデルに任せますが、色は元の画像のものだけを採用します。
やり方
- メイン画像とステップ 2 の編集画像をレイヤー分解モデル（今回は 2026 年 2 月に発表された See-through）に入力し、髪、顔、顔のパーツ、服などのレイヤーに分ける
- 各レイヤーの見えている領域のピクセルは、すべて元の画像から貼り直す。同じピクセルは一番上のレイヤーだけに割り当てる
- 分類にない部位（カノのエラ）は、元の画像でどのレイヤーにも覆われていない部分から切り出す
- 各レイヤーのキャンバス上で、不透明度が 0.06 未満のノイズを取り除く
合格基準
全レイヤーを重ね直したときの元の画像との平均差が 0.035/255、穴は 0 ピクセル。
理由
レイヤー分解モデルが出す各レイヤーはすべて描き直されたものです（上の図の左から 2 番目）。顔のパーツの半透明な縁まで下の肌に貼ってしまうと、首を振ったときに顔の上に 2 本目の輪郭が残ります。
首振りは頂点だけを動かし、画像は差し替えない
レイヤーの画像は 1 枚も差し替えません。頭を楕円体とみなして軸まわりに回し、各レイヤーは比率表の深度に従って動かします。
やり方
- 各頂点に深度を持たせる。各レイヤーの前後の距離はステップ 1 の比率表から逆算する：鼻が最前面、後ろ髪が最背面
- 首はほとんど動かさず、あごが首の上を滑るようにする（公式サンプルでは、首振り時の首の変位はほぼ 0）
合格基準
比率を公式サンプルと突き合わせると、後ろ髪が −0.18、耳が 0.53、目が 1.58、鼻が 2.00。首振りの振れ幅の上限は顔幅の 16% にしています。それ以上だと、斜めに振ったときに髪が裂けます。
理由
角度の間で別の画像をフェードインすると顔が二重に見えます。各レイヤーを別々に平行移動すると頭が首の上を滑り、首が回すほど長くなります。
腕は小さい角度なら曲げ、大きな動きは画像を差し替える
下ろした手は数十度の範囲でしか曲げません。手を挙げるような大きな動きは、別の画像を描いて差し替えます。
やり方
- 下ろした手は、肩・肘・手首の 3 本のボーンで曲げ、関節付近のメッシュを細かくする
- 手を挙げる、顔を覆う、腰に手を当てるといったポーズは、それぞれステップ 2 の方法で画像を編集して 1 枚ずつ用意する。カノでは全部で 6 組
- 画像の差し替えにフェードは使わない：手をまずポーズの方向へ振り、振っている途中の 1 フレームで一気に差し替え、新しい手が弾むように定位置に収まるようにする
- 手を挙げるとき、上腕は 0.55 倍に縮め、肘の支点も一緒に上へ動かす
合格基準
毎秒 30 フレームでコマ送りにして、手を切り替えるフレームの前後に半透明の手がないこと。
理由
正面から描いた腕を画面上で 100° 以上回すと、どうしても厚紙のように見えます。クロスフェードは 0.03 秒だけでも、毎秒 30 フレームではほぼ確実に半透明のフレームが撮れてしまいます。
表情は動かして作り、目はまばたきのフレームで差し替える
表情の切り替えにフェードイン・フェードアウトは使いません。口と眉はオプティカルフローで動かし、目はまばたきのフレームに隠して差し替えます。
やり方
- 表情だけを変えた顔を 11 枚生成し、ステップ 2 の基準でメイン画像に位置合わせする
- オプティカルフロー（2 枚の画像の間で各ピクセルがどう動くかを求める手法）で、元の顔を新しい表情へ動かす
- 目は動かさない：まばたきを必ず 1 回入れ、目が閉じたフレームで顔と目を一緒に差し替える。11 の表情のうち 9 つがこの経路を通る
合格基準
毎秒 30 フレームでこの 9 つの表情をコマ送りで確認する：半透明のフレームが 0、顔と目が同じフレームで切り替わり、切り替えるフレームでは目が 99% 以上閉じていること。
理由
フェードイン・フェードアウトでは 2 つの顔が重なって見えます。オプティカルフローは口の形や眉なら動かせますが、元々存在しないものは作れません。まばたきは目の差し替えをちょうど隠してくれますし、もともと自然に起きるものです。
モーションはプロの作品のリズムを参考に自分で並べる
モーションの良し悪しはリズムで決まります。リズムはプロの作品から学び、キーフレームは自分で並べます。
やり方
- 公式サンプルのモーションを見て共通するリズムをまとめる。特定のカーブをそのまま取ることはしない
- モーションごとにキーフレームを自分で並べる：頭、体、視線、エラ、表情、ポーズにそれぞれ 1 本のタイムラインを持たせる
- 喜びの系統は「ため → 跳ね上がり → 静止 → 髪が遅れて揺れる」の 4 拍で並べ、感情は表情に任せる
- モーションに必要な表情とポーズは、ステップ 5、6 で作った組をそのまま使う
合格基準
26 種類のモーションをそれぞれ再生の 1/4、1/2、3/4 の時点でサンプリングし、パラメータがすべて動いていて、ページのエラーが 0 件。自分で並べた 23 個を古いカーブと 1 本ずつ突き合わせ、同名の 85 本のカーブのうち、そのまま残ったものは 1 本もありませんでした。
理由
第 1 版の歓声のモーションは感覚で並べたため、全面的にやり直しになりました。公式の 290 個のモーションを見て初めて、喜びの系統にはどれも決まった 4 拍があると気づきました。最初は公式のカーブをそのまま使いましたが、ライセンスを調べたところ使えないと分かり、すべて並べ直すことになりました。
カメラにつなぐ。顔と上半身は別々の経路にする
顔と体はそれぞれ別の経路を進みます。片方が追跡を見失っても、もう片方は動き続けます。
やり方
- ブラウザ上で追跡モデルを 2 つ動かす：1 つは顔を、もう 1 つは体を見る
- 2 つの経路はそれぞれ中心合わせと平滑化を行う：冒頭で 1 秒静止したときの姿勢を正面とし、以降は正面との差を測る
- 向きは鏡と同じにする：あなたが左に動けば、カノも画面上で左に動く
- 腕の小さな動きはそのまま追従する。手を挙げる場合は、しきい値を超えて挙げ、一度止まってはじめて、ステップ 5 のポーズ画像に切り替える
| 部位 | やり方 | 理由 |
|---|---|---|
| 頭の角度、まばたき、口、眉 | 追跡する（顔モデル） | — |
| 耳、肩、肘、手首（左右それぞれ） | 追跡する（体モデル、8 点） | — |
| 腕の前後の深度 | 半分だけ使う | まっすぐ挙げた前腕がカメラの方を向いていると判定されてしまう |
| 側屈、ひねり | 上限は ±5°、±12° | パペットはそれ以上は回せない |
| 股関節、脚 | 追跡しない | ノートパソコンのカメラには映らず、点が乱れて飛ぶ |
| 指 | 追跡しない | — |
合格基準
実際の人でのキャリブレーション 8 項目の向きがすべて正しい（肩をすくめる、左右の側屈、左右の肩のひねり、左手を挙げる、右手を挙げる、両手を横に挙げる）。さらに陽菜（ひな）の 3D モデルで既知の動きのテスト動画を撮り、2D と 3D を区間ごとに突き合わせました。
理由
横顔では顔モデルが追跡を見失います。体が顔と同じ経路に結び付いていると、手まで一緒に止まってしまいます。
ウェブページに載せる
ウェブに載せる前に、3 つの問題を解決する必要があります。元のバージョンをそのまま渡せないこと、読み込みが遅いこと、そしてこっそり外部に通信するライブラリが 1 つあることです。
やり方
- 公開版には 3 層の保護を別途施す：各レイヤーのテクスチャの縦横を元の 3 分の 1 に縮め、メッシュを粗くし、元のバージョンは自分のパソコンの中に置いておく。素材は暗号化してから分割して送る。各レイヤーに見えない透かしと署名を埋め込む
- 読み込み時にまずプレビュー画像を表示し、パペットの描画が終わってから差し替える
- テクスチャにはロスレスの WebP を使う
- 追跡用のライブラリは 60 秒ごとに利用統計を外部へ送信し、しかもオフにするスイッチがないため、その送信にはページ内で直接応答を返します
| 元のバージョン | 公開版 | |
|---|---|---|
| 頂点 | 15,495 | 8,254 |
| テクスチャ | 3.0 MB | 205 KB |
| 顔のレイヤー | 281×316 px | 93×104 px |
合格基準
- 20 Mbps に帯域を制限した状態で、フル版の読み込みが 17.5 秒から 5.4 秒に短縮（2026-10-12 に測定）
- カメラをオンにして 75 秒動かし、外部へのリクエストは 0 件
- 公開版に切り替えたあと、42 個の固定ポーズを元のバージョンと比べて、輪郭の重なりは最低でも 0.986（2026-10-14 に測定）
理由
ウェブ上で動くパペットは、ファイルが結局は読者のパソコンに届きます。3 層の保護はハードルを上げるだけで、代償は近くで見るとぼやけることです。有損圧縮ではレイヤーの縁で 12～21/255 の差が出るため、ロスレスにしました。利用統計は 89 bytes しかなく画像も含まれませんが、「画像がブラウザの外に出ない」と言い切るには、1 件も送らせるわけにはいきません。
踏んだ落とし穴
制作中に出会った問題の大半は、以下の 7 種類に分かれます。それぞれ、起きること、防ぎ方だけを書きます。
「動かす」べきことをフェードインや画像の差し替えでやってしまう
起きること：二重像、半透明のフレーム、2 本の口線。
防ぎ方：頂点を動かせるなら動かす。どうしても画像を差し替えるなら、まばたきや手を振るフレームに隠す（ステップ 4–6）。
画面にないものを作り出すよう求める
起きること：首振りが 1 枚の紙の回転のように見える、挙げた手が厚紙のように見える、口を大きく開けると口の中にゴーストが出る。
防ぎ方：隠れた部分は先に描き足す。曲げられる範囲を超える動きは画像を差し替える。動かしても出てこないものは無理に動かさない（ステップ 2、5、6）。
AI の画像編集やレイヤー分解は、ついでに描き直してしまう
起きること：変えたくない部分が変わる、分解したレイヤーの色が元の画像と違う、手が 1 組増える、レイヤーの周りに薄いもやがかかる。
防ぎ方：1 枚につき 1 か所だけ変更する。位置合わせの基準でずれとスケール違いを弾く。描かれた内容が間違っているものは人が絵を見て判断する。ピクセルは常に元の画像のものを使う（ステップ 2、3）。
感覚で調整し、症状だけを直す
起きること：「似ていない」ことしか分からず、どのレイヤーを直すべきか分からない。同じ不具合が 3 回直しても残る。例えば首が回すほど長くなる。
防ぎ方：先にプロのテンプレートを測り、「似ているかどうか」を数値にする。同じ箇所を 2 回直しても残るなら、やり方そのものを見直す。例えば平行移動を回転に変える（ステップ 1、4）。
追跡モデルの死角
起きること：横顔で手も止まる、画面の外の点が乱れて飛ぶ、まっすぐ挙げた手がカメラの方を向いていると判定される、側屈しただけなのにパペットが体ごとひねる。
防ぎ方：顔と体を別々の経路にする。カメラに映る点だけを追跡する。不安定な深度は割り引く。できないことの制限は、そのまま明記する（ステップ 8）。
遊んでみる
- 「カメラ」を押すとカメラが起動し、カノがあなたに合わせて首を振り、まばたきをし、手を動かします。映像はあなたのブラウザの中だけで処理されます
- モーションのボタンを押すとモーションが再生されます。カメラをオンにしていないときは、カーソルを目で追います
パペットが直接ダウンロードされるリスクを下げるため、ウェブ版のテクスチャは元のバージョンの 3 分の 1 に縮小しています。近くで見ると少しぼやけますが、これは正常です。
著作権表示
- カノのキャラクターデザイン、レイヤー、メッシュ、表情、モーションは © 2026 JonesHong。本ページでの閲覧に限り、ダウンロード、転載、再配布、改変は禁止です
- ウェブ描画：PixiJS（MIT）
- カメラ追跡：MediaPipe Tasks Vision と Face Landmarker、Pose Landmarker モデル（Apache-2.0、Google）
比率表を自分のキャラクターと突き合わせる
比率表、隠れた部分のリスト、カメラの 8 点：この 3 つが、自分のキャラクターと突き合わせるのにいちばん使いやすいものです。
以下の文章をあなたの AI に貼り付けて、手元の 2D キャラクターと突き合わせてもらってください。
さらに読む
| リソース | 重要な理由 |
|---|---|
| 陽菜の記事：1 枚のデザイン画から 3D へ | 3D 版での同じ「やり方／合格基準／理由」の構成です。ステップ 8 のテスト動画は、彼女のモデルで撮影したものです |
| See-through: Single-image Layer Decomposition for Anime Characters | ステップ 3 で使ったレイヤー分解モデルです。出力されるレイヤーは描き直されたものなので、ステップ 3 で見えているピクセルを元の画像に戻す必要がありました |
| Live2D 公式サンプルモデル | ステップ 1 の比率表の出典です。12 体をまとめて測ってはじめて、「カメラに近いほど大きく動く」が特定のリガーの癖ではなく一般則だと分かります |