アプリケーションのダウンロード

まずメインのモデルデータエディタソフトをダウンロードします。
トライアル版は、株式会社Live 2D社公式サイトのトップページか、各種ダウンロードページからダウンロード可能です。(2022年8月現在)

株式会社Live 2D社公式サイト

各種ダウンロードページ

インストール後42日間は無償で利用可能で、使用期間経過後は機能制限のあるFREE版に自動更新されます。継続利用の際はサブスクリプション契約で月間または1年か3年の年間契約をすることで、引き続きすべての機能が期間中利用可能になります。

利用規約に同意して、メールアドレスを入力すると、ダウンローダーexeがダウンロードできます。今回は、最新版のバージョンをダウンロードしました。

ちなみに有料版の利用をしない場合で、FREE版の商用・営利目的での利用の場合は、一般ユーザーおよび小規模事業者（年間売上1000万円未満）に限り可能なようです。

インストールは通常のアプリケーションと同じですので、ウィザードに従ってインストールします。Live2D Cubism Editor とLive2D Cubism Viewerがインストールされます。

まずはFREE版で試して見たい方や操作方法を慣れるまで日数がかかりそうな人は、最初からトライアル版ではなくFREE版で起動したほうが無難かもしれません。

インストールをしたら操作方法などの学習

アプリケーションの利用方法を覚える

Live2D Cubismをインストールしたら、まずはアプリケーションの解説Youtubeやオンラインマニュアルに一通り目を通しておくことにします。

もちろん個人で一番やりやすい方法で覚えるのが一番ですが、まずはアプリケーションの概要をしっておかないと3度手間などになる場合があるので、基本操作に関係するマニュアルをYoutube動画を閲覧して、おおまかな操作イメージを学習しておきます。

途中実際にアプリケーションを起動して、実際のマニュアルなどにあわせて操作しながら覚えると、より習熟度が進む場合があるので、内容に応じて柔軟に学習方法を調整します。

当社で実際に行った方法

1. まずは公式チュートリアルYoutube動画を一通り閲覧
2. 【オススメ】Live2D Cubism 公式チュートリアル【使い方 解説】
   7 本の動画を閲覧

   【オススメ】Live2D Cubism 公式チュートリアル【使い方 解説】

3. 公式チュートリアルを閲覧したら、実際にイラストレーターの方の制作解説動画などを閲覧します。

4. 今回はディープブリザートさんの動画を合計4時間近く座学閲覧しました。
5. 再度公式の【オススメ】Live2D Cubism 公式チュートリアル【使い方 解説】 7 本の動画を閲覧
6. 慣れている人であれば、動画スピードを多少上げながら、見直しや要所で一時停止などしてより理解を深めます。

また、目的のオリジナルイラストが30以上のパーツに分けられるレイヤーの多いイラストである場合、サンプルイラストなどのような簡易的な学習素材を用意しておいた方が良いかもしれません。

公式サイトではサンプルデータもダウンロード可能なようですが、サンプルだとFREE版では制限事項があったり、最初はデータ量が多く複雑で管理しにくい場合があり、オリジナルイラストの2Dアニメーションが目的となるため、簡単な学習用のサンプルデータを用意しておいて、そちらをもとに実習を重ねたほうが理解しやすいかもしれません。

用意するサンプルはAIデータの段階でレイヤー名を付けたりフォルダ分けをしておくと、PSDファイルで書き出した場合にパーツによって自動的にレイヤーやフォルダに分類されるので便利です。

さらにillustratorのパスデータがレイヤー別に書き出されない場合は、illustratorデータ時のパラメータ種などによって、自動的に統合されてしまうパーツがでてきて、Photoshopに書き出し時に希望したレイヤー分けが維持できない場合があります。

例えば[線を中央に揃える]のパーツは何をやっても統合されたレイヤーとして書き出されてしまい、[線を外側に揃える]と設定を変更することでレイヤーを分けて書き出しができました。今回の学習で自動的に統合されるレイヤーはほぼこれで解決できました。

ですので、パスデータを使用したトレースや描画時に枠線は外側か内側にに揃えた線図であればレイヤー分けが可能なようです。また点線や閉じられていないパスオブジェクトは、自動で統合されるようです。

回避するには基本的に各パーツはアピアランスを分割したりアウトライン化すれば自動レイヤー化されやすいようでした。これ元データ作成自体でも最初は結構時間がかかるかもしれません。

とにかく、

• 自分が一番理解しやすい方法でたのしんで学習する

がいちばん大切な要素のひとつでもあるので、あまり固定化せずに状況にあわせて、楽しんで継続しやすい方法を選んでいきます。

まずはマニュアル学習から

実際の制作前に機能をわかりやすく理解

マニュアルでおおよそのアプリケーションの概要や使用方法を学んだら、実際に準備しておいたモデルの元PSDデータとなるイラストを使用して、目的とするアニメーションの制作内容を具体的に制作してみます。

いきなり複雑なイラストで多くのパーツが必要になる場合は、できるだけデフォルメしてしまい、主要なパーツ以外は簡略化して30パーツ以内に納めておいたほうが良いかもしれません。

モデルデータの制作上の注意点としては、

• 各パーツのデータ情報
• 重なり部分の塗り足し

Illustratorでモデルデータを作成していた場合は、PSDファイルに書き出した場合に、上手くレイヤー分けできない場合があります。各パーツはアウトラインまたはラスタライズしてひとまとめのオブジェクトにしておくと良いでしょう。Illustrator独自の属性情報などを与えたパーツはレイヤー統合されやすいので注意が必要です。
手書きイラストのような場合は、各パーツ毎の線画と塗り画を結合しておいたほうがよいでしょう。

また、各パーツの重なり部の裏側は、単独パーツでも空洞ができないように塗り足しをしておき、各パーツ事に回転やデフォーマされたときに、透過される箇所ができないようにパーツ単体で成立するイラストとしておく必要があります。

もちろん、最初からMAXで制作できる方であれば本番データでトライするのも良いかもしれませんが、複雑な多数のパーツが必要となるイラストの場合は、結果的にプロトタイプを制作してからのほうが、本番データはスムーズに進みやすいような気がします。

今回の目的は、オリジナル2Dイラストを2D立体アニメーションを作成して、公式キャラクタに簡単な動きを与えるまでの動画を作成することが目的です。
最終的には数種類の動きの動画を作成して、Youtube用の解説2D立体キャラクターまで仕上げて見ようと予定しています。

制作上の重要機能キーワード

まずは制作上で抑えておきたい機能のキーワードをわかりやすく列挙しておきます。

アートメッシュ

対象のパーツに2次元のポリゴンを与えることです。Live2Dでは手動と自動と両方の方法で複雑なアートメッシュを付与することができ、頂点の数に応じてより複雑な点を軸としたパーツの変形が可能になります。

変形パーツ

アートメッシュで複雑なアートメッシュをパーツに付与した場合、変形させる際に多くの頂点を編集する手間が発生するため、変形パーツで大まかな変形ポイントを設定して、全体を大まかに変形させる際に役立つ機能です。
変形パーツで全体的な形状を変更して、細部の形状はアートメッシュで細かく調整して形を変形するイメージです。

パラメータ

パーツの位置や形状の変更についての設定値です。パラメータに応じて、パーツの位置や形が変更された情報をキー毎に維持して、個別の動きや形状の変化をアニメーションさせます。キーとは、パーツ毎の繰り返されるアニメーションの動作ポイントで、キーの数に応じてパーツの維持できるパラメータが設定できる。

デフォーマ

パーツを変更させる機能です。Illustratorで言えば、メッシュを設定したオブジェクトのアンカーをもとに、形状を変更させることです。
デフォーマにはワープデフォーマと回転デフォーマの2種類があり、ワープ機能や回転機能はIllustratorやPhotoshopでもお馴染みのワープ機能と回転機能とほぼ同じで、それぞれの機能特長でパーツを自由に変更できます。
またデフォーマは入れ子にすることも可能なので、分割されたパーツを入れ子にすることで、一括してデフォームすることが可能です。

アニメータ

実際にアニメーションを作成する機能です。各パーツにデフォーマによる設定したパラメータをタイムライン上で個別に指定してイラストに動きを与えることができます。Flashのアニメーション制作をした方であれば、かなり似ているので理解しやすいかもしれません。

基本的には上記五つの機能の組み合わせで、2D立体アニメ―ションの制作は可能です。 あとは作り方動画を何度か見ながら実際に制作してみると良いでしょう。

最初からパーフェクトを目指さずに、初回はプロトタイプや失敗してもよい実務教材のような制作を心掛けると、モチベーションも高いまま維持しやすいでしょう。

ツールを日常に馴染ませると習熟度の効率も高くなる

わかりやすいモデルデータの制作方法

では実際にLive2D Cubism Editorを使用して、2D立体アニメーションを制作してみます。

まずは、各パーツ毎に動きを付けるため、モデルデータを作成します。
ある程度のスペックであれば、Live2D Cubism Editorは起動から操作までかなり軽快に動作する優れたアプリケーションですね。
エディター系のアプリケーションにありがちな起動時のもたつきはほぼありません。

また、プレビューやモーションテストの実行も、体感的にほかのアプリの動作に影響するような重さを感じることはありませんでした。

Live2Dでは3Dのモデリングをするためのツールでなく、

• あくまでも2Dのモーフィングを組み合わせて立体的に見えるようにツールを組み合わせてアニメーションを制作する

アプリケーションになります。

平面な各モデルパーツを個別レイヤーで管理しながら、パラメータとデフォーマによってモーフィングを設定して、各パーツの組み合わせによって奥行を疑似的に持たせて立体的に動いているように見せています。

パソコンやスマホのモニターは実際には平面なので、実はかなり合理的な設計のソフトウェアだと感じました。しかも、機能性や操作制もかなり緻密な設計になっており、物凄い開発テストが繰り返されていることが感じられるソフトウェアの奥行があります。

制作フロー

Live2Dの制作フローはかなりシンプルです。

Live2D制作基本フロー

1. アートメッシュ操作
2. パラメータの設定
3. デフォーム

基本的にこの3つのフローの繰り返しでほぼ、基本モデルの動きが完成します。

最後にアニメ―タでアニメーションの制作を行いますが、基本的にタイムライン上で上記の基本制作フローで設定した動きを指定して組み合わせていくだけです。

注意事項としてはFREE版ではデフォーマ50回までなど機能制限があるので、複雑なアニメーションやパーツ数の多いイラストは、トライアル版からサブスクリプション版導入を検討しておく必要があります。

具体的な制作フロー

今回のおおまかな実際の制作の流れは以下のようになります。
細かい調整は個別モデルにより必要になりますが、基本的にはこのような流れでLive2D用のモデリングデータを作成します。 アニメーション化するのは別章のモーションの作成項目で説明しています。

1.データ読み込みとメッシュの自動生成

モデルデータのPSDを読込、動きを付ける対象の全パーツを全選択。
[メッシュの自動生成]でモデルパーツにメッシュ情報を付与します
今回はモデル構造がシンプルなのでプリセットは変形度合い(小)でアートメッシュ化しました。

2.各パーツのデフォーマとパラメータの設定

主に頭部のデフォーマが多くなりやすくなるため、ほとんどが頭部の顔や口パーツのデフォーマとパラメータの設定の繰り返しになります。
縦横、斜めなどのパラメータを設定すると、かなり立体感が感じられるようになります。

各機能は公式ページのマニュアルで調べると詳細をわかりやすく知ることができます

各注意事項

パラメータによる動き設定

表情や動きは前もってデザインしておくことが大切。
編集しながら表情や動作を調整すると、わりと時間がかかり、やり直しなどが煩雑になりやすくなります。ある程度、イメージをしっかり固めてから、編集することが推奨されます。

パラメータの設定で忘れていけないのが、動きの確認などの度に[パラメータ]-[デフォルト設定値に戻す]ですべてのパラメータを元の状態に戻しておくと良いでしょう。

回転デフォーマによる動き設定

回転デフォーマは

1. ［回転デフォーマの作成］をクリックします。
2. 名前を入力し、［作成］ボタンを押してキャンバスに戻ります。
3. キャンバスでオブジェクトにあわせて回転デフォーマの位置や角度を合わせます。回転ハンドルの長さを調整したい場合は、ハンドルの先端部分でAlt + Dragで変更できます。
4. オブジェクトを選択 → インスペクタパレットの「デフォーマ」から、作成した回転デフォーマを選択 → 親に設定します。

親に設定後、回転デフォーマの位置と角度を調整したい場合はCtrl + Drag、ハンドルの長さを調整したい場合は、Alt + Dragで変更できます。

動きの反転機能

動きの反転はワープデフォーマのみで使用します。アートメッシュで制作するとメッシュの左右がすべて均等配置されていないと、おかしな形へモーフィングされます。

3.よく使用する操作操作など

Live2D Cubismで使用する操作方法やショートカットなどを備忘のため記載しておきます。

• キャンパス拡大時の移動方法＝スペースキーを押しながらマウスで移動

まずは1つづつ工程を分割して進めることが推奨

わかりやすいアニメーションの制作方法

イラストデータをLive2Dでモデリングして動きを付けたら、実際にタイムラインを使ってアニメーションを作成します。

作成方法としては、AnimationのワークスペースにModelワークスペースで制作したモデルデータを読み込んで編集します。

アニメーションはタイムライン上で制作していきますが、各パーツ毎の動きを個別に組み合わせていくので、動きの指定できる複数の動画を組あせた編集のようなイメージにより近いでしょうか。

Flashを使用していた方であれば、かなり馴染みやすいタイムライン構成になっています。 キーフレームなども慣れると操作しやすいので、何度かテストしながら制作していくとわりと早く慣れやすいでしょう。

• 公式のYoutubeがとてもわかりやすいです。

2Dアニメーション制作の方法とコツ

アニメーションは各パーツ毎にタイムラインでパラメータの動きを指定するだけですが、パーツが多くなればなるほど設定が煩雑になるので、タイムラインをまとまった秒数ごとに一括してキーフレームを指定しておくと便利でした。

例えばゆっくりとした動作で秒数を伸ばしたい場合はパラメータ指定の削除をするだけで調整できるので、1秒ごとなどモデルのパラメータの動き方にあわせて一括してキーフレームを設定しておき、それぞれの動きを個別指定すると調整しやすいでしょう。

また、長いアニメーションになる場合は、全てを一つのAnimationファイルで作成するのではなく、できるだけ分割して制作し、プロ現場のような分業制作が可能なようなタスク管理が良いでしょうか。

アニメーションはGifや動画などでFREE版でも出力可能です。
込み入った機能利用や本格的に継続業務目的で使用する場合はPRO版導入が推奨されるでしょう。

以上がLive2Dで2D立体アニメーションの制作方法についての基礎的な内容となります。
アプリケーション自体はかなり高い機能設計の元に開発されており、かなりの開発テストを繰り返されてきたことが実感できるUIや機能性の高さ、起動負荷の少なさなど開発企業の熱意を感じる点が多い印象でした。

• Live2Dは教育の現場でも、さまざまな活用方法や将来性があるアプリケーションでした。

ワープデフォーマとアートメッシュとパラメータの相関理解がすこし難しい