estieでは、プロダクトに関わるデザイン職としてUIデザイナーとデザインエンジニアの2つの役割がありますが、UIデザイナーでもコーディングのスキルが求められるなど、「デザイン×エンジニアリング」の価値観を実直に体現していく攻めたマインドとスタイルを持っています。
この「デザイン×エンジニアリング」というスキルの価値は、単に両方の分野ができるというだけでなく、両者が深く交わる高度な領域でこそ、さらにその真価が問われると感じています。
たとえば、デザインシステムはその一例ですが、マイクロインタラクション、アニメーションといった領域も同じように関わりのある領域といえるでしょう。私は前職でWebサイトの制作に関わっていましたが、特に複雑なアニメーションは、デザインと実装の両面を意識する必要があったりと、まさにデザインとエンジニアリングが密接に交わる高度な領域であると感じていました。
近年では、ツールの発達やAIの活用によって実装自体のハードルは下がり、複雑なアニメーションも比較的手軽に作れるようになってきましたが、その表現が本当に適切かどうかを判断・評価し、プロダクトの体験として昇華させるプロセスがますます重要になってくるのではないかと思います。
アニメーションとは
（前提として、WebサイトやWebアプリケーション上におけるアニメーションを対象にしています）
WebサイトやWebアプリケーションを実際に見てみると、アニメーションを使用した多種多様な動きや演出表現が取り入れられていることがわかります。一概に「アニメーション」と言っても、サイトやアプリの種類、デザイン、トンマナなどによって、その表現や使われ方は大きく異なります。
分かりやすいようにWebサイトとWebアプリケーションを対比して説明しますが、たとえば、企業のコーポレートサイトやLPなどでは、ファーストビューにおいてヒーローイメージやキャッチコピーにアニメーションを加えたり、スクロールに応じてコンテンツが表示されたり変化したりするようなアニメーションがよく使われます。近年では、WebGLなどを活用した3D表現を用いたアニメーションも多く見られます。
一方で、Webアプリケーションではそのような視覚的な演出を主目的としたアニメーションはあまりないと思います。単純にそうした演出が不要ということもありますし、機能自体や操作をメインにしたアプリケーションではこうしたアニメーションは逆にユーザーの注意を散漫にさせ、操作の妨げになってしまうかもしれません。とはいえ、アニメーション自体が不要というわけではなく、たとえば、ホバーすると反応するようなユーザーの操作に応じたUIアニメーションは、操作感や分かりやすさを高める上で重要な要素になります。
これらのアニメーションのスタイルや目的は、大きく「機能的 / Functional (productive)」なものと「表現的 / Expressive」なものの2つに分類できるといえます。
IBM Design Language - Overview
Material Design3ではMotion Schemeとして機能性を重視した「Standard」と、表現力を重視した「Expressive」の2種類を区別して定義しているほか、Carbon Design Systemなどではより明確に「productive motion」と「expressive motion」として区別しています。こうした分類から分かるように、アニメーションは単なる見た目の装飾だけではなく、目的に応じて機能的な動きと魅せるための動きとして使い分けることが大切です。それぞれの特性や使いどころを理解しておくと、アニメーションのデザインや実装がより的確になります。
では、具体的にはどのような違いがあるのでしょうか？
機能的なアニメーション
機能的なアニメーションは、ユーザーの操作や画面の変化を分かりやすく伝えるために使われるアニメーションのことです。操作へのフィードバックを示したり、ユーザーの注意を誘導したり、画面内の要素同士の関係性を視覚的に表現することで、より直感的でスムーズなユーザー体験に導くことができます。
- フィードバックを伝える
- ユーザーの操作に対して即座に反応することで、アプリケーションなどシステムが反応していることを明確に伝えます
- 注意を引き、操作を導く
- ユーザーが「どこに注目すべきか」「次に何をすれば良いか」などを直感的かつ自然に示すのにもアニメーションは効果的です。たとえば、ボタンにホバーした際の色や形が変化するアニメーションなどは、「ここはクリックできる」といったインタラクティブな要素であることを示すシグニファイアや、それに続くアクションへの予備動作（Anticipation）として機能します。これにより、ユーザーは何ができるのか、何が起こるのかを事前に理解しやすくなります。
- 関係性を示し、コンテキストを保つ
- 要素同士や画面遷移の関係性を示して、コンテキストを維持する役割を果たします。これにより、ユーザーはメンタルモデルを構築しやすくなります。画面の切り替えやビューの変化をスムーズに見せたり、要素間の階層や順序を視覚的に示したりすることで、「何が、どこで、どう変わったのか」が直感的に理解できるようになります。
表現的なアニメーション
表現的なアニメーションは、単に機能を補うだけでなく、製品やブランドの個性を表現し、ユーザーの感情に働きかけることで印象的な瞬間を強調したり、体験を魅力的にすることを目的としたアニメーションです。
- ユーザーの関心を引きつけ、没入感を高める
- 遊び心のある動きや印象的なアニメーションは、ユーザーの注意を引き、操作自体を楽しめる体験へと変化させることができます。重要な操作の時などでは、印象的な動きなどによって意識を集めて、スムーズで気持ちのよい操作感をもたらすことで、ユーザーは自然と画面の世界に没入しやすくなります。
- ブランド表現と個性の強調
- プロダクトにキャラクター性や生命感を与え、親しみやすさやブランドらしさ（アピール力）を表現する上で重要な役割を担います。これによって、プロダクトの独自性を際立たせ、他との差別化にも繋がります。
2025年夏季アップグレード：宿泊以外も充実した、進化したAirbnbを体験
より良いアニメーションを目指すために
アニメーションの質を高めるには、いくつかの基本的な原則を理解して、それらをうまく活用することが大切です。
アニメーションの原則を語るうえでは、ディズニーのアニメーションの12原則は非常に有名です。これまでの話の中でも、予備動作（Anticipation）やアピール（Appeal）など、12原則に関連する概念がいくつか登場してきました。もちろん、全てのケースでこれらの原則を厳密に適用する必要はありませんが、アニメーションを作るうえでの基礎知識として非常に参考になります。特にUIアニメーションにおいても、多くのヒントを得ることができます。
現実世界の物理法則を模倣する
現実世界で物体が動く際、いきなり止まったり加速はしないように、アニメーションも加速と減速を加えることで自然な動きに見えるようになります。自然の物理法則性を模倣することで、ユーザーは実際の世界と似た感覚で直感的にUIを操作できるようになります。
ディズニーの原則における「Slow in, slow out」は、Webにおけるアニメーションでは一般的に「ease-in」と「ease-out」のイージングで表現されます。
イージング
加速という意味ではease-inは物理法則に即していますが、ホバーアニメーションのようなマイクロインタラクションにおいては、原則としてはease-outが適切です。ease-outは瞬間に即座に反応し、その後ゆっくりと変化を完了させることで、応答性を高く保ちつつ、滑らかさを損なわないためです。例外として、マーキーアニメーションやマウスストーカーのような動きでは、速度が一定となるlinearなイージングを用いた方が自然に感じられることもあります。見た目の変化と実際の距離が一致していることで、動きと感覚がズレにくい感覚になります。
/* ease-in animation */ .easeIn {animation: move 1s ease-in forwards;} /* ease-out animation */ .easeOut {animation: move 1s ease-out forwards;} /* linear animation */ .linear {animation: move 1s linear forwards;}
素早く反応する
UIアニメーションでは、ユーザーの操作に対して即座に反応することは非常に重要です。操作と画面上の反応や動きがズレてしまうと、違和感やストレスにつながってしまいます。逆に、レスポンスが早くしっかりと応答してくれるアニメーションは、アプリケーションの信頼感や操作自体の楽しさにもつながります。
単純にアニメーションの長さを短くすれば良いということではなく、短すぎると気づきにくく、長すぎると待たされているように感じてしまうので、マイクロインタラクションでは、だいたい100msから200msくらいを目安にするのが良いでしょう。また、アニメーションの対象物の大きさや動く距離によって、アニメーションの長さを調整することも必要です。小さな動きは短く、大きな移動には少し時間をかけた方が自然です。
統一感とオーケストレーション
ここまでアニメーションについて説明してきましたが、アニメーションを考える、あるいは実装するにあたって以下のことに立ち返って考えてみると良いかもしれません。
アプリ全体でアニメーションに一貫性があるかどうかは、ユーザーのアプリケーションに対する印象に大きく影響します。アニメーションはつい装飾や補助的なものとして見られがちですが、ユーザー体験や操作感においてとても重要な役割を果たします。
統一感を出すには、デザインシステムにおけるデザイントークンの運用や、全体を通して一貫した設計指針を持つことが大切です。逆に、こうした明確なガイドラインがないまま個々の要素や画面でバラバラにアニメーションが作られてしまうと、アプリケーション全体がまとまりなく見え、不自然な印象を与えてしまいます。
また、UI/UXデザインにおいては、前後のつながりや空間的な連続性を意識することが重要です。ユーザーが実際にWebサイトやアプリケーションを利用する際は画面を静的な一枚絵として見るのではなく、スクロールやクリックといったインタラクションによって連続的に変化する動的なものとして操作します。そのため、時間的な連続性や、一連の行動のつながりといった流れを意識しすることが重要です。UIも同じように、それぞれの要素は個々で独立しているのではなく、有機的に連関したまとまりであると捉え、その全体的なまとまりや流れの一部としてアニメーションを統合し、調和的に機能させる必要があります。
常に全体像を捉え、その流れの中で各要素やアニメーションが適切に配置・調整されているか、といったオーケストレーションを意識することが重要であると考えています。
アニメーションはデザイン
アニメーションは単なる演出や装飾としてではなく、デザインの一部として、明確な意図を持って設計するべきです。どれだけ凝ったアニメーションを施したとても、ベースとなるデザインや情報設計が適切なものでなければ本質的に良いものにはなりません。アニメーションはデザインの欠陥を補うものではなく、そうしたベースがあってこそ活きてくるもので、デザインと一体となってユーザーの体験を形作る要素であるといえます。
実際のケースでは、「動いていると何となくそれっぽく見える」や「雰囲気を出すため」、といった漠然とした理由でアニメーションを追加するケースは少なくないかもしれません。アニメーションの本来の意味や役割を十分に理解せず、単に見た目の動きだけを追求すると、本来伝えるべき情報や機能といった本質的な部分が曖昧になり、結果としてユーザー体験やコンテンツの目的を阻害してしまう可能性があります。
例えばWebサイトでよく見られるスクロールアニメーションの中には、演出が過剰であると感じる場面も少なくありません（フェードインアニメーションやパララックスアニメーションなど）。アニメーションをデザインの一部として捉えるならば、例えば、主要なコンテンツであるテキストがスクロール操作などを待たなければ表示されないような演出は、ユーザーが必要とする情報へのアクセスを妨げ、ユーザー体験を損なう不適切なデザイン表現であると言えるかもしれません（一概に否定はしないですが、細心の注意を払って実装するべき表現であるといえます）。アニメーションによって、伝えるべきテキストや情報が見えづらくなったり、内容が伝わりにくくなったり、本来伝えたいコンテンツやその意図が曖昧になってしまっては本末転倒です。
個人的には、テキストなどの主要なコンテンツの表示自体を遅延させるようなアニメーション表現の多用は、原則として慎重に検討すべきだと考えます。装飾的な画像や、ヒーローセクションでの演出的な強調など、目的が明確でコンテンツ自体の読解を妨げない範囲で使用するのが良いでしょう。また、短い素早いアニメーションは、画面上の唐突な変化を和らげスムーズな状態遷移を示すのに役立つ場合があるため、使い所と使い方を良く検討して使用することが重要です。
また、カラーアクセシビリティと同じようにアニメーションにもアクセシビリティの考慮が必要です。一部のユーザーは、過度なアニメーションによって乗り物酔いや注意散漫などを経験する可能性があるため、モーション削減のオプションを提供するなどの代替手段も考慮する必要があります。
Preferreds-reduced-motion: 動きが少ないほうがよい場合もあります | Articles | web.dev
まとめ
アニメーションは単に機能的な変化を伝えるだけでなく、ユーザーへの情報提供や注意の誘導、さらにはブランドの表現などにも関わる重要な要素です。適切に使われない場合、ユーザーの体験を損ねたり、ブランドのイメージにも悪影響を与えるおそれもあります。アニメーションはユーザビリティやユーザーへの細かな配慮のためにも十分に検討し慎重に実装していくべき要素であるといえます。
これはアニメーションに限った話ではありませんが、ユーザーがサイトやアプリケーションから受け取る情報や印象の多くは、実際に操作するUIを通じて伝わります。たとえデザインやアニメーションの背後にどれだけ高度な意図や戦略があったとしても、ユーザーが最終的に触れ、評価し、体験の質を左右するのは、目の前に表示されるUIやインタラクションであることは意識するようにしておきたいです。
最後に、アニメーションのデザインや実装に迷った時などは、以下のポイントに立ち返って考えてみると良さそうです。これらはアニメーションの本質的な評価項目といえます（以下に一部を抜粋します）:
- Is your motion purposeful? （アニメーションには明確な目的があるか？）
- What problem is motion solving? （アニメーションは、どのような課題を解決しているか？）
- Does it enhance the user’s understanding of an action?（それはユーザーのアクション理解を深めているか？）
この記事を読んで「デザイン×エンジニアリング」で体験の質を向上させるデザインエンジニアのポジションに興味を持っていただけた方は、ぜひカジュアルにお話ししましょう！
