AIイラストをLive2Dで動かしたい！
意外とそんなニーズがあると思います。僕にはありました。……ありますよね？
ボクの場合はunity用のLive2Dモデルが欲しくて、「AIイラストをLive2Dで動かせるようになりてぇ」となりました。
僕はLive2Dに関する知識はまったくなかったのですが、今回そんな僕でもAIイラストをLive2Dでまばたきさせるとこまでいきましたので、覚え書きも兼ねて記事にまとめておきます。
Live2Dを動かすに至るまでに参考にした資料、つまづいたところや気を付けるべき点を記載しておきますので、参考にしてみてくださいませ！
手順としては以下の3ステップで、手順ごとに解説していきますね！
①AIイラストを作る
②ペイントツール（今回はCLIP STUDIO）でAIイラストのレイヤー分けをする
③Live2D Cubism Editorでイラストに動きを付ける
ここまで大体3時間あればいけると思います！（早い人はもっと早いでしょうが）
今回のゴール地点はAIイラストを『まばたき』させること
今回のゴール地点はAIイラストを『まばたき』させることです。
まぁ、まばたきができれば他の動きも応用でいけるやろ。
Live2D作成用に使ったイラストがこちらで、この子をまばたきさせていきます。
これをLive2Dで動かすと……
うおお、Live2D Cubism Editor使ってまばたき作れた！！
知識ゼロからでも3時間くらいあればとりあえず動くね！
後は頑張りさえすればLive2Dモデルは自前で調達できそうだ、、！！ pic.twitter.com/AF0QXMFYYw
— 月詠ヨゾラ (@TukuyomiYozora) March 5, 2025
こんな感じでまばたきさせられます。
良いですよね。僕もこれができたときは「Live2Dしゅごいぃい」ってなりましたね。
Live2D用のAIイラストを作ろう！
今回のLive2D用に使うイラストは、先ほどもご覧になっていただきましたがこちらです。
Live2D用のAIイラストを作る際の注意点は、以下の２点ですね。
・バストアップイラストにする
・キャラクターの目と前髪が被らないようにする
もし、動かしたい「AIイラストがないよ！」という場合は、NovelAIを使ってイラストを作るのがおすすめですので、以下の記事も合わせてご覧になってくださいね！
迷ちゃん NovelAIのプロンプトの書き方と種類を知りたいですっ。 マヨナカログではNovelAIの使い方やプロンプトの作り方、種類についての記事をいくつも取り扱っています。 過去記事から検索して探すのは大変だと[…]
まばたきさせたいだけなら、バストアップイラストにする
ひとまずLive2Dを試してみたい――という方ならば、正面を向いたバストアップイラストがおすすめです。
キャラクターの顔のパーツが大きく描写されていれば、後でする『パーツ分け』の作業が圧倒的にしやすいんですよね。
AIイラストの生成には『upper body』のタグを入れて、バストアップイラストを生成するようにしましょう。
また、キャラクターの頭部や両肩が途切れていないイラストが、Live2Dにした後も不自然がなくて良いです。
キャラクターの目と前髪が被らないようにする
キャラクターの目と前髪が被らないようにするのも、Live2Dでまばたきさせる上でかなり大事です。
パーツ分けの作業を行う際に、目の領域を切り取ってレイヤー分けするのですが、前髪が被っていると目のレイヤーに前髪が入ってしまうんですよね。
手書きイラストであれば、レイヤーを分けて描けば済むお話なんですが、AIイラストだとこれがなかなか難しいんです。
たとえば、こんな風な前髪が長いキャラクターのLive2Dを作りたい場合は……けっこう難しそうです。
AIイラストを使って、前髪が長いキャラのLive2Dを作りたい場合は……どうすればいいんですかね。
知っている方がいらっしゃったら、コメント欄かXのDMで教えてください（笑）
②ペイントツールでAIイラストのレイヤー分けをする
AIイラストが完成したら、それをペイントツールに読み込ませてレイヤー分けを行っていきます。
僕はCLIP STUDIOを使っていますが、「ペイントツールにこだわりがないよ！ 無料でできればなんでもいい！」という方はGIMPを使えば良いと思います。
この工程は、レイヤー分けができれば使うツールは何でもよいので。
そもそも、レイヤー分けとは？
こんな感じに、イラストを階層に分ける作業ですね。
たとえば、左-瞳のレイヤーだけを表示するとこんな感じに左の瞳だけが描写されます。
まばたきをさせたい場合は、『瞳、白目、まつげ』の項目で分ける
まばたきをさせたいだけなら、瞳、白目、まつげだけレイヤーを分ければ十分です。
この画像のようにレイヤー分けを行えばオーケーです。
実際のレイヤー分け操作は使用するペイントツールによって違うので、そこは自身が使うツールで調べてみてくださいね！
切り抜いたら白目と肌の空白が生まれるので、そこは塗りつぶしておく
瞳や白目の部分を切り抜くと空白部分が生まれます。
ここの仕様はツールによって違うかもしれませんが、CLIP STUDIOでは透過処理が行われていますね。
空白があると、Live2Dでイラストを動かした際に描写がおかしくなってしまうので、塗りつぶし機能を使って白目は白色で、肌は肌色で塗りつぶしておきましょう。
また、切り抜き順は瞳→白目→まつ毛と内側から外側に向かうようにレイヤー分けをした方がいいですね。
レイヤー分けができたらpsd（Pshotoshopドキュメント）ファイルで保存する
レイヤー分けができたらpsdファイルでデータを保存します。
Live2D Cubism Editorに読み込ませるには、psdファイル形式である必要があります。
③Live2D Cubism Editorでイラストに動きを付ける
さて、いよいよ今回のメインディッシュであるLive2Dの出番ですね！
イラストを動かしていくのに使うツールはLive2D Cubism Editorです。
まずは、Live2D Cubism Editorをダウンロードしましょう。
PRO版、Free版が存在しますが、まばたきをさせたいだけならFree版で問題ないです。
ダウンロード＆インストールが終わったら、Live2D Cubism Editorに作成したpsdファイルを読み込ませてみましょう。
左上部にあるパーツのウィンドウに、自分の分けたパーツが表示されれば、パーツ分けは成功しています。
イラストにLive2Dの設定をしてまばたきをさせたいなら、この動画を見ればOK
イラストにLive2Dの設定をしてまばたきをさせたいなら、Cubism公式の動画一本見ればOKです。
このサイトでごちゃごちゃ説明するよりも、わかりやすいんですよね。
公式が優秀なんですよ……。
これで、まばたきを設定した後に、モデリング→物理演算設定をクリックすれば、キャラクターがまばたきするのを確認することができます。
まとめ
AIイラストをLive2Dで動かすところまで手順をまとめました！
実際に、まばたきさせただけでもめちゃくちゃ楽しかったです。
今後は、Live2Dモデルをunityで使用すると思うので、そっちに手がついたらまた記事をあげますね～。
最後まで読んでくださりありがとうございました！