伝わるアニメーションのための第一歩

2011年 UI/UX トレンドで、アニメーションが実装される機会が増えるだろうと予測しました。今はアプリだけなく、Webサイトでもよく見かけるようになりました。実装が簡単に行えることから、何気なく使われていることが多くなったわけですが、正しく実装するのが意外と難しかったりします。

アニメーション効果はコミュニケーションを円滑にするために使われるべきです。アニメーションが発生した瞬間に何かしらのコミュニケーションがインターフェイスと利用者の間に生まれます。つまりアニメーション効果を実装するということは、コミュニケーションの目的を明確にすることから始まります。コミュニケーションを確立しているかどうかで、アニメーション効果がギミックになるのか、意味のあるものになるのか決まります。

アニメーションと一言でいっても様々な形があります。例えば jQuery には以下のようなアニメーションが実装可能です。

また、jQuery UI にある Effect を活用することで、様々なアニメーションを手軽に追加することができます。

アニメーションは以下のグループに分類することが出来ます。効果によってはひとつのグループに該当する場合と、複数に属する場合があります。

• 方向
• 色
• 速度
• 透明度
• 形状

アニメーションは必ずといっていいほどコミュニケーションの目的が伴いますが、その目的と関連付けさせるには以上のアニメーション効果をどのように組み合わせれば効果的でしょうか。例えば 様々な意味をもつWebサイトのスピード という記事で紹介したことがある、読み込みのプログレスバーを見てみましょう。

「利用者にデータの読み込みが進んでいることを知らせる」というコミュニケーションの目的に適した効果を選ぶことで、利用者の認知を上げることができます。データの読み込みがされていることを、小刻みに利用者に知らせるためにアニメーションは最適ですが、どのアニメーション効果が適しているでしょうか。点滅は状況が確認し難くなりますし、大袈裟な動きも認知しにくくなる要因になります。読み込みが進んでいることを知らせるには、どの向きが分かりやすいでしょうか。色は変えるべきでしょうか。読み込みが終わったらプログレスバーは消えているべきなのでしょうか。様々な課題が生まれます。

プログレスバーのように利便性を目的としたアニメーション効果だけでなく、動きで自身のブランド（らしさ）を訴える場合もあります。Mac OSX や iOS には、たとえサードパーティのアプリでも「Apple っぽい動き」が幾つも見ることができます。これは、Core Animation のようなツールセットで実装しやすいからですが、こうした動きのための言語セットを用意することで、自社ブランドや感覚を共有しやすくしています。あなたの作っているサイトやアプリに似合う動きはどんなものか？連想するアニメがあるとしたら、それはどれか？・・・こうした質問について考えるのもコミュニケーションの起点になります。

使えるアニメーションパターンが増えてきた今だからこそ、適材適所に実装するためのノウハウが欲しいところ。どの効果を適用したらコミュニケーションの目的が達成出来るのかを吟味したいですし、議論をすることでアニメーションだけでなく全体のデザインについて考える機会を与えてくれるでしょう。