株式会社グローバルゲート公式ブログ
こんにちは、株式会社グローバルゲートのモーリーです。
大いに盛り上がった大阪万博もあと2週間で閉幕となってしまいます。
多くの大阪府民の心配事は彼?彼女?の今後でしょう。
大阪府公式キャラクターとして今後もがんばってほしい。
もずやん?堺市に差し上げますわ。
さて、今回はLive2Dというアプリケーションを使って、VTuber風のアニメーションを作ってみたいと思います。
Live2D は、2Dイラストをパーツごとに分解して動かすことで、奥行きを感じさせるアニメーションを実現する技術です。
近年では3Dモデリングによるアニメ風のレンダリングも増えていますが、3DCGほどコストがかからず、イラストの魅力を活かしたアニメーションを制作できることから、VTuberのアバターだけでなく、ゲーム、アニメなどで幅広く活用されています。
私個人としては、メメントモリというゲームのアニメーションが特に印象に残っています。
水彩画タッチのイラストに浮遊感のある動きが加わり、独特の世界観に引き込まれました。
今回は 「VTuberによるパスタの解説動画」を完成させることを目標に、次の手順で進めていきたいと思います。
1.イラストを作成する
2.イラストを分解する
3.Live2D Cubism Editorに読み込んでモデリング
4.VoiceVoxでナレーション音声を作成する
5.Adobe Premiereでキャラクターなしの動画を作成する
6.Live2D Cubism Editorでキャラクターと音声を同期させる
7.Adobe Premiereキャラクターと動画を合成する
色々なソフトを使ってやることが多いですが、がんばります!
まずはイラストを作成します。
…と言っても私はイラストを描ける技術がないので、ChatGPTにVTuber風のイラストを出力してもらいました。
ヴァンパイアとメイドをテーマにVTuberらしい華やかな衣装のキャラクターを作ってください。
で、できあがったのがこちらです。
なかなかいいんじゃないでしょうか。
せっかくなのでプロフィールを設定して気分を盛り上げておきます。
名前:エミリア・クロワルージュ
年齢:正確には不明だが2000年以上生きている
誕生日:5月26日(ドラキュラの日)
永遠の命を持つ吸血鬼だが、何の気まぐれかメイドとしてその時々の権力者に仕えてきた。
あるとき仕事の合間にまかないで食べたブッフ・ブルギニョン(牛肉の赤ワイン煮込み)に感銘を受け、人間の食や料理を探求することをライフワークとする。
DECO*27さんのヴァンパイアを流してテンションを上げながら作業を進めていきましょう。
1枚のイラストをそのままアバターにできればいいのですが、現時点ではまだそこまでの技術は実用化されていません(研究はされているようです)。
このイラストにどのような動きをつけたいかを考えて、目や口、髪などのパーツに分解します。
最低限
・目(まばたきに必要)
・口(喋るときに必要)
さえ動けばアバターっぽくなると思いますが、今回はもう少しがんばって、髪とカチューシャの羽根を動かすように分解しました。
無惨な姿になってしまった…。
1レイヤー1パーツとなるようにしておきます。レイヤーの名前がLive2D上のオブジェクトの名前になるので、サボらずにきちんと名前を付けておきます。
VTuberの動画を見るときに「どの部分が動いているか」という視点で見てみると、この作業のヒントになると思います。
いよいよこのイラストを動かしていきます。
Live2D Cubism Editorをインストールします。
起動時にPro版かFree版を選択する必要があります。
今回はFree版で進めますが、商用利用やPro版にしかない機能を使いたい場合は契約してご利用ください。
Live2D Cubism Editorを起動すると次のような画面になります。
「ファイルを開く」より先程作成したPSDファイルを読み込みます。
PSDのレイヤーがそのままパーツとしてグループ分けされています。
つまりPhotoshopでのレイヤー分けがこの先の作業の成否を握る、とも言えます。
それでは、各パーツごとにモーションをつけていきましょう。
まずは目の開閉ができるようにします。
イラストベースのキャラクターでも瞬きをするだけで急に生きている感が出ますので必須のモーションです。
瞳が白目をはみ出してしまわないようにクリッピングをします。
瞳(眼球)を選択し、クリッピングで白目部分のレイヤー(ここでは「左目」)にチェックを入れます。
続いて、瞳を閉じる加工を行います。
まずはメッシュの適用を行い、目のパーツが変形できるようにします。
メッシュの適用は2Dのイラストの上にポリゴンを貼っていくようなイメージです。
3DCGの作成ではポリゴンでモデルを作り、その上にテクスチャを貼っていくのですが、Live2Dでは逆の手順をやっている感覚です。
目を囲っているオブジェクト(ここでは「左目」という名前)を選択し、メッシュの自動生成アイコンをクリックします。
点の間隔やマージンを調整し、ポリゴンが目をきれいに囲うように調整します(後ほどポリゴンの頂点を修正して合わせますのでそこまで神経質になる必要はありません)
メッシュを編集するためには「メッシュ編集モード」アイコンをクリックしてください。
クリックせずにメッシュを修正するとオブジェクトが変形してしまいます。
次に、変形パスツールを選択し、このまぶた(眼球?)の内側を囲うようにパスを書きます。
パラメータタブで「左目 開閉」を選択し、「キーの2点追加」をクリックします。
これで赤丸が左にあるとき(閉じているときにあたる)に瞳を閉じた形状にすれば、目の開閉アニメーションが実装できます。
きっちりと閉じなくても、のちほどまつ毛を同じ用にメッシュ→変形を実装して前面に被せるので問題ないと思います。
まつ毛の場合、変形パスは直線になります。
閉じたときは下円弧になるように設定します。
眉毛と目の上のくぼみにも同様にアニメーションを設定して、目の開閉ができるようになりました。
まばたきをさせるだけでも一気に生きている感がでますね!
次に口の動きを作成します。
本来ならa、i、u、e、oの母音ごとに口の動きを作成し、さらに追加で微笑んだ口元を作ったりしますが、今回は入門編ということで空いた口と閉じた口だけにします。
と言ってもやることは目と同じで、口のパーツにメッシュを作成→変形メッシュを設定→パラメータの「口 開閉」で閉じた口を設定する
というだけです。
口はデフォルトを開けた口にしたかったので、パラメータは「キーの3点追加」を選択し、中央を閉じた口にしました。
アーニャのにやり顔みたいになってしまった…。
口の作り方は今後の課題ということにしましょう。
続いて髪が揺れるようにします。 髪の揺れはLive2Dならではの表現ですので、ぜひとも取り入れたい要素です。
髪やアクセサリーなどの揺れについては、自動生成機能がありますのでそれを使ってみます。
この機能はワープデフォーマという要素に適用するものですので、まずは揺らしたい髪にワープデフォーマを適用します。
次にメニューからモデリング→パラメータ→揺れの動きを自動生成を選択します。
あとは数値をいじればいい感じに髪が揺れるようになります。
Webデザインでのアニメーションと同じく、あまり大げさにやりすぎないほうがいいと思います。
カチューシャの蝙蝠の羽を動かせるようにします。
簡単に回転デフォーマを設置し、呼吸のモーションに合わせて短い動きをするようにしました。
…ということで、Live2Dモデルができあがりました!
動くパーツも少ないし自分でイラストを描いたわけでもないのにとても大変でした…。
クオリティの高いVTuberの方はすごいですね。
Live2Dモデルができあがったら配信用ソフトに読み込ませてライブ配信もできるのですが、今回は読み上げソフトによるナレーションをあわせた動画をつくってみたいと思います。
台本を作成し、VOICEVOXという読み上げソフトの音声を作成します。
今回は最近私がハマっている美味しいパスタの紹介をさせていただきます。
VOICEVOXはYoutubeでもよく見かける四国めたんの声を使いました。
ずんだもんとセットでよく聞く声です。
VOICEVOXでは読ませたいテキストを入力するだけでも十分に自然な読み上げをしてくれます。
違和感のある部分があった場合も、手動で微調整が可能です。
ナレーションが完成したら、一旦キャラクターなしの状態の動画をAdobe Premiere で作成します。
そしてナレーション用の音声データのみを出力します。
ナレーション用のトラックをソロにし、出力の形式で音声ファイル(WAVが無難)を選んで書き出しを行います。
Live2Dは音声データを読み込ませることで喋っているように口を動かす機能(リップシンクと呼ばれる)があります。
ついでにランダムな瞬きや体の動きを加え、キャラクターのアニメーションを完成させます。
Live2Dのタイムラインタブに先程作成した音声ファイルをドラッグします。
「アニメーションのターゲットバージョンの選択」というウインドウが表示されます。
今回はキャラクターの動きを動画として出力したいので、「映像」を選択します。
次に、プロジェクト内のキャラクターデータ(私は「VTuber」という名前にしています)をステージにドラッグします。
ステージにキャラクターが表示された状態で、メニューの「アニメーション」→「トラック」→「音声ファイルからリップシンクを生成」を選択します。
リップシンクのターゲットを指定します。
今回は一体のモデルと1つの音声ファイルしかありませんので、このままOKを押します。
リップシンクのトラックにキーフレームが打たれたら成功です!
このLive2Dによるキャラクターのアニメーションとキャラクターなしの動画を合成することで完成です!
YoutubeにUPしましたのでぜひご覧ください。
ちなみに動画内で紹介したガロファロというパスタは本当に美味しいのでおすすめです。
もうマ◯ーに戻れない
ということで、今回はLive2Dを使ってVTuberのキャラクター作成から動画完成までを試してみました。
イラストはすべてChatGPTに頼ったため、実際にVTuberとして活動するにはイラストを描ける方と協力するか、あるいは私自身がイラストの技術を習得していく必要があります。とはいえ、さすがに一朝一夕には難しそうですね…。
Live2DにはWebブラウザ上で動作する形式に出力する機能もあります。
そのため、Webサイトのアニメーションやチャットボット用アバターなど、YouTube以外での活用も考えられます。
さらに、2Dイラストをアニメーションさせる技術なので、必ずしも人型キャラクターに限定されるわけではありません。
当社としても、より表現力の高い Web デザインを実現するために、Live2D をはじめとした各種技術を今後も研鑽していきたいと考えています。
【関連記事】
カテゴリー
月別アーカイブ
ブログ内検索
執筆メンバーについて
モーリー
Webデザイナー。
当サイトのデザインと管理も担当しています。
ナミー
Webディレクター。
本社制作部の紅一点。お客様に寄り添った提案を心かげています。
タカ
サーバーエンジニア。
Webサイトにとってサーバーは命、ネットワークは血液です。Webサイトの安定稼働のために日夜注力しています。
たっくん
ITアドバイザー
Webサイトの活用方法からオフィスのネットワーク整備まで、多角的にITの活用方法をご案内させていただきます。
ノーさん
制作部ディレクター。
業種を問わず多くのお客様を担当させていただきました。Webサイトのお悩み、活用方法などぜひご相談ください。
カン
制作部デザイナー。
制作部最年少の若手ですが、だからこそ生まれるアイデア・発想にご期待ください。