モーションは、エモーションを生む。エモいUXのためのアニメーション活用のコツ

一般的に、アニメーション効果はUXを向上させる一方で、そこまでプロダクトに価値を付与するものではないと思われがちです。結果として、デザインにアニメーションを使用するのは、プロダクトデザイン過程の最後にお飾り程度にしか行われないことがよくあります。

しかし、その効果と使い方を再考し、デザインの重要な要素としてアニメーションを取り入れてみてはいかがでしょうか？本記事では、アニメーションの動的要素（motion）を効果的に使用することで、ユーザーの感情（emotion）を動かし、彼らの心を掴むためのコツをご紹介します。

アニメーションを使ってストーリーを語る

UXは、ストーリー（物語）を語るものです。どんなアプリやWebサイトを作っていたとしても、ユーザーに対して何らかの伝えたいメッセージがあるはずです。デザイナーのゴールは、このストーリーを最も効果的に伝えることでしょう。この意味で、デザイナーは皆、ストーリーテラーなのです。

ストーリーの語り方にはさまざまな方法があります。「百聞は一見にしかず」といいますが、アニメーションを導入することでこの「一見」をより効果的に、より魅力に伝えられます。こうして伝えられるストーリーは、より記憶に残るUXに繋がります。

複雑なコンセプトをアニメーションで説明する

アニメーションは、「語らずに、見せる」という非常にシンプルな考え方から、複雑なメッセージをユーザーに伝える際に非常に役に立ちます。

具体例をみてみましょう。以下の事例は、リサイクルの重要性を伝えるWebサイトです。「ゴミを正しく捨てることの重要性」を言葉を尽くして説明するのではなく、アニメーション化することで、より直感的に人々に訴えかけています。

▲dribbble | Leo Natsume

視差効果でストーリーを語る

ここでいうストーリーとは、UX上における直線的な出来事の発展と繋がりを指します。

たとえばデジタル上で物語を生み出すもっとも簡単な方法のひとつに、視差効果の活用があります。UIデザインで視差効果をうまく使うことで、ユーザーがページをスクロールする際に、3D効果が生み出せたりできます。この視差効果の機能的な目的は、視覚的な連続性を生み出すことです。これにより、ユーザーはUX上で自分がどこにいるかを理解できます。

▲視差効果を利用して視覚的な連続性を生み出している dlibbble | Zak Steele-Eklund

基本的なモバイルインタラクションを再考する

アニメーションを使用すると、毎日の基本的なインタラクションも新鮮で思いがけないものになります。

特に、モバイルアプリ上でのアニメーション使用が効果的です。アニメーションを効果的に使用することで、単にiPhoneのガラス画面をタップしているのではなく、まるでスクリーン上の現実の要素と関わり合っているような錯覚をユーザーに与えられます。

初めてのログイン体験は印象的に

ユーザーが自身のアクションの効果を確認できるアニメーションを導入してみましょう。特に、ユーザーが初めてのアプリを利用する段階では、とりわけ印象的なアニメーションを取り入れましょう。第一印象はとても重要です。

以下の事例では、アニメーション効果により次ページへの視覚的連続性が保たれています。

▲dribbble | Jakub Antalík

以下のReadme.ioのアプリもまた、初めてのログインでアニメーションが効果的に使用されている事例です。ユーザーがパスワード入力のフィールドをタップすると、フクロウが目を隠します。セキュリティ保護を意識していることを匂わせつつ、ワクワクする楽しいログイン体験を生み出せています。

▲パスワードを入力するときは、フクロウが目を隠します

ナビゲーション遷移をスムーズに

以下の事例では、ユーザーがインターフェース上のさまざまなオブジェクト間を、迷うことなく行き来できる体験を生み出しています。

▲アニメーションが活用されたナビゲーション遷移 dlibbble | Eddie Lobanovskiy

ワクワクするスクロール効果

以下の事例では、アニメーションを使用することで、スクロールする際の物理的な感覚が補強されています。

▲dribble | Sergey Valiukh

データとのインタラクションを強化する

アニメーション効果により、データビジュアライゼーションがより新鮮で思いがけない体験になります。

▲Ramotion

ユーザーへの自然なフィードバック

アニメーションはユーザーへのフィードバックにも最適です。デザインにちょっとしたアニメーション効果をつけることで、ユーザーとのインタラクションはよりユニークで魅力的なものになります。

▲dribble | Daryl Ginn

まとめ

ユーザーは理論的なデジタルプロダクトよりも、人間らしい価値を持った商品を好む傾向にあります。デザイナーは、静的なユーザーインターフェースとはお別れし、より生き生きとしたインターフェースを目指しましょう。

（著者：Nick Babich　翻訳：Mariko Sugita）

あわせて読みたい！▼