Webにおけるアニメーション

アニメーションをWebサイトに実装する目的には、「注目を集める」「視線の誘導」「ユーザーとのコミュニケーション」などがあります。

人間の目は動くものを追いかける習性があるので、注目を集めたい部分にアニメーションを使えば、視線を誘導することが可能になるのです。

また見て楽しいWebサイトになるように、動きで躍動感を付けるためや、デザイン表現の一部としてアニメーションを使うこともあります。

Webサイトへアニメーションを実装すると、デザイン表現の幅が大きく広がり、ユーザーへ伝わるものも増えていきます。

メインビジュアルに使用することもできますし、小さなパーツにアニメーションで動きを加えることもできます。

アニメーションの構成や実装方法などを知り、魅力的なWebサイト作りに役立てて下さい。

アニメーション構成

アニメーション実装の際には、どのようなアニメーションにするかという構成を、作成前に決めていきます。

Webアニメーションを使う目的から、どのような内容にすべきかを検討します。

Webサイト内のどの場所に、何をどのように配置するか、どのくらいのサイズが適切か決めます。

その後、時間を軸にしてアニメーション構成を考えていきます。

再生時間によってもアニメーションの印象は変化するため、最適な速度を検討します。

アニメーションは見る人が快適に感じる速度にすることで、全体の印象を向上させることができます。

動きを自然に感じさせるためには、移動が直線的になりすぎないようにすることが必要です。

動きに加速や減速があると、滑らかで自然な印象になります。

Webでは、ゆっくり加速するスローインの動を「ease in （イーズイン）」、減速するスローアウトの動きを 「ease out（イーズアウト） 」、両方組み合わせた動きを「ease in out（イーズインアウト）」 と言います。

アニメーション実装の選択肢

Webにアニメーションを実装する技術は、多種多様です。初期のころから使われ続けている技術から、最新の手法までご紹介していきます。

それぞれに特徴があり、メリットとデメリットがあります。

またWeb環境も、目まぐるしく変化しています。

どの手法で実装すべきかという選択は、成功か失敗かを決めかねないため、慎重に検討することが必要です。

DOMアニメーション

最も基本的なアニメーションの実装法で、今でも多くのWebサイトに使用されています。

JavaScriptを使って、setInterval関数やrequestAnimationFrame関数でループ処理させ、Style属性に変化を加えて行うアニメーションです。

しかしJavaScriptだけでは、動きが複雑になるほどコードが長くなってしまうため、JavaScriptを拡張したjQueryという技術が多く使われています。

jQueryには、どんなブラウザでも動くというメリットがあります。

CSS3アニメーション

CSS3で新しく定義されたCSS TransitionとCSS Animationを使って、CSSだけでアニメーションを実装できます。

フレームワークとの相性がいいのが特徴です。

手軽にアニメーションを実装できるため、よく使用される手法です。

GIFアニメーション

アニメーション初期から使われてきた、シンプルな手法です。

GIF画像をつなげてアニメーションにしています。

多くのブラウザにおいてプラグイン無しで表示することができるため、手軽に使うことができます。

しかし、音声をつけることはできず、動画的な大規模アニメーションには不向きです。

Canvas（キャンバス） アニメーション

HTML5になってから追加された、canvas要素という技術を使います。

HTMLでアニメーションが表示される範囲を指定して、JavaScriptを使ってWebサイトに高速描写していく手法です。

ユーザのクリックなどの動きに対応するアニメーションにすることが可能であるため、人気があります。

プラグインが増えたため、手軽に使いやすくなりました。

SVGアニメーション

SVG要素というベクター形式のデータを使うため、拡大しても滑らかできれいなデータであるのが特徴です。

またXML形式のテキストで編集ができることと、CSSとjQueryを含むJavaScriptで操作できるというメリットがあります。

SVGは多くのブラウザで対応しており、スマートフォンでも表示ができるため、使いやすいアニメーションです。

WebGLアニメーション

WebGLは、ブラウザ上で3DCGのグラフィックやモーションを、リアルタイム表示できる技術です。

Flashのように、別途インストールをしなくても表示させることができるため、注目されています。

Lottie

スマートフォンなどのネイティブアプリで、アニメーションを表示できるライブラリです。

Webサイト上でも使用できます。

Adobe「After Effects」で作成して、「Bodymovin」プラグインを使ってファイル出力したデータを、Lottieで表示します。

データを軽量化することができるため、再生までの時間を短縮できるのが魅力です。

アニメーションはパフォーマンスが重要

アニメーションを実装する際に、注意したいポイントは「パフォーマンス」です。

アニメーションが滑らかに動くと、よりリアルに感じられて、ユーザーを引き付けることができます。

アニメーションの パフォーマンスを表す指標としては、fps（Frames Per Second）があります。

fpsは1秒間に処理できるコマ数のことで、数値が高いほど滑らかに動きます。

Webサイトでの目標値は、60fpsです。

fpsはChromeの開発ツールを利用すれば、リアルタイムに計測することができます。

ユーザー体験を向上させるためにも、滑らかさを感じられるアニメーションを目指すことが重要です。

アニメーションは上手く使えばユーザを引き付けることができますが、むやみに使いすぎると、ユーザーの時間を奪うこともあります。

使い過ぎには注意しましょう。

（画像は写真ACより）