こんにちは。アニメチームのKです。
今回は「アニメーションの12原則」と「Live2DやSpineなどのツールアニメーション」を繋げる知識についてご紹介します。
ポートフォリオのススメシリーズの記事でもアニメーションの12原則は大切とお話しましたが、
実践として活用できる知識をお伝えしてまいりますのでお手元で是非試してみてください!
ポートフォリオのススメ-2Dアニメーション-シリーズはこちら
補足
「アニメーションの12原則」にはグラフを扱う際に関係のない要素も含まれています。
本記事ではアニメーションの12原則と、グラフアニメーションの前提知識を解説します。
第二回で具体的なアニメーションの12原則とグラフの作り方の解説を行い、
第三回ではグラフには関係ないものの、アニメーションを制作するうえで重要な残りの原則をご紹介していきます。
目次
アニメーションの12原則とは?
アニメーションについて学び始めると必ずと言っていいほど見かける「アニメーションの12原則」
これはウォルト・ディズニー・スタジオのアニメーター2名によって提唱された、アニメーション制作における基本原則です。
その後、アニメーションの13の原則や、アニメーションの28の原則などにアップデートされたりしています。
<アニメーションの12原則>
- スクアッシュ&ストレッチ -Squash and Stretch
- 予備動作 -Anticipation
- 演出 -Staging
- ストレートアヘッド・ポーズトゥポーズ -Straight Ahead Action and Pose to Pose
- フォロースルー・オーバーラップ -Follow Through and Overlapping Action
- スローイン・スローアウト -Slow In and Slow Out
- 運動曲線 -Arc
- 副次アクション -Secondary Action
- タイミング -Timing
- 誇張 -Exaggeration
- 立体感のある絵 -Solid drawing
- アピール -Appeal
アニメーションの12原則は下記のサイト・書籍から引用しています。
【アニメーションの12の原則】 命を吹き込むアニメーションの基礎を学ぶ!
ディズニーアニメーション 生命を吹き込む魔法 ― The Illusion of Life ―
なぜアニメーションの12原則が基礎として重要視されるのか?
過去に公開したポートフォリオの記事でも、アニメーションの12原則が押さえられているかチェックしているとお話させていただきました。
実際にアニメーション制作の現場にいると、
アニメーションの12原則を学ぶよりも先に実際に手を動かして自然と出来るようになった…という方も結構いらっしゃいます。
それでもアニメーションの12原則は大切、という声があるのも事実。
アニメーション制作の現場では、一人で完結させるのではなく、
複数人で認識を揃えながら制作を行うケースが多いです。
そこで共通言語となってくれるのがアニメーションの12原則を学ぶメリットの1つなのだと思います。
これからアニメーション制作の知識を身に付けたい方はもちろん、
会社やチームとしてアニメーションを作りたい、という方は学んでおいて損のない知識になるかと思います!
Live2D・Spineとアニメーションの12原則の関係
Live2DやSpineでもアニメーションの12原則が活用できます。
ツールの特性上、グラフアニメーションを使用し再現していくため、
今回の記事ではアニメーションの12原則とグラフアニメーションを繋げるハウツーをご紹介。
グラフの形がアニメーションの動きとリンクするとどんどん楽しくなっていきますので、
是非読みながら試していただけたらと思います。
グラフアニメーションとは?

グラフアニメーションはカーブアニメーションとも呼びますが、
3DCGや2DCGでアニメーションを制作する際に用いられます。
一連のキーフレームをカーブで繋ぐことでタイミングをコントロールしつつ、シームレスなアニメーションを制作する事ができます。
「Live2Dのアニメーションモード」や「SpineのANIMATEモード(アニメ化)」画面で使用できる、
「グラフエディタ」を使用して作るアニメーションを本記事では解説していきます。
カーブの形と使い方
カーブの形と活用例をご紹介します!
カーブの形は3種類です。
ベジェ・リニア・ステップの3つの違いを知っておくと、作品に応じた使い分けが出来るようになります。
1例として棒人間にバイバイの動きをさせたモーションを、それぞれのカーブで再生したものを並べてみました。
ステップカーブは紙芝居の様に画像を切り替えたような見た目になりわかりやすいですね。
リニアとベジェはパッと見は似ているのですが、特に注目していただきたいのが降っている右腕の動きです。
右・左・右…と動きの向きが変わる際の滑らかさに大きな違いが出ているのが見て取れますでしょうか。
リニアとベジェもグラフの形状の違いがモーションに出ますので、それぞれの違いを解説していきます。
リニアカーブ
直線的なグラフが特徴的なのがリニアカーブです。
機械などロボットのような動きや、エフェクトなど無機物の動きに使用されることが多いカーブです。
ベジェカーブの動画と見比べて見ていただくと、特に動きの向きが変わる際の滑らかさが違うのが見て取れるかと思います。
リニアカーブは、キーとキーの間を「等速」で再生してくれるのが特徴です。
入り抜きで速度調整がかかるベジェとは異なり、同じ速度で動き続ける点が機械やエフェクトの表現に使いやすい所ですね。
もちろん、表現によってはリニア以外のカーブが適している場合もあります。
制作の際はカーブの形を変えてみたり、リファレンスを観察するなどで適したカーブを探してみてください。
ベジェカーブ
滑らかな波の形が特徴的なのがベジェカーブです。
生き物のアニメーションの制作では、ベジェカーブを使用する事がほとんどです。
アニメーションの12原則の中では「スローイン・スローアウト -Slow In and Slow Out」がまさにベジェカーブで表現する領域です。
動き出しはゆっくり、中ほどで早くなり、動き終わりもゆっくり止まる動きがキャラクターの動きを表現するのに適しています。
タイミング調整でタメツメもつけられるので、まずは生き物はベジェカーブで作る、を覚えてみてください。
ステップカーブ
階段状のグラフが特徴的なのがステップカーブです。
ステップカーブを使用すると、瞬時の素材切り替えや、合間のフレームを飛ばすことができます。
動きの速いもので、特に目に留まらないほどの速さを表現する際に重宝します。
ステップカーブを使った素材の切り替えは、適切なタイミングで行うと違和感なく自然なモーションに仕上げる事が出来ます。
素材を切り替えた方が効率的に制作できるときにも便利なカーブです。
まとめ
今回は「アニメーションの12原則」と「グラフアニメーション」を紐づける前提知識についてご紹介しました!
実制作だけでなく、複数人で制作する際の共通言語としても便利な点も伝わったかと思います。
次回はアニメーションの実例も合わせて実践的な内容をご紹介します。
続きはこちらの記事をご覧ください。
アニメーションの12原則シリーズ
一緒に働きませんか?
2DCGプラネットスタジオ アニメーションチームでは、現在仲間を募集中です!
募集要項や応募方法については、以下のリンクからご確認ください。






