Webサイトに動きをつける7つの技術と5つの注意点

1 Webサイトに動きをつける技術
2 Webサイトに動きをつける場合の注意点
3 まとめ

HTML5やCSS3の登場、通信技術の進歩などの要因により、Webサイトに動きをつけることも難しくなくなりました。
一昔前は、Webサイトの動きというと、Gif画像かFLASHを用いることが一般的でしたが、現在は様々な方法で効率的・効果的な動きを簡単に実装することができます。

Webサイトはユーザーに情報を伝え、望んだ行動につなげるという目的があります。注意点や課題もありますが、適切な技法と表現によって動きをつけることで、より伝わりやすく、より行動に繋がりやすくなります。

そこで今回は、Webサイトに動きをつける7つの技術と、動きをつけるときに考慮すべき5つの注意点をご紹介します。

Webサイトに動きをつける技術

画像：FIND/47

上記は、Find/47という、自然や建造物、文化に関する日本全国の美しい写真を集めたサイトです。

見ているだけで楽しいサイトですが、その秘密は美しい写真だけではありません。
ふわふわと揺れるようにスクロールされたり、スクロールで日本地図が動いたり、写真が自動でズームアウトを繰り返したりと、とても豊かな動きがついています。

ビジュアルメインのWebサイトでは、いかにコンテンツ(この場合は写真)に引き込むかが重要になります。
Find/47の例は、Webサイトの動きを適切に活用し、魅力を最大限伝えている例といえるでしょう。

このウェブサイトの動きは、主にJavaScriptを使って実装されているようです。
Webサイトに動きをつける技術にはJavaScript以外にも様々なものがあります。それでは、Webサイトに動きをつける主要な技術を7つご紹介します。

Gifアニメーション

Gifアニメーションは、複数のGif画像を連続的に表示することで、パラパラ漫画のような動きをつけることができます。
各フレーム(1枚のGif画像)に対して静止時間を設定したり、ループ回数を設定したりといったことが可能です。

Gifアニメーションを利用する最大のメリットは、ほとんどのWebブラウザがサポートしており、ユーザー側でプラグインやソフトウェアを用意する必要がないことです。
また、静止画を連続して組み合わせるため、動画を作ったり、複雑なプログラムを作るよりはコストを抑えやすいというメリットもあります。

一方、音声をサポートしていない、Gif画像は256色した表現できない、圧縮しづらくデータ容量が大きくなるというデメリットもあります。

柔軟な表現という点でデメリットはありますが、ほとんどのWebブラウザがサポートしているため、ボタンにアニメーションをつけて注意を惹くなど、ちょっとしたポイントで使うとインパクトの出る手法です。

DHTML(Dynamic HTML)またはAjax、SPA

DHTML(Dynamic HTML)とは、HTML、CSS、JavaScript、レイヤー、フィルターなどの技術を複合的に組み合わせ、自由な位置や動きを表現するための技法です。特定の技術ではなく、技術の総称という概念的なイメージです。

WebサイトがHTMLのみの静的なものが主流だった時代に、特別区別するためにDHTMLという用語が使われていました。現在では、ほとんどのWebサイトでCSS、JavaScriptなどの技術が複合的に使われているため、用語としてはあまり使われていません。

代わりに登場したのがAjax (Asynchronous JavaScript + XML)やSPA(Single Page Application)という考え方です
Ajaxは非同期通信という技術によりスムーズな動作、大容量のコンテンツ配信が可能になりました。
SPAはさらにRuby などのバックエンド技術(サーバー側の技術)を活用することにより、非常に豊かな表現力、操作性を実現することが可能になりました。

しかし、Webサイトに必要な技術がHTMLだけでなく、CSS、JavaScript、さらに様々なプログラミング言語まで拡張したことにより、開発コストの増加などの課題もあります。
一方、豊かな表現が可能という特徴を活かして、PC、スマートフォンで共通のプログラムを用いるなど、保守性の高いWebサイトにも繋がります。

JavaScript

上述のDHTMLで紹介したJavaScriptですが、動きをつけるという点では最もよく利用されている手法です。
ほとんどのブラウザでサポートされており、JavaScriptが動く環境であれば同じ動作を期待することができます。

利用例としては、フォームの入力補助やドロップダウンメニューやポップアップメニューといったナビゲーションの動き、マウスの動きによる画像変化、スクロールや時間によってページ内容を動的に書き替えたりといったものがあります。

世界中で多くの開発者が利用していることから、よく用いられる処理をライブラリやフレームワークとして公開されており、比較的低コストで豊かな表現が可能です。

FLASH

一昔前、Webサイトに動きをつけるならFLASHが最適な手法でした。ユーザーがFLASHプレイヤーをダウンロードしていることが条件ですが、非常に豊かな動きをつけることができます。
サイト全体をFLASHで作成し、様々なアニメーション、操作性を導入した「フルFLASHサイト」も多く登場しました。

しかし、セキュリティの問題や、HTML5やJavaScriptが進歩し代替えできるようになってきたことで、急速に利用が減少しています。2014年、GoogleChromeでアクセスされるPCサイトの80%以上がFLASHを使用していましたが、現在は数%になっています。

また、現在の主要デバイスであるスマートフォンで使えない、主要ブラウザであるGoogle Chromeがサポート終了を公言しているなど、今後開発の機会はなくなっていくでしょう。

SVG(Scalable Vector Graphics)

SVG(Scalable Vector Graphics)は、HMLという独自タグを定義できるメタ言語(言語を定義するための言語)を用いた2次元ベクター画像の記述言語です。
ベクター画像は線と面などの図形で表現するため、伸縮による劣化がなく、様々なユーザー環境に応じて最適な表示が可能です。

アニメーション機能もサポートされており、主にマイクロインタラクション(ユーザーのアクションに対するフィードバックを伝える細かなデザイン)で活用されます。
例えば、マウスオーバーすると形がスムーズに変わるボタンなどは、SVGを使用すると簡単に実装できます。

JavaApplet

Applet(アプレット)とは、アプリケーションに組み込んで動くプログラムのことで、Javaという言語で開発されたAppletをJava Appletといいます。
Webブラウザ上で実行され、ユーザーの操作を受け付けたり、HTMLでは難しい動きを表現したりすることができます。

Javaの開発元であるOracleがJava Appletを非推奨にするという発表もあり、今後廃止に向かう可能性が考えられることから利用頻度は減ってきています。
これは、Java Applet の利用のためにJavaプラグインのインストールが必要であるためで、ほとんどの主要ブラウザにおいて、プラグイン不要の技術を推し進める動きがあります。
現在は、プラグインが不要でJava Applet と同じような表現が可能なJava Web Startテクノロジーが推奨されています。

SMIL (Synchronized Multimedia Integration Language)

SMIL(Synchronized Multimedia Integration Language)は、静止画、動画、音声、音楽、文字など様々な形式のデータの再生を制御するための言語です。それぞれのデータをどの位置に、どのタイミングで、どれだけ表示するのかをコントロールします。

例えば、AppleのiBookというアプリで文章読み上げ機能を使ったとき、音声と連動して読み上げられた文章の色が変わっていくのを見たことがあるかもしれません。これはSMILを利用しています。
HTMLに近い言語であるため、学習コストが低いというメリットがあります。

Webサイトに動きをつける場合の注意点

このように、Webサイトに動きをつけるには様々な方法があり、適切に活用すれば、より使いやすく、魅力的で、伝わりやすいWebサイトにすることができます。
しかし、動きの導入には注意すべき点も多く、また導入が難しい場合もあります。

ここからは、Webサイトに動きを導入するする際の注意点を見ていきましょう。

過剰な動きは注目を散乱させてしまう

人は動くものに注目します。そのため、適度に動きをつけることでユーザーの意識を注目させたい場所に注目させることができます。
しかし、ページのあちこちでボタンやバナーが点滅したり、アニメーションが再生されたりしていると、目的の場所に注目させることができず、情報過多で混乱させる可能性があります。
また、動きが激しいWebサイトは煩雑で、安っぽい印象にもつながります。

ユーザーの操作を妨げる可能性がある

ユーザーは情報を検索する、商品を購入する、目的の資料をダウンロードするなど、何らかの目的をもってWebサイトを訪れます。動きがその目的を妨げるものになれば、目的が達成されないだけでなく、不快感を与えてしまうかもしれません。

例えば、長時間のアニメーションを再生させる場合、再生が終わるまで他の操作ができなくなってしまったら、別の目的を持ったユーザーはストレスを感じます。
長時間のアニメーションを利用する場合は、ユーザーが再生をストップし、別の操作を行えるような選択肢を用意する必要があります。

一般的な操作性から逸脱してしまう

Webサイトを使うとき、3本線のアイコンが右上か左上にあれば、多くのユーザーは底をタップすることでメニューを開くことができると思います。また、他と色が違い、点滅している四角形の要素があれば、それがクリックできるものであるとわかるでしょう。

このように、ユーザーは感覚的にWebサイトの使い方を学んでいます。
こうした一般的な操作から逸脱してしまうと、ユーザーは望んだアクションができず、使いづらいと感じてしまいます。
動きをつけることで独自性やクリエイティブなイメージを伝えることができますが、これらはあくまでも目的達成の補助的な役割であって、ユーザーに学習の必要性や使いづらさを強いるものであってはいけません。

アクセシビリティに問題が生じる

年齢や言語、教育レベル、障がいの有無などによる障壁を設けず、多くのユーザーが同じように閲覧、使用できるようにすることをアクセシビリティといいます。
動きはクリックなどのユーザーアクションを起点にしたり、音声や動画を利用したりするため、障がいを持ったユーザーのアクセシビリティを大きく下げてしまう可能性があります。

マウス操作を起点に動きをつける場合は、身体障碍者にとってマウスが一般的に使用するデバイスではないことを考慮しましょう。
視覚障がいのあるユーザーは音声読み上げソフトを使ってWebサイトを閲覧しますが、動画や画像、動きによるアピールが多い場合、テキスト部分だけを読み上げても何も伝わらないかもしれません。
対象のWebサイトのターゲットを考慮し、必要なアクセシビリティが確保できるよう企画する必要があります。

閲覧環境による問題がある

Webサイトの閲覧環境はユーザーによって様々です。
まず、PCとスマートフォン、利用している状況によって回線速度が大きく異なります。大容量で高速な通信プランが普及しているとはいえ、動画再生に向かない回線や処理能力の低いデバイスを利用するスマートフォンユーザーは多くいます。
また、従量課金制のプランに加入しているユーザーであれば、通信料の多いWebサイトを敬遠するかもしれません。

また、OSやブラウザの種類、バージョンによって、対応しているJavaScriptのバージョンに違いがある場合もあります。このことを考慮せずに開発すると、多くのユーザーが閲覧できないサイトになってしまうかもしれません。
FLASHのようにプラグインのインストールが必要な技術の場合、こうした影響はさらに顕著です。

基本的なHTMLやCSSは多くのOSやブラウザで共通して利用できますが、動きをつける要素であるJavaScriptや様々な技術はそうではありません。

動きをつけるときは、ターゲットユーザーの一般的な閲覧環境を想定し、どの技術を使うかを計画段階で検討する必要があります。