サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> ユーザビリティ >> アニメーション

アニメーション



アニメーションを使うときの注意点

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

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

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

これは嫌われるタグです


アニメーションの目的

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

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

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

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

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

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

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


注意を引き付ける

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


NEW!

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



 
 

Webの開設と運営法に戻る Next:ビデオと音楽




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, Accessibility, Usability. All rights reserved. - Home