アニメーションの世界を解き明かす！考え方と作り方

はじめに

動画クリエーター兼コーダーの川島です。

映像やウェブサイトにアニメーションを実装するとき、「どういう動きにすれば良いのか」「どんな動きになれば正解なのか」と悩んだ経験はありませんか？

今回はcssアニメーションを例に挙げながら、アニメーションの「考え方」に焦点を当て、僕なりの思考法と実践法をお伝えしたいと思います。
制作アイデアの一助となれれば幸いです。

目標は「自然な動き」の再現

アニメーションを制作する際のスタートラインは「自然な動き」を目指すことから始まります。
ここでいう「自然」とは、地球の物理法則に則った動きのことを指します。

「自然な動き」を追求することは、いわゆる「リッチなアニメーション」を作ろうとすることとほぼ同義であると言えます。
何故なら、アニメーションにおける「リッチさ」とは、「表現が豊かである」ことを指し、「豊かな表現」とは、基本的に「自然な動きの再現」であるからです。

もちろん、すべてのアニメーションがリッチであるべきだという話ではありません。チープなアニメーションが相応しいケースも多くあります。
しかし、チープさを表現するためにも、その逆の表現を探求する必要があります。

まずは自然な動きの再現に注力し、リッチなアニメーションの実現を目指してみましょう！

大切なのは物体としてのイメージを膨らませること

キーワードは「質感」と「動力源」

自然な動きを再現するとなれば、あなたがアニメーションさせようと思っている要素にについて、この世界に存在する物体としてのディテールを持たせる必要が出てきます。
アニメーションさせたい物体はどんな質感で、どんな速度で動き、その動力源はなんなのか。

ずばり自然なアニメーションを実現させるためのキーワードは「質感」と「動力源」です。
動作の"理由"はそのふたつの要素によって制御されています。

要素を現実の物体として捉え、動きの想像をする

例えば、手に持った小さなりんごをリビングの床に落としたとします。
この場合の質感はりんご、動力源はりんご全体にかかる重力です。

では早速、りんごという物体を捉え、その後の動きを想像してみましょう。

りんごにはある程度固さがあり、表面は滑らかで丸みを帯びています。落ちた先がリビングの床なのであれば、1回程度僅かにバウンドしたあと、数センチ転がっていくでしょうか。
さらに、動力源である重力のかかり方を想像してみると、
りんごの落下速度は手を離した瞬間が一番遅く、そこから徐々にスピードが上がっていき、床に着地する直前が最も速度が出ているはずです。

このように、落ちていくりんごの動きの想像をすることは誰にでも容易くできるはずです。
それは、「手からりんごを落としたらどう動くか」と想像するから容易いわけですね。

つまり、今あなたがウェブ上で動かそうと思っている要素に対しても、同じように「質感」と「動力源」を与えてあげれば、アニメーションを想像することはいくらか容易くなるはずなのです。

cssアニメーションによる具体例

図形を用いた単純なホバーアニメーションを例に、実際にアニメーションの質感と動力源について検証してみましょう。

サンプル1：移動するまんまる

このまんまるの動力源はどこでしょうか。

まず速度に注目してみます。最初が最も速く、徐々に遅くなっているので、このまんまるは、ピッチャーが投げた投球のように、後ろ（左側）から強い力によって押し出されているように見えます。そう仮定した場合、動力源は「ピッチャー（人）の腕力」になります。

次に、まんまるの質感に注目してみます。円の形状は微塵も変化していないことから、このまんまるの質感は鉄球のようにとても硬いのかもしれません。
そして、もしこれが鉄球なのだとしたら当然重さもあるはずです。となれば、人の腕力をもって押し出したとき、動き始めからこんな猛スピードが出るとは思えません。
ここに「自然な動き」としての違和感を感じるので、スピードを調整し質感（鉄球）との整合性をとってみます。

最初と最後だけスピードを遅くし、アニメーション全体の時間を1.5倍に変更しました。あと黒くしてみました。
質感に対し違和感のないスピードを設定したことで、このまんまるを「鉄球」として捉えた場合の重さや硬さなどの質感が伝わりやすくなり、「自然な動き」という観点での整合性が保たれます。

では今度は、スピードは変えずに質感を調整して整合性をとってみようと思います。

質感をゴムボールのように柔らかく見えるよう調整してみました。
出だしの最高速に耐えられずまんまるの形状は変形するも、スピードが緩んでいくにつれて元の形状を取り戻していきます。
このようにすれば、スピードに対し違和感のない質感の表現に近づきます。

サンプル2：大きくなるまんまる

続いて、まんまるが大きくなるアニメーションを作成してみました。
このまんまるはどういう質感をもっていて、どんな動力源によって大きく変化させられているように見えますか？

今回は、このまんまるを大きくした動力源を「反動」と捉えてみました。質感は適度に反発力のあるゴムボールのようなイメージです。
手でゴムボールをぎゅっと握り込み、その反動で物体が大きくなる想像をしたので、握り込んでまんまるが小さくなっている間、僅かに振動させてみています。

力を加えた物体に伴う結果＝アニメーション

このように、アニメーションとは動力源によって力が加えられた物体に伴う結果であると言えます。
物体としてのディテールを詰めていけば、必然的に動きはより自然に変化するようになり、結果的としてリッチなアニメーションとして再現されるのです。

どうすれば自然な動きに近づくか、どうすれば自分のイメージにより近付くかを分析しながら制作していきましょう。

アニメーションを設計するための具体的なヒントとテクニック

アニメーション要素を細分化する

ウェブサイトを作成したことがある方なら馴染みのある考え方だと思いますが、アニメーションにおいても機能の細分化と共通化はとても大切です。

例えば、前項で挙げた以下のサンプルを例にとると、

このアニメーションは

• 振動（縦方向）
• 振動（横方向）
• 回転&サイズ

上記3つの要素変化の組み合わせによって実現しています。

ひとつひとつの動きをバラし、独立して動作するものの組み合わせてひとつのアニメーションを作るようにすると、より自然で複雑な動きを作ることができます。

また、こうして動きの種類を細分化しコンポーネント化しておけば、それぞれのアニメーション要素を再利用することができるので、組み合わせ方を変えれば簡単に全く別の動きを作ることができるようにもなります。

※上記の例の回転とサイズは、今回の例において再利用性がなく、動作のタイミングを一致させたかったので同一に設定していますが、本来バラして考えるべきだと思います。

サイト全体のトンマナを意識する

ひとつひとつのアニメーションパーツは、そのウェブサイトを構成する小さな単位に過ぎません。どんなアニメーションが相応しいかは、当然実装先のウェブサイトによって異なります。
アニメーションが必要かどうかも含め、サイト全体のデザインをよく観察しアニメーションのディテールを詰めていきましょう。

そのとき、ウェブサイト全体に対しても、質感と動力源を想像することがとても大切です。

例えば、サイト上に波のような飾りがあったとき、その質感は水のようなものなのか、植物の蔦のようなものなのか…という具合に、デザインの抽象的なイメージを具体的に想像してみるのです。
細かな飾りを単なる模様として捉えるのではなく、自然に存在する物質として変換することができれば、必然的に動きのイメージも湧いてくるはずです。

まとめ

アニメーションとはそれぞれの要素が生み出した結果であって、本質ではありません。
動かし方だけに捉われず、その動作を生んだ原因や、そこに至るまでのストーリーを想像することがとても大切です。
そしてそれを想像することこそが、アニメーション制作の楽しさでもあります。

それでは、良き制作ライフを！