Adobe Animateで口パク(リップシンク)アニメーションを作る方法を解説

動画制作時に“喋るキャラクター”を使えると、自分の代役としてだけではなく演出としても役立ちます。重要箇所をプッシュしたり、ツッコミを入れさせたりと、色々な使い所がありますよね。

そこで今回、音声読み上げサービス+キャラクターの口パク設定で、キャラクターが喋っているようなアニメーションを作ります。素材の用意から、Adobe Animateでリップシンク(口パク)を設定する方法まで、全て通して解説します!

Adobe Animateの操作は、初めて使う方でも出来るよう、最小限のアクションに留めています。Animate使ってみたいけど難しそう、日本語の教材が少ない、とお悩みの方も、ぜひチャレンジしてみて下さい。

口パク用パーツの用意

口パクをさせるためのキャラクター画像を用意します。

IllustratorやPhotoshopで作る場合は、動かしたいパーツごとにレイヤーを分けて作ります。
今回は口だけ、4種類と少なめの数で用意してみました。

そのまま .ai もしくは .psd など使用しているソフトのデータ形式で保存しておいてください。

リップシンク素材もある

口パーツを作るのが大変、絵は苦手だから困る、という場合は、口の形のパーツを複数用意されている素材を使うことも出来ます。
AdobeStockにも、以下のようなセット素材が結構あります。

hSet of the position of the lips when pronouncing words for the animation of the talking character

フリーのものでは、顔アイコンジェネレーターさんも活用できます。
目や口など色々なパーツを選択できるので、何パターンか作るとリップシンクや表情を作れます。

https://icon-z.com/

音声データの用意

キャラクターに喋らせたい音声データを用意します。

音声ファイルの用意 (音読さん使用)

今回はインストール不要で使用できる音声読み上げソフト『音読さん』を使用しました。
会員登録無しでも1,000字/月が使用できるので、何を使おうか検討中の方にも優しいサービスです。

音読さんのサイトを開きます。

https://ondoku3.com/ja/

下にスクロールダウンするとテキストエリアがあるので、欲しいテキストを入力します。

これは、口パクアニメーション用の読み上げテストです。
音声に合わせて口が動く、キャラクターを作ってみましょう。

音声・速度・高低はお好みで調整して下さい。

「読み上げ」ボタンを押すと、読み上げが実行されます。
(※読み上げボタンを押した時点で文字がカウントされ、利用可能文字数から引かれます)

読み上げを実行すると、上図のようにダウンロードボタンが表示されます。
わかりやすい名前をつけて、保存して下さい。

これで『音読さん』を使った、音声ファイルの用意が出来ました。

mp3ファイルがAnimateで読み込めない場合

今回の『音読さん』からダウンロードしたファイル、もしくはご自身で用意されたオーディオファイルをmp3形式にしていると、Adobe Animateで読み込めない場合があります。

これは、mp3ファイルのサンプルレート(サンプリングレート)が、Adobe Animateがサポートしているものと違っていることが原因です。44,100Hz(44.1kHz)のサンプルレートに書き換えるか、wavなどに変換すると読み込めるようになります。

ファイルのサンプルレートを44,1kHz標準系にする(11025,22050,44100,88200,176400)

引用元:https://forums.adobe.com/thread/2321242#.XRZPGoil_wQ.twitter

Adobeコンプリートプランの方であれば、Adobe Auditionを使うとサクッと変換できます。

Adobe Auditionを起動して、ファイル > 読み込み > ファイルを選択。
サンプルレートを変えたいファイルを開きます。

そのまま、上部メニューの編集から [サンプルタイプを変換] を選びます。

変換のウィンドウで、サンプルレートのプルダウンから44100(Hz)を選択
OKを押して、変換します。

サンプルレート44,100Hzに変換された状態で、ファイルを保存します。
上部メニューのファイル > 書き出し > ファイル を選択。

ご自身のファイル整理方法に合わせ、名前・保存場所を設定して下さい。
サンプルタイプが44100Hz表示になっていることを確認して、OKボタンで保存します。

これでサンプルレートの変更は完了。
書き出したファイルは、Adobe Animateで読み込めるようになっているはずです。

Adobe Animateで素材を読み込む

ここまでで素材は用意できました。
ここからは、Adobe Animateを立ち上げてクチパクのアニメーションを作っていきます。

一連の流れは、下記動画をご確認下さい。
動画の下には、テキスト・図解版の解説があります。

Animateで新規ドキュメントの作成

Adobe Animateを起動したら、新規ファイルからドキュメントを作成しましょう。
プリセットは、迷ったらHDもしくはフルHDを選んでおくと無難です。

作成ボタンを押して、新規ドキュメントを作成します。

名称未設定になっているので、この段階で名前をつけておきましょう。
保存のショートカットキー( Ctrl + S もしくは + S)もしくは上部メニューのファイルから保存して下さい。


以後、キリの良いところでCtrl + S もしくは + Sで上書き保存をしながら作業を進めると良いでしょう。

素材ファイルを読み込む

用意した素材ファイル(キャラクター、音声)をドキュメントに読み込みます。

ファイル > 読み込み > ステージに読み込み を選択して下さい。

まずはキャラクターのデータを読み込んでみましょう。

IllustratorやPhotoshopのファイルを読み込むと、以下のような画面が表示されます。
以下3つのチェックを入れて、右下の [読み込み] をクリックして下さい。

  • すべてのレイヤーを選択
  • オブジェクトを元の位置に配置
  • ステージサイズをIllustratorアートボートと同じサイズに設定

タイムラインが、Illustratorのレイヤーと同じような構造になっていたら成功です。
全部の口が表示されているので見た目は変ですが、気にしないでOK。

次に、音声ファイルの方も読み込みます。
タイムラインの下にある、アイコンで、新規レイヤーを追加。

追加したレイヤーをクリックで選択すると、ハイライトのような表示になります。
そのまま [ステージに読み込み] から、音声ファイルを開いて下さい。

デフォルトだと1フレームしかないので、音声が入ったかよくわからないですね。
タイムライン上部のスライダー(タイムラインビューのサイズを変更)で、表示する時間を拡大縮小できます。


中央にオレンジ色の線が見えていたら、音声が入っています。

音声レイヤーの設定

音声を入れたレイヤーの設定をします。
レイヤー名はダブルクリックで変更できるので、分かりやすいものにしておきましょう。

もう一つ、とても重要な設定があります。
音声レイヤーを選択した状態で、プロパティ > フレームを開いて下さい。

サウンドのグループにある、同期のプルダウンからストリーミングを選択してください。
これを忘れると、次のリップシンクで口を動かした時にズレてしまいます。

Adobe Animateで口パク(リップシンク)を設定する

1. 動かすオブジェクトをシンボル化する

Animeteではアニメーション素材として使う、動かしたいオブジェクトを「シンボル化」する必要があります。シンボルの中で、アニメーション(どう動かすか・どう切り替えるか)を設定していくイメージです。

今回動かしたいのは口部分ですので、口のパーツをシンボル化してみましょう。

口の形のパーツがあるレイヤーをすべて選択します。
複数選択はShiftキーを押しながらクリックで出来ます。
そして、右クリックをして、メニューから [レイヤーをシンボルに変換] を選択。
お好きな名前をつけ、種類をグラフィックにしてOKボタンで実行して下さい。

レイヤーの表示が、設定した名前(シンボル名)に変わりました。
これでシンボル化は完了です。

2. シンボルを編集

ライブラリを開き、アイテムの一覧を見て下さい。
作成したシンボル(口パク)の左側にあるアイコンをダブルクリックすると、編集できます。

シンボル化した、4つの口パーツが表示されました。
下3つのフレームを、最上部の列に一つずつドラッグして下さい。


出来たら、左上の←矢印でシーンに戻ります。

3. フレームを増やす

音声ファイルの長さ以上まで、フレームを増やします。

タイムライン上部のスライダー、最下部のスライダーを使って、9S~10Sと書かれているあたりを見つけて下さい。SはsecondのS、9秒~10秒地点です。

Shiftキーを押しながらクリックして、全レイヤーを選択します。
一番上(音声)の行で、9Sと10Sの間あたりをShiftキーを押しがながらクリック。

上アニメーションのように、フレームを示すマス目が真っ青になります。
この状態でタイムライン上部にある [フレームを挿入] のアイコン、もしくはF5キーを押してください。そうすると、一気に指定した位置までフレームが延長されます。

4. リップシンクを実行

いよいよリップシンク、音声に合わせて口を動かしてもらいましょう。
と言っても、ここからは簡単にできます。

口パク用のレイヤーを選択。
プロパティのオブジェクトを開いて下さい。
一番下に [リップシンク] のボタンがあるので、押します。

音に合わせて口の形を選択するウィンドウが表示されます。
今回のように厳密に作ってない場合は、適当に割り振ってください。
割り振りが終了したら、完了を押します。

Adobe Animateがオーディオを解析して、口の形を割り当ててくれます。

再生すると、以下のようになりました。
言葉に合わせて、口が動いていることが確認できます。

書き出す

Animate FLA ファイル(.fla)は、Premiere Proで直接読み込むことが出来ません。
Animateで口パクのキャラクターを作って、Premiere Proで合成したい場合は一旦書き出しが必要です。

書き出しはファイル > 書き出し から行います。
Premiere Proで使用する場合は [ビデオ / メディアを書き出し] を 選ぶのがオススメ。

書き出し設定のウィンドウが表示されます。
特にこだわりがなければ、初期状態のままで書き出し実行しても問題ありません。
下図、赤線で囲った2箇所だけ確認して下さい。

書き出しボタンを押すと、MediaEncoderが起動して書き出しが実行されます。
書き出しが完了すると、Animate上に以下のような表示が出ます。

書き出し先に指定したフォルダを見てみましょう。
mp4ファイルが書き出されていますね。

書き出したファイルは、普通の動画ファイルとしてPremiere Proプロジェクトに読み込んで編集して下さい。

まずは無料で14講座から始めましょう!

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
4月28日まで

募集 人数
100名 (残りわずか)

こちらもオススメ

×