ビジュアルデザイナーの間では、アニメーション効果がユーザー体験を向上させると考えられがちですが、全体の体験にはそこまで大きな価値を生み出すわけではありません。デザインにモーションを加えることは、あくまでデザインプロセスの最後に仕上げとして行います。
しかしもしこれを再考察し、飾りではなく体験の土台としてアニメーションを取り入れたらどうなるでしょうか？ この記事では、いつどのようにモーションを用いることで感情を作れるかを説明していきます。
ちなみに、この記事ではアニメーションの説明で「喜び」という言葉を使用していません。アニメーション効果で喜ぶ人もいれば、うっとうしく感じる人もいるためです。
ストーリーを伝えるためのアニメーション
すべての体験は、物語的です。どのような種類のアプリやWebサイトでも、ユーザーに伝えたいメッセージがあるでしょう。
すべてのデザイナーは語り部であるべきです
ストーリーを語る方法はさまざまですが、いくつか効果的なものがあります。「百聞は一見にしかず」ということわざに聞き覚えがあるでしょう。モーションを導入することで、画像の持つ効果を強めることができます。モーションは、ユーザーへメッセージを伝えることを助けるだけではなく、ストーリーをより魅力的にします。このデザイン原理を用いれば、記憶に残るような体験を創造できます。
アニメーションで複雑なコンセプトを説明する
アニメーションは、ユーザーに複雑なメッセージを送るときに活用できる、素晴らしい方法です。以下の考え方がわかりやすいでしょう。
語るな、見せろ
リサイクルの重要性を強調するwebサイトで、「語るな、見せろ」の考え方がどのように表現されているかを見てみましょう。以下の例では、正しい場所にゴミを捨てる重要性を語る代わりに、アニメーションを使って人々が何をすべきかを伝えています。
画像：Leo Natsume
アニメーションでナラティブを作る
ナラティブは線状に繋がった出来事を指し、ユーザー体験全体とも結びついています。デザイナーがデジタル上でナラティブを作ることのできるもっともシンプルな方法は、視差効果を使うことです。UIデザインにおける視差効果は、ユーザーがページをスクロールしたときに、立体的に見せる効果があります。
視差効果は、明確な機能上の目的を持っています。視覚的な連続性をサポートしているため、ユーザーが自分の居場所を把握するのに役立ちます。
視差効果を使用してビジュアルの連続性を作成する。画像：Zak Steel-Eklund
基本的なモバイルインタラクションを考えなおす
基本的な操作にアニメーションを用いると、新鮮なものになります。アニメーションはモバイルアプリで特に効果的です。ユーザーにガラス片を軽く叩いて操作していることを忘れさせ、画面上で実際の要素とやりとりしているように感じさせます。
記憶に残る最初のログイン体験を作る
アニメーション効果は、ユーザーが自分が何の操作をしている最中か知ることを助けます。特に初めての利用時に、このような機能があることは素晴らしいものです。
下記の例を見てください。アニメーション効果で、どのようにユーザーを次のステップに導いているかを見ることができます。画面は、ユーザーの操作する順番を伝えるために変化しています。
画像：Jakub Antalik
Readme.ioアプリは、ログイン画面でのアニメーションがどれだけ効果的かを示す良い例です。ここでは、フクロウのマスコットキャラクターをログイン画面で使用しています。ユーザーがパスワード入力欄を選択すると、フクロウが目隠しします。初めて見たときに、面白いアニメーション効果です。
パスワード入力時に目を隠すフクロウ
面白いスクロール効果を作る
アニメーションを使って、デザインで使用したオブジェクトが物理的に持つ特徴を、画面上に反映することができます。下の例では、スクロール時に液体がどのように動くかをアニメーションに反映しています。
画像：Sergey Valiukh
データのインタラクションを充実させる
デザイナーが面白いアニメーション効果を使用すると、一般的に知られているようなデータの視覚化さえ新しく予期しないものになります。
画像：Ramotion
フィードバックをより自然にする
アニメーションはフィードバックに適しています。ユーザーに何かが起きたことを知らせるために良いのです。アニメーション効果をデザインに用いることで、ユーザーに個性を持ったなにかと対話しているように感じさせることができます。
画像：Daryl Ginn
まとめ
人々はデジタル製品を利用するときに、合理的なものよりも人間的なものを高く評価します。デザイナーは、静的なユーザーインターフェイスに別れを告げ、生き生きしたものを作る必要があります。
