Webサイトにおけるアニメーション技法の多様化

HTML5の登場により、Webサイトの動的アニメーションの手段は、ここ数年で大きく変化しつつあります。アニメーションはWebサイトに幅広い表現力を与え、ユーザーに便利さや分かりやすさを提供するだけでなく、「可愛い・格好良い・楽しい・優しい・怖い」などユーザーの感情に働きかけるコンテンツを制作する大きな手助けにもなります。

アニメーション技法の推移

Webサイトのアニメーション表現の手段は多様化してきました。
大まかに分割すると、例としては以下のものが挙げられます。

• GIFアニメーション
• APNG
• Flash
• jQueryのanimateによるアニメーション
• スプライトシートアニメーション
• CSS3アニメーション（transform/keyframe）
• Canvasアニメーション
• SVGアニメーション
• webGLを用いたアニメーション

十数年前まではGIFアニメが主なアニメーション表現に用いられていましたが、Flashが開発されると、その豊富な表現力・アニメーションの滑らかさを活かした多くのアニメーションコンテンツが生み出されました。しかし、その反面で「大容量で読み込みに時間がかかりすぎる・UIが使い辛い・アニメーションが最適化されていないために重い・大音量で音が鳴る」など、ユーザーを不快にさせるコンテンツも多く産み出されてしまい、制作側の要因であるにも関わらず、Flashの技術自体が非難を浴びてしまう場面も多々ありました。

一時期「アニメーションコンテンツと言えばFlash」と言われるほどFlashが多くのWebサイトで使われていましたが、iPhoneとiPadのFlash非対応により、多くのデバイスでアクセスされる想定のコーポレートサイト等に除々にFlashが使われなくなり、代わりに jQueryのanimateやCSS3アニメーションを用いたアニメーションが使われるようになりました。現在はCanvasやSVG、WebGLがアニメーションの表現手段として注目されるようになり、アニメーション表現の技術が多様化の一途を辿っています。

Flashは「良くない」のか？

前述の文章ではまるで「Flashは良くない」ような表現になってしまいましたが、決してそのようなことではありません。

あらゆる表現手段の中でも、PC用Webサイトにおいて「最も滑らかで、最も派手で多様な表現力を持ちつつ、かつ容量が軽い」のはFlashだと思われます。現在Flashはプラットフォームをアプリケーションやゲームに方向転換しており、一昔前では考えられないような美麗なグラフィックを、GPUを用いて描画することが可能になっています。また、FlashはプラグインであるFlash Playerを用いることでブラウザ間の誤差を吸収してくれるため、スムーズなコンテンツ開発を行うことができます。

JavaScriptを用いたWebサイトにおけるアニメーションは、あらゆるデバイスに対応できる反面、派手な表現をするとデータ容量が大きくなるためにデバイスに多大な負荷を与えてしまいます。さらにクロスブラウザに対する施策を取る必要があり、工数もFlashに比べるとかなり大きくなってしまいます。

そのため、複雑なアニメーションや3Dを用いたコンテンツはまだまだFlashに利点があり、これらの表現を用いるために現在もFlashを採用しているエンターテイメント系のWebサイトは少なくありません。

求められるのは「最適な」表現技法

表現が多様化している今、技術者に求められているのはただ単に最先端の技術を使うことではなく、要件定義・コンテンツ内容・対応デバイスなどを考慮した上での「最適な使用技術」を導きだす知識量です。それぞれの技術の長所や短所を把握した上でコンテンツに沿った最適な技術を用いることで、分かりやすい・表現力に富んだコンテンツを作ることが求められています。

「この方法を使えば間違いない」といった「銀の弾丸」をひたすら求めるのではなく、多くの表現方法を理解した上で、その中で最適解を求める柔軟性が必要とされる時代になっているのかもしれません。