AI生成キャラを動かす — 擬似リグのモーション実装からLive2D正攻法の計画確定、保留の判断まで

開発mdx-playground

前日はキャラクター図鑑用の設定画を生成したところで止まっていた。もともと「動かす」ところまでやりたかったので、朝いちで「サンプルを1個使って、動かす実装を加えてほしい」とClaude Codeに投げて再開した。対象はNo.1のミコ。

目指す水準は、Live2D公式のHiyoriサンプルのような、ボタンでモーションを切り替えて再生できるUIだ。

クリックしても表情が①のまま

まず前日の作業内容と設定画のレイアウト(立ち絵が画像のどこにあるか)を確認させ、デバッグ用Chromeで表示を検証させた。ここで最初の壁。表情切替のボタンをクリックしても、画面のミコは①の表情のまま止まっている。

Vue側の状態を直接見させると、クリックしても状態が変わっていない。コンソールエラーを追わせ、モジュールが全部200で返ってくることを確かめ、キャッシュ無視のリロードで切り分け。前日に生成していた設定画4枚の中身を確認した上で、擬似リグ版のコンポーネントを新しいモデルに合わせて書き直させた。テストと詳細ページの説明文も追従させた。

まぶたのズレを拡大表示で潰す

書き直したあとの座標検証が今日いちばん地味な作業だった。パーツを強制表示+拡大にして見ると、まぶたが目に対してやや上に浮き、右目は左にズレ、口もやや上に寄っている。数値を微調整させ、右目の外側にわずかに残る琥珀色が消えるまで右まぶたを広げて、ウィンクと「喜ぶ」の再生が決まったところで一段落した。

1枚絵の上にパーツを重ねる擬似リグは、座標が数ピクセルずれるだけで「別人の顔」になる。拡大表示で自分の目でズレを拾い、修正させる工程は飛ばせない。

調査レポートと計画書を unpublished ページへ

並行して、動かし方の調査レポートと実装計画書ができあがっていた。ただ、ターミナル越しに長文のマークダウンを読むのはつらい。「アンパブリッシュのところで表示しておいて」と頼み、2本を content/2026-07/2026-07-14/ の非公開記事として作らせた。/blog/unpublished の一覧の先頭に2本並び、ブラウザでそのまま読める。確認のしやすさが段違いだった。

動かし方は3系統 — ① Live2D 正攻法に決めた

調査レポートの結論は、AI生成の1枚絵を動かす方式が2026年時点で3系統に収斂している、というものだった。

系統一言でいうとインタラクティブ性工数
① Live2D 正攻法AI支援でパーツ分割 → Cubism Editor で手作業リグ → Web SDK 再生◎ 本物。視線追従・物理演算まで可能
② ニューラルレンダリング1枚絵+ポーズベクトルからニューラルネットがフレーム生成○ ただしローカルGPU前提でWebに直接組み込めない
③ image-to-video 生成モーションごとに短尺ループ動画を生成してボタンで切替再生△ 動画単位の再生のみ。リグは得られない

決め手はインタラクティブ性だった。カーソル追従や物理演算まで含めた「本物」の動きを持てるのは①だけ。②はGPUの制約でWebに載らず、③は見た目が滑らかでも動画の切替再生にすぎない。調査の過程で「ワンクリックでLive2D化」を謳うサービスの実態が③の動画生成だと分かっていたのも効いた。名前に「Live2D」と付いていても、操作できるモデルが手に入るとは限らない。

「① Live2D 正攻法で行く。そのための計画を詳細に作って」と指示した。

計画書には3案が「ユーザー判断待ち」として並んでいた。比較表を作らせるところまでがAIの仕事で、どれで行くかを決めるのは自分の仕事、という分担がここでもそのまま機能した。

計画はCodexレビュー3周で確定

計画を書かせる前に、精度に効く事実を先に確認させた。Cubism FREE版の制限、Cubism Web SDKのライセンス、LayerDividerの動作要件、pixi-live2d-displayのCubism 5対応、手元のGPU。ここを曖昧なままにすると計画が絵に描いた餅になる。

出てきた計画はCodexにレビューさせた。初回レビューで致命的指摘4つ。反映して resume --last で再レビュー、3周目で収束した。レビュー待ちの時間には、方式決定を既存の計画書とunpublished記事へ反映させ、記事のレンダリング確認(表4つの描画)も済ませた。Live2D用素材の作業ディレクトリ work/live2d/.gitignore に足すところまで検証済み。

「ライセンス」は画像の話ではなかった

セッションを切り替える前に、計画書の「ライセンス」という論点が引っかかった。キャラ画像はChatGPTから出力したものだから、自由に使えるはずでは?

答えは、画像の権利の話ではなかった。Live2DをWebで再生するために組み込むLive2D社のソフトウェア(Cubism SDK / Core)の利用許諾の話で、他社製の再生エンジンをサイトに同梱して公開する行為に条件が付く。画像が自由に使えても、再生ソフト側に別の制約がかかる。素材とランタイムの権利は別物、という整理だった。この説明も計画書に追記させた。

保留にしてセッションを区切る

計画を眺めると、アカウント作成、Cubism Editorの導入と習得、手作業のリグ、と工程が並ぶ。ここで手が止まった。今優先してやる話ではない。保留と決め、計画書と進捗メモに保留の理由ごと記録させてから、セッションを切り替えた。

3回のレビューを通した計画書が残っているので、再開するときはここから始めればいい。

朝は表情ひとつ動かなかったミコが、区切りの頃にはウィンクするようになり、次に進むための計画書も残った。やらないと決めたものが「いつでも再開できる形」で止まっているのは、悪くない区切り方だと思う。

学び

  • 「ワンクリックでLive2D化」を謳うサービスの実態はimage-to-video生成で、操作可能なリグは得られない。名前だけで方式を判断しない
  • AI生成画像が自由に使えることと、再生エンジン(Cubism SDK / Core)の利用許諾は別の話。素材とランタイムの権利を分けて確認する
  • 計画を書かせる前に「計画の精度に効く事実」(SDKのライセンス・FREE版の制限・ツールの対応状況・手元GPU)を先に確認させると、レビューの手戻りが減る
  • 長文の調査レポート・計画書はunpublishedページに出すと、ブラウザでそのまま読めて確認が速い
  • 擬似リグの座標ズレは拡大表示で自分の目で拾って修正させる。数ピクセルで顔が破綻する

関連記事

  • AI生成1枚絵キャラを「Live2D級」に動かす技術調査(未公開)
  • キャラクターモーション実装計画(調査反映版)(未公開)
  • Live2D 正攻法 実装計画 — ミコ(No.1)を本物の Live2D モデルにする(未公開)