2016.02.01(最終更新日: 2016.08.16) 企画

魅力的なアニメーションの12の原則

Vook編集部Vook編集部

INDEX

世界一のアニメーション企業と言っても過言ではない、ディズニー社で作られた「アニメーションの原則」をご紹介しながら、魅力的な動きを整理します。
長年の知見を経て作られた12の鉄則なので、少し意識するだけでも効果的に演出できるかと思います。

1. Squash(潰し) and Stretch(伸ばし)

重さや柔軟性のあるモノが、力を受けて押しつぶされたり引き伸ばされたりする様子。
高いところから落ちたボールは、重力や落下の衝撃によって潰れたり伸びたりします。

もう少し細かく見たい場合はこちら(英語)

2. Anticipation(予備動作)


メインの動作をする前の予備動作。
ユーザーが次に起こるアクションを予測できるようにしてくれるものです。

もう少し細かく見たい場合はこちら(英語)

3. Staging(演出)

伝えたいアイデアを、見る人が間違えようのないほど明確に示すこと。
最も注目させたい部分を明確にすること。

もう少し細かく見たい場合はこちら(英語)

4. Straight Ahead Action(逐次描き) and Pose-to-Pose Action(原画による設計)

Straight Aheadは、パラパラ漫画のようにアニメーションのカットを逐次描いていく手法。

Pose-to-Poseは、アニメーションの途中のポイント(キーフレーム)を決めておいて、その間を適切に補完していく手法。

CSSアニメーションなどでは基本的に後者になりますが、それに頼りきっていると「なんだかヘン」な動きができ上がることも多々あります。
そんな時はキーフレームの数や間隔を調整して、動きが自然につながるように調整しましょう。

とはいえ、こだわりだすと際限ない作業になるのでやりすぎには注意しましょう。

もう少し細かく見たい場合はこちら(英語)

5. Follow Through and Overlapping Action(あと追いの工夫)


いくつかのパーツを持つモノを動かす時に重要な考え方。
動いていたモノが停止するアクションを見てみましょう。

全体の動作を一斉に止めるのではなく、メインの部分がまず止まり、それに続いて細かいパーツが停止するという「あと追い」表現があると、動きがよりリアルかつ楽しげに感じられます。

もう少し細かく見たい場合はこちら(英語)

6. Slow In and Out(両端づめ)

加速しはじめはゆっくり、速度がついてからはすばやく、減速するときは再びゆっくりな動きになるようスピードを調整しましょう。

勢いが出て、活き活きとした動作になります。

もう少し細かく見たい場合はこちら(英語)

7. Arcs(運動曲線)

動作の軌跡が曲線を描くように意識すると、自然な動きになります。
逆に、機械や速いスピードで動くモノは直線的な動きです。

もう少し細かく見たい場合はこちら(英語)

8. Secondary Action(副次アクション)


メインの動作を引き立たせるような、さり気ないアクション。

もう少し細かく見たい場合はこちら(英語)

9. Timing(タイミング)

「気持ちいい」動きの条件。ある動作がスタートするポイントや、それが継続する時間。ある動作が適切なタイミングでスタートし、継続するように注意を払いましょう。

タイミングがズレていると、動きそのものがどんなに面白くても意味がなくなっていまいます。

また、何度も表示されるようなアクションの場合は時間を使いすぎないようにしましょう。
イライラの原因になります。

もう少し細かく見たい場合はこちら(英語)

10. Exaggeration(誇張)

動きの意図を分かりやすくするために、少し大げさに動かしてみましょう。

もう少し細かく見たい場合はこちら(英語)

11. Solid drawing(実質感のある絵)


私たちが現実世界で目にするモノには、体積(大きさ)と質量(重さ)があります。
それらを意識してデザインすると、より自然で見ていて気持ちのいい動きになるでしょう。

もう少し細かく見たい場合はこちら(英語)

12. Appeal(訴える力)

見る人の心に訴えかけ、引きつけるものをつくりましょう。
コンテンツを魅力的に見せるために形や色や動きをデザインし、世界観をつくり上げていってください。

もう少し細かく見たい場合はこちら(英語)

長尺にかぎらず、gifなどコマ送りの動画にも応用できそうなテクニックですね。
モーショングラフィックスを作る時のポイントとして活用してみてはいかがでしょうか。

2016.02.01(更新日: 2016.08.16) 企画

記事のシェア

Vook編集部

Vook編集部

more

最新情報をお届けします

@VookJp Vook #動画制作ノート
Vook編集部

Vook編集部

more

記事のシェア

  • Facebookでシェアする
  • Tweetする

映像制作に関わる人のための ポートフォリオ共有サービス

イベント情報