次のWebデザインプロジェクトでディズニーのアニメーションの12の原則を使用する

私がこれをタイプしているまさにその瞬間、私のオフィスの壁と棚には17のディズニーの何かがあります。 セブンティーン。 びっくりしました。 私がすべてのものを愛しているのと同じくらい-ディズニー、アニメーションの12の原則によって作成された魔法は、私が彼らの映画の1つを見るとき、私でさえ逃げます。

そしてそれがポイントです。 アニメーションの12の原則は微妙です。 彼らは、視聴者が気付かないうちに視聴者に印象を与えます。 彼らは私たちを笑わせ、泣かせ、共感させ、夢を見させます。時には同じシーンの中で。 そして、彼らはあなたがそれらに手を伸ばして触れたいと思うほどリアルに見えて動くキャラクターとオブジェクトを作成します。 （ココを見たことがありますか？私は私の場合を休ませます。）

これらのアニメーションの12の原則は、ディズニーをはじめとするすべてのモーションワークの基礎を提供します。 また、Webデザインなど、アニメーション以外の分野にも関連しています。

アニメーションの12の原則の簡単な歴史

アニメーションの12の原則は、1920年代と30年代に参加したアニメーターのコアグループであるディズニーのナインオールドメンの2人であるOllieJohnstonとFrankThomasによって導入されました。 ジョンストンとトーマスは1981年にTheIllusion of Life：Disney Animationを執筆し、それはアニメーションの「聖書」のままです。 この本は、12の原則を抽出するためのディズニーのトップアニメーターのアプローチを詳しく調べています。 これらの原則は元々手描きアニメーションを対象としていましたが、技術の変化を乗り越え、現在はコンピューターアニメーター（ピクサーなど）やWebデザイナーによって使用されています。

アニメーションの12の原則とそれらがWebデザインにどのように情報を提供するか

これらの原則が時の試練に耐えてきたのには理由があります。 時々、基本はまだ最高です。

1.スカッシュとストレッチ

出典：Giphy経由のChris Gannon

「スカッシュアンドストレッチ」は、アニメーションの原則の中で最も重要です。 アニメーションに柔軟性、重力、重量、質量を与えます。 オブジェクトが動いているとき、それは同じ形のままではありません。

ただし、音量は一定に保つ必要があります。 ストレッチするには、オブジェクトをより薄く、より長くする必要があります。 押しつぶすと短くなり、広くなります。 薄くしたり短くしたりすると、同じ音量が保たれません。

ウェブデザインでは、オブジェクトを人目を引く必要がある場合に「スカッシュアンドストレッチ」が使用されます。 物理的な質量があるように見える必要があるオブジェクトがある場合、この原則でうまくいきます。

2.期待

出典：Giphy経由のCentoLodigiani

予想は、これから行われることを視聴者に準備し、結果として生じるアクションをより現実的にすることができます。 最初に膝を曲げずに座ったり、腕を突き出さずに何かを捕まえたりすることはありませんよね？ 予想は、キャラクターまたはオブジェクトを1つまたは2つの現実的な動きに通して、何が起きようとしているのかを視聴者に知らせます。

ウェブデザインでは、トランジションで予想が使用されます。 たとえば、訪問者が情報ボックスに入力して必要な情報を省略した場合、ボックスが少し跳ね返って注意を引き、「ねえ、何かがおかしい」と伝えることができます。 予想を使用する別の方法は、アイテムをわずかに縮小してから、ホバーすると大きくすることです。

3.ステージング

ステージングは​​、視聴者の目をリードして、視聴者が見たい場所に見えるようにします（写真の「リーディングライン」）。 シーンの残りの部分を軽視して、視聴者があなたが望むものだけに集中できるようにします。 ステージングのもう1つの要素は、キャラクターが行うすべてのアクションには、その背後にある意図があるということです。 アニメーションの各フレームを分離すると、ポーズの背後にある意図を伝えることができます。

ステージングは​​、Webサイトで使用されるWebデザインとビジュアルに適用するのが簡単な原則の1つです。 これは、ポップアップがWebページに表示されたときに発生します。ポップアップの動きにより、ポップアップに焦点が合わせられ、ページの残りの部分がぼやけたり、暗くなったり、覆われたりします。 あなたは比喩的に「ステージ」の最も重要な部分を照らし、他のすべてをバックグラウンドに保ちます。 これには光と影も使用できます。または、Webデザイナーは、不要な詳細を取り除くだけでこの原則を適用できます。

4.まっすぐ進み、ポーズをとる

「まっすぐ進む」と「ポーズをとる」は、アニメーションを作成する2つの異なる方法です。 「ストレートアヘッド」では、フレームが最初から最後まで順番に作成されます。 これにより、アニメーションにダイナミックで滑らかな動きが与えられます。 「ポーズをとる」では、最初と最後のフレームが作成され、次に必要な中間ポーズが追加されます。

出典：Vincenzo Lodigiani、モーションアーティスト

今日、コンピューターアニメーションは、コンピューターが欠落しているフレームを自動的に埋めることができるため、「ポーズをとるポーズ」を使用します。 チェーホフのアニメーションをチェックしてください-あなたはそれらが現実的に流動的ではないことを知ることができます（そしてそれらはそうであるはずがありません）。 Webサイトで「ストレートアヘッド」アニメーションを作成する場合は、steps（）タイミング関数を使用できます。この関数を使用すると、複数のフレームを定義して、それらを順番に表示できます。

5.フォロースルーおよびオーバーラップアクション

「フォロースルーおよびオーバーラップアクション」の原則は、キャラクターまたはオブジェクトが動いてから停止すると、対象の一部が異なる速度で移動および停止することを示しています。 これは、実際の物理法則を模倣しています。

• オーバーラップアクション：対象のさまざまな部分がさまざまな速度で移動します。
• フォロースルー：メインオブジェクトの移動が停止した後、オブジェクトの緩く接続された部分が数秒間移動し続けます。 これらのパーツは停止点を超えて移動し、オブジェクトに向かって引き戻されます。

以下の例では、ラプンツェルの腕と脚は頭とは異なる速度で動きます。これはオーバーラップアクションです。 彼女がぐるぐる回るのをやめると、彼女の髪は一瞬揺れ続けます–それは続きます。

「ドラッグ」は、逆のことが起こる関連技術です。オブジェクトの一部が移動し、残りが追いつきます。 これらのテクニックはすべて、リアルな動きを示したり、コミカルな効果のために動きを誇張したりすることがあります。

「ムービングホールド」もこれに関係しています。 残っているキャラクターは、アニメーションが停滞しないように、まだわずかな動きがあります。

モバイルとウェブのデザインでは、「フォロースルー」と「重複するアクション」は、アクションが意図的に停止していることを視聴者に示します。 そうでなければ、あなたはそれが単に機能しなくなったと思うかもしれません。 たとえば、iPhoneのWunderlistアプリが、リストアイテムを移動していることをどのように示しているかを見てください。 アイテムを動かすと色が変わって大きくなり、作業が完了すると元の色とサイズに戻ります。 これは、アクションが完了したことを私が知る方法です。

この原則がiPhoneで実際に動作していることも確認できます。 ビュー間を移動したり、ホーム画面でアイコンを移動したりすると、要素の移動速度がわずかに異なります。 これがあなたのiPhoneが「物事は変化している」と伝える方法です。

6.スローインとスローアウト

「スローインおよびスローアウト」の原則は、オブジェクトがゆっくりと動き始め、勢いを増してスピードを上げ、停止すると再びスローダウンすることを示しています。 基本的に、動きは自然になるために加速および減速する必要があります。 この効果を実現するために、アクションの開始と終了に追加のフレームがあり、モーションの段階的な増減を強調しています。

出典：Tumblrの生命の幻想

Webデザインの場合、CSSには、この原則に関連する2つのタイミング機能があります。イーズインとイーズアウトです。 Your Plan、Your PlanetのWebサイトで例を見ることができます（最初に「始めましょう」をクリックしてください）。

7.アーク

アニメーションの他の12の原則の多くと同様に、「アーク」は物理学に基づいています。 オブジェクトは通常、重力のために移動するときに、ある種の弧をたどります。 それらがまっすぐなままであるとすれば、動きは機械的であり、現実的ではありません。

これは、低から高、低への弧だけでなく、すべてのタイプの動きにも当てはまります。

Webデザインでは、「アーク」の原則は、もちろんアークを発生させるアニメーションを作成することによって使用できますが、読み込み時のように要素を回転させることによっても使用できます。

8.二次的行動

二次的な行動は、それから気を散らすことなく、主な行動を強調します。 また、キャラクターやオブジェクトにより多くの次元を与え、シーンに生命を吹き込みます。 主なアクションは依然として焦点である必要があるため、ステージングの原則が役割を果たします。

二次アクションは、メインオブジェクトの外にある必要はありません。 歩くときに口笛を吹いたり、眉を上げて感情を表現したりするキャラクターかもしれません。

モバイルおよびWebデザインでは、「二次アクション」の原則は、iPhoneでアプリを再配置するときのように、要素が邪魔にならないように移動して新しい要素のためのスペースを空けるときに見られます。 これは、これらのアクションを強調する「フォロースルーおよびオーバーラップアクション」と密接に関連している可能性があります。

9.タイミング

タイミングは非常に単純で、「スローインとスローアウト」に関連しています。 原則として、要素は現実の世界と同じように、一貫して自然な方法で移動する必要があります。 強調するために、それらは意図的にスピードアップまたはスローダウンすることができます。 使用されるフレームの数によってタイミングが決まります。フレームが多いほどアクションが遅くなり、フレームが少ないほどアクションが速くなります。

この例では、Daffy Duckの最初のアクションには自然なタイミングがあり、最後のアクションは、視聴者に近づくと、意図的に強調するために高速になります。

タイミングは、視聴者がオブジェクトの相互の重みを理解するのにも役立ちます。 この例では、キャラクターはウェイトをゆっくり持ち上げてすばやく落とし、重いことを示しています。

出典：Giphyの@scottthigpen

Webデザインでは、タイミングを使用して、特にユーザーの操作に応答するときに、要素を少し長くするか、すばやく消えるようにします。 たとえば、ユーザーがメニューを閉じたい場合は、300ミリ秒の間表示されるようにタイミングを設定できます。 ナビゲーションバーの要素をタップした場合、アクションをすばやく実行する必要があります（100ミリ秒）。

10.誇張

アニメーションの12の原則の多くは現実に焦点を当てていますが、アニメーションの美しさはそれが現実ではないということです。 「誇張」の原則は、リアリズムが多すぎると、アニメーションの得意分野である娯楽を損なう可能性があると述べています。 誇張は、キャラクターやオブジェクトをより面白くするために使用されます。 それは現実を取り、それをワンランク上に上げます、それでシーンはまだ信じられます。 誇張には、シーンが抽象的またはシュールにならないように抑制が必要です。

Webデザインでは、オブジェクトを拡大または縮小して、注意を引いたり、注意をそらしたりします。 ユーザーがフォームなどのWebサイトの特定の部分でアクティブになると、他の要素が縮小する一方で、ユーザーは拡大する可能性があります。 これは、特にポップアップフォームについて考える場合、「ステージング」の原則に似ています。

11.ソリッドドローイング

出典：Tumblrの生命の幻想

アニメーションは技術的には2Dですが、3Dでリアルに表現する必要があります。 「立体描画」の原則は、次のような基本を描画して理解する能力を持つことを目的としているため、「遠近法」とも呼ばれます。

• 解剖学
• バランス
• 一貫性
• 光と影
• 音量
• 重さ

Webデザイナーの場合、要素に深さを追加すると、ユーザーは要素を操作できることがわかります。 あなたは私たちのウェブサイトでこれが実際に動いているのを見ることができます。 下にスクロールすると、[ダウンロードに参加]ボタンがピンク色に変わる様子をご覧ください。

12.アピール

おそらく、習得するアニメーションの12の原則の中で最もトリッキーな「アピール」は、キャラクター、オブジェクト、およびそれらの世界が視聴者にアピールする必要があることを示しています。 それらは、物理的であろうとなかろうと、何らかの形で魅力的で魅力的でなければなりません。 これを正しく行うためのレシピはありませんが、堅実なキャラクター開発とストーリーテリングが重要な要素です。

アニメーションでは、すべてのキャラクターが魅力的であるとは限りません。悪役はディズニー映画の要です。 ただし、それらが提示される方法には、カリスマ性があり、聴衆の興味を引く必要があります。

ウェブデザインにおいて、「アピール」とは、ウェブサイト全体が魅力的で、楽しく、使いやすいことを意味します。

まとめ

ディズニーの12の原則は、Webサイトでインタラクティブなゲームを作成する場合のように、単純なアニメーションに役立ちますが、あらゆる種類のWebページのデザインにも役立ちます。 ディズニー映画に関しては、ほとんどの消費者は私のようです。私は何かが好きで、脳が手がかりを処理することを知っていますが、なぜ私がそれらの反応を示すのかについては指を置くことができません。 Webデザイナーの仕事は、訪問者が何を考え、何をするかを予測し、適切な行動を取るように微妙にガイドすることです。

視聴者とつながるためのさらに多くの方法をお探しですか？ 色の感情の使用に関するブログ投稿を読んでください。