【After Effects】ディズニーの12原則を実際に作って学ぶ｜モーションデザイン入門

アニメーションの動きが硬い、単調、どこか不自然……。そんな悩みを解決するヒントが、ディズニーの「アニメーションの12原則」にあります。

発祥は手描きアニメーションですが、その本質は色褪せません。現代のAfter Effectsによるモーショングラフィックスや各種Web動画など、デジタル制作のクオリティを底上げする強力な武器として今なお広く活用されています。

この記事では、12原則の意味を説明するだけでなく、シンプルなシェイプと実務を想定した作例をAfter Effectsで作りながら確認します。

ディズニーの12原則とは

ディズニーの12原則は、キャラクターや物体の動きを自然で魅力的に見せるための普遍的なルールです。

基本的な構成となるのは、次の12項目です。

• 潰しと伸び
• 予備動作
• 演出
• 逐次描きと原画による設計
• あと追いの動きと重なり合う動き
• スローインとスローアウト
• 円弧
• 副次的な動き
• タイミング
• 誇張
• 立体感のある描画
• 魅力

すべての原則を毎回使う必要はありません。制作する内容や目的に応じて必要な原則を組み合わせることで、より伝わりやすく魅力的なモーションを作ることができます。

潰しと伸び【Squash and Stretch】

物体を一時的に変化させ、重さ、柔らかさ、勢いを表現

動きの特徴と仕組み

落下や衝突、跳ね返りなどの動きに合わせて形を変化させることで、重さや柔らかさ、勢いを表現できます。形を変えるときは、縦と横のバランスを調整し、大きさが不自然に変わって見えないようにします。

実務でのコツ

変形は大きくしすぎず、違和感のない範囲に抑えると、自然な印象に仕上がります。見せたい部分に短時間だけ取り入れることで、視線を集めるアクセントとしても活用できます。

こんな場面におすすめ

• ボールや柔らかい物体のバウンド
• アイコンの出現アニメーション
• ボタンを押したときのリアクション
• 数値や重要語句の強調表現

使用例

予備動作【Anticipation】

本動作の前に動きの予兆を加え、次に起こる動きを伝える表現

動きの特徴と仕組み

移動する方向とは逆方向へ少し移動させることで、動く方向と勢いが伝わりやすくなります。また、予備動作が大きいとポップでコミカルな印象になり、小さくすると落ち着いた印象になります。

実務でのコツ

実務では、数ピクセルから数十ピクセル程度の控えめな予備動作にすると、違和感のない自然な動きに仕上がります。動きの前兆が分かる程度に留め、主動作よりも目立たせないことが重要です

こんな場面におすすめ

• テキストやカードのスライドイン
• 矢印が方向を示す動き
• ボタンを押す前の小さな反応
• 大きな画面切り替えの直前

使用例

演出【Staging】

見せたい情報を明確に伝えるために、構図・色・サイズ・動きなどを整理して表現

動きの特徴と仕組み

すべてを同じ大きさ、同じ色、同じ速度で動かすと、どこを見ればよいか分かりにくくなります。伝えたい情報の優先順位を決め、伝えたい情報の優先順位を決め、それに合わせて見せ方を工夫します。

実務でのコツ

動きを追加する前に、何を最も見せたいかを決めます。重要度に応じて文字サイズ、配色、表示順を変えることで、情報量が多くても伝わりやすくなります。

こんな場面におすすめ

• KPIや実績数値の表示
• グラフやインフォグラフィック
• サービス紹介動画
• 複数の情報を順番に説明する画面

使用例

逐次描きと原画による設計【Straight Ahead Action and Pose to Pose】

逐次描き：最初から最後まで順番に動きを作る方法
原画による設計：重要なポーズを先に作り、その間を補完する方法

逐次描きは、動かしながら形や動きを作っていく方法です。
一方、原画による設計は、開始位置・途中の状態・終了位置を先に決めてから、その間の動きを調整する方法です。

実制作でどちらを選ぶか

開始と終了の状態が決まっている動きは、原画による設計が適しています。
一方、煙やパーティクル、液体など、途中の変化を見ながら作り込む動きは、逐次描きが適しています。制作内容によっては、2つの方法を組み合わせることもあります。

イメージ

Straight Ahead Action

Pose to Pose

あと追いの動きと重なり合う動き【Follow Through and Overlapping Action】

あと追いの動き
主な動きが止まった後も、余韻を残すように動き続ける表現

重なり合う動き
動きに時間差を付け、自然な流れを表現する表現

Follow Through

Overlapping Action

動きの特徴と仕組み

すべてが同じタイミングで動くと、機械的で不自然な印象になりやすくなります。動き始めや止まるタイミングに変化を付けることで、自然な流れや余韻が生まれます。

実務でのコツ

時間差を大きくしすぎず、動きの流れに合わせて少しずつずらすと、自然な印象に仕上がります。主な動きを邪魔しない範囲で余韻を加えることがポイントです。

こんな場面におすすめ

• 複数の文字を順番に表示する
• アイコンと説明文を時間差で表示する
• グラフの棒を順番に伸ばす
• 線や装飾を本体より遅れて停止させる

使用例

スローインとスローアウト【Slow In and Slow Out】

動き始め、止まり際の速度に変化を加える

動きの特徴と仕組み

動き始めと止まり際の速度に変化を付けることで、自然で滑らかな動きを表現できます。速度の変化を調整することで、同じ移動距離や時間でも、軽さや重さ、勢いなどの印象が変わります。

使用例

実務でのコツ

動き始めを速く、止まる直前をゆっくりにすると、自然で落ち着いた印象になりやすくなります。すべての動きに同じ速度変化を使うのではなく、動きの目的や見せたい印象に合わせて調整しましょう。

こんな場面におすすめ

• テキストやロゴの出現
• UIカードの移動
• グラフや数値の表示
• 画面切り替えやトランジション

円弧【Arc】

物体を完全な直線ではなく、弧を描くように動かす

動きの特徴と仕組み

人の腕や頭、投げたボールなど、現実の多くの動きは円弧を描きます。そのため、直線だけで動かすよりも自然な印象を作りやすくなります。

実務でのコツ

移動経路に緩やかな曲線を付けると、直線移動より自然で柔らかい印象になります。動きの目的に合わせて、曲線の強さを調整します。

こんな場面におすすめ

• アイコンや図形の移動
• 矢印やポインターの動き
• 人物や手足の動き
• 柔らかい画面切り替え

使用例

副次的な動き【Secondary Action】

主な動きを補助する小さな動きを追加する

動きの特徴と仕組み

例えば、人が歩く動きが主動作なら、腕の振りや髪の揺れが副次的な動きです。
モーショングラフィックスでは、文字の出現に合わせて線を伸ばしたり、アイコンの周囲に小さな装飾を表示したりする表現が該当します。

使用例

実務でのコツ

副次的な動きは、主な動きより控えめにすると自然な印象になります。色、サイズ、速度を調整し、主な動きを引き立てる範囲で加えましょう。

こんな場面におすすめ

• 数値の表示後に下線を伸ばす
• アイコンの周囲に小さな装飾を出す
• 見出しと補足情報を連動させる
• グラフの表示に小さなマーカーを加える

タイミング【Timing】

動きにかける時間を調整し、重さ、速さ、感情などを表現

動きの特徴と仕組み

同じ距離を移動する場合でも、短い時間で動かすと軽く素早い印象になり、長い時間で動かすと重く落ち着いた印象になります。表現したい印象に合わせて、動きにかける時間を調整します。

実務でのコツ

文字や数値を表示する場合は、視聴者が読み終える前に消えないようにします。短い見出しは短め、文章や複数の数値を含む場合は長めに表示するなど、情報量に合わせて調整します。

こんな場面におすすめ

• テキストや数値の表示時間
• ロゴやアイコンの移動速度
• 画面切り替えの長さ
• グラフや説明動画全体のテンポ

使用例

誇張【Exaggeration】

伝えたい動きや特徴を現実よりも少し大きく表現する

動きの特徴と仕組み

現実どおりの小さな動きは、画面上では伝わりにくいことがあります。大きさ、移動距離、回転、速度などに変化を加え、伝えたい特徴を際立たせます。

実務でのコツ

誇張は必要以上に強くせず、伝えたい内容に合わせて調整します。すべてを同じように誇張するのではなく、見せたい部分だけに取り入れることで効果的な表現になります。

こんな場面におすすめ

• 売上や実績数値の強調
• CTAやボタンへの視線誘導
• 重要なアイコンやキーワード
• 場面転換のアクセント

使用例

立体感のある描画【Solid Drawing】

物体の形や奥行きを表現し、存在感を持たせる手法

動きの特徴と仕組み

立体的な形や空間の広がりを意識して表現すると、動きに説得力が生まれます。影や重なり、遠近感なども立体感を伝える要素です。

実務でのコツ

回転や拡大・縮小を行うときは、基準となる位置や物体の向きを揃えます。影や重なりを活用すると、より自然な見た目に仕上がります。

こんな場面におすすめ

• UIカードやパネル
• 箱や製品を表す図形
• アイコンの回転や拡大
• 影や重なりを使った画面構成

使用例

魅力【Appeal】

人を引き付けるデザインや動きを作る表現

動きの特徴と仕組み

魅力は、派手な演出や複雑なエフェクトだけで決まるものではありません。色、形、余白、文字、動きの速度に統一感があり、内容を理解しやすいことで、より魅力的な表現になります。

実務でのポイント

デザインや動きを追加するときは、「本当に必要か」を考えます。伝えたい内容に関係のない装飾を減らすことで、全体の魅力が引き立ちます。

こんな場面におすすめ

• サービス紹介動画全体のデザイン
• KPIや実績画面
• ブランドイメージを伝えるモーション
• 企業向けのUIやインフォグラフィック

使用例

12原則をAfter Effectsで使うときの考え方

12原則は、毎回すべてを取り入れる必要はありません。

動きを作ったあとに、次のような視点で見直すと、改善点を見つけやすくなります。

• 動きが急に始まっていないか
• すべての要素が同時に動いていないか
• 加速と減速が内容に合っているか
• 見せたい要素が明確になっているか
• 動きの速さと情報量が合っているか

動きが硬い場合は、スローインとスローアウトやタイミングを見直します。
単調に見える場合は、予備動作、あと追いの動き、副次的な動きを加えて変化を付けます。
内容が伝わりにくい場合は、動きを増やす前に演出を見直し、伝えたい情報を整理します。

最後に

12原則はすべてを一度に取り入れる必要はありません。まずは1つずつ試しながら、動きの違いを確認していきましょう。