サイトで使われる動きとは? 〜ウェブアニメーション紹介〜

WEB・デジタルのお仕事
2017.11.22

 皆さんは毎日いろいろなサイトを見ているかと思いますが、そのサイトの中にあっと驚くような素敵な演出のあるウェブアニメーションはありますか?

 ウェブアニメーションは、サイトに訪れたユーザーを楽しくさせ、飽きさせることなくサイト内のコンテンツを最後まで見てもらうのに効果的な手法と言われています。
 特にゲームやアニメ等におけるエンターテイメント性の高いサイトを制作するにあたっては、サイト内のウェブアニメーションは、無くてはならないものになります。

 最近では、ただアニメーションをつけるだけではなく、サイトを閲覧するユーザーにストレスを感じさせないような動きも制作側に求められています。
 たとえばサイト内に設置しているボタンひとつの動きをとってみても、派手な演出より、自然な滑らかさのあるウェブアニメーションにすることで実際のクリック数に大きな変化がみられるのも特徴としてあげられます。

 これらのウェブアニメーションの技術は日々進化しており、ウェブ制作のニュースのトレンドでは、常に新しいウェブアニメーション技術が特集されています。ここ数年では、パソコンでサイトを見る人よりもスマホで見る人が増えてきたというのもあり、スマホでも多種多様な動きのウェブアニメーションができるようになってきたのも大きな特徴として見受けられます。

 そこで今回は、サイト内で使用されるウェブアニメーションの種類を幾つか紹介していこうと思います。当社でもこれらの技術を使用してサイトを制作しています。

①Adobe Flash(アドビ・フラッシュ)

▲Adobe Flash公式ホームページ

 約20年前の90年代後半頃から、サイト制作の中で多く使われるようになり、今日までのウェブアニメーション技術の礎を築いたと言っても過言ではないのがAdobe Flash。

 Adobe Flashの特徴は、Action Scriptというプログラム言語を使用することで、自由自在な動きができること。ウインドウサイズに依存しないベクターイメージ画像を使用することができました。

 当時は、専用の掲示板でFlash職人、Flasherと呼ばれるクリエイターが、洗練された動きのあるウェブアニメーション作品を公開し合うことで、お互いの技術を高めながらFlashという技術が世に広まっていき、サイト制作する上で身近な存在になっていったように思えます。
 2000年代前半からは、ウェブアニメーションだけで無く、YouTubeの動画配信形式として使用されましたが、HTML5での動画配信技術の登場、iPhoneやiPad等の機器ではFlashの対応がされない等のことから、徐々に衰退していき、先日Adobeが2020年でAdobe Flashの開発・サポートの終了を発表しています。

※なお、Adobe Flash は2016年にAdobe Animateに名称を変更しています。

② jQuery(ジェイ・クエリ)

▲jQuery公式ホームページ

 現在もウェブアニメーションで幅広く使われているのがjQueryです。
 jQueryとは、Webと最も相性のよい言語のJavaScriptのライブラリのひとつ。本来は複雑な記述が必要なJavaScriptを簡単に使えるようにするファイルで、実にさまざまなことができます。

 日本語のように「何々が〜何々したときに〜何々する」というような書き方で簡潔に書けるのが特徴で、jQueryに関しての解説を行っているサイトや書籍も数多くあり、サイト制作において最も身近なツールといえます。

 また、さまざまなjQueryのライブラリがあることから、大抵のサイトの動きに関して、公開されているライブラリを読み込むだけで動きを再現することができ、ライブラリが見つからない場合でも、要望に近い動きのライブラリをベースにカスタマイズをすることで、1から作るよりも効率よくウェブアニメーションを制作することができます。

③ CSS3(シー・エス・エス・スリー)

 CSSとはカスケーティング・スタイル・シートの略で、カスケーディングとは「連なった小さな滝」のことを意味し、小さな滝のように連結された構造、または段階的に何かしらの物事が生じていく様子を指します。

 CSSでは、サイトのHTML上の構造に対しての装飾表示を行う仕様になりますが、2011年に勧告されたCSS3にて新しい機能が大幅に追加され、これまでできなかったウェブアニメーションができるようになりました。
 このCSS3でのウェブアニメーションは、JavaScriptを使用せずにCSSのみで制御することができるため、サイトへの実装が容易なことから、現在もさまざまなサイトで一般的に使われる仕組みとなっています。

 jQueryと同様に、解説されているサイトや書籍が多数あり、前述したjQueryと併せて併用する制作方法が現在の主流となっています。

④ CANVAS(キャンバス/カンバス)

 CANVASとはHTML5から導入された要素で、ウェブアニメーションする二次元画像要素をCANVAS内の領域に描画していき、JavaScriptを使用して要素をアニメーションさせていきます。

 JavaScriptを用いたウェブアニメーションのため、細かい動作や、いろいろな条件化による動き方の変更ができ、組み方次第ではゲームや集計したデータによるグラフの構築ができるのも特徴です。

 前提としてJavaScriptの知識が必要ですが、ウェブアニメーションとしてはかなりの軽量化をすることができる優れもののウェブアニメーションになります。

⑤ WebGL(ウェブ・ジーエル)

▲WebGL公式ホームページ

 WebGLとは上で書いたCANVAS要素内に二次元画像要素ではなく三次元画像要素を表現する技術で、昨今のウェブアニメーションでは最も可能性があり、注目されている技術といっても過言ではありません。

 三次元技術の表現はすでにテレビゲーム等では一般的なものとなりますが、これらの技術はこれまでサイト上で表現するには、高度な技術と、実際にブラウザ上で表現する機器のスペックによる障壁があり、対応が難しいものでした。

 しかし、昨今の技術進化によりテレビゲームで見かけるような三次元の表現ができるようになりました。こちらも、JavaScriptを使用して画像処理を行います。

⑥ SVG(エス・ブイ・ジー)

 SVGとはスケーラブル・ベクター・グラフィクスの略で、画像形式のひとつですが、JPEGやGIF、PNG等のような従来の画像形式と比べて大きな違いがあります。

 従来の画像形式は、ピクセルという色情報の最小要素に色が塗られ、そのピクセルが集まってひとつの画像を形成していました。そのため画像を元の大きさより大きく拡大すると、画像の縁がギザギザし、画像が粗く見えてしまいました。
 SVGは、これらをXML(エクステンシブル・マークアップ・ランゲージ)という構造化言語により制御しています。そのため画像を解像度によって適正なサイズで表現することが可能になり、大きく拡大することで画像の粗さがなくなります。

 また、SVGの構造の中にウェブアニメーションを埋め込むことも可能なため、SVGアニメーションとして取り扱われることが増えています。元々の画像の中にアニメーションを埋め込む仕様のため、非常に滑らかで美しい動きを表現することが可能です。

 SVGで作られた画像は、直接画像のコードを記述して表現するため、サーバーに負担をかけず、かつひとつの画像ファイルが軽量な特徴があります。
 冒頭でも述べたように、最近ではウェブアニメーションにも滑らかな美しさが求められているため、非常に有用なウェブアニメーションとして活用されていく技術ではないでしょうか。

おしまいに

 いかがでしたでしょうか。
 いくつかのウェブアニメーションを紹介してみましたが、どれも高度な動きを表現するには、JavaScript等のプログラム言語の理解が必要不可欠です。しかし、最近ではJavaScriptの動きをサポートしてくれるライブラリがどのウェブアニメーションにもありますので、比較的簡単にウェブアニメーションが実装できるようにもなっています。
 これらのライブラリもまた機会があれば紹介していきたいと思います。

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です