2020.07.07 (最終更新日: 2020.07.07)

【全書体対応!】文字が書かれていくアニメーションを作る画期的な方法

★はじめに

文字がだんだんと書かれていくアニメーションの作成方法はいろいろありますが、今回は全書体で使える方法を紹介したいと思います。

例えばクライアントから「にんげんだもの(あいだみつお)」のような、なぐりがき筆文字で書かれた画像を渡されて「これをだんだん書かれていくようにアニメーションしてください」と軽くオーダーされる場面、ありますよね。たとえばこんな文字とか。

最もポピュラーである、ラインストロークをマスクにして作る方法だと、書き順にそってストロークエフェクトを細かく調整する必要があったり、文字が交差する場面で完全に処理できなかったり、時に文字をレイヤーに細かく分けて、どんどん複雑化していったり、けっこうストレスです。ましてや筆文字など不可能に近く、ラインストローク手法は書体を選ぶというジレンマも。

そんな折、映像業界の諸先輩方からアニメーションで古来からある手法「消し込み」という方法を教えてもらい、これを応用すると、どんな書体でも簡単に「書かれる文字アニメ」が作れる事がわかりました。簡単に言ってしまえば、その文字をだんだん消していって、その過程を1コマ1コマ記録し、あとから逆再生する、というもの。

なーんだ、と思われた方もいると思いますが、このある意味原点回帰の方法をデジタルに転用すれば、場合によってはかなりお手軽に、しかもどんな書体でも「書かれる文字アニメ」が作れるので、個人的には目から鱗で、画期的な方法と思っています。

それではさっそく具体的な方法を紹介します。Photoshopなどの一般的な画像ソフトで連番を作ってAeなどに読み込み、逆再生してもいいのですが、今回はiPadとApple Pencilを使って、かなり効率的に「消し込み」を行う方法を紹介します。

使うアプリは「FlipaClip」という、手書きアニメーションを簡単に作れる無料アプリです。なお、ガチで使う場合は有料版のほうがオススメなので、後に紹介します。

1)画像をiPadに転送

まずは元となる文字をjpgやpngなどの画像にして、iPadのカメラロールに転送しておきます。自分はMacなので、AirDropを使って転送しています。

2)FlipaClipのプロジェクト設定

FlipaClipを立ち上げ、画面左下の+マークをクリックし新規プロジェクトを作ります。そこで任意の名前を付けて、背景色、解像度、フレームレートを選びます。黒文字の場合、背景色は白、白文字の場合、背景色は黒にしておきます。今回の作例では黒文字だったので、背景色を白にしました。

解像度は今回の作例ではFullHDを選びます。(なお、FlipaClipの解像度はFHD止まりっぽいです。)「解像度が大きいと動作が重くなる可能性があるよ」というアラートが出ますが、消し込み程度の処理で重くなる事はまず無いので問題ありません。

フレームレートは基本的に、今作っている映像のフレームレートに合わせておくのが良いと思います。30fps(29.97fps)なら30fps、24fps(23.98fps)なら24fpsを選んでください。今回の作例では30fpsを選びます。編集時にタイムリマップ等でスピードは調整することになると思います。

以上を設定したら「プロジェクトを作成」をクリック、ホーム画面上部の「プロジェクト」に新しいキャンバスが出来上がるので、それをダブルクリックするとキャンバスが開きます。

3)FlipaClipに文字の画像を追加する

キャンバス右上の縦の「…」を押し「画像を追加」「フォトライブラリ」から文字画像を選択してキャンバスに呼び込み、大きさや位置を調整、基本的にキャンバスいっぱいのサイズにして配置します。(合成時に縮小すれば良いので)キャンバスの任意の場所を一度クリックすると大きさと位置が確定。

4)消しゴムツールを選択

キャンバス左端のツールボックスから「消しゴム」のアイコンを選択。するとサイズやフェザー(ぼかし)等の設定が出てくるので、何度か文字を消してみて作業しやすいサイズを選びます。フェザーは限りなく「0」で良いですが、このあたりは好みで決める感じで。消しゴムの大きさが決まった段階で、キャンバス右上の取り消しボタンで、最初の文字の状態に戻しておきます。

なお、iPadの画面を二本指でピンチすると画面が拡大され、そのまま二本指でキャンバスの位置も調整できるので、自分が一番作業しやすいサイズにします。元のサイズに戻したい時は、キャンバス右上の「画面をFit」アイコンをクリックします。

また、消した時に、うっすらと消した部分が残りますが、これは「オニオンスキン」というアニメーション作成ソフト定番の機能です。個人的には消し込みにオニオンスキンは邪魔なので、機能をオフって作業します。この機能をオフるには、キャンバス右上の縦の「…」から「オニオン」をOFFにします。

5)コマを増やしてみる

キャンバス下の小さなサムネイルを「長押し」して、ゴミ箱の隣の「コピー」アイコンをクリック。するとさらに左右に「1コマ増やしてペースト」のアイコンが現れるので、右側のアイコンをクリック。するとコマが増えて、コピーした画像がペーストされます。

6)あとはコマ増やして消し込んでいくのみ

基本的には5)を繰り返しながら、文字の一部を消してはコピーして、1コマ増やしてペーストしていきます。もちろん重要なのは、すべて逆の動きになるので、どこから消していけばいいか、頭で書き順を逆シミュレーションしながら作業します。

あとは、消してはコマを増やしてまた消していく、この動作の繰り返しです。一見果てしない作業のように思えますが、コツとしては、文字の【書き始め】と【書き終わり】を若干刻んで消し込んでいき、あとは大雑把に消して構いません。むしろその方が自然な動きになります。

7)簡単に再生してみる

コマがある程度増えた段階で、キャンバス下の複数のコマのサムネイルをスーっとドラッグすると、簡易的に再生することができます。動かす方向によっては逆再生もできるので、その場でウマくいっているかどうか、すぐに確認することが出来ます。

8)書き出してPCに転送

一通り作業が終わったら、キャンバス右上の縦の「…」を押し「ムービーを作成」を選ぶと書き出し設定が出てきますが、今回の作例ではYouTube(1080p)のMP4を選びます。h.264で書き出されますが、白黒なので、あとで画像処理で白い部分をキーイングして合成すれば良いと思います。

なお、有料版にすると、PNGシーケンスも選べるようになります。こちらはおそらく初期設定で背景を「透明」にしておけば、アルファチャンネル付きで書き出せると思います。(自分は試していません)

書き出すと、一旦FlipaClipのホーム画面下部の「ムービー」に書き出された映像が出てくるので、プロジェクト名の右にある縦「…」から「シェア」アイコンをクリックして「自分のデバイスに保存する」を選んで一旦カメラロールに保存します。そこからPCに転送します。(自分の場合はAirDropにて転送)

9)Aeで合成(Prや他の編集ソフトでも可)

あとは各種編集ソフトで文字を合成します。今回の作例では背景を白、文字を黒にしているので、基本的に白をキーイングします。今回の作例では、最終的に白文字で合成したかったので、AfterEffects上で一旦チャンネルを反転し、「Knoll Unmult」というプラグインで背景をキーイングしました。もしくは加算やスクリーンで乗せてあげるのでもよいでしょう。FlipaClipを有料版にすれば、アルファチャンネルを埋め込んだpng連番を書き出せるようなので、本格的に作業するのであれば有料版のほうが良いかもしれません。

あとは、タイムリマップで逆再生し、さらにスピードも任意に変更し仕上げます。すると、こんな感じで出来上がります。

★FlipaClipを使うメリット、デメリット

Psや他の画像ソフトでも同じことはできますが、FlipaClipを使えば、その場で簡単に再生して動きを確認できたり、書き出してしまった後でも「ああ、ここもう少し刻んで消しておけばよかった」と思ったら、プロジェクトを開き、その部分のコマを増やして修正し書き出し直すだけで済みます。

iPadでイラスト制作といえば、Procreateという神アプリがありますが、こちらでも近いことができるとの事なので、もしProcreateをすでに持っている方であれば、そちらで作業してみてもいいと思います。

デメリットとしては、FHD止まりなので、4K以上を望む方は、Ps使うか、Procreate?なら4Kもいける?未確認ですが、他のソフトを使うしかありません。

★継続的に作業するなら有料版がオススメ

無料版のままだと、事あるごとにCMが流れたり、書き出す画像の左下に「FlipaClip」とウォーターマークが入ってしまうので、何回か試してみて、ちゃんと使おうと思った場合は有料版を買ってしまったほうが早いと思います。なお、ウォーターマークを消すだけであれば370円、全部入りを買っても730円で、サブスクでなく買取です。

以上です!Apple Pencilでトントンパという感じで消していくリズムが生まれると、無心に作業に没頭でき、文字の複雑さにもよりますが、今回のような4字熟語程度であれば、10分〜15分程度で完成します。

個人的には、ラインストローク調整のストレスから解放され、こちらのほうが素早く作業できると思っています。しかもこの方法なら書体はなんでも来いです。文字だけでなく、いろんなものに応用できる可能性もあります。

>動画で見たい方はこちら

今回の内容はYouTubeにアップしています。こういったネタを時々アップしていますので、よかったらご覧ください。ついでにチャンネル登録してくれると、とても嬉しいです!

9クリップする
クリップしておくと
あとからいつでも
見返したりできます。

コメント

  • まだコメントはありません