Live2Dについて

Live2Dイラストの作り方③~アニメーション制作編~

この記事では、以下のことについて解説しています。

●「Live2D」のアニメーション工程について
●「Animation」ワークスペースってなに?
●どうやって動きを付けるの?

かげひと
かげひと
こんにちは!イラストレーター
無印かげひと(@kage86kagen)です!

今回は「Live2Dイラストの作り方」について4回目の記事になります。

前回は、Live2Dイラストの作り方②~モーション付け編~ということで、Live2Dの要となる部分の作業について紹介しました。

今回の記事では、いよいよ最後の過程である「Animation(アニメーション)工程に突入したいと思います!
アニメーション工程は、これまでのどの過程よりも簡単に作業ができますので、ファイナルラップだと思って頑張っていきましょう!

 

●今回紹介する話
⓪ 
Live2Dとは?
①  Live2D用にイラストを加工する
「Moder」工程でモーション(動き)を付ける
③「Animation」工程で実際に動かす ←今ここ
●おまけ:「Animaze」でリップシンク対応にする

 

何度もお伝えしていますが、Live2Dソフトは全体的にやや複雑な操作内容となっていますので、一度Live2D公式サイトのマニュアル動画をご視聴することをお勧めします。

かげひと
かげひと
そのうえで、「ここは初心者にとっては分かりにくいだろなー」といった部分を細かく説明していきますので、ご了承ください。

 ・今回紹介する部分のマニュアル動画

「アニメーション工程」のおおまかな流れ

アニメーション工程は、文字通り前回モーションを付けたイラストに、実際にアニメーションを付けて動かしていく工程になります。

アニメーション工程~動画書き出しまでのおおまかな流れは、以下の通りです。
①「Animation」ワークスペースを開く
②キーフレームを打つ
③書き出して完成

コーヒーさん
コーヒーさん
イラスト制作」や「モーション付け」工程と比べると、作業段階が随分少ないんだね。

そうですね…。この過程では、前回必至こいて頑張った「モーション付け」のモーションを組み合わせていくだけですからね。仕組みさえわかれば、Live2D初心者でもすんなりできる工程だと思います。

「Animation」を開く

前回ちょろっと説明しましたが、「Live2D Cubisum(略して「Live2D」)」ソフトには、「ワークスペース」という作業スペースが3種類ほどあります。前回のモーション付けでは、「Model」ワークスペースで行ってきましたが、今回は「Animation」で操作を行います。

Animation」ワークスペースの開き方ですが、Live2Dソフトの画面上部のリストを選択し、そこから「Animation」を選択するだけで、簡単にAnimationワークスペースへと移動することが出来ます。

上記のように画面構成が変わりましたが、このままではAnimation作業ができません

少しややこしいですが、Animationワークスペースで作業をするためには、上記のAnimationワークスペースに先ほどモデリングした「.cmo3」のデータをドラック&ドロップする必要があります。

コーヒーさん
コーヒーさん
も、もう少し詳しく…。

つまり、下記の動画のように「データファイル」を「Animation」の画面上(「タイムライン」というタブにドロップする必要あり!)にドロップする必要がありますタブを切り替えただけで作業は出来ない、ということですね…。

…こんな感じで、まずはAnimationワークスペースの「タイムライン」というタブの上にドロップします。すると、「アニメーションのターゲットバージョン選択」という項目が出てきます。

これは、アニメーションを書き出す(できたデータを保存する)時その後の使用先によって「SDK」を選択したり、「AE」を選択したりする必要があります。今回は、ただ単に「動画」としてMP4データで書き出したいので、「動画」のコマンドを選択します。

これをクリックすればOK。最後の作業が開始となります

画面構成について

さて、まずはいつも通り画面の構成を紹介していきましょう。

では、各項目について詳しく紹介していきます。

①プロジェクト・パーツ・デフォーマ
こちらは、前回の作業でもお世話になった部分です。
ただし、今回は使用しませんので説明は端折ります。

 

②シーン・テンプレート
こちらは、後述する「キーフレーム」のテンプレートを登録しておくことができる部分です。結構便利な機能になりますので、こちらについては後ほど詳しく説明します

 

③インスペクタ・パラメータ・ログ
タブが3つほど並んでいますが、この中で重要なのは「インスペクタ」タブ。こちらには、書き出す時の画面サイズフレーム数などが表示されており、使用用途に合わせて数値を変更できます。

デフォルトの状態だと、サイズは「1280:720(いわゆるYouTube動画のような画面比率)」で固定されています。また、フレームレートは「30」となっていますが、これも表現したい内容によって変更しましょう。

ワインさん
ワインさん
フレームというのはアニメ制作などでよく聞く言葉ですが、「1秒間に○○枚の画像を使う」事を指します。「パラパラ漫画のイラスト枚数」のようなものですね。
フレーム数が多ければ滑らかな動きになりますし、逆に「8」だとカックカク。
通常のアニメのフレーム数は、1秒間に「24枚」のイラストを制作しているそうですかなり大変ですね…。

 

④現在の画面
現在のイラストの状況を表示しています。

 

⑤タイムライン
今回の工程で最も使用することになるスペースです。このタブ内をいじってキャラクターに動きを付けていくことになります。
動画編集」をしたことがある方だと、馴染みのある画面かもしれませんね。

キーフレームを打つ

では、一通り画面を紹介したところで、いよいよ作業の方に入っていきます

アニメーション作業では、「キーフレーム」を打っていく作業が主軸となります。「キーフレーム」という単語は動画編集を行ったことがある方であれば馴染みある言葉だと思います。

キーフレーム」というのは、動画やアニメーション制作において、「動画の区切りとなる点」を指します。例えば、「1秒24コマのアニメを5秒」作る場合、「パラパラ漫画」の要領で1枚ずつイラストを登録していってしまうと莫大なデータ量になりますし、かなりの作業量となってしまいます

そこで、
・1秒の地点で「笑顔」のモーションのキーフレームを打ち
5秒の地点で「目を見開く」モーションのキーフレームを打つ
ことにより、その間の動きを動画ソフトが補完してくれて一連の動きのアニメーションが出来上がる…といったところです。

コーヒーさん
コーヒーさん
こうすることで、作業時間が圧倒的に減るし動画データの圧縮にもつながるんだ。

…ということで、この過程では前回編集した「まばたき」や、「顔の傾き」、「体全体の呼吸」など、これらのモーションを「何秒地点で」「何フレームぐらいの長さでやるのか」といったキーフレームを打っていくことになります。

やり方はとても簡単!
この時間で動かしたい!」と思った時間に、タイムライン上にあるピンク色の「バー」を持っていき、左枠にある「パラメータ」を動かすだけで、簡単にキーフレームを打つことができます

例えば、まばたきの表現をさせたい時は、
通常の目の開き方」→「目を閉じている動き」→「通常の目の開き方」といったように、「目」のパラメータの数値を変更するだけで、簡単にキーフレームを打つことができます。

コーヒーさん
コーヒーさん
あ!「左目 開閉」のキーフレームを打っていったら、左目だけがまばたきをする動きができた!

上記がキーフレームを打つ一連の流れになりますので、後は表現したい動きに合わせてひたすら「キーフレーム」を打っていくのみです

便利な「テンプレート」を活用しよう

ここで、便利な機能「テンプレート」についてちょっと紹介します。

通常、「まばたき」という行動は数秒に必ず1回は行われます。人物イラストのアニメーションを自然に見せるためにも、現実世界と同様にまばたきを頻繁にさせた方がリアリティ溢れる作品になるため、瞬きの動きは数秒に最低でも1回は入れた方がおススメです

ただ、このまばたきのキーフレームをいちいち手動打っていては、それなりに時間がかかっています。
そんな時に便利なのが、以下の2つの方法です。

キーフレームを複数選択し、コピペをする
・「テンプレート」を活用する

コピペをする」方法は、「キーフレーム」をコピペして貼っていくという作業です。先ほど打ったまばたきの一連の流れを複数ドラッグ→コピーし、付けたい時間帯にタイムラインバーを持っていきペーストを行えば、まばたきモーションの複製の完成です。

ただ、簡単なまばたきならまだしも、「腕をあげる」「ジャンプする」などといった動きをコピペするとなると、複数のパーツが絡んできますしかなりの手間になります

そんな時は、キーフレームを「テンプレート化」してしまえばOK!
キーフレームをテンプレート化する時には、

テンプレートにしたいキーフレームを、ドラッグで複数選択する
「テンプレート」タブ右下の「新規テンプレート作成」をクリック
打ちたいところにタイムラインバーを持っていき、先ほどの「テンプレート「まばたき」」をクリックすればOK

キーフレーム数が多い場合はとても重宝しますので、覚えておいて損はない機能です。

データを書き出したら完成!

一通りキーフレームを打ち終わりモーションの確認が終わったら、いよいよ最後の作業である「データの書き出し」に入っていきます。書き出す時は、「ファイル」→「画像/動画書き出し」→「動画」を選択します。

その後、下記のようなウィンドウが表示されるので、お好みの設定にし「OK」を押したら書き出し完了です!

ワインさん
ワインさん
MP4・・・一般的な動画データ
MOV・・・背景が透過されたデータ。いわゆる「動くPNGデータ」。

MOVで書き出す場合は、背景ありのサイトに貼り付けたい背景ありの動画に組み込みたい(MV動画など)などといった場合にお勧めです。ただし、MP4よりも倍以上のデータサイズになりますのでご注意ください。

リンプシンクを付けたい場合

Vtuber用のアバターなどを制作し、そのままリップシンクを付けたい場合は、この後にもう一作業入ってきます

リップシンクとは・・・Webカメラから人の顔の表情を読み取り、それをアバターに反映していくという優れものの機能の事。Vtuberはこのリップシンクを使用して、リアルタイムの表情をアバターに反映させています

こういったリップシンクを付ける場合は、Steam(PCゲーム、ソフトウェアなどを販売しているプラットフォーム。)で販売している「Animaze」というアプリがとてもおススメです。(※有料になります!

このリップシンクの付け方については、「おまけ」という形で後日利用方法を説明していこうと思います。

ちょっと気になる…」という方は、他の方にはなりますが分かりやすい記事がありましたので、参考として貼り付けておきます。

Vtuberの解剖学 「animazeの使い方を徹底解説」

表現の可能性が広がるLive2D

4回に渡って紹介した「Live2D」。特に動画制作をしたことが無い方にとっては、最初は扱いに苦戦するかもしれません。しかし、Live2Dスキルを身に付けると、今後「Live2D」スキルが必要なお仕事が頂けるかもしれません

Live2D2013年に正式にリリースされたものの、2021年現在でもLive2Dを扱える方はまだ少なめです。今後、動画コンテンツはますます需要が増えていきますので、新しい事業としてLive2Dを取得してみてはいかがでしょうか?

今回は、主に「Vtuber」系アバターを描きそうな方の絵柄のテイストで説明しましたが、アイデア次第では「ビジネス向けのシンプル動画」を短い作業時間で簡単に動かすことも可能です。

私はストックイラストを行っていますが、制作したイラストをLive2Dイラストに加工し、モーションを付けた動画ファイルを「動画素材」として登録しています。

実際、複数の動画が購入されていますので、味を占めて今後益々動画素材を増やしていこうと思っています。

まとめ

いかがだったでしょうか?
今回は、「Live2Dイラストの作り方③」ということで、アニメーション制作編~書き出しまでの紹介を行いました。

これでLive2Dのざっくりとした解説は終了となりますが、なかなか難しかったのではないでしょうか?

コーヒーさん
コーヒーさん
動画制作の経験があっても、Live2Dは少し勝手が違うから頭が痛くなっちゃった…。
ワインさん
ワインさん
これは何回か作ってみないと、やり方が覚えられなさそうですね…。

今回の作業の流れをおさらいすると、

  1. 「Animation」を開く(Live2Dソフト上部で切り替えられる)
  2. キーフレームを打つ
  3. データを書き出して完成!

…こんな感じになります。前回のモーション付け工程と比べると、比較的楽な作業でした。

Live2Dの説明記事は終わりですが、おまけとして「Animazeによるリップシンクの方法についても、ちょっとだけ紹介しようと思います。こちらは、次回以降の記事で紹介しますので、楽しみに待って頂ければ幸いです。

4回に渡るLive2D記事にお付き合いいただき、ありがとうございました!無料のお試し版もありますので、ぜひ試してみてくださいね!

それでは!

⓪  Live2Dとは?
①  Live2D用にイラストを加工する
「Moder」工程でモーション(動き)を付ける
③「Animation」工程で実際に動かす ←今回はここ
●おまけ:「Animaze」でリップシンク対応にする

フリーランスイラストレーター
無印かげひと
「すっきりとしたエモいイラスト」を主体として、イラストやlive2D、動画制作、アニメーション制作も行っています。コーヒーとワインと無印良品が好き。