Live2Dについて

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

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

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

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

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

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

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

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

かげひと
かげひと
「イラストレーター」という職がレッドオーシャン(通り越してブラックオーシャンとなりつつ)ある今、「イラスト+動画」のスキルを身につけて仕事に活かしていきませんか?

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

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

さて、本記事で紹介する「モーション付け」の工程は、大体以下の通りになります。

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

大体こんな感じの流れになります。

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

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

「Live2D」をインストール

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

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

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

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

FREE版を使い無料で利用し続けることもできますが、Vtuberアバタ―のような作品を作る際は、FREE版の機能制限のせいでかなり限られた制作しかできません

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

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

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

インストール方法については公式サイトで紹介しています。また、パソコンの動作環境についても注意書きされているので、自分のパソコン環境で使用できるかどうかを調べた後に、インストールすることをおススメします。

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

Live2D Cubism Editorの画面の紹介

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

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

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

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

 

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

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

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

こうすると、

こんな感じで、右側に制作したイラストが映し出されれます
では、ここから「Model」ワークスペースの画面構成を紹介していきましょう!

※公式サイトではこのワークスペースの構成について省略していましたので、ここでは細かく説明していきます。

 

 

①ワークスペース切り替え
このボタンをクリックすると、「ワークスペース」の切り替えをすることができます。先ほど説明した「Model」とか「Animation」のことですね。
もう一つ、「Form Animation(フォームアニメーション)」というワークスペースがありますが、こちらは話がややこしくなるので、今回のLive2D説明では省略したいと思います。

 

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

 

③PSDデータから取り込んだパーツが置いてある場所
前回、(苦労して)レイヤー分けしたパーツの一覧が並んでいるタブです。小さなサムネイルも載っているので、「この名称のレイヤーの中身はなんだっけ?」というようなこともありません。
右の「500」という数字は「パーツの表示順序」になります。数字が大きくなれば前面に表示され、数字が小さくなるにつれて後ろ側になります。

 

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

 

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

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

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

 

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

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

 

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

パーツのモーション付け

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

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

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

アートメッシュをつける

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

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

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

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

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

ただ、自動生成されたアートメッシュをそのまま使うと、「ちょっと不自然」になってくるパーツがあります。そういった「調整が必要なパーツ」については、公式動画サイト「チュートリアル2:イラストを動かす準備」で紹介されていますので、そちらをご参照ください。

顔パーツに動きを付ける

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

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

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

こんな感じで、眉毛口を閉じた時の上唇などの動作瞬きをした時のまつげの動き方…など、顔のパーツにひたすら動きを付けていきます

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

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

デフォーマをつける

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

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

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

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

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

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

 

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

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

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

先ほどとは違い、点の周辺のイラストも一緒に引っ張られてくれるようになります。さらに、このデフォーマは複数のパーツを一つのデフォーマにまとめあげることができるので、動画の一番右側のように、
顔の輪郭、鼻、口、目、髪、耳」といった首から上のパーツに「デフォーマ」をかけて動かすと、引っ張った点を中心として様々なパーツが左側に引っ張られます

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

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

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

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

 

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

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

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

これらについては、実際に動かして覚えてもらうしかないのと、いろんなLive2Dクリエイターの方が解説動画を上げてくれていますので、この記事と動画を併用してみて頂くとかなり分かりやすいと思います。

かげひと
かげひと
こちらの動画では、Live2D初心者の方でも分かりやすいように解説されているので、おススメです!

作業時間はどれくらい?

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

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

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

ちなみに、今回動かしたパーツや動きについては、

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

パーツ単体についてはこれぐらい動かしました。これに加えて、複数のパーツを絡めた動きとしては、

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

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

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

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

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

まとめ

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

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

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

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

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

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

Live2Dは2013年からリリースされており、年々利用者が多くなっているソフトです。巣ごもり需要がまだまだ続きそうな中、こういった「イラスト×動画」の需要も高まっていきますので、今からLive2Dスキルを身に付けても遅くはありません。動画作りにも興味がわいてきた方は、この機会にぜひLive2Dのスキルを身に付けて、仕事の幅を広めていきましょう!

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

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

それでは!

 

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


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