UIにおけるアニメーションとは、コンテクストの強化である
UIにおけるアニメーションの役割には、「なんとなく楽しいから」「気持ちがいいから」という側面も大いにあると思います。
ただ、最も重要な役割は、「コンテクストの強化」ではないでしょうか。
コンテクストの強化って？
コンテクストとは、文章などの前後の脈絡。文脈。という意味で通常つかわれる単語です。
例えば、「ママ、おかわりちょうだい」というセリフがあったとします。
“家”での会話なら、子供が母親にご飯をもう一杯催促していることになりますが、もし家ではなく“スナック”だったとしたらどうでしょう。男性が女店主にお酒をもう一杯催促していることになってしまいます。
コンテクストの強化とは、「背景や状況が分かる情報を増やす」ことで、正しい意味で情報を受け取ることができるようにすることを指します。
UIにおけるコンテクストの強化とは？
「追加した」「削除した」「移動した」など、ユーザーアクションが発生したときの情報が増える（強化される）ことで、アクションの結果なにが起こったのか分かりやすくすること。であると考えられます。
例えば、次のアニメーションを見てみましょう。
「すいか」が増えた、ということはなんとなく理解できますが、やや不親切です。そこで、次のようなアニメーションをつけてみるとどうでしょう。
「banana」と「cherry」の間に「すいか」が追加されたことが、より理解しやすくなりました。アニメーションで「状況に関する情報」を増やすことで、ユーザーの理解をより深いものにしています。
UIにおけるアニメーションは、「なんとなく楽しいから」「気持ちがいいから」だけでなく、ユーザビリティの向上に大きく関係しているということが言えるのではないでしょうか。
コンテクストの強化の具体例
では、どんな場面でアニメーションは効果的に使われているのでしょうか。個人的には、「完了を伝える」「注意喚起する」「画面遷移を補う」の3パターンに分類できるのではないかと考えています。その具体例を、実際のアプリでご紹介したいと思います。
【具体例その1】完了を伝える
Twitterのいいねボタンをタップすると、ハートが赤くなりキラキラしたアニメーションが発生します。
ただ赤くなるだけでも機能としては十分ですが、アニメーションが追加されることで、ユーザーは「いいねをした」というフィードバックをより強力に受け取ることができます。
Foursquareでは保存ボタンをタップすると、タブバーの「リスト」に保存したものが貯まっていくアニメーションが発生します。
Twitter同様、「保存した」ということをより強力に認識させると同時に、保存したものは「リスト」に行けば見られるのだということも表現しています。
【具体例その2】注意喚起をうながす
atteはその名の通り対面による取引（会って＝atte）を目的とした地域コミュニティーサービスです。ホームでは「投稿」ボタンがサークル型で強調されていますが、詳細画面へ行くとそのサークルがアニメーションによって消えます。
ホームでは「投稿」が重要ですが、詳細画面では一番重要ではないのでしょう。画面によって機能のプライオリティに差をつけ、それをアニメーションで強調させています。
Houzzは、プロが提案するインテリアデザインを1,000万枚以上の写真から選び、彼らとコミュニケーションをとることができるサービスです。
各写真につけられた「緑色のタグ」は、実際に購入可能なアイテムだということを意味しています。
写真にただタグが貼られているだけでも機能としては成立しますが、揺れるアニメーションを追加することで、「ここにタグがあるよ」ということがより強調されています。
【具体例その3】画面遷移を補う
画面遷移の補助は、アニメーションを利用する場面としては最も多いパターンかと思います。
Feedlyでは画面遷移をするとき、現在見ている画面がゆっくりと上に移動しつつ、次の画面もうっすら見えています。
ページをめくっているようなアニメーションを追加することで、画面遷移したのだということをより認識しやすくしています。
Airbnbでは、検索ボタンをタップしたとき、ボタンの形状が検索フォームに変形することで、滑らかな画面遷移を実現しています。
画面がパッと切り替わるのではなく連続して変化させることで、ユーザー体験を分断させません。
こういったアニメーションによる連続的なユーザー体験は、Material Designでも提唱されているため、Androidアプリではよく見かけます。
以上、UIにおけるアニメーションの役割と、その具体例のご紹介でした。
VASILYではアニメーションも意識したUIデザインを実践したいデザイナー・学生インターンを募集中です。ご応募お待ちしております。
