アニメーションは、ユーザーの注意を引き、ウェブデザインに大きく貢献していると言われます。しかし、その分ユーザーの文章に対する集中を失わせるために、使い方には気をつけなければいけません。

コンテンツがアニメーションではなく静止画像で伝えることができないかを考えてみて、伝えることが可能ならばアニメーションは不要です。アニメーションを使う必要があったとしても、無限ループは避けたほうがいいでしょう。必要な回数だけ動かしてから、自動的に止まるようにします。

アニメーションはデザインにステータスと豪華さを演出しているとも言われますが、大多数のユーザーにとってアニメーションはストレスとなっています。特に、MARQUEEタグのような上下や左右に自動的に流れるようなテキストは使用してはいけません。

これは嫌われるタグです

アニメーションの目的

アニメーションを使う目的に、以下のようなものがあります。

・連続的な変化を見せる

２通り以上の状態があるときに、その状態の移り変わりを見せるために用います。

・方向の変化を示す

相対する動きをアニメーションを見せることによって、戻ったり動いたりという変化を示すことができます。例えば、ページ下部に右から左に動くアニメーションを表示すると、ユーザーはすぐにそれが次のページへのリンクだと分かります。

・時間による変化を見せる

アニメーションは時間とともに変化するものなので、時間によって変化する現象を対話形式で表現することができます。たとえば、日の出から日の入りまでの太陽の位置をアニメーションで表示すれば理解しやすくなります。

・複合的に見せる

アニメーションは複合的な情報を１つの画面上で表示するためにも使われます。例えば、ユーザーがマウスポインタで選択したエリアの背景色を変えたり点滅させたりします。

・グラフィカルな表現を豊かにする

静止画よりも動画の方が表現しやすい場合に用います。例えば、画像ソフトの消しゴムの機能などは、消しゴムのアイコンを単に表示するより、実際に消しゴムで消しているアニメーションを表示させたほうが確実に理解度が上がります。

・３次元構造を視覚化する

モニタは平面なので３次元構造を表示するのは難しいですが、アニメーションで前後に動かすだけで容易に理解することができます。

注意を引き付ける

更新した情報に情報に注目させたりするように、特定の要素に対して注意を引くという目的でアニメーションを使うのは効果的です。例えば、右から文字が出てきて中央で止めたり、小さな文字を大きくしていくなどといったものは良い例です。動く文字は読みにくいので、テキストをアニメーション化する場合は無限ループを避けて、１回ループしたら止まるようにします。以下は文字をフェードイン表示させるための例です。

NEW!

「注意を引き付ける」という目的ならば、とりあえず動かせばいいように思われるかもしれませんが、例えば、５つしかないコンテンツすべててが「ここを見て」と点滅していたとしてもユーザーにとってはどれを見たらよいか分かりません。たくさんの要素が詰め込まれたページの中で、最新のアイテムや特殊なアイテムに注目させるような使い方をしてこそ意味があります。

eWeb