Live2Dについて

Live2Dイラストの作り方②~モーション付け編~

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

●パソコンソフト「Live2D」の作業の流れ&操作方法
●アートメッシュ?デフォーマ?とはなんぞや?
●「モーション付け」の作業時間はどれくらいかかるの?

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

自分のイラストを手軽に動かすことができる「Live2D」。前回は「Live2Dイラストの作り方①~イラスト加工編~」ということで、Live2Dソフトで動かす前のイラストの下準備についてお話しました。

今回の記事では、いよいよ実際にLive2Dソフトに触れていき、イラストのモーション(動き)を付ける作業を行いたいと思います!

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

Live2Dは、Vtuberアバター作りにはもちろんのこと、「ストックサイト」を行っている方で「動画素材もあげたいな…」と考えている方にもおススメのソフトです。3Dや動画編集ソフトとはまた違い、イラストを制作する感覚で自作のイラストを手軽に動かせることが魅力的です。

かげひと
かげひと
今回の作業工程は慣れるまでが少し難しいですが、やっていくうちにどんどん楽しくなる作業です。

「モーション付け工程」のおおまかな流れ

まずは、今回の「モーション付け」の大まかな作業の流れについて説明していきたいと思います。Live2Dを初めて操作する方にとっては、聞きなれない言葉もちょくちょく出るかもしれません。これらについてはその都度詳しく説明していきますので、ご安心ください。

さて、本記事で紹介するモーション付けの工程は、おおまかに以下のような手順で作業を進めていきます。

  1. 公式サイトから「Live2D」をインストール
  2. Live2Dに、制作したイラストのデータを取り込む
  3. パーツごとに「アートメッシュ」を付けていく
  4. アートメッシュをつけたパーツに「パラメータ(動き)」を付ける
  5. 「モーション付け」の工程は終了!

特に、③と④についてはかなり細かい説明が必要となります。これらについては、より詳しいマニュアル動画公式サイトで準備されていますので、そちらの動画を見つつこちらの記事を見て頂けると、数倍分かりやすかもしれません。

コーヒーさん
コーヒーさん
Live2Dを初めて触る人には、公式で用意してくれたマニュアル動画を一巡することをおススメするよ。ただ、一回見ただけでは分かりにくい部分が出ると思うから、そういったところをこの記事で補っていくね。

「Live2D」をインストールする

まずは、ソフトのインストールについて説明します。先ほどからソフトの事を「Live2D」と呼んでいますが、正式名称は「Live2D Cubism Editor」という名前になりますので、ぜひ覚えておいてください。Live2Dのリンク先は下記になります。

公式サイトはこちらから!

公式サイトのトップ画面を見ると、なにやら「トライアル版」、「FREE版」、「PRO版」など様々な種類がありますが、これらの違いは以下の通りになります。

FREE版無料で使用できる。(ただし機能制限がある。)
PRO版機能無制限で使用できる。月ごと契約だと、¥2,288/月
トライアル版:上記のPRO版を、42日間無料で使えるお試し版

FREE版を使えば無料で利用し続けることもできますが、Vtuberアバタ―のようなかなり凝った作品を作る時には、FREE版では全然物足りません。

例えば、FREE版だと動かせるイラストのパーツ(前髪、白目、右腕etc…)が機能制限により、30パーツしか動かすことができません。今回は前回に引き続きこちらのモデルで作り方を紹介していきますが、こちらのモデルのパーツ数は30をゆうに超えています…。

簡素なアニメーションであれば無料版でもOKですが、Live2Dのスキルを本気で身に付けるのであれば、トライアル版で無料期間まで試したのち、PRO版を購入することをおススメします。

ワインさん
ワインさん
下のアニメーションのような簡単なイラストの場合は、FREE版でも制作できるかもしれませんね。(それでもかなりカツカツだと思いますが…)

インストール方法については、先ほどの公式サイト「ダウンロード」リンク先をクリックすることで、インストール方法の手順についても記載していますので、インストールに慣れていない方はそちらをご覧ください。

また、パソコンの動作環境についても注意書きがあるので、自分のパソコン環境で使用できるかどうかを調べた後にインストールすることをおススメします。

コーヒーさん
コーヒーさん
インストールする場合の「動作環境」を調べるのを忘れずに!パソコンの推奨メモリは「8GBだよ。

Live2D Cubism Editorの画面の紹介

Live2D Cubism Editor(以下は「Live2D」で略します)は、2つのワークスペースがあります。

1つが「Model」ワークスペース、もう一つが「Animation」ワークスペースです。

Modelでは各パーツにモーション(動き)を付けていき、ここで動きをひと通り付け終わったらAnimationというワークスペースで「嬉しい時の動き」、「悲しい時の動き」、「ジャンプしている時の動き」などの一連のアニメーションを付けていくことになります。

今回は「モーション付け」についての説明ですので、Modelワークスペースでの操作方法を説明します。

 

Live2Dのインストールが終わったら、さっそくアプリを開いてみましょう!開いて見ると、こんな感じの画面構成が見えるはずです。

ワインさん
ワインさん
なんだか、ペイントソフトにそれとなく似ている配置ですね。
コーヒーさん
コーヒーさん
でも、メニュータブの名称は、あまり聞いたことが無いなぁ…。

各名称を説明する前に、まずは先にイラストデータを取り込んでしまいましょう。取り込み方はとても簡単!前回作業した「パーツごとに分けたPSDデータ」を、デスクトップ上などからドラックして、Live2D内の画面に持ってくるだけです
(Live2Dソフトの「ファイル」から選ぶことも可能)

(↑画面のデータアイコンは「illustrator」の「AIデータ」に見えますが、実際は「PSDデータ」です。)

こうすると、

こんな感じで、右側にイラストが映し出されれます。ここからModelワークスペースでの作業が開始となります。

では、ここからModelワークスペースの画面構成を紹介していきましょう!
※公式サイトではこの画面構成について省略していましたので、ここでは細かく説明していきます。

 

 

①ワークスペース切り替え
このボタンをクリックすると、「ワークスペース」の切り替えをすることができます。先ほど説明した「Model」とか「Animation」のことですね。

もう一つ、「Form Animation(フォームアニメーション)」というワークスペースがありますが、こちらについては、今回のLive2D説明では省略したいと思います。

 

②操作メニュー
ペイントソフトで例えると、「ブラシ」や「消しゴム」、「選択ツール」などが置いている道具置き場のようなものです。

 

③PSDデータから取り込んだパーツが置いてある場所
前回、(苦労して)レイヤー分けしたパーツの一覧が並んでいるタブです。小さなサムネイルも載っているので、「この名称のレイヤーのイラストはなんだっけ?」というようなこともありません。

右の「500」という数字は「パーツの表示順序」になります。数字が大きくなればイラストレイヤーが前面に表示され、数字が小さくなるにつれて後ろ側になります。

 

④デフォーマのタブ
先ほど紹介した③と似ているタブに加え、「デフォーマ」という聞きなれない単語があると思います。こちらのタブでは、「今現在、どのパーツがどのようなデフォーマを付けられているか?」…的な状況を一覧にして表示してくれています。

デフォーマとはなんぞや?という解説については、後ほど紹介します

 

⑤ツール詳細
先ほどの②のツールの詳細を表示しています。

コーヒーさん
コーヒーさん
あ、アートメッシュ?って、何…?

アートメッシュについても後ほど紹介します。

 

⑥インスペクタ
今編集しているパーツの「名称」、「表示順序」、「透過率」などを表示してくれているタブです。このタブ内で操作することにより、各パーツの「透過率」や「ブレンド方式(乗算や加算といった効果)」をかけることができます。

ワインさん
ワインさん
へえ!Live2D内でも透過率や乗算、加算が変更できるんですね。

 

➆パラメータ
初心者にとっては、また「」な単語が出てきたと思いますが、こちらは「パーツに動きを付けるための場所」になります。後の「アニメーション制作」に繋がっていく大事なタブです。このパラメータについても、後ほど解説します。

パーツのモーション付け

では、いよいよ本格的に「モーション付け」の説明を行っていきましょう!ここからがLive2Dの肝部分となっていきます。ようやく、制作したイラストに動きを付けることができますね。

コーヒーさん
コーヒーさん
ドキドキ…。

…が、冒頭でもお伝えした通り、ここからのやり方については公式サイトを見て頂くのが一番ではありますが、公式サイトで学びやすくするための「導入液」的な役割になれるよう、初心者でも掴みやすいように簡単にざっくり説明していこうと思います。

アートメッシュをつける

まず手始めに、各パーツに「アートメッシュ」をつけて行くところから初めていきます。
モデルの顔や体を動かすためには、このアートメッシュというものを設定しないと、不自然な動きになってしまいます。イラストに立体感を持たせるための機能みたいなものです。

ワインさん
ワインさん
映像制作で言う「モーションキャプチャ」のようなものでしょうか。

このアートメッシュは手打ちも可能ですが、「パーツの大きさを把握し、自動でアートメッシュを生成」してくれるツールがありますので、こちらを使うと超便利です。というより、ほとんどこちらで生成し、そこから微調整を行ったりすることがほとんどになります。

このアートメッシュですが、全パーツを「ALL + A(Windowsの場合)」で選択したのちに「メッシュの自動生成」を押すと、全パーツに一気にアートメッシュをかけることができます。(便利テク)

コーヒーさん
コーヒーさん
点と線ばかりになっちゃったね。

自動で生成してくれる「メッシュ自動生成」ですが、これをそのまま使うと「ちょっと不自然」になってくるパーツも存在します。これらのパーツは手動で点と線を打っていくことになりますんので、そのパーツについては公式動画サイト「チュートリアル2:イラストを動かす準備」を参考にしてみてください。

顔パーツに動きを付ける

アートメッシュを付け終わったら、いよいよ動かしていきます。まずは「顔パーツ」の動きを付けていきましょう。

ここで必要な機能が、先ほどの画面構成で説明した「パラメータ」になります。言葉で書き起こすとなかなか難しいですが、例えば「目玉」を左右に動かしたいのであれば、下の動画のような作業を行う(キーフレームを打つ)だけで、目玉をキョロキョロさせることが出来ます。

コーヒーさん
コーヒーさん
わっ、キョロキョロできた!
かげひと
かげひと
パラメータにパーツの位置を割り当てることによって、このように簡単に動かすことができます。「キーフレーム」という単語は、主に動画編集ソフトをいじる時によく聞く言葉ですね。

こんな感じで、まずは顔パーツから動きをつけていくと良いでしょう。眉毛口を閉じた時の上唇などの動作瞬きをした時のまつげの動き方…など、ただひたすら動きを付けていきます

初めてLive2Dを使用する方は、いきなり多彩な表情を作ろうとせず、「最初は”笑顔”になった時の表情のみを動かそう!」といったような目標を経てておけば、挫折する可能性も少なくなります。

※この項目の詳しい解説はこちらです!

デフォーマをつける

modelワークスペースには「デフォーマ」という便利な機能があります。下記のタブではどのパーツにどんなデフォーマがかかっているのか?といった状況が一目瞭然です。

このデフォーマ機能は以下のようなメリットがあります。

  • 先ほどパーツに設定したアートメッシュを一度に色んな方向に動かせたり
  • 他のパーツをまとめて選択して”ひとくくりのデフォーマ”にすることにより一度に色んな方向に動かせたり
  • 体全体にデフォーマをかけ、「呼吸している表現」を出すことができたり

…などなど、パーツに動きを効率的に付けるためには欠かせない機能になります。

Live2D公式マニュアル「デフォーマについて」

コーヒーさん
コーヒーさん
さっきから「アートメッシュ」とか「デフォーマ」とか、聞きなれない単語ばかりで混乱しちゃうよ!

…と言う方向けに、

  • 「アートメッシュ」単体で動かすとどんな風になってしまうのか?
  • 「デフォーマ」を設定すると、どれぐらい楽になるのか?

上記について、分かりやすいように動画にまとめてみました。

 

例えば、顔パーツを「正面から見て左を向いているようにしたい!」という時には、顔の輪郭パーツ遠近感を付ける必要があります

パーツを動かす時には、アートメッシュやデフォーマを設定した時に出るを引っ張って動きを指定していくのですが、「アートメッシュ」のみを引いたままだと点をつけた位置のイラストのみを引っ張るため動画の一番左のようにカックカクのポリゴンに仕上がっています

動きをつけるためにいちいち点を引っ張っていたら、とてつもない作業量になる!」ということで、ここでデフォーマの出番です。動画の真ん中のモデルのように、動かしたいパーツにアートメッシュ→デフォーマをかけて、先ほどのように左に顔を向ける動きを付けると…?

先ほどとは違い、点の周辺のイラストも一緒に引っ張られてくれるようになります。さらに、このデフォーマは複数のパーツを一つのデフォーマにまとめあげることができるので、動画の一番右側のように、

顔の輪郭、鼻、口、目、髪、耳」といった首から上のパーツに「デフォーマ」をかけて動かすと、引っ張った点を中心として様々なパーツが左側に引っ張られます

Live2Dでは、こんな感じの原理でモーションを付けていくことになります

コーヒーさん
コーヒーさん
お、おう、なんとなく分かったかも!

デフォーマの仕組みを少しでも理解出来たら、あとはこっちのもの!ここからひたすらモーション付けの作業に入ることになります。

※こちらの項目の解説は、以下の動画からどうぞ。

動きを付けたら「モーション付け」の工程は終了!

顔、体、顔のXY軸、体のXY軸などなど…。これらの動きを付け終わったら、今回の目的である「モーション付け」の工程は終了になります!ここが終われば後は最終段階。次の記事で説明する「アニメーション付け」の工程に入っていきます。

モーション付けの工程は、初見で見ると楽しそうな工程ではありますが、実際に作業を行っていくにつれてペイントソフトとは違った操作性に戸惑うと思います。(実際、私は「デフォーマ」の仕組みがなかなか理解できず、かなり苦戦しました…)

これらについては、実際に動かして覚えてもらうしかないのと、Live2Dクリエイターの方が善意で投稿してくれている解説動画をひたすら見てくしかありません。こういったソフトは、実際にやってみない限り覚えていかないものです。

作業時間はどれくらい?

…な、なんとなくわかっていただけたでしょうか?

ここで、今回のModelワークスペースでの作業時間の大まかな目安をお伝えしたいと思います。今回は何度か登場してもらっている「猫耳和風の女の子」モデルを例にして算出したいと思います。

Live2Dのmodelワークスペースでの作業である「アートメッシュ付け」、「デフォーマ付け」、「キーフレームを使ってモーションの割り当て」などなど…これら全てを行い、次の記事で紹介する「Animation」ワークスペース突入前まで持っていくためには、およそ4時間ほどかかりました。

ちなみに、今回動かしたパーツや動きについては、これぐらい動かしました。

  • 目玉の動き
  • 瞬き
  • 口の開閉
  • 眉毛の動き(困り眉、驚き眉の2種類)
  • 前髪、右の髪、左の髪、後ろ髪の動き
  • 右腕、左腕
  • 尻尾の動き

これに加えて、複数のパーツを絡めた動き(デフォーマなどで設定)としては、

  • 首の傾き具合
  • 顔の上下左右動かした時の見え方
  • 体全体の上下左右動かした時
  • 体を左右に傾けた時の動き
  • 「呼吸」をしている時の動き

などなどです。大体こんな感じでしょうか?

YouTube動画やゲーム実況動画でよく見かける「上半身から上のアバター」を作るためには、最低限でもこれぐらいの動きは欲しい所です。

かげひと
かげひと
欲を言うと、「喜怒哀楽」や「驚いた顔」、「困り顔」のモーションも作り切れば御の字ですが、これらについては追々勉強していく必要があります。

先ほどの猫耳モデルは、Live2Dを作り始めて3作品目になりますが、これぐらい動かすためにモーション工程だけで4時間以上はかかってしまいました。イラストを動かすためには、やはりそれ相応の時間と労力が必要になりますね…。

でも、ここまでくればひとまず大丈夫。次の記事で説明する「Animation(アニメーション)」工程で、今まで付けたモーションを組み合わせて、アニメーションを作っていくのみになります。

Modelワークスペースでの作業、お疲れ様でした!

まとめ

いかがだったでしょうか?

今回は、「Live2Dイラストの作り方②」ということで、Live2Dを使ってのモーション付けについて紹介しました

慣れない単語ばかりで覚えにくかったかもしれませんが、自分の描いたイラストを簡単に動かせると、「ああっ…、目玉が動いた…!」といったように、とても感動すると思います

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

  1. 公式サイトから「Live2D」をインストール
  2. Live2Dに、制作したイラストのデータを取り込む
  3. パーツごとに「アートメッシュ」を付けていく
  4. アートメッシュをつけたパーツに「パラメータ(動き)」を付ける
  5. 「モーション付け」の工程は終了!

大体上記のような流れになると思います。

ただ、説明の合間合間にはここでは説明しきれない細かい作業が入ってきますので、すべての工程が説明されているLive2D公式動画に一度目を通して頂けると幸いです。

Live2Dは2013年からリリースされており、年々利用者が多くなっているソフトです。巣ごもり需要がまだまだ続きそうな中、こういった「イラスト×動画」の需要も高まっていきますので、今からLive2Dスキルを身に付けても遅くはありません

Live2Dイラスト作りに興味がわいた方は、この機会にぜひLive2Dのスキルを身に付けて、仕事の幅を広めていきましょう!

次回は、Live2Dの作り方③「Animation」工程で実際に動かす」について、説明していきたいと思います。

最後までご覧いただきありがとうございました!

それでは!

 

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