ウェブサイトが進化することで、これまであまり検討されることがなかった新しいデザイン要素、「アニメーション（英: Animation）」がより重要視されるようになってきています。デザイン要素にすべて意味があるように、各アニメーションの意味合い、具体的な使い方をそれぞれ理解しながら見ていきましょう。
海外デザインブログSmashing Magazineで、ウェブサイトに動きを加えるときに参考にしたい、9個のポイントをまとめたエントリー「Functional Animation In UX Design」が公開されていたので、今回は各ポイントを押さえてご紹介します。
詳細は以下から。
UXデザインの機能的なアニメーションとは？
今回ご紹介する機能的なアニメーション（英: Functional Animation）は、ユーザーインターフェスデザインに、プロセスの一部として実装された、さり気ないアニメーションを指します。以前ご紹介した、より日常生活の動きを元にしたディズニーのアニメーション基本原則とは異なり、コンピューターゲームのために開発されました。
各アニメーションには明確で、論理的な意図があり、それぞれの動きを9つのグループに分けることができます。デザインとアニメーションが合わないというときは、一度各グループを見直してみるとよいでしょう。
適応、順応（Orientation）
論理的な意図 突然ページが移動するのを防ぎ、ユーザーが現在位置を確認することができるようにします。
具体例 ボタンを押すとコンテンツが表示され、再度ボタンを押すとコンテンツが非表示になる。ボックス要素が伸縮することで、ユーザーはページの動きを予期することができます。
同位置での、新しいアクション（Same Location, New Action）
表示スペースが限られるモバイルデザインでよく見かけるテクニックで、一貫性のあるウェブデザインは予期しやすく、学びやすいという点をアニメーションに応用しています。
論理的な意図 どのようにページの機能、内容が変更されたのか強調することができます。
具体例 「保存する」や「編集する」ボタンはクリックすることで、どのように変更されたのか分かりやすく、ユーザーに伝えることができます。
ズームイン（Zoom In）
適応、順応（英: Orientation）に近い動きで、ユーザーがリスト一覧からアイテムを選択すると、詳細をズームインで表示し、再度リストに戻ることができる動きを指します。
論理的な意図 各要素の詳細をサムネイルリストと関連付けます。
具体例 イメージギャラリーやカード式レイアウト、アイテム選択画面など。
視覚的ヒント（Visual Hint）
特にユニークなアプローチをしたいときに重要になってくるアニメーション。ページを開くと一度だけアニメーショが適用されることで、ユーザーに対する使い方のヒントにもなります。
論理的な意図 インターフェースがどのように作業するのか、より分かりやすくサポートします。
強調、ハイライト（Higlight）
ごちゃごちゃとしたインターフェース画面では、どのように要素を追加することで、目立たせることができるか十分検討する必要があります。
論理的な意図 ユーザーの注目をあつめ、背景レイアウトから目立つようにします。
具体例 ショッピングサイトで商品を選ぶと、アニメーション付きでショッピングカートに追加されるなど。
シミュレーション（Simulation）
論理的な意図 伝えることが難しいトピックをシミュレーションを使い、ユーザーがより理解しやすいようにします。
具体例 サッカーのゴールをより分かりやすくアニメーション付きで表現したり、時間ごとの世界中の天気をアニメーション付きで表示します。
視覚的フィードバック（Visual Feedback）
ユーザーインターフェースデザインにおいて、重要な役割をもったアニメーションのひとつ。
論理的な意図 ユーザーの動作に対応する反応を伝えます。
具体例 ボタンにカーソルをあわせると、ふわりと浮き上がるエフェクトで、よりリアルな日常生活に関連する動きが特長です。
システム状況（System Status）
論理的な意図 ユーザーが現在の状況がどのようになっているのか知ることができ、理解しやすくなります。
具体例 ファイルのアップロード時に棒グラフを使い、残り時間を表示する。下スクロールでページの再読み込み（Twitterなどのフィードで利用されています。）
マーケティングツール（Marketing Tool）
これまでご紹介した8つのグループは論理的に利用しますが、このアニメーションのみより感情的（英: Emotional）に表現することができます。
論理的な意図 会社のブランドメージをアップしたり、商品の強みを目立たせます。
具体例 ブランドロゴを利用した読み込みローディング画面や、商品の特長を用いたデザインパーツの実装など。
採用するアニメーションにそれぞれ意図を持たせることで、ユーザーがより使いやすい、より直感的なUXデザインへと仕上げることができます。今後もますます注目、開発される分野のひとつと言えるでしょう。
サムネイル@ : Flipper iOS App Design on Behance
参照元リンク : Functional Animation In UX Design – Smashing Magazine
