アニメーションをインタラクティブで機能的なUI要素にするためのポイント

デザインにアニメーションを用いるべき理由のひとつに、テキストに比べ人ん与えるインパクトが遥かに優れていることが挙げられます。

アニメーションが付加されたUI要素は、時にユーザーエクスピリエンスの質を大きく変えます。すべてのWebサイトやアプリにとって最適というわけではありませんが、ユーザーをあっと言わせたり、気を散らせるなどの効果をもたらすにはぴったりです。

▲Zach Krasner

UIアニメーションの必要なのは、機能性！

機能的なUIアニメーションとは？

「機能的」とは、非常に正確かつ論理的で、特定の目的に対応可能であることを意味します。機能的なアプリケーションには明確な目的が必要です。また、あなたのスタイルとコンセプト、そしてユーザーに伝えたいメッセージとも合致していなければなりません。

いずれにしろ、何より重要なのはアニメーションを用いる意図です。明確な意図を持てば、アニメーションの存在意義を高めることができます。反対に、意図がはっきりしていない場合、アニメーションはただの蛇足にしかなり得ません。目的を見つけることができませんか？特に明確な意図が浮かばないのなら、アニメーションの追加を考え直すべきかもしれません。

機能的なアニメーションを生み出す一番の方法は、まず、どのようなアニメーションなら機能的と呼べるか、じっくり考えてみることです。インターフェイスを構築している最中には気づきませんが、必ずアニメーションデザインに影響してきます。

▲Derek Torsani

静と動のバランスをとる

効果的に使うためのコツは、静と動のレイヤーバランスを確立すること。

アニメーションは、ただそのままでは、静止画コンテンツの代わりになり得ません。アニメーションの素晴らしさはもちろんですが、依然として、静的要素の重要性に変わりはありません。なぜなら、視覚要素や遊び心に重きをおいたアニメーションよりも、静止画の方が重要情報を詳しく記載できるからです。

重要なのは、いかにしてユーザーにアニメーションを提示するかということ。また、ユーザーは、インターフェースで何が起こっているのかについて興味はなく、視覚的な変化も特には期待していないことをお忘れなく。

▲Ethan Leon

モーションで感情を表現する

モーションは、一般に考えられているほど単純なものではありません。アニメーションを使って「動き」を加えるのは簡単かもしれませんが、そのアニメーションを使って感情や反応を表現するとなると、また話が違ってきます。

今後は、アニメーションを技術の向上に適応させ、モバイルUIアニメーション仕様に変換する必要があります。

▲Markus Dahlbom

動きが早すぎたり、分かりづらいアニメーションは、目で追うのも大変です。画面上のコンテンツの動きがあまりに早いと、ユーザーは画面の状態の変化を理解する余裕が無くなります。また、ユーザーにサイトの目的をうまく伝えることができなければ、あなたのWebサイトとユーザー間の「信頼関係」も一気に失いかねません。

あなたにできる最善の方法は、ユーザーがある程度次に起こることを予測でき、なおかつ自身で設定変更・終了できるような、楽しいアクションを提供することです。触ってみるまでわからないような、古典的で動きのないWebサイトではなく、初心者でも分かりやすいサイトを作成しましょう。

UIアニメーションの役割

▲Andrej Radisic

アニメーションには、行動を方向づけ、フィードバックを提供し、関係を強化し、効果を生み出すなど、複数の用途があります。巧みなデザインであれば、モーションは多くの場面で役立ち、Webサイト(またはアプリ)にスタイリッシュな「風」を吹かせることができます。

質の高いアニメーションなら、洗練された、スタイリッシュな方法で情報を伝達することができます。素晴らしいデザイナーは、ユーザーが重要な情報に集中できるよう、広告などの気が散るようなコンテンツから遠ざけ、どのタイミングで、どのようにして動きを抑制するかを決定できます。

インタフェースアニメーションの設計は、WebおよびUXデザイナーの将来における必須課題であると言えるでしょう。

UIアニメーション活用のコツ

1. アニメーションの速度でムードを出す

ひとのアクションが実行されるのに必要な時間が早いか、ゆっくりかで、ユーザーがサイトにもつ印象は変わるでしょう。UI アニメーションでは、Webサイトやアプリの各項目の特殊性、性格に焦点を当てる必要があります。

時間と空間が適切に組み合わさることで、アニメーションにおける「対話」の役割を担ってくれます。

▲Derek Torsani

2. アニメーションを重ねてリアルな動きを見せる

メインのアニメーションに、更に控えめなアニメーションをプラスすれば、アクションに陽気さと面白みが加わります。例えばボタンを押すと移動の反動で逆方向にも少し動くなど。ふたつのアニメーションを組み合わせれば、リアルで自然な動きが生まれるでしょう。

3. 適切なクロージャー

クロージャーモーションにおいて、理解しておくべき2つの原則があります。それはフォロースルーとオーバーラッピングアクションです。この2つは相互に関連しており、これらの原則によって最終目的地をゆっくりとオーバーシュートし、遅れをとることなく、元に戻ることが可能となります。

4. スキルフルな描画

完璧なアニメーションを描くには、創造性と才能が必要です。アニメーションは単純なスケッチなどではなく、感情や気分を3次元で表現するアートです。どのようなツールを使用するかは重要ではありません。最終プロダクトが、実際の環境においてきちんと機能するかどうかこそが重要です。

5. スロースピードで技術を磨くべし

アニメーションを設計する際は、スロースピードを推奨します。なぜなら、パフォーマンスを確認し、更にそれに基づいて意思決定を行う必要があるからです。

アニメーションは重要なコミュニケーターです。テキストや画像よりも遥かに優れたアイデアを伝達し、明確かつ簡潔な方法でアクションを説明してくれます。

UIアニメーションの未来

▲Afnizar Nur Ghifari

ここ数年、ブラウザーの高速化と最新技術への対応がかない、それに伴って創造的なアニメーションが使われるようになりました。もはやアニメーションなしのインタラクションなどあり得ません。

ユーザーに親しみを感じてもらえるUIアニメーションを作りましょう！

（翻訳：Ayaka Takei）

あわせて読みたい！▼