Adobe Animateで口パク（リップシンク）アニメーションを作る方法を解説
動画制作時に“喋るキャラクター”を使えると、自分の代役としてだけではなく演出としても役立ちます。重要箇所をプッシュしたり、ツッコミを入れさせたりと、色々な使い所がありますよね。
そこで今回、音声読み上げサービス+キャラクターの口パク設定で、キャラクターが喋っているようなアニメーションを作ります。素材の用意から、Adobe Animateでリップシンク（口パク）を設定する方法まで、全て通して解説します！
Adobe Animateの操作は、初めて使う方でも出来るよう、最小限のアクションに留めています。Animate使ってみたいけど難しそう、日本語の教材が少ない、とお悩みの方も、ぜひチャレンジしてみて下さい。
口パク用パーツの用意
口パクをさせるためのキャラクター画像を用意します。
IllustratorやPhotoshopで作る場合は、動かしたいパーツごとにレイヤーを分けて作ります。
今回は口だけ、４種類と少なめの数で用意してみました。
そのまま .ai もしくは .psd など使用しているソフトのデータ形式で保存しておいてください。
リップシンク素材もある
口パーツを作るのが大変、絵は苦手だから困る、という場合は、口の形のパーツを複数用意されている素材を使うことも出来ます。
AdobeStockにも、以下のようなセット素材が結構あります。
hSet of the position of the lips when pronouncing words for the animation of the talking character
フリーのものでは、顔アイコンジェネレーターさんも活用できます。
目や口など色々なパーツを選択できるので、何パターンか作るとリップシンクや表情を作れます。
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
音声データの用意
キャラクターに喋らせたい音声データを用意します。
音声ファイルの用意 (音読さん使用)
今回はインストール不要で使用できる音声読み上げソフト『音読さん』を使用しました。
会員登録無しでも1,000字/月が使用できるので、何を使おうか検討中の方にも優しいサービスです。
音読さんのサイトを開きます。
下にスクロールダウンするとテキストエリアがあるので、欲しいテキストを入力します。
これは、口パクアニメーション用の読み上げテストです。
音声に合わせて口が動く、キャラクターを作ってみましょう。
音声・速度・高低はお好みで調整して下さい。
「読み上げ」ボタンを押すと、読み上げが実行されます。
（※読み上げボタンを押した時点で文字がカウントされ、利用可能文字数から引かれます）
読み上げを実行すると、上図のようにダウンロードボタンが表示されます。
わかりやすい名前をつけて、保存して下さい。
これで『音読さん』を使った、音声ファイルの用意が出来ました。
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で使用する場合は [ビデオ / メディアを書き出し] を 選ぶのがオススメ。
書き出し設定のウィンドウが表示されます。
特にこだわりがなければ、初期状態のままで書き出し実行しても問題ありません。
下図、赤線で囲った２箇所だけ確認して下さい。
書き出しボタンを押すと、MediaEncoderが起動して書き出しが実行されます。
書き出しが完了すると、Animate上に以下のような表示が出ます。
書き出し先に指定したフォルダを見てみましょう。
mp4ファイルが書き出されていますね。
書き出したファイルは、普通の動画ファイルとしてPremiere Proプロジェクトに読み込んで編集して下さい。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
12月8日まで