4、アニメーションの利用

a0001_0165594、アニメーションの利用

ウェブサイトにおけるアニメーションの利用について解説する

  • アニメーションを利用する目的と注意点

ウェブサイトにおいて、アニメーションによる動きの要素を導入する主な目的は次のようなものである。

・注意を促す、惹きつける

・進行度合いを目で確認できるようにする

・ユーザーの操作を補助する

・順番を見せる

・類似体験させる

・ユーザーを楽しませる

ただし過剰な動きの存在はユーザーに不快感を与えることもある。

動きを表現するアニメーションはGIFアニメーション、Flash、javascriptなどを利用して作成する。

 

  • 基本的なアニメーションの種類

シンボルん点滅や回転、簡単な変化などを複数の画像を切り替えて表示するアニメーションは主にユーザーの注意をひくことを目的に使用される。このうち、2枚の画像を交互に切り替えることで動きを表現する方法を、2フレームアニメーションと呼ぶ。また、少しずつ変化している数枚の画像を繰り返し表示することで、同じ動きが繰り返されているように見せる方法をループアニメーションという。

処理の進行度合いを見せるアニメーション表現の代表がprogress barである。データベース処理や検索、ファイルのアップロードダウンロードなど、時間のかかる処理の進捗具合をユーザーに伝えるために利用される。

ロールオーバが主にユーザーの操作を補助する目的で使用されるアニメーションである。これはマウスを特定の画像に重ねるとあらかじめ設定した別の画像に表示が切り替わる機能である。また、情報入力画面において通常は1項目だけ表示しておき、クリックすると、全項目が表示されるポップアップやある項目をクリックするかマウスオーバーすると、全項目が表示されるプルダウンメニューなどもユーウザーの操作を容易にする目的で使用される。