Advertisement

functional-animation-top

 

ウェブサイトが進化することで、これまであまり検討されることがなかった新しいデザイン要素、「アニメーション(英: 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