はじめに
既存のイラストから Live2D で動くアバターを制作する手順をまとめます。Web アプリに組み込んでリップシンクや表情切り替えを行うことを前提とした「技術者・クリエイター向け」の構成です。
制作の前提条件
- ゴール： イラスト1枚 → パーツ分解 → リギング → Web表示
- 必須ツール： * Live2D Cubism Editor（無料版 or PRO）
- 画像編集ソフト（Photoshop / CLIP STUDIO PAINT）
- 最終成果物：
.moc3ファイル一式（テクスチャ、設定JSON、物理演算、モーション）
全体ワークフロー
制作は大きく分けて「描画」と「設定」の2フェーズに分かれます。
- Step 1： パーツ分解（PSD作成）
- Step 2〜3： インポート ＆ メッシュ設定
- Step 4〜5： デフォーマ ＆ パラメータ設定（リギングの核心）
- Step 6〜7： 物理演算 ＆ モーション作成
- Step 8： 書き出し ＆ Web配置
Step 1：パーツ分解（PSD作成）
ここがモデルの完成度の8割を決めます。 1枚のイラストを、関節や部位ごとにバラバラのレイヤーに切り分けていきます。
レイヤー構成の例
WordPressのリストブロックを活用して整理します。
- 前髪 / 後髪： 左右で分けると揺れが自然になります。
- 目： 白目、瞳、まぶた（上・下）、まつげ、ハイライト。
- 口： 上唇、下唇、口の中（暗色）、歯。
- 顔・体： 顔の輪郭、耳、鼻、首、服。
ポイント： パーツを動かした時に「本来隠れているはずの部分」が見えてしまうため、口の中や髪の裏側、首の付け根などはあらかじめ描き足しておく必要があります。
ツール：see-through
https://huggingface.co/spaces/24yearsold/see-through-demo
- イラストをアップロード
- AI が自動で24レイヤーに分解
- back hair, bottomwear, ears, earwear, eyebrow, eyelash,
- eyewear, eyewhite, face, footwear, fronthair, handwear,
- head, headwear, irides, legwear, mouth, neck, neckwear,
- nose, objects, tail, topwear, wings
- PSD をダウンロード
Step 2 & 3：インポートとメッシュ設定
PSDをCubism Editorに読み込んだら、各画像パーツに変形用の「網目（メッシュ）」を貼ります。
- 自動生成： 基本は自動生成でOKです。
- 手動調整： 目や口など、大きく・細かく動くパーツは頂点数を増やして密度を上げます。
ツール：Live 2D Cubism Editor
- Tool > Automatic mesh generatoでPresetを生成する
Step 4：デフォーマ設定（親子の階層構造）
メッシュを直接動かすのではなく、「デフォーマ」という親の枠に入れて操作します。
- 回転デフォーマ： 頭の傾き、腕の振り。
- ワープデフォーマ： 顔の向き（左右・上下）、口の変形。
階層構造のイメージ
親子関係を正しく作ることで、「頭を傾けながら（回転）、顔を横に向ける（ワープ）」といった複合的な動きが可能になります。
ツール：Live 2D Cubism Editor
- 顔全体のデフォーマ作成 (D_Face)
- 顔の子供として、口のデフォーマ作成 (D_Face > D_Mouth)
- 顔の子供として、目のデフォーマ作成 (D_Face > D_Eyes
Step 5：パラメータ設定（Web連携の鍵）
各パーツの変形を、特定の数値（0〜1など）に紐付けます。
| パラメータ ID | 用途 | 範囲 | Web連携の役割 |
|---|---|---|---|
| ParamMouthOpenY | 口の開き | 0 〜 1 | リップシンク（音声解析値） |
| ParamMouthForm | 口の形 | -1 〜 1 | 感情表現（笑顔/真剣） |
| ParamEyeLOpen | 目の開閉 | 0 〜 1 | 自動まばたき |
| ParamAngleX | 顔の向き（横） | -30 〜 30 | マウス・カメラ追従 |
ツール：Live 2D Cubism Editor
- Mouth openパラメータに、2 keyを追加し、0を口と閉じた状態、1を口を開いた状態に割り当てる（口の上のメッシュを変形させて開いた形にする）
- Eye openパラメータに、2 keyを追加し、同様の作業をする
Step 6：物理演算設定
髪の毛やアクセサリーに「揺れ」の設定をします。頭を X軸に動かしたとき、髪が少し遅れて動く（慣性）を設定することで、キャラクターに生命感が宿ります。
- Mobility（動きやすさ）： 値が高いほどフワフワします。
- Delay（遅延）： 動きの余韻を調整します。
Step 7：モーション・表情プリセット作成
Web側で呼び出すための「お決まりの動き」や「表情」を保存します。
- モーション（.motion3.json）： 「挨拶する」「照れる」といったタイムライン上の動き。
- 表情（.exp3.json）： 「怒り」「驚き」といったパラメータの組み合わせ。
Step 8：書き出しとWeb配置
最後に、Webブラウザ（PixiJSなど）が読み込める形式で書き出します。
📁 書き出されるファイル構成
model3.json（設定の司令塔）moc3（モデル本体）texture_00.png（パーツ画像が並んだシート）physics3.json（揺れの設定）
ツール：Live 2D Cubism Editor
- File > Export for Runtime > Export as moc3 file (SDK 4.2に実施)
よくある失敗と対策
- 口パクが目立たない： * 対策：パラメータ最大値のときの口を、イラスト原画よりも1.5倍ほど大きく変形させておくとWebで映えます。
- パーツの隙間が見える： * 対策：パーツの重なり（のりしろ）を多めに描き足してください。
制作コストの目安（バストアップの場合）
| 手法 | 費用 | 期間 | 特徴 |
|---|---|---|---|
| 自作 | 無料〜（ソフト代） | 2〜4週間 | 学習コストは高いが自由自在 |
| フリーランス発注 | 3〜15万円 | 1〜2週間 | 安定した品質 |
| プロスタジオ | 15万円〜 | 1ヶ月〜 | ゲーム・配信クオリティ |
まとめ
1枚のイラストから動くモデルを作るプロセスは、**「パーツの描き込み」と「パラメータの紐付け」**という2つの地道な作業の積み重ねです。特にWebアプリで使う場合は、パラメータIDを標準的な名称（SDK準拠）にしておくことで、コーディングの手間を大幅に減らすことができます。