Webサイトのアニメーション

アニメーションをサイトに取り入れることが一般的になっています。
ちょっとした動きがあるだけで、心地よさや安心感を与えることができますね。
かっこよさだけで配置するのではなくアニメーションのメリットを生かし、意図を持たせてうまく取り入れていきたいと考えています。

アニメーションのメリット

  • 重要な部分に動きを出すことで、ユーザーの視線を誘導することができる
  • インパクトがあり、印象に残りやすい
  • ユーザーの操作により反応する、インタラクティブなサイトに
  • 情報が伝わりやすい
  • ユーザーを楽しませることができる

ユーザーの操作性の向上や、ユーザーエクスペリエンスを高める効果が期待できます。
ちょっとした遊び心で親しみやワクワクを感じてもらえるアニメーション。統一感やストーリー性を持たせたり、ブランディングにも有効です。

注意点

  • サイトが重くなり、読み込み時間が増える。
  • 意味のないアニメーションで読みづらくなれば、離脱につながる。
  • 注目させるために配置した動きも多用することで目立たなくなる。

場合によってはうるさいと感じられ、サイトの好感度が下がってしまいます。意図は何かを考えながら取り入れていきます。また、長すぎるアニメーションはユーザーを待たせてしまうことになるので、時間調整に気をつけます。

アニメーションの用途

ページ遷移のアニメーション

ページを開いた瞬間、アニメーションで始まったり、コンテンツのフェードやスライドなどの動きで驚きや感動を与える、ユーザーを惹きつけるアニメーションです。

マウスオーバー時のアニメーション

マウスオーバーでリンクボタンが下がったり、リンク画像が拡大されたりとマウスの動きに応じてアニメーションが発生します。ユーザーのアクションに対応するインタラクションデザインは、直感的に操作ができ安心感や使いやすさにつながります。自分で動かす楽しさもありますよね。

ローディングアニメーション

ページを読み込むのに時間がかかっている時、読み込んでることを示唆することで不安やストレスが軽減されるように設置します。

Loading...

スクロールアニメーション

ページをスクロールするのに合わせて、アニメーションが実行されます。スクロールするとコンテンツがフェードイン・スライドインしたり、イラストが動いたりして、ユーザーの視線を誘導することができ、飽きさせず読み進めてもらいやすくなります。

その他

点滅・振動で重要項目を注目させたり、装飾の一部としてサイトの世界観を表現したりするなどで用いられます。

アニメーションの種類

  • 動画
  • 画像(GIFアニメ、APNG)
  • SVGアニメーション
  • CSSによるアニメーション
  • JavaScriptによるアニメーション
  • WebGLアニメーション

手軽に取り入れることができるCSSアニメーションから、専門知識が必要なものまで様々な方法があります。少しでも良いサイトを制作したいと考えておりますので、この他にも気になるアニメーションがございましたら、ぜひご相談ください!