Live2Dについて

Live2Dイラストの作り方①~イラスト加工編~

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

●パソコンソフト「Live2D」を使用する前の下準備
●Live2Dに使用するための「イラストのレイヤー分け」について
●「イラスト加工」の作業時間はどれくらい?

こんにちは!無印かげひと(@kage86kagen)です!
本日は、自分のイラストを手軽に動かすことができるパソコンソフトLive2D」の使い方について紹介いたします。

前回は「Live2Dを使うとイラストを3Dのように動かせる!「Live2D」とは?」という記事で、Live2Dのあれこれを説明いたしました。

Live2Dというソフトは、一つの作品が完成するまでの工程が複雑ですので、今回から数回に分けてメイキング方法をご紹介しようと思います
今回第1回目は、「Live2D用のイラストの作り方」についてご紹介します。

今後ますます需要が高まる「動画コンテンツ」。自分の特技である「イラスト」に加えて、「Live2D」のスキル身につけば希少価値の高い人材になること間違いなしです!

かげひと
かげひと
Live2D…どういったものなんだろう?」と、興味を持ってくれた方、「Live2D」について一緒に学んでいきましょう!

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

まずはちょっとした注意書き



美麗イラストを3Dのように動かせる「Live2D」ソフト。このソフトは既存の動画編集ソフトとは全く違うものでして、知識0の初心者が真っ向から挑もうとすると、おそらくつまづくことが多いかもしれません

ソフトを開発した「Live2D」の公式サイトでは、作り方を1から10まで分かりやすく紹介している「チュートリアル動画」をYouTubeにアップしています。

まずはこちらの動画を見て頂いた上でこちらの記事を読んで頂けると、さらに使い方が分かると思われます。

開発元だけあって、とても丁寧に解説されていますが、それでも初心者にとっては「???」な部分が出てくると思われますので、この記事では「初心者目線から見れば、この工程はもう少し噛み砕いて説明したほうが良いな…」という部分をより詳しく説明していこうと思います。

前置きが長くなり申し訳ありません。それでは、「Live2D用にイラストを加工する」方法を詳しく解説していきたいと思います!

Live2D用にイラストを加工する

Live2Dでキャラクターを動かすためには、大まかに以下のような作業工程が必要です。

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

かげひと
かげひと
今回は、①番目の「Live2D用にイラストを加工する」方法について説明していきます。

①イラストを用意する

まずは、イラストを準備するところから始めます。
基本的にどんなイラストでも動かすことは可能ですが、イラストの編集しやすさ動画にした時の見やすさ等を考えると、

  • 主線が「暗めの色」ではっきり描かれている
  • 必要以上に塗り部分をぼかしていないイラスト

上記のようなイラストが加工に望ましいです。

主線が明るめの色だと、動画の背景によっては「動画化」したときに見えづらくなってしまうからね

ということで、今回はこちらのイラストをモデルにして作っていきたいと思います。

かげひと
かげひと
主線「黒系統」ではっきりと引かれていて、キャラクターの影部分は必要以上にぼかさずベタ塗りで着色しています

昨今のイラストでは、「ひらひらたっぷりのスカート」や「ジャラジャラアクセサリー」が魅力的ではあります。ですが、Live2Dイラストを初めて作る時は、アクセサリーやひらひらな服装が少ない「簡単なイラスト」から始めてみましょう。(Tシャツ姿とか、パーカーとか…)

2,3作品作ってソフトに慣れてきたら、そこから徐々に複雑なイラストに挑戦していくとベストです。そうすれば途中で挫折することなく、短い期間で着実にスキルが身についていくことでしょう。

今回のモデルは、見た目的に複雑なイラストっぽいですが、「着物」の柄だけが複雑に見えるだけで、それ以外はいたって普通の「着物ネコ耳」娘です

ワインさん
ワインさん
このイラストには、作者の「好き」が存分に詰まっていますね…。

②イラストを「レイヤー分け」する

さて、Live2Dで動かすための下準備として、このイラストを動かしたいパーツごとに、レイヤー分けをする必要があります
これは、後に「Live2D」で動きを付けるための重要な作業工程です。

かげひと
かげひと
動かしたいパーツごとにちゃんと分けておかないと、後に行う「Live2D」ソフトでの作業で「目と鼻が一緒に動いちゃう!」ということになりかねません。ですので、このレイヤー分け作業というのは重要になります

この作業を行う順番としては、
①制作したイラストのレイヤーを「全て結合」する
※不安な方は、結合前のレイヤーデータをバックアップする
②結合した後、動かしたいパーツごとに切り貼りしてレイヤー分け
上記のような手順を踏んでいきます。

腕部分を動かしたいなら「腕だけ描かれたレイヤー」を、「」を動かしたいなら「髪だけ描かれたレイヤー」を…といったように、手間ではありますがひとつずつレイヤーにしていきます。

以下の動画は、「原画イラスト」を「選択ツール(今回は「投げ縄選択」)」で選択し、「コピー&ペースト」で別レイヤーに貼り付ける手順です。

かげひと
かげひと
ただ、このやり方だと、選択範囲の「切り口」がお粗末になりがちです。私が普段行っているやり方は、
①イラストの原画レイヤーをコピーする(レイヤーが2つになる)
②コピーしたイラストで切り取りたい部分(この場合だと「左耳」)の境目を「消しゴム」で綺麗に消したのち、左耳を選択してそれ以外の他のパーツを消去する
…というような方法を取っています。

原画イラストを複製したレイヤー。まずは「左ネコ耳パーツだけを一つのレイヤーにしたいので、境目部分を「消しゴムツール」で丁寧に削り、「投げ縄選択」→「選択範囲外を消去」で他のイラストを消せば、「左ネコ耳レイヤー」への切り分け成功!

…なんだか難しく感じる方もいるかもしれませんが、要は「動かしたいパーツごとにレイヤー」を作れればそれでいいので、自分のやりやすい方法をお試しください。

 

Live2Dを作る時は、特に「」や「」のパーツをよく動かすことが多いです。そうなると、必然的にレイヤー数も多くなります。

例えば、Live2Dで「目のまばたき」を表現したい場合は、単純に「」だけのレイヤーを作成するのではなく、最低でも「白目」、「目玉」、「まつげ上」、「まつげ下」の4パーツぐらいには細分化していきたいところです
そうしておかないと、Live2Dソフトで自然なまばたきの動きをさせることが難しいです

も同様です。モデルに「首を傾げるポーズを取らせたい」、「ジャンプさせたい」など大きな動きをさせたいのであれば、「髪の動き」も付けた方が断然自然に見えます

上記のようにモデルの髪をなめらかに動かしたいのであれば、最低でも「前髪部分」、「右横の髪部分」、「左横の髪部分」、「後ろ髪部分」まで細分化する必要があります。

ひぇ…。そう考えると、「Vtuber」のアバターのキャラ達の髪って、いったいいくつのレイヤーに分けられているんだろう…。あんなにふわふわに動くから、相当数のレイヤーで分けているんだろうなぁ
かげひと
かげひと
こうして作業手順を見ると、Live2D用イラストを制作している方の苦労が分かりますよね…

…と、こんな感じで、レイヤー分け作業をさくさく行っていきます。

もし、「上半身のみ(手は付けない)」のイラストを動かしたい場合は、最低でも以下のパーツごとにレイヤーを分けておいたほうがいいでしょう。

「髪」、「眉」、「目(先ほど説明した通り細分化)」、「鼻」、「耳」、「唇上」、「唇下」、「口の中」、「歯」、「顔の輪郭」、「首」、「体の胴体(トルソー)」、「右腕」、「左腕」

今回のモデルの場合は、上記にプラスして「尻尾」、「着物の帯」、「髪留めの魚」を細分化しています。

レイヤーの数は、大体20枚以上になります。

③加筆する

長い時間をかけてレイヤー分けが完了しました。「やった!ようやくLive2Dソフトをいじれるぞ!」と思うかもしれません。
実はまだ重要な作業が待っています…。

それが、加筆作業です。

え?まだ何か描く必要があるの?

そうです。この加筆作業を行わないと、Live2Dで動かす時に「不自然」に仕上がってしまうので、こちらの作業も必要になります。これが終われば、晴れて「Live2D」ソフトの工程に移行できますので、もうひと踏ん張りです!

 

加筆」するとはどういうことか?というと、切り分けたパーツの「つなぎ目部分」を補填する作業を言います

例えば、左腕パーツ。ただレイヤー分けをしだけだと、左腕を上げた動作をさせた時に、左腕が元あった場所に「空白」が生まれてしまいます。そうすると、左腕の周辺や後ろにある「着物の帯」、「猫の尻尾」部分が削られた様子を見せてしまうことになります。

なるほどね…。言われてみればそうだよね。

これを無くすために、各パーツに加筆を施す必要があります

他のパーツも同様です。「白目」の加筆をする時は、「目玉」があった場所も白く塗る…などなど。

 

こちらについては、公式サイトのチュートリアル1.イラストの加工」で詳しく紹介されています。

腕の加筆の仕方後ろ髪の塗り方、なんと「唇」にも加筆が必要です。上記のリンク先を見ながらこちらの記事を見返してもらえると、「あーなるほどね!」となると思います。

④「PSD」に変換する

最後の作業です!レイヤー分け&加筆したイラストデータを「PSD(Photoshopでの保存形式)」データに書き出し(保存)する作業を行います!

なんでPSD限定なの?クリスタのデータではダメ?」と思う方がいるかもしれませんが、Live2Dソフトは「PSDデータ形式」しか取り込めません。そのため、レイヤー分けしたイラストは、どうしても「PSD」で保存する必要があります。

Adobe製品でレイヤー分けしている方なら特に問題はありませんが、その他のペイントソフトを使用している方の場合は、この「PSD」への書き出し作業が意外と忘れがちです

CLIP STUDIO PAINTO(クリスタ)を使用している方は、「ファイル」→「別名で保存」で、PSDデータを指定して保存することが出来ます

もしかすると、他のソフトによっては「PSDデータ」で保存が出来ない場合がありますので、各ペイントソフトのヘルプページなどを参照してください。

かげひと
かげひと
ちなみに、無料ペイントソフト「GIMP」の場合は、GIMPで描いたイラストを「エクスポート」で「PSD」データに書き出しすることが可能だそうです。

⑤「Live2D用にイラストを加工する」工程はこれで完成!

これで、Live2D用にイラストを加工する」作業は一通り終了です!ここからようやく「Live2Dソフト」を使用していくことになります。ただ単にイラストさえあればいいというわけではありません。振り返ると、結構大変な作業でしたよね…。

ここまでの制作時間ですが、
イラスト制作:約2時間
レイヤー分け:30分
レイヤー分けした後の加筆:1時間
…といったところでしょうか?
実際に試してみるとより分かりやすいですが、レイヤー分け以降の作業が想像以上に時間がかかると思います

かげひと
かげひと
早くLive2Dに触りたい!」気持ちは分かりますが、はやる気持ちを抑えつつ、丁寧にレイヤー分けをしていきましょう
でももし、この先Live2Dでのモーション付け中に「あっ!この髪違う色に修正したい!」といった場合でも大丈夫!
髪部分だけを修正し、再度Live2Dに取り込む方法もあります。これについては次回以降説明します。

まとめ

いかがだったでしょうか?
今回は、Live2Dイラストメイキングということで、①「Live2D用にイラストを加工する」方法について紹介しました。

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

今回説明した通り、イラストを制作したら「さぁLive2Dをいじるぞ!」というわけではなく、「動かしたいパーツ毎にレイヤー分け」、「パーツごとの加筆」作業が必要になってきます。

何はともあれ、まずは一回やってみない限りは流れがつかめないと思いますLive2Dの公式サイトのメイキング方法に沿って制作すれば、まず間違いありません。
そちらを一通り見た後に、補足としてこちらの記事も参考にしていただければ幸いです。

次回は、「 ②「Moder」工程でモーション(動き)を付ける」について解説していきますので、次回もぜひお付き合いください!

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

それでは!


 

 

イラストレーターを目指す会社員(退職準備中)
無印かげひと
「少しエモいイラスト」と、「ビジネス向けイラスト」の2種類の絵柄を使い分けるフリーランスイラストレーター。コーヒーとワインと無印良品が好き。