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

この記事の解説内容

●パソコンソフト「Live2D」を使用する前の下準備
●Live2Dに取り込む前の「イラストのレイヤー分け」について
●「イラストレイヤー分け」の作業時間はどれくらいかかるの？

かげひと

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

本日は、イラストを手軽に3Dっぽく動かすことができるパソコンソフト「Live2D」の使い方について紹介します。

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

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

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

かげひと

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

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

1 まずはちょっとした注意書き
2 Live2D用にイラストを加工する
3 まとめ

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

イラストを崩すことなく3Dのように動かせるLive2Dというソフト。技術力が凄いソフトですが、実は既存の動画編集ソフトやペイントソフトと比べ、操作感などが全く違うものになります。

そのため、知識0の初心者が真っ向から挑もうとすると、つまづくことが多いかもしれません。

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

下記の動画を見た上でこの記事を読んで頂ければ、知識の浸透率がさらに高くなると思いますので、一度はご覧頂くことをお勧めします。

こちらの動画は、開発元が制作しただけあってとても丁寧に解説されていますが、それにしたって初心者にとっては「？？？」な部分が多いです。

この記事では、「初心者目線から見れば、この工程はもう少し噛み砕いて説明したほうが良いな…」という部分についてを、より詳しく説明していこうと思います。

前置きが長くなりましたが、次項から「Live2D用にイラストを加工する」工程を詳しく解説していきたいと思います！

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

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

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

かげひと

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

①イラストを用意する

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

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

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

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

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

かげひと

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

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

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

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

ワインさん

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

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

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

かげひと

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

この作業を行う方法の1つとしては、

①制作したイラストのレイヤーを「全て結合」する
※不安な方は、結合前のレイヤーデータをバックアップしておく
↓
②結合した後、動かしたいパーツごとに切り貼りしてレイヤー分け

上記のような手順を踏んでいきます。これはあくまでも「一例」ですので、とりあえず「動かしたいパーツごとにレイヤー分け」していればOKです。道中の工程は人それぞれではあるもののの、最終的に分けられていれば問題ないです。

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

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

かげひと

ただ、このやり方だと選択範囲の切り口がお粗末になりがちです。私が普段行っているやり方は、

イラストの原画レイヤーをコピーする（レイヤーが2つになる）
コピーしたイラストで切り取りたい部分（この場合だと「左耳」）の境目を「消しゴム」で綺麗に消したのち、左耳を選択してそれ以外の他のパーツを消去する

…というような方法を取っています。

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

…これを聞くとなんだか難しく感じる方もいるかもしれませんが、要は

「動かしたいパーツごとにレイヤー分けをする」

というような作業ができればOKです。自分のやりやすい方法をお試しください。

Live2Dを作る時は、「髪」や「顔」のパーツをよく動かすことになります。そのため、この部分のパーツは必然的にレイヤー数も多くなります。

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

そうしておかないと、Live2Dソフトで自然なまばたきの動きをさせることが難しいです。

髪も同様です。モデルに「首を傾げるポーズを取らせたい」、「ジャンプさせたい」など大きな動きをさせたいのであれば、「髪の動き」も細かくレイヤー分けした方が、より自然な動きに見せることができます。

モデルの髪をなめらかに動かしたいのであれば、最低でも「前髪部分」、「右横の髪部分」、「左横の髪部分」、「後ろ髪部分」までレイヤー分けする必要があります。

ひぇ…。そう考えると、「Vtuber」のアバターのキャラ達の髪って、いったいいくつのレイヤーに分けられているんだろう…。あんなにふわふわに動くから、相当数のレイヤーで分けているんだろうなぁ。

かげひと

こうして作業手順を見てみると、Live2D用イラストを制作している方の苦労が分かりますよね。

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

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

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

今回のモデルの場合だと、上記にプラスして「尻尾」、「着物の帯」、「髪留めの魚」を細分化しています。レイヤーの数はおおよそ20枚以上になりした。

③加筆する

長い時間をかけてレイヤー分けが完了しました。「やった！ようやくLive2Dソフトをいじれるぞ！」と思うかもしれません。

が、実はまだ重要な作業が待っています…。

それが、加筆作業です。

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

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

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

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

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

これを無くすために、各パーツに加筆を行う必要がある…ということになります。

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

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

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

こんな感じで、各パーツの加筆作業もドンドン行っていきます。

④「PSD」に変換する

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

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

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

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

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

かげひと

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

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

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

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

かげひと

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