Transition

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

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

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

.animate()CSS属性を変更する。要素を移動させたり色を変えたりできる
.fadeIn()要素を透明から不透明にする
.fadeOut()要素を不透明から透明にする
.toggle()要素の表示・非表示を切り替える
.slideDown()要素を下へスライドさせる
.slideUp()要素を上へスライドさせる

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

Blind上下左右に表示・非表示
Bounceバウンスさせる
Clip中央に向かって表示・非表示
Explode要素が分割され外に向かって非表示
Fadeフェイドイン、フェイドアウト
Fold平面的に折り畳まれていく
Highlightハイライト
Puff要素が大きくなりながら非表示
Pulsate点滅しながら表示・非表示
Scale起点を中心に拡大・縮小する
Shake要素が揺さぶられてながら表示・非表示
Size拡大・縮小
Slide上下左右にスライドする
Transfer要素の外枠を別の要素の外枠に移動するような効果

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

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

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

プログレスバー

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

ジェスチャーに合わせてアニメーションをしているだけでなく、細かい動きに Apple らしさが見え隠れしています。

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

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