モーションの原則
モーションをデザインするということは、時間をデザインするということです。メカニクスを理解することで、動きは意味へと変わります。
モーションの原則を共有
イラスト: Matija Medved
マーケティングページ、ソーシャルアセット、ブランド動画、プレゼンテーションにおいて、モーションはアイデアに命を吹き込む手段です。それはデザインを時間の中で展開させ、リズム、音、シーケンスを用いて視線を誘導し、意味を形づくります。
Figmaのモーションデザイナー3名、Chad Colby、Ben Hill、Gilles Desmadrilleに、モーションの原則、ストーリーテリングの可能性を広げる方法、そしてAIが彼らのクリエイティブにどのような変化をもたらしているかについて話を聞きました。
グラフィックデザインとモーションデザインの最大の違いは何ですか?
グラフィックデザインでは、すべてが時間の中で切り取られた静止した瞬間として伝えられます。モーションはその制約を取り除き、リズム、ペース、変化、キャラクターを加えます。ただし基盤となる考え方は同じで、中心にあるのは明確さと意図です。
私たちはより「複数のフレーム」で考えるようになります。ストーリーのすべてを1枚の画像に詰め込むのではなく、「まずこれ、次にこれ」というように分解することで、より理解しやすくします。
モーションにおける時間という要素をどう使って、ストーリーを語ったりアイデアを伝えたりするかが本質なのです。イージングやタイミングをどう使えば、感情を生み出したり、伝えたいことをより的確に表現できるのか。そこには音とのシンクロにも深い関係があります。音楽を考えると、ビートの構造そのものが「タイミング」でできているのと同じで、モーションもまさに時間の設計なんです。
音と映像が組み合わさって、個々の要素の総和を超えるものが生まれることには、いつも圧倒されます。自分の意図だけでは設計できないようなつながりが、頭の中で自然と生まれていくのです。そうした偶然性や予期しない良い発見に開かれていること、計画しきらずに余白を残しておくことは、私のアプローチの基本になっています。
何かの動き方を決めるためのリファレンスはどこで見つけていますか?
基礎になるのは、物理を理解することだと思います。モーションは、現実世界で物がどう動くかに根ざしています。例えば、バウンドするボールをアニメーションやプロンプトで表現しようとする場合を考えてみてください。最初はすごく速く動き、跳ね返って上に戻り、頂点に近づくにつれて減速します。そして再び落下し、そのたびに跳ね返りの高さは少しずつ低くなっていきます。この「動きの感覚」を捉えられることがとても重要なのです。
もしインスピレーションをモーション作品だけに頼っていると、既存のトレンドに引っ張られてしまう可能性が高いです(バウンドするボールや矩形だけでは表現の幅に限界があります)。自然界の動き、映画におけるストーリーテリングの手法や編集のトリック、あるいはアートやデザインにおけるジェスチャー的な表現から引き出すことで、より独自性が生まれます。
最終的には、人は「なぜか分からないけれど良いモーション」をちゃんと見分けることができます。デザインはより主観的です。一方でモーションは現実世界との関係性があるため、その違いがより明確になります。
自然界の動き、映画のストーリーテリングや編集の手法、あるいはアートやデザインにおけるジェスチャー的な形からインスピレーションを得ることが、差別化につながります。
ミニ・モーション用語集: コア原則
イーズイン/イーズアウト: 時間の中で動きが加速・減速する仕組み
アンティシペーション: これから起こる動きを示唆する準備的な動き
オーバーシュート: 最終位置を少し行き過ぎてから、戻って落ち着く動き
フォロースルー: メインの動きが止まった後にも続く副次的な動き
ホールド: 直前の変化を視聴者が理解するための一時的な静止
セトル: 物が最終的に落ち着くときの微細な収束動作
現実世界で見たものを、モーションの「感覚」としてどう翻訳していますか?
大きい要素はイージングだと思います。これはタイミングの表現方法であり、物事がどのように収まり、落ち着いていくかを説明するものです。もうひとつはマッチカットです。これはあるショットから別のショットへ移る際に、同じ動きによってそれらをつなぐ手法です。例えば、スローからスピードが上がり、再びスローに戻るような流れの中で、最も速いポイントでハードカットを入れると、シームレスなトランジションのように感じられます。トランジションはモーションを考える上で非常に大きな要素です。それらはストーリーの異なるビート同士をつなぐ鍵であり、全体を一貫したものとして感じさせ、統一感を生み出します。例えば、私たちのローンチ動画では、ある機能の複数のユースケースを見せることがよくありますが、それでも一つの連続した体験として感じられる必要があります。そのため、トランジションや適切に配置されたカットを使い、勢いやリズムを維持し、視聴者の関心を途切れさせないようにしています。
私たちは動きのペースや、それがどのようにコミュニケーションとして機能するかについてよく議論します。ストーリーのアークはどうなっているのか、あるいはインパクトを生み出すクレッシェンドの瞬間はどこなのか、といった点です。さらに細部に踏み込んで、キーフレームのカーブやフレームレート、さらにはエクスプレッション(JavaScriptの一種)まで使いながら、モーションの精度を徹底的に調整します。
より広いチームに発表する際には、モーションの意図を伝えるためにサウンドエフェクトを多用します。例えば、ある打ち合わせで「左から右に動きます」と説明してもピンと来ないのですが、「それは“フワッ”と動く感じです」と言うと、一気に伝わることがあります。
モーションが他のデザインワークフローとより統合されていく上で、最大の機会はどこにあると思いますか?
キャンバス上でデザインをしながらアニメーションを試し、何がうまくいっていて何がうまくいっていないのかをリアルタイムで確認できるという考え方は、大きな変化です。これまでは、異なるツールやプラットフォームを行き来する必要がありました。しかし今では、すべてがマルチプレイヤーのキャンバス上で完結できるようになり、人々はより速く動き、アイデアを出し合うことができるため、デザインとモーションの連携の水準そのものが引き上げられています。
モーションは本質的に「伝わる」力を持っています。言葉では説明しきれないことを表現できるため、ブランド側もその価値を理解しており、優れたモーションへの需要は高まり続けています。一方で、モーション制作は非常に時間がかかるため、デザインチームのスピードに合わせて同じように反復するのは難しいという課題もあります。それでも、デザインとアニメーションが同じソフトウェア上で行えるようになることは非常にエキサイティングです。そこからどんな新しい可能性が開かれるのか、今後が楽しみです。
私がワクワクするのは、これまでモーションに出会うことがなかった、あるいは好きになることがなかった人たちが、これからそれを発見し、魅了されていく人数の多さです。それは私自身にも起きたことでした。最初はモーションデザイナーになりたいと思っていたわけではありませんでしたが、ツールを触っているうちに気づいたんです。「これは1枚のフレームで作るデザインよりずっと面白い」と。
モーションは昔から人々にとって“魔法のようなもの”に感じられてきました。その理由のひとつは、他のデザイナーと比べてモーションデザイナーの数が少ないからです。今では、1人のモーションデザイナーを待つのではなく、より多くの人が早い段階からアイデアに関わり、それをより速いスピードで形にしていけるようになっています。
ミニ・モーション用語集: チーム内の共通言語
ジッピー: 速くてエネルギッシュな動き
ドリーミーにする: より柔らかく、雰囲気のある動き
チャンキー: 意図的で、あえて洗練さを抑えた“手で触っているような”動き
もっとスナッピーにする: もっと素早いタイミングとシャープなイージングが必要な動き
ふわっとしている: 重さや現実世界の物理とのつながりが感じられない動き
リニアすぎる: 一定速度で動いており、機械的に感じられる動き
デッド・オン・アライバル: エネルギー、意図、明確さのいずれも欠けている動き
AIの進化をどう見ていますか? 何にワクワクしていますか? また、懸念していることはありますか?
After Effectsでは、モーションはプロパティを制御したりシステムを構築するためにエクスプレッションやスクリプトを追加することが多く、実質的にはコードを書く作業でした。私がキャリアを始めた頃は、ほとんどのアニメーターはコードを書けなかったので、エクスプレッションのスプレッドシートを使い、それをプロジェクトにコピー＆ペーストして対応していました。今では、モーションプロンプトがその状況を変えつつあります。アイデアを素早くスケッチできるようになります。スローなのか、速いのか、バウンシーなのかといった感覚をすぐに試しながら、同時に技術的な部分も扱うことができます。一度それが定義されてコードとして裏付けられれば、どこでも再利用できるようになります。これは非常に大きなブレイクスルーです。
多くの人は、モーションのためのモーションとして派手な動きを作るようになる一方で、より思慮深く使い、ユーザーを導いたりコミュニケーションに活かしたりする人も出てくるでしょう。スキル、クラフト、意図、そして抑制が差別化の要素になっていきます。
時間をコントロールし、それに意図を持たせることが重要になります。時間は新しいツールであり、デザインできる新しい要素だと理解することです。もし単に動いているだけで、何も感情や意味を生み出していないのであれば、それはデザインの上にフィルターを一枚重ねているだけに過ぎません。
良いモーションを作ることはこれから簡単になっていきますが、基本的なモーション原則を理解していなければ、優れたモーションを作ることは難しくなります。この分野は長い歴史の中で積み重ねられてきました。100年経っても通用しているものがあるのは、それなりの理由があります。テクノロジーが進化していく中でも、その基礎的な原則を維持することが重要になります。それこそが、物事を人間らしく保つものです。
This article was featured in our annual print magazine, Start Anywhere. Explore the digital version, or purchase a copy.
