Character Animater 勉強の軌跡① | 初めて起動するところから2人のかけ合いを作るまで

「ゆっくり動画を作ってみて」

はじまりは弊社社長からの指令

弊社はWEB制作会社。クライアント以前の自社サイトを作りたいけど……と悩んでる層に、WEBサイトの作り方やSEO対策について動画を発信し、まずは気軽に見てほしいとのこと。

ゆっくりというと私的にはAAで馴染みがあったあの饅頭キャラ。こういう形で関わることになるか……。
ゆっくり動画の作り方および商用利用可能なのか調査するも、商用は厳しいという結論に。元々あの饅頭キャラは二次創作、同人のお遊びみたいなもんなんで。。
あれがあの絵柄のルフィやミッキーマウスだとして、会社の動画に使おうと思う?っていう。

ゆっくり動画が厳しいなら、Adobe CCと自分のイラストで似たような動画を作れるかな?というところから、Adobe Character Animater(以下、Ch)を触ってみることに。
Chの名前はよく聞いてたけど、ついに自分で触ることになったか〜〜。

私はマカーです

Windowsユーザーならゆっくり動画制作は「ゆっくり MovieMaker」一個で完結できるらしい。
が、MacユーザーはAdobeを駆使せねばならぬらしい。

以下の動画にて、Macでゆっくり動画を作る方法を解説している。まだ何が何だかさっぱりだけど、そのうち理解できるようになるっしょとひとまずブックマーク。

さぁ、手を動かそう!

Adobe CCを契約してるので、普通にChをダウンロードして起動。
Adobeのアプリを初めて起動したときに毎回思うんだけど、うん、分からん。でも Adobe After Effectsとそんな違いかな?

Google検索しまくり


本家Adobeの紹介ページから行きますか。うん……ちょっと…キャラデザが……。アメリカのセンスよね。


たどり着いたのは、めがねch(チャンネル)。
基礎的なところから丁寧に教えてくれる。イラストのタッチもかわいいし、めがねさんの説明も分かりやすい。声も落ち着いてて視聴していてストレスがない。そういう部分でも参考になる。

・まず動画をじっくり見る
・実際にやってみる
・うまく行かないとこは再度動画をじっくり見る
と、トライ&エラーで一歩ずつ。

大まかな流れ

  1. Photoshop / Illustrator……素材となるキャラクターのデータを用意する
  2. 合成音声の用意 or 自分で喋る
  3. Character Animater……声に合わせてキャラを動かす
  4. Premiere Pro……字幕を付けたりキャラ以外の要素を配置したり

1. 素材となるキャラクターのデータを用意する

Photoshop、Illustratorどっちでもいいらしい。
私はめがねさんの作業を見ながら覚えたのでPhotoshopで用意するのに慣れちゃった。

まず、イラストの元データはIllustratorで用意。
それをPhotoshopでパーツごとに各レイヤーに分けていって読み込み用データとして整える。
各パーツのレイヤー名は正規の英語名にするとChに行ってからスムーズなんだけど、今の段階では日本語で。ここはおいおい覚えよう。

口の動きは英語の発音ごとに14パターン用意できるんだけど、日本語でそんなパターンいらんやろ…ということで数パターンだけ用意する人が多いみたい。
今回は勉強なので、全14パターン作ってみた。
日本語音声に合わせてみることで、英語での口の動きと日本語での口の動きと、やっぱ違いがあるので、そこを微調整していく。

発音ごとの区別については以下の記事が詳しかったです。

イラスト素材は私がStockイラストで販売しているものをベースに使っています。
顔の向きは今回正面だけでいいや。

2. 合成音声の用意

Macでは以下がおすすめされてたので、素直にこちらを使用。

操作に悩むことなくサクッと合成音声を作成できました。ちな、商用利用はライセンス購入が必要。

ボイスチェンジャーは、アプリの選び方が悪かったのか全く使えず、いやそもそも自分の音声をどうこうするつもりもなかったのでもう知らん。

3. 声に合わせてキャラを動かす

1で作成したデータをChに読み込み、各レイヤーにタグ付けする。

この段階で、表情トラッキングで動く。すごい歪んでるけど、ひとまず動かせたことで感動✨

おかしいところはめがねチャンネルの動画を繰り返し見て、何の操作を飛ばしていたのか確認し修正。

試作2発目の段階で、音声データに合わせて自分の顔を動かそうとしたけど、まぁ無理。そして音声もPC上で流せばマイクで拾ってくれるかな〜〜と浅はかな考えでやって失敗。
古いアナログ世代っぽい失敗に感じ入るなど。
(昔は、ヒットソングをTVの歌番組の放映中に、TVのスピーカー部分にラジカセを用意してテープに録音していたんです。今だと動画配信中に親に「ご飯だよ〜〜!」と呼ばれて怒る感じ? 知らんけど)

当然Chの機能で音声データとキャラクターデータの口パクを同期させることができるのだ〜〜!というのを、試作3発目で覚える。

4. 字幕を付けたりキャラ以外の要素を配置したり

Premiere Pro!(以下、Pr) これもダウンロードするところから。
動画編集会社が使うやつじゃん。わ〜〜💦

まずはGoogleで「Premiere Pro 字幕 付け方」で検索するところからw
画面下に変な黒帯が出来てしまった。データ読み込みの設定がどうこうらしい……。

最初の数本はCh→Prの流れだったけど、セリフが複雑・長くなる場合は、先にPrで合成音声データを間とか調整→Chで動き→Prで字幕等、という手順になる。

After Effectsでもそうだったけど、最後に動画としてmp4に書き出す際はEncoderに送ってそこでデータを変換をするというワンクッションが発生する。

一歩先へ

基礎は「めがねチャンネル」で学んだ。
トリガーを使ってのパペットの表情切り替え、腕の動きもやってみた。

でも腕の動きとかやっぱ気になるので、
AdobeでもChの講師をしている大城さんのYoutubeチャンネルを参考に。


ケースごとに動画が用意されていて、今自分が覚えたいケースをピンポイントで視聴して学習できて最高。
腕を一本の棒をむりくり曲げる方法じゃなく、上腕、前腕とパーツ分けして関節で動かす方法を学んだ!

このあたりで、初期に見ていた

この動画も何がどうなってるのかようやく理解できるようになった。めちゃくちゃ参考になる〜〜〜!

大体初級レベルのキャラの動かしはできるようになったので、上記の動画を参考に2人のかけ合いも作ってみた。

まずテキストで台本を用意し、音声データに付ける名前も書いておく。

▼B-01, G-01
どーもー、こんにちは!

▼B-02
ふたりになったね
▼G-02
ねーー
▼B-03
やっぱ、かけあいでさ
▼G-03
きゃっきゃしたいよね
▼B-04
ねーー
▼B-05, G-04
ふふふ

キャラごとに一行ずつ合成音声を用意し、Prでまずタイミングや間を調整。
調整後、キャラごとに音声データをまとめて書き出し、Chで動きを付ける。
またPrに戻って2人のデータを一緒にする。

台本の重要さだったり、キャラの動きのタイミングだったり、気を配る要素が一気に増えてきた。
腕ぶつかってるとか、2人とも視線そらしてんじゃんとか、字幕付けるの忘れてるとか、そもそも歪んでんじゃん、とか、まぁはい。次回への宿題ということで。

ここまで作って、言うて顔や体の細かい動き、そんなにいらないなと。

最初は「動いてすご〜〜い✨」と感動してたが、コチャコチャ動かれるとうるさく感じる。ゆっくり動画やアニメもそうだけど、的確なパターンを数個用意しとけば十分よね。
Vtuberとかでキャラがメインってんなら生きてるような動きも効果的なんだろうけど。

こういうことも人から言われて「そうなんだー」と鵜呑みにするんでなく、自分で経験し思い至るのが”学び”ということで。

まずは初級編クリア!

と勝手に自分で自分を褒めてみたくらいにして。
実際はこのキャラの動きに、背後で素材をどうこうして一本の解説動画になるんだけど、まずは進歩したことを喜ぼう。

私はイラスト作成したり動画用素材を作成したりもするので(以前はAfter Effectsを勉強してたけど)今回Chを触ったことで、動画で動かす場合のパーツ作りについても理解が深まった。

今後の参考サイト

▼素材データのレイヤーを英語化する

▼OKサムライ