映画『すずめの戸締まり』の中で、閉じ師が後ろ戸を閉じる際に発する印象的なセリフをScratchを用いてテキストアニメーションにしてみました。

こちらのプロジェクトを作っていく中で色々と気づいたことがありましたので、忘れないよう備忘録もかねて簡単にまとめておこうと思います。

なぜこのプロジェクトを作ろうと思ったのか？

『すずめの戸締まり』を見ておりましたら、劇中の中で宗像草太が発するセリフが特に印象的に残りました。その後、Youtubeにて『すずめの戸締まり』を調べておりましたら、こちらの紹介動画が目に入ってきました。

このような音に合わせてテキストをアニメーションさせる手法は、最近のミュージックビデオなどにも多用されており、以前から興味がありました。色々な動画を見ていますと、Scratchでも作ってみたいな、という気持ちも湧いてきましたので、いい機会だと思いこのプロジェクトを作り始めました。

このプロジェクトを作る過程で気づいたこと

このようなテキストのアニメーションを調べてみますと、『モーショングラフィックス』『キネティックタイポグラフィ』『文字PV』などとも呼ばれており、動画編集の手法やデザインの一つとして色々な情報が出てきました。調べている最中に出てきた動画や情報を見てみますと、このようなアニメーションは等速移動ではなく、ほとんどがイージングという徐々に変化するアニメーションを使用していることがわかりました。

試しに、こちらは比較用としてイージングをしていない今回のプロジェクトです。比べて見てみるとよくわかるのですが、イージングをしていないと、少し無機質な感じと言いますか、あまり面白みのない動きになっているように私は思いました。なので、今回のプロジェクトには以前制作したこちらのイージング作成ツールを活用して、アニメーションを作り上げていきました。

■Simple Bezier Easing Tool 簡易ベジェ曲線イージングツール

イージングをただ適用すれば良いのではなく、アニメーションをさせたいテキストの意味に合うような動きになるように自分なりに調整するのに苦労しましたが、参考になる動画を見ながら、こんな動きにしてみたい、と頭で考えたアニメーションをプログラミングで再現していく作業はとても楽しかったです。また、このプロジェクトを作る中で得た経験から、テレビのコマーシャル映像やテロップの挙動などを見てみますと、意外と色んな所にイージングが使われているのだなぁ、と普段何気なく見ている景色の中にも面白いことが落ちていることに気づけたのも大きかったです。

このプロジェクトを作る上で苦労したこと

今回のプロジェクトは、プログラミングよりも細かな動きの微調整に私としては苦労しました。何回も何回も座標を変えたり、イージングの値を変更する作業が頻発するので、この辺りを負担がなく、どのように効率化していくかがテキストアニメーションを作っていく中での一番の肝となりました。色々と試していく中で、今回はGoogleのスプレッドシートに値を入力して、Google Apps Scriptでテキストファイルを出力して、出力されたテキストファイルをScratchのリストに読み込ませることで、何度も微調整する作業を少しでも簡単にできるように環境を整えていきました。

ふり返ってみますと、もう少し効率化できる部分はあったと思うのですが、このスクリプトは今回のプロジェクトのみで活用できる汎用性のない簡単なツールなのですが、少しでも面倒だな..、と思った作業を今回はGoogle Apps Scriptを用いて効率化してみる作業はとても勉強になりましたし、このような考え方はプログラミングの様々な場面で活かせるのではないかと感じました。

まとめ

テキストアニメーションのプロジェクトを作っていく中で、色々な参考になる動画、情報を調べていきますと、「こんなデザインがあるのか！」、「こんな風に情報を伝える手法があるのか！」、と色んな気づきを得ることができましたし、身のまわりにある映像や広告などにも、「あぁ、こんな見せ方があるのか！」、と普段何気なく見過ごしてしまいそうなものにも面白い何かがこんなにも転がっているのだなぁ、と視野が広がったような気がします。また、作業を効率化する上でScratch以外のプログラミングにも挑戦する機会ができ、一つのScratchのプロジェクトを作ることから、どんどんと違う分野にも広がっていく経験もとても勉強になりました。