Live2D の PSD テンプレートを YAML から生成するツールを作った

PSD の階層を毎回作るのが億劫

Live2D 化に使う PSD は、普通のイラストとは違う。パーツが細かくレイヤー分けされている必要がある。前髪・後ろ髪・目・眉・口・顔ベース・胴体…と、関節単位で分離していないと、Live2D Cubism に読み込んでも動かせない。

1枚絵を後からパーツ分けするのは現実的でない。描き始める段階からレイヤーを分けておく必要がある。

でも気づくことがある。このレイヤー階層自体は、キャラごとに変わらない。

• 前髪、顔パーツ、顔ベース、後ろ髪、胴体
• 目は「瞳ハイライト・黒目・白目・上まぶた・下まぶた」
• 口は「閉じ」と「開け」の2状態

キャラのデザインは違っても、動かせる構造の骨組みは共通だ。毎回ゼロからフォルダとレイヤーを組むのは、無駄な手作業になる。

Clip Studio Paint（CSP）には「テンプレートから新規作成」がある。一度作って .clip で保存すれば呼び出せる。でも構造自体は YAML で管理したい。バージョン管理できるし、差分も追える。

YAML → PSD → .clip のパイプライン

3段階の変換を作った。

1. YAML: レイヤー構造を定義
2. Node.js スクリプト: YAML を読んで PSD を生成
3. CSP: PSD を開いて .clip として保存 → テンプレ登録

Node.js 側は ag-psd で PSD を直接書き出す。各レイヤーは透明な1×1ピクセルの空レイヤーで、意味を持つのはフォルダ階層・レイヤー名・レイヤーカラーだけ。

structure:
  - { type: layer, name: 前髪, color: blue }
  - type: folder
    name: 顔パーツ
    color: red
    children:
      - type: folder
        name: 右目
        children:
          - { type: layer, name: 瞳ハイライト }
          - { type: layer, name: 黒目 }
          - { type: layer, name: 白目 }
          - { type: layer, name: 上まぶた }
          - { type: layer, name: 下まぶた }

CSP で開くと、フォルダ構造もレイヤー名もカラーも保持された状態で読み込める。

3段階のテンプレート

Live2D は段階的に育てる前提で、3つ用意した。

Phase	レイヤー数	対応する動き
1 (最小)	約15	瞬き・口パク・頷き
2 (標準)	約35	表情・頭部XYZ・基本揺れ
3 (フル)	約65	髪揺れ物理・呼吸・手腕・衣装差分

最初は Phase 1 だけで良い。瞬き・口パク・頷きができればアバターとして成立する。慣れたら Phase 2 → 3 と育てる。

いきなり全部盛りを目指すと迷子になる。

構造を変えたくなったら

レイヤー構成は YAML に一本化されているので、変更は容易。

1. templates/phase2-standard.yaml を編集
2. npm run generate:phase2 で PSD 再生成
3. CSP で開き直して .clip 保存し直し

構造の変遷が git に残るのも嬉しい。「前はどうだったか」を辿れる。

この種のツールの性質

作り終えてから気づいたが、こういうツールは作って損しない性質を持つ。

• キャラを作るたびに使う → 利用回数が自然に増える
• 他人も使える構造だから、公開すれば誰かの役に立つ
• 後で自分が見返すとき、YAML がそのまま仕様書になる

公開した

ソースコードは GitHub で公開している。Node.js 製、MIT ライセンス。

Live2D 初学者向けの最小構成から本格運用向けのフル構成まで、3段階のテンプレートを同梱した。Clip Studio Paint でテンプレート化する手順も README に書いてある。