Live2Dを使ったVTuberキャラクターの作り方

Live2D初期の頃から触ってはいた、さらえみ(@saraemiii)です。

キャラクターを動かしたいけれど、アニメーションはハードルが高い。

イラストの良さを残したまま動画用に動きをつけたい。

そんな時にオススメなのが Live2D のアニメーション。

実際に作ってみたので、基本的な作り方とオススメできる参考物を紹介していきます。

Live2Dとは？

イラスト原画をそのまま擬似的に立体的に動かせる技術で、イラストの印象を崩さず動かせるのが最大の魅力。

何枚も作画するアニメーションとは違って、1枚のイラストをパーツ分けし、骨組みを設定して様々な動作をさせることが出来ます。

使い方によっては、本来のアニメーションより少ない労力でキャラクターを動かす事が出来ます。

原画によって1枚では動く範囲が限られる事、範囲を超えて動かすと違和感が残る事があり、違和感無く動かすには細やかな設定が必要になります。

私が初期に作ったものはこちら

2017年頃に作成。

この時は制作ソフトが1世代古いバージョンでした。イラストも古いです。

今回Live2Dで作成したキャラクターはこちら

Live2Dキャラクター制作の基本を紹介します

当記事で解説しているのはとりあえず作成できる基礎的な内容です。（それでも結構なボリュームになりますが…/汗）

動画でも解説しています

Live2Dのソフトをパソコンに導入

機能制限付きの「FREE版」各種ライセンスが必要な「PRO版」があります

当記事では「PRO版」を使った制作を紹介しています。

無料の「FREE版」はサイズやパーツ数が限られてくるため、制作するのがとても難しいと思います。

キャラをちゃんと動かしたい、仕事で利用する場合は機能制限の無い「PRO版」が必須です。

「PRO版」は、「一般ユーザー・小規模事業者」と「中規模以上の事業者」で価格が変わります

直近の年間売上高1000万円未満の方が「一般ユーザー・小規模事業者」に当てはまります。

支払いは月額～年額かかるサブスクリプション形式です。

1年間で14,000円台なので、ソフトの仕様考えてもそれほど高いものではありません。

買い切りではありませんが、使いたい月だけライセンス取得するなど、自分に合った料金体系を選びやすいです。

パソコンにダウンロード出来たらインストールしておきます。

「Live2D Cubism Editor」「Live2D Cubism Viewer」の２つのソフトがインストールできます。

Live2Dキャラクターの作り方＜イラスト素材編＞

動かすにはイラスト素材が必要です。

ただ1枚の絵があれば出来るわけではなく、動かす範囲のパーツで分けたイラストを作らなければなりません。

動画ではこちらで解説

動かし方を考えてラフ設計する

今回は割と作りやすく、Vtuberのように動かせたらと思い、真正面の構成にしています。

ゲーム等では、ポーズを付けたイラストで構成される場合もあります。

動かす事を想定して見えないところまで描く

この線画の通り、本来なら体や顔に隠れて見えない後ろ髪や、横髪に隠れて見えない耳なども作画しています。

パーツごとに塗ると、レイヤーを重ねた時、見た目は普通の1枚絵に見えます。

右側がレイヤー構成です。

動いたら揺れそうな「左みつあみ」だけで1パーツとしています。

目や鼻はもちろん、前髪だけで左右の横髪や前髪の1房ごとにパーツ分けします。

1枚をパーツに分断するより、最初からLive2D用として描く方が比較的楽です！

パーツをレイヤー毎に分ける際、すべて統合された1枚絵をパーツごとに切り分けて作成するのは手間がかかります。

髪の毛の細かい部分の切り出しや、動かすと見えてしまう範囲を描き足すとなるとかなり面倒臭い。

はじめからパーツ分けを意識して作画していく方が、まだ作りやすいハズです。

スクリプトで一発統合！

パーツ分けした作画をしていくと↑図のように、とんでもない数の線画と塗りが出来てきます。

Live2Ｄに必要なイラスト素材は、↑パーツ毎にレイヤー分けされている、線画と塗りが統合されたデータ。

これらを手動で統合していくのは、ショートカットを駆使しても、かなり手間がかかってしまいます。

そこで、公式で無料配布されているPhotoshop用スクリプト「Live2D_Preprocess」を使うと、一発で線画と塗りが統合されます。

スクリプトを使うにはフォルダ分けが重要

スクリプトで統合したくないパーツは、名前に＊印を付けたフォルダに入れておきます。

線画と塗りを統合したいパーツは＊印の無いフォルダに入れます。

すべてフォルダ整理できたら、Photoshopでイラストデータを開き、インストールしたスクリプトを実行します。

すると↓のように統合されたパーツデータが完成します。

Live2Ｄではこの統合後のデータを使用します。

後々、修正する可能性もあるので、修正対応しやすいように統合前と統合後でデータは分けて保管します。

口パーツは特殊なパーツ分けが必要

口パーツは、表情付けに大きく変形するパーツなので特殊な形状になります。

最低限必要なパーツは以下のような形です。

口の中と舌、それらがしっかり隠れるように上唇と下唇を作成する感じです。

この後、動かしてみるとこの形の必要性がわかります。

顔にかかる髪の影も動かす場合は、影もパーツ化する

パーツ以外に影も動かしたい場合、影もパーツ化する必要があります。

前髪の場合は顔に映るわけですが、輪郭より大きめのパーツにしても、Live2D上でクリッピングマスク処理ができるので問題無いです。

クリッピングマスクは次の工程にて解説しています。

後からパーツの追加修正も可能

後から足りてなかったパーツを追加する事も可能です。元のPSDイラストデータに、描き換えたり追加したデータに差し替える形になります。

※FREE版はパーツ数などの制限があって難しい場合もあります。

差し替え前のLive2Ｄデータに差し替えたいデータをドラッグ＆ドロップします。

新たにLive2Ｄを作るのか(上)、現行モデルに差し替えたいのか(下)を選びます。

差し替えデータを選択。

レイヤー名が同じであれば、書き換えたデータに変更され、追加したパーツレイヤーは↑図のように「パーツ」の先頭に入れられます。このパーツを移動させて追加修正を反映させられます。

追加パーツにも、後ほど説明している「アートメッシュ」を付けるのを忘れずに。

こうして後からでも修正やパーツを足せるので、安心して制作できます。

Live2Dキャラクターの作り方＜モデリング設定編＞

パーツ分けしたイラストデータを、動かせる状態に設定していきます。

動画ではこちらで解説

「Cubism Editor」にPSDデータを取り込む

上記で作ったパーツ分けしたLive2D用イラストデータ(PSD)を、「Live2D Cubism Editor」のビューエリア(赤枠のところ)にドラッグします。

このように、見た感じは1枚絵の状態で取り込まれます。

見た目は1枚絵でも、全選択すると…

レイヤー分けしたパーツが重なっていることがわかります。

アートメッシュを設定

パーツを画面上で動かせる構造にするため、まるでポリゴンのような「アートメッシュ」を作成していきます。

パーツを全選択して、画面上部の「AUTO」ボタンを押すと、「メッシュの自動生成」ウィンドウが開きます。

プリセット「標準」にすると、各パーツに「アートメッシュ」が自動的に作成されます。後々、このアートメッシュをいじってイラストを動かしていきます。

よく動かす顔パーツのメッシュをキレイに手動で描き直す

自動生成されたメッシュはいびつな場合も多く、繊細な動きをする顔の表情には向きません。

顔のパーツを中心に、手動でメッシュを引き直します。

アートメッシュを引き直したいパーツを選択します。今回はまぶたのラインパーツを選択。中央にメッシュが集まっていて少しいびつなのがわかります。

画面上部のペンマークを押すと、メッシュの編集ができるモードになります。

このパーツのメッシュを全選択(編集→すべて選択か、Ctrl+Aでできます)カーソルから糸が引きますが気にせず次に進みます。

全選択したら、Delete押してキレイに削除します。

このままではメッシュが無い状態に。

図の左上(画面上では中央上部にあります)ペン＋ボタンを押すと、メッシュを引けるようになります。

パーツのまぶたラインに沿うように引き、そのまわり上下も点を打って囲っていきます。自動的に水色のラインが引かれていくので、その点を結んだ形が三角形になるように点を打っていきます。

パーツの中央、上下と引けたら、図の左上(画面上では中央上部にあります)「自動接続」をクリック。

すると水色だった線も赤い線になりメッシュが作成されます。ビューウィンドウのチェックボタンを押してメッシュの編集が完了です。

眉毛も同様に直していきます。

その他、複雑だけど手動で直したほうが良いパーツ

ひとまずこんな形にしていますが、メッシュの編集は様々な応用があります。公式マニュアルがとても参考になります！

クリッピングマスクを設定

先述した顔に映る髪の影や、目の中の瞳など、アートメッシュ化するとLive2D上でクリッピングマスク化が可能になります。

必ず設定しないといけないわけではありませんが、アニメーション表現が豊かになります。

黒目を白目の範囲内で動かしたい場合のクリッピング方法です。

白目を選択し「インスペクタ」ウィンドウ内のIDをコピーします。

黒目のパーツを選択し「インスペクタ」内の「クリッピング」に、コピーした白目のIDをペーストします。

これでクリッピング完了です。

黒目を動かしてみると白目の範囲内だけ表示されることがわかります。

回転デフォーマを設定

首や腕など回転で動かしたい部分に「デフォーマ」という骨のような構造を設定していきます。

今回は頭の回転を作ります。

回転させる頭部…顔・前髪・帽子・後ろ髪…など、頭部に関連する全てのパーツを左上の「パーツ」ウィンドウで選択していきます。

選択できたら右上の時計のような針と円のボタン(赤い枠のとこ)を押します。

「回転デフォーマを作成」ウィンドウが出てくるので、挿入先のパーツは各種フォルダ名が選べます。

この場合は、顔や前髪など頭部をまとめていたフォルダ「頭」に設定。

名前もわかりやすく「頭の回転」としました。システム上、名前は他と被らないほうが良いようです。

「作成」を押すと左下の「デフォーマ」ウィンドウに同名の項目が増えます。

すると事前に選択していた頭部に、このようなマーカーが付きます。(見やすくするため襟部分を隠しました)

針を動かしてみると円の中心を軸に回転する仕組みです。

ですが、このままだと鼻を中心に回ることになってしまいます。これは気持ち悪い…

デフォーマーのマーカーをCtrl押しながら掴むことで位置の編集ができます。針の向きも同様に編集ができます。

頭の場合は、針は上向きのままですが、腕などには向きを編集する必要がでてきます。

これで首にあわせて自然に横に降れるようになりました。

動くことを確認したら、動きをつけるのは次の工程になるので、定位置に戻しておきます。

首以外にも、腕、足など、回転する部分には同様に設定していきます。

ワープデフォーマを設定

面の角や辺をいじって編集できるように設定する「ワープデフォーマ」をつけていきます。

メッシュよりも簡単に動きを付けやすく、設定しておくとちょっとした揺れやなびきに活用できます。

ワープデフォーマを付けたい素材を選択して

画面上部の「ワープデフォーマ作成」ボタンを押すとウィンドウが開くので、これまで同様に「挿入先のパーツ」「名前」を設定し、作成します。

このようなボックスが現れます。

ボックスの緑枠を触ってみると↑図のようにイラストを変形させることができます。

こちらも動作をつけるのは次の工程になるので、ボックスが出来たらひとまず置いておきます。

ちなみに、赤枠を触るとイラストのサイズが変わり、Ctrl押しながら赤枠を動かすとボックスのサイズを変更できます。

アートパスを設定

イラストの主線をLive2D上で調整できる機能です。

このバージョンで追加された機能で、顔の輪郭など、主線ごと動かすために線のニュアンスが崩れそうな場合に設定しておくと良さそうです。

とりあえず動かしたいという方は省いても良い工程だと思います。綺麗に作成したい人はチャレンジしてみる価値あります。

Live2Dキャラクターの作り方＜モデリングパラメータ編＞

キャラクターをパラメータで自在に動かせるように設定していきます。

パラメータを設定する

「Live2D Cubism Editor」中央下にある「パラメータ」ウィンドウです。(↑これは途中段階の図です)

ここの操作にキャラの動きを連動させて、コントロールできるようにしていきます。

パラメータ設定したいパーツを選択し、「パラメータ」ウィンドウにあるリストを選びます。

例えば、目の開閉を設定する場合は、目のパーツ全てを選択し「右目 開閉」を選びます。

パーツとリストを選択したら「パラメータ」ウィンドウ上部の「キーの2点追加」ボタンを押します。

するとリストに緑色の点が追加されます。

ウィンドウ上部には、隣の「3点追加」「すべての点を削除」などパラメータ編集に必要なボタンが揃っています。

キーを追加した「右目 開閉」の左端の点を選択します。右端の数値が「0.0」になります。右クリックで選択すると半端なところを選択せずに済んでスムーズに進められます。

この点を選択した状態で、パーツの形を変形させていきます。前の工程で設定した、アートメッシュ・デフォーマーを動かして形を作っていきます。

1つのデフォーマーに付けられる動きの数は3つまでと推奨されています。(3つ以上はエラーの原因になりやすいそうです)
3つ以上になる際は、デフォーマーにさらにデフォーマーをつける事ができますので、それで対応していきます。

一通り変形が完了したら、パラメータを左右に動かしてみると動きがついているのが分かります。

これを動かしたいパーツにどんどん当てはめていきます。

パラメータのリストはカスタマイズ可能

ウィンドウ下の「パラメータ作成」から、オリジナルのパラメータリストももちろん作成できます。

名前はわかりやすい名称、IDは他と被らない文字を、範囲は多ければ多いほど間のポイント(作画アニメで言う動画部分)が多くなります。

これでLive2D表現がすごく広がります。

変形パスツールで楽に動かす

アートメッシュやデフォーマー以外に、簡単に変形できる「変形パスツール」があります。

変形させたいパーツを選択してから、画面右上の「変形パスツール」ボタンを押します。

パーツの上をなぞるように線を引いていきます。

「変形パスツール」を使っている間は、パーツイラストに干渉せずこのラインを編集できます。

「変形パスツール」でラインを引いたら「矢印ツール」ボタンを押して、引いたラインのポイントを動かして、パーツを変形させていきます。

眉毛やまつげ、髪の毛など、様々なパーツの変形に応用できます。

パラメータを結合させて複雑な動きを可能に

設定し終えた、２つのパラメータを結合して自動的に複雑な動きを補完してくれる方法があります。

まず顔を左右に降るパラメータを作成しました。

上下に降るパラメータを作成。

パラメーター作成後、左端にあるクリップマークを押すと２つのパラメーターが結合されます。

上下に隣り合わないと結合できません。リストはドラッグで動かせるので離れている場合は調整します。

結合されたら「モデリング」→「パラメータ」→「4隅の形状を自動生成」を選択。

するとこのように斜め上向きや斜め下向きなど、間の動きを補完してくれます。

クオリティアップに繋がる、パーツの切り替え

切り替えたいパーツとキーを選択して「インスペクタ」ウィンドウ内で「不透明度」を調整します。

表示/非表示させるパラメータを作って不透明度を操作して切り替えることができます。

他にも、パラメータのキーは細かく追加することができるので、そこでパーツ毎に不透明度を変えて切り替える事もできます。

いろんなキーの追加方法はありますが…

追加したいパラメータ選択して、上部にある手動で編集ボタンを押すと↓このような画面が開きます。

追加したいポイントをクリックして(再クリックで消えます)OKを押すと、パラメータにキーが追加されます。

不透明度はパーツ以外にもデフォーマにも設定できます。

編集中にパーツが見づらい時は…

編集中のパーツだけ濃く表示する

まつげパーツだけ変形させたくても見づらい時、ビューエリアの左上にある「Solo」ボタンを押します。

選択しているパーツ以外が薄い表示になり、見やすくなります。

下絵を半透明に表示させる

変形させる際、特定の形にしたい場合に、参考を表示させると作りやすくなります。

形の参考にする下絵を用意して取り込みます。

下絵を選択し「インスペクタ」ウィンドウ内で「不透明度」を調整できます。下絵を半透明にして、それを参考にパーツを変形させるとスムーズに進められます。

編集中のデフォーマに掛かるパーツを濃く表示

回転デフォーマやワープデフォーマを選択して「Solo」を押しても、デフォーマの枠しか表示されません。

デフォーマを選択して、↑「表示」「デフォーマの子要素をハイライト」を選択。

すると編集中のデフォーマ対象になっているパーツが見やすく表示されます。

編集レベルを切り替える

上部メニューにある編集レベルが3段階あります。

デフォーマの枠などの表示が切り替えられるので、見にくくて操作しづらい際に役に立ちます。

モデリングが一通り終わったら、目的別に工程が変わります

Live2Dで出来たキャラクターは、アニメーションやアバターなど様々な使いみちがあります。何に使うかによってこの後の作業が変わります。

ゲーム用に作る場合はわかりませんがプログラマーとの連携が必要だと思います。

ここではLive2D上で動かす方法と、割と使いやすいFaceRigとAfter Effectsへの移行方法を紹介します。

Live2D上でアニメーションを作る

Live2D上でモーションという1アクションずつ作成することができます。

モーションを並べて一連のアニメーションとして書き出す事もできますし、この後のFaceRigやAfter Effectsのキーボード押すだけで再生される動作付けにも活用できます。

上部にある切り替えメニューにてModel→Animationを選択。

するとこんな操作エリアに変わります。ここでアニメーションを付けていきます。

左上「プロジェクト」にある作成したモデリングデータを「タイムライン」タブへドラッグします。

このような選択画面が現れます。SDKは主にゲーム、映像用はMovie、After Effects用はAE…と、用途にあったものを選択します。

デフォルト名で「シーン」が作られます。

画面左側の「インスペクタ」で編集ができます。シーン名は他でも使用する場合があるので半角英数字、タグはわかりやすく日本語名を付けます。

画面サイズやフレームレートなども編集できます。

シーンは「シーン」タブ右下にあるボタンで新規・複製・削除ができます。

タイムラインにはこのような表示になります。ここで細かい動作を設定していきます。ワークエリアや時間表示はドラッグして調整ができます。

タイムライン左枠を開くとパラメータが出現します。図の通り、①動きを付けたい時間に赤いバーを動かし、②付けたいポーズになるようパラメータをクリックするとタイムラインに点が打たれます。

パラメータで設定した通りに、点と点の間でキャラクターが動いたり止まったりします。これを繰り返してアニメーションを作成します。

「呼吸」「まばたき」「ウィンク」など動作毎にシーンを追加作成していきます。

保存するとアニメーション専用ファイル「～.can3」として保存されます。

「ファイル」→「画像/動画書き出し」から様々なデータに書き出すことができます。

FaceRigを使ってLive2Dキャラクターをアバター化する

FaceRigというソフトを利用して、ZOOMやYouTubeなど配信のアバターとしても使う事ができます。

カメラに映る自分と連動してキャラクターを動かせるようになります。

FaceRig用にデータをいくつか書き出す必要があります。

テクスチャアトラスを作成

Live2D「Cubism Editor」モデリング画面の上部にある「テクスチャアトラス」作成ボタンを押します。

新規作成用ダイアログが出るので、名称・サイズ等入力します。
名称は英数字で、この後も共通の名称を使います。

使用している全パーツが並んだものが表示されます。

右端は未配置パーツが表示されます。モデリングに使用しているのに未配置に表示されていたら、ドラッグしてテクスチャ上に持っていきます。(プルダウンから他の表示も選べます)

パーツが↓のようにくっつきすぎて重なっていると不具合に繋がるので、↑「自動レイアウト」の隣にある「マージン」pxを大きい値に設定して「自動レイアウト」ボタンを押します。

↑これでマージンを広げた状態です。

重なりが無く、使用パーツが揃ってる状態が出来たら、OKを押しておきます。

moc3データを書き出す

「ファイル」→「組込み用ファイル書き出し」→「moc3ファイル書き出し」を選択します。

FaceRig用には↑このような設定。バージョンが3.0になります。

モデリング時に(少し難易度の高い)物理演算設定もできている場合はチェックも入れます。

OKを押すと↑このようなファイルが書き出されます。

先に設定したテクスチャアトラスデータは、「○○○.2048」(.数値部分はテクスチャのサイズによって変わります)というフォルダとその中に「○○○.png」が書き出されます。

他のファイルは、テクスチャアトラスデータ同様の名称で「○○○.moc3」「○○○.model3.json」と付けます。

○○○部分は、半角英数字で、同じ名称を付けないときちんと動作しません。

FaceRigにアイコンや動作切替え指示などを付けたい場合

FaceRigの画面上で専用アイコンを設置したい場合は、256×256pxのpng画像を用意します。ファイル名は「ico_○○○.png」にします。

---

メモ帳などのテキストエディタで設定ファイルを作成すると、名称や動作制御を設定できます。

ファイル名毎の中身が↓こちらになります。○○○はこれまで同様の共通した任意の名称です。

これらのデータが揃ったら所定のフォルダへ入れて起動

最低限「○○○.2048」「○○○.moc3」「○○○.model3.json」データ、さらに設定したい場合に「ico_○○○.png」「cc_names_○○○.cfg」「cc_○○○.cfg」「Motionフォルダ」データを揃え、まとめて「○○○」フォルダに入れます。

Cドライブから、ProgramFiles(x86)/Steam/steamapps/common/FaceRig/Mod/VP/PC_CustomData/Objects/

↑こちらのフォルダに「○○○」フォルダを入れて、FaceRigを起動すると、作成したキャラクターが利用できるようになっています。

FaceRigの後継ソフトAnimazeを使ってLive2Dキャラクターをアバター化する

Animazeは動画で解説してみました。まだこれからのソフトなので今後のアップデートに期待しています。

FaceRigより取り込むのもシンプルで随分使いやすくなっています！

VTube StudioでLive2Dキャラクターを動かす

FaceRig・Animaze以外にもVTuber化によく使われているソフト「VTube Studio」があります。

あわせて読みたい

VTube Studio on Steam VTube Studio is all you'll ever need to become a Live2D VTuber, with innovative features such as pinning props to your model and many more still to come.

VTube Studioについてとても参考になった解説記事

note（ノート）

Vtube Studio使い方ガイド - 製作者向け｜Fuyuse Frusumi｜note ※追記案内 (2021/03/13) 　Vtube StudioがSteamに移動しました！ 　伴って、ウェブカメラによるトラッキング（有料DLC）、音声ベースのリップシンク機能が開発・追加...

まだあまり試していないので、機会があれば動画やブログで説明したいと思います。

After Effects上でLive2Dキャラクターを動かす

CGやアニメーションなど映像制作に重宝するソフト、Adobe After Effectsでも専用プラグインを使うことでLive2Dキャラクターを動かす事ができます。

専用プラグインをダウンロード

Live2D公式の↓こちらからAfter Effectsプラグインをダウンロードします

Live2D Cubism

AEプラグイン ダウンロード | Live2D Cubism AEプラグインをダウンロードできます。使用許諾契約をお読みいただき、同意してからご利用ください。

「Live2D Cubism Editor」のライセンス認証が出来ていないとエラーが出るそうです。

テクスチャアトラスを作成

FaceRig用のデータ同様にテクスチャアトラスが書き出されるので、作成できるよう整えていきます。

Live2D「Cubism Editor」モデリング画面の上部にある「テクスチャアトラス」作成ボタンを押します。

新規作成用ダイアログが出るので、名称・サイズ等入力します。
名称は英数字で、この後も共通の名称を使います。

使用している全パーツが並んだものが表示されます。

右端は未配置パーツが表示されます。モデリングに使用しているのに未配置に表示されていたら、ドラッグしてテクスチャ上に持っていきます。(プルダウンから他の表示も選べます)

パーツが↓のようにくっつきすぎて重なっていると不具合に繋がるので、↑「自動レイアウト」の隣にある「マージン」pxを大きい値に設定して「自動レイアウト」ボタンを押します。

↑これでマージンを広げた状態です。

重なりが無く、使用パーツが揃ってる状態が出来たら、OKを押してテクスチャアトラスを書き出します。

ダイアログで設定した名称で「○○○.2048」(.数値部分はテクスチャサイズによって変わります)というフォルダに「○○○.png」が書き出されます。

○○○部分は、これ以降でも使用するので半角英数字で付けます。

moc3データを書き出す

「ファイル」→「組込み用ファイル書き出し」→「moc3ファイル書き出し」を選択します。

書き出し設定は「表示補助ファイル(cdi3.json)を書き出す」にチェックを入れてOKを押します。これをしないと後の作業に影響が出ます。

バージョンは4.0、3.3、3.0のどれでも問題なさそうです。

これで、テクスチャアトラスデータ(png)の入った「○○○.2048」(.数値部分はテクスチャサイズによって変わります)フォルダと、書き出した「○○○.cdi3.json」「○○○.moc3」「○○○.model3.json」データが用意できました。(○○○は共通した任意の名前)

After Effectsへ書き出しデータを読み込み

「○○○.model3.json」データをAfter Effectsのプロジェクトパネルにドラッグして読み込ませます。

プロジェクトパネルには、自動的に「○○○.model3.json.cae」データに変換されます。

稀に「○○○.model3.json」になる場合もあります。この場合上手くいかなくなるので、After Effectsを再起動させるなどで「○○○.model3.json.cae」に読めるよう対応します。

変換された「○○○.model3.json.cae」をプロジェクトパネルからタイムラインへドラッグ。

タイムラインに出現したレイヤーを選択して、「エフェクト」→「Live2D」→「Live2D Cubism Renderer」を選択。

すると、Live2Dキャラクターがコンポジションパネルに出現します。

Cubism Controllerを使ってAfter Effectsでアニメを作成

エフェクトコントロールか、図のように↑タイムラインのレイヤー→エフェクトを開くと「Open」ボタンが出現します。

「Open」ボタンを押すと「Cubism Controller」ウィンドウが開きます。Live2D上のパラメータ・パーツが表示されます。

Cubism Controllerはパネルにドッキングさせました(ウィンドウをドラッグすると好きな位置にドッキングさせられます)

ここから動画を作るには「Cubism Controller」内か、タイムラインのエフェクト内の「パラメータ」「パーツ」にある、時計マークを押すと、タイムライン上の青いバーのあるタイミングにキーポイントが打たれます。

時計でキーを作るとタイムラインが編集できるようになります。

青いバーを好きなタイミングに移動させ「Cubism Controller」のコントロールを動かすと、新たに◇四角が打たれて動きを作ることができます。

タイムライン左端の◇四角を押してから「Cubism Controller」のコントロールを動かしても同様にできます。

これを繰り返してアニメーションを付けていきます。

Live2D上のアニメーションも、「○○○.motion3.json」をLive2Dで書き出し、After Effectsのエフェクトコントロール内にある「Motion」→「Import」から読み込む事で再現できます。

「○○○.model3.json.cae」レイヤーはコピーも出来るので、一部表示・非表示してAfter Effects特有のエフェクトをかけることも出来ます。

これでLive2DとAfter Effectsを使って他では出来ないような表現もできるようになります。

まとめ：Live2Dはイラストの可能性が広がる表現方法

以上の通り、作るのは決して楽ではないのですが、イラストだったキャラが動く感動を味わえます。

さらに自分の動作に合わせて動くVtuber（Vチューバー）にして、顔出しはしたくない動画配信に活躍する事もできます。