ソフィアちゃんのLive2Dを作ってみよう

こんにちは。アートデザイナーの金谷（かながい）です。

今回はシンソフィアのPRキャラクター・ソフィアちゃんのLive2Dを作ってみたいと思います。

Live2Dはイラスト素材をアニメーションさせるツールということで、VTuberさんが利用されている印象があります。
また、ゲーム内の演出で採用しているというお話も良く見かけます。

シンソフィアでLive2Dを使って何か作ろうという話は残念ながら特にないのですが…、まだまだ盛り上がりそうなツールなので勉強してみたいと思います！

イラスト素材の用意

まずは動かすイラストを用意します。
前回の記事で清書したソフィアちゃんのイラストがちょうどあるため、これを使用します。

CLIP STUDIO PAINTを使用し開いた口を描き起こしたほか、髪の下のおでこなどアニメーションしたときに必要となる部分を描き足しました。
PSDで別名保存し、Adobe Photoshopで各パーツを結合させます。
（この操作はCLIP STUDIO PAINTでも行えますが、ショートカットキーの利便性からAdobe Photoshopを使用しています）
レイヤーの分け方はLive2D公式サイトで配布されているサンプルデータを参考にしました。

目と口の開閉

さてここからはLive2D Cubism Editorを使用し、いよいよLive2Dモデルを作成していきます。
公式サイトのチュートリアルの流れに沿って、目と口を閉じてみましょう。

目はまつ毛1本ずつと白目レイヤーを、口は上唇と下唇、口の中レイヤーをそれぞれ細かく変形させて作っていきます。なかなか地道な作業です。

目と口を閉じました。

これまで作成したことがあるアニメーションでは閉じかけの絵、閉じた絵とそれぞれ別の絵が必要だったため、１枚の絵を変形させて動かすことに新鮮さを覚えます。

体を動かす

体に動きをつけていきます。
「回転デフォーマ」を使って頭を傾けて手と足を閉じてみました。
淡々とした作業が続きますが、ポーズを変えられたのは達成感があります。

髪から足まで簡単な動きをつけられたので「ランダムポーズ」で動かしてみます。

ようやく動いている実感が湧いてきました。
髪の毛が勝手に動いているように見えて変なのであとで調整することにします。

立体感をつける

顔にXY、体にX傾きを追加して立体感をつけていきます。
ななめ顔の調整が難しいため、新しく鼻のレイヤーを増やして細かく動かせるようにします。

Live2Dはあとからの調整がかなり容易で、画像編集しても簡単に反映することができました。
PSDを画面上にドラッグして作成中のモデルを選択すれば画像を更新できます。

頭を上下左右に、体は左右に動くようにできました。

こうなるとひじが曲がっていないのが気になります。
次から次に作りたい箇所が出てきて楽しくなってまいりました。

眼球の動きをつける

動いてはいるものの貼り付けたような表情が気になるので眼球を上下左右に動かしてみます。
さらに髪の毛やひじなど気になる箇所の調整を行いました。

ひとまず一通り動きをつけられました。

腕の差分を追加する

腕を下ろしたポーズに物足りなさを感じてきたので人差し指を立て腰に手を当てたソフィアちゃんポーズを追加します。

追加する腕は新しく描き起こします。

このまま配置するだけだと体が左右に動いた際にずれてしまうため、腕の差分にも動きをつけました。

ゲームで使用するにはもう少し精度が欲しいですが、ソフィアちゃんらしく動かすことができましたので今回はここまでとします。

Live2Dを作成してみて

簡単に作ってこれだけ動かせるなら、何かに活用できそうな予感がします。
もう少し研究を続けてみても良いかもしれません。

学習にあたっての所感になりますが、アートデザイナーはアニメーション作成ツールを使うことがあまりなくノウハウが少ないため、序盤の地味な作業の連続はモチベーションの維持が大変でした。
そんな時は途中経過を社内で共有することで、学習意欲を継続させました。
こつこつ一人で努力することも大事ですが、誰かと共有することで継続しやすくなるものですね。

ツールの勉強の他、学習方法の工夫についても学びました。