この熾烈な競争環境の中で、企業は人々の注意を引き付け、維持する方法を必死に探しています。私たちが日常生活を送っているとき、ソーシャルメディアフィードはもちろんのこと、路上でのアニメーション広告、携帯電話のビデオから私たちに噴出する視覚刺激の無限の流れは、私たちの注意を争っている絶え間ない動きの感覚を生み出します。

私たちの環境の動きに対する一瞬の反応は、生き残る必要性から開発され、潜在的に脅威または有害であると認識された環境刺激によって引き起こされました。人々は動くものに特別な注意を払います。目の隅から速く動くものを捕まえると、意識が情報を処理する時間がなくなる前に潜在意識の脳がすでに危険に反応しているため、脳は一瞬で私たちに警告します。

広告主はこれを知っています、そしてそれが私たちが持っている理由です アニメのストリート広告 バス停や地下鉄のプラットフォームでは、ソーシャルメディアストリームに動画広告が表示され、フルモーションビデオ付きの電子看板が表示されます。この手法は、マーケティングメッセージを配信するために設計されたワンツーパンチ効果です。まず、私たちの注意を引くことによって、そして次に、ビデオとアニメーションを使用してメッセージを伝えます。

静止画が千の言葉の価値がある場合、アニメーションはどのくらいの価値がありますか？

これがWebアニメーションの出番です。 Webデザイナー 私たちの注意を引き付けて保持することを望んでおり、おそらく予期しない喜びの衝撃を加えるでしょう。 Webアニメーションを使用して、複雑なプロセスやアイデアのさまざまなステップを視覚化したり、単純なマーケティングメッセージを示したり、人々がスクロールするときにWebページ上で物事を自然で流動的な方法で移動したりできます。

Webアニメーションの始まり、GIFの台頭

ワールドワイドウェブの初期の頃、物事はかなり静的で退屈でした。ウェブページは主に印刷業界のグラフィックデザインとレイアウトに基づいていました。ただし、一部の設計者は、技術的および帯域幅の課題にもかかわらず、より動的で魅力的なものにするために、初期の形式のWebアニメーションを含めるために協調して努力しました。ウェブサイトへのGIFアニメーションの最初の追加の1つは ジェフリーゼルドマン のバットマンフォーエバー（1995年）。訪問者は、バットマンが彼らに向かって飛行することで迎えられ、画像シーケンスとしてアニメーション化されました。

バットマンフォーエバーのプロモーションサイトは、当時最も人気のあったサイトの1つでした。他のWebデザイナーや開発者は、GIFWebアニメーションを風変わりで人目を引く要素としてWebサイトに組み込むようになりました。

早送り20年とアニメーションGIFは今どこにでもあります。 Twitter、Messenger、iMessage、WhatsApp、Skype、Instagram、Facebookを利用しています。 GIFは、短いループアニメーション、画像シーケンス、さらには短いビデオループにも適しています。ただし、残念な欠点は、GIFファイル形式に可変の透明度がなく、アルファチャネルをサポートしていないことです。したがって、すべてのピクセルは完全に不透明または完全に透明になります。

GIFアニメーションはルネッサンスの始まりでした ウェブデザイン 、しかしそれらは理想的ではありませんでした。特にダイヤルアップと遅いインターネット速度の初期の頃、GIFは帯域幅を大量に消費していました。その結果、低解像度のピクセル化されたシーケンスが作成されました。 GIFを可能な限り小さいサイズに圧縮する必要がある設計者にとっての欠点は、8ビットパレットが制限されていることでした。これにより、多くのディザリングが発生しました。これは、21世紀に高速インターネットが一般的になるにつれて変化し、その結果、Webアニメーションは数百万色で見栄えが良くなり、フレームレートが高くなると滑らかになりました。

FlashWebアニメーションの夜明け

大きなウェブアニメーションブームは、 閃光 1996年に マクロメディア 彼らのウェブプラグインとそれに付随するフレームベースのアニメーションツールを発表しました：Macromedia Flash（彼らが買収した後 FutureSplash Animator 、ベクターアニメーションプログラム）。 Flashは、Webに新しい機能をもたらす上で主導的な役割を果たしました。オーディオやアニメーションから双方向性やビデオまで、Flashはインターネットを前進させるのに役立ちました。

インタラクションを含むサイト全体にわたってシンプルで無駄のないベクターベースのウェブアニメーションを構築する機会は、風景を埋め尽くす（あまりにも）多くのアニメーション要素を伴うウェブデザインの「バロック」期間と呼ばれるものを生み出しました。それにもかかわらず、Flashはダイナミックの可能性を垣間見せてくれました ウェブデザイン 、デザイナーを実験に解放し、急速なWebデザインの進化の期間を解き放ちます。

製造会社の勘定科目表

Flashアニメーションは軽量で、比較的簡単に作成できます。サイズはわずか数キロバイトで、SWFファイル形式と鮮明なベクターグラフィックを備えたサウンドを使用したファイルで配布されます。ウェブアニメーションの作成は合理化されたプロセスになり、ウェブページの読み込み時間はそれほど長くなりませんでした。しかし、それでも重大な欠点が残っていました。実行するにはブラウザプラグインが必要でした。

さらに、Flashでの高度な対話は、JavaScriptに似たオブジェクト指向プログラミング言語であるActionScript（AS）によって可能になりました。 JavaScriptは当初、単純な2Dベクターアニメーションを制御するように設計されていましたが、その後、洗練されたツールに進化しました。

残念ながら、Flashアニメーションは応答性を目的としておらず、すべてのデバイスで適切に機能するわけではなく、最終的にすべての一般的なモバイルデバイスから削除されました。ファイルサイズは比較的小さかったものの、Flashは十分に最適化されておらず、CPUを大量に消費することになりました。これは、モバイルでも問題でした。フラッシュ時代の終わりはスティーブジョブズの後に来ました Flashをサポートしないことにしました Appleモバイルデバイス。

Flashは、PC時代に、PCとマウスのために作成されました。しかし、モバイル時代は、低電力デバイス、タッチインターフェイス、およびオープンWeb標準に関するものであり、Flashが不足しているすべての分野です。

スティーブ・ジョブズ

今日のWebアニメーション

現在、Flashは廃止されているため、Webアニメーションにはさまざまなニーズがあります。ツールは柔軟で軽量でなければなりません。 Webデザイナー 作成する必要があります レスポンシブ さまざまな画面サイズ、ブラウザ、アスペクト比、ピクセル密度などを考慮した、さまざまなデバイス（デスクトップ、タブレット、モバイル）に対応するコンテンツ。私たちのウェブアニメーションの傑作は、5インチ、720pxのモバイルから、9.7インチのQXGAタブレット、32インチのRetina6Kディスプレイまで動作する必要があります。

テクノロジーは成熟し、パワー不足のモバイルデバイスでも、非常に要求の厳しいWebアニメーションや高解像度ビデオコンテンツを処理するための帯域幅と処理能力を備えています。これは、ウェブサイトが非常に「忙しい」という意味ではありません。いつものように、それはアニメーション、動的な相互作用、静的な要素の間の適切なバランスをとることについてです。今日、多くの派手なWebアニメーションを実装できるという事実は、そうすべきだという意味ではありません。

Webデザイナー/アニメーターは、クロスプラットフォームのサポートも検討する必要があります。 10年前、デザイナーは自分たちの作品がこのような幅広いデバイスで見栄えがすることを確認する必要はありませんでした。さまざまなアスペクト比、縦向き、横向き、およびさまざまな ピクセル密度 と視距離を考慮に入れる必要があります。この難問は、Webデザイナーに一連の新しい課題と潜在的な落とし穴を提示します。 ユーザーテスト 貴重な時間を消費し、多くのプラットフォームでより多くの問題が発生する可能性があり、Webアニメーションはこれまで以上に詳細にする必要があります。

HTML5、CSS3、JavaScript、およびSVG（スケーラブルグラフィックス）は、Webアニメーションに最適なソリューションのようです。これらの最新のWebテクノロジーと言語を使用すると、上記の問題のすべてではありませんが、ほとんどの問題に取り組むことができます。ただし、特に未知の領域では、慎重に踏むことを常にお勧めします。広範なQAとテストが必須です。

なぜWebアニメーションを使用するのですか？

Webアニメーションは、静的なWebページよりも長く人々の注意を引き付け、保持することができ、アイデアや概念をより明確かつ効果的に伝達します。優れたWebアニメーションは、あらゆる動きの背後にあるストーリーを伝えます。それはすべて、意味と「魂」（ラテン語のアニマ）でアニメーションを生き生きとさせることです。

Webアニメーションはスムーズで意味があり、訪問者の旅をサポートする必要があります。ウェブデザイナー/アニメーターは、アニメーションがどのようにフィットするかを知っている必要があります ユーザー体験 、可能性のあるユーザーフローを予測し、それを有意義な方法でサポートするようにしてください。

Webデザイナーは、純粋に技術的な観点からWebアニメーションを見るべきではありません。ユーザーの視点からそれを見る必要があります。

アニメーションの重要な点の1つはタイミングです。適切なタイミングは、アニメーションに物理的および感情的な意味を与えます。エクスペリエンスはシームレスで論理的である必要があります。アニメーションが流動的でない（タイミングに問題がある）場合、人々はそれをバグとして認識し、Webサイトをさらに探索する動機を失う可能性があります。

アニメーターは、意図した効果を提供するために適切なタイミングを使用する必要があります。アニメーションではいくつのキーフレームを使用する必要がありますか？訪問者のインタラクションによるアニメーションの動的な変化はどのようなもので、インタラクション後の応答はどのくらいの速さですか？アニメーションは気まぐれで、真面目で、面白いですか？

論理的な観点から、Webアニメーションは2つの基本的なタイプに分けることができます。

• 静的で非インタラクティブなWebアニメーション、たとえば、 GIFアニメーション 。
• ユーザーの入力に応じて変化する、ユーザーエンゲージメントと双方向性を備えた動的なWebアニメーション。

ダイナミックアニメーションの最良の例は ゲーム 、ユーザーが画面上のコンテンツを操作する場所。別の簡単な例は、Webサイトの訪問者として特定の要素の位置を変更することです スクロールします 視差スクロールウェブサイト。アニメーションは受動的ではなく、ユーザーの操作によって異なります。

動的Webアニメーションは、Webサイトでアニメーション化されたインフォグラフィックを表示するためによく使用されるため、ページをスクロールするときに特定の領域に注意を向けます。これは、関連情報を強調するための強力な方法です。

Webアニメーションの長所と短所

使用されなくなったレガシーソリューションを含む、Webアニメーションテクニックの長所と短所を次に示します。

技術	長所	短所
GIF	シンプルで誰でも利用できます。ブラウザプラグインは必要ありません。それは画像シーケンスアニメーションを可能にします、それはビデオのようにすることができます。	アニメーションGIFファイルのサイズは非常に大きくなる可能性があります。不透明度制御は存在せず、アルファチャネルはありません。圧縮率が低いです。ピクセル化できます。
APNG	アルファチャンネルをサポートします。	ほとんどのWebブラウザではサポートされていません。
閃光	エクスポートされたswfファイルは非常に小さい場合があります。高速で、インタラクティブで、ベクターアニメーションを使用します。	ほとんどのプラットフォームではサポートされなくなりました。
HTML / CSS3	シンプルで習得しやすい。移行や変換に適しています。 HTML / CSS3アニメーションは、モバイルデバイスで適切に実行されます。ベクトルまたはピクセルアニメーションが可能です。スケーラブルベクターグラフィックス（SVG）を操作することもできます。	すべてのSVGプロパティをCSSでアニメーション化できるわけではありません。アニメーションの可能性は限られており、JavaScriptまたはSMILの使用が必要になることがよくあります。新しい入力や変化する環境（動的アニメーション）には対応できません。
スマイル	コンパクトで、CSSが処理できないプロパティをアニメーション化できます。画像として埋め込まれたときにSVGを保持します。	すべてのブラウザでサポートされているわけではありません。
JavaScript	画像シーケンス（.pngシーケンス）を生成するSVGアニメーションライブラリを使用するときにWebアニメーションを簡単にします	画像として埋め込まれた場合、SVGを保持しません。

一般的なWebアニメーションの長所と短所はどうですか？適切に実行されたWebアニメーションは依然として場違いに見える可能性があるため、アニメーションをWebサイトのデザインに統合する前に、いくつかの重要な質問（およびクイズクライアントや他のチームメンバー）を行うことをお勧めします。

まず、確認する必要があります どうやって アニメーションはユーザーエクスペリエンスに影響します。それは 改善する ウェブサイトのUX？ デザイナー するべき：

• 既存のウェブサイトのデザインを調べる（利用可能な場合）
• ターゲットオーディエンスと彼らが使用するハードウェアプラットフォームを確認します
• サイトの読み込み時間とCPUの負荷を確認します
• 他の選択肢を探す
• 使いやすさに目を光らせてください

それは ない 単にトレンドを追跡するために、サイトでWebアニメーションを使用することをお勧めします。

Webアニメーションを使用するという決定は、他の設計上の決定と同様に扱う必要があります。 ウェブデザイナー 長所と短所を比較検討し、ユーザーエクスペリエンスが損なわれないようにする必要があります。また、開発者と協力してコード要件を確認し、将来的に調整が必要になる可能性のある非効率的なコードにとらわれないようにする必要があります。

最新のWebアニメーション技術は、過去20年間で大幅に成熟し、パフォーマンス、利用可能な帯域幅、およびレンダリング品質が向上しました。ただし、デザイナーは慎重に踏み、ユーザーエクスペリエンスを有意義に向上させる場合にのみWebサイトにアニメーションを追加する必要があります。

•••

ApeeScapeデザインブログの詳細：

• 直帰率を下げるためにカスタム読み込みアニメーションを作成する方法
• スケッチとルーパーを使ってすぐに心を曲げるイラストを作成する
• 原理とスケッチを使用したUIアニメーションのステップバイステップガイド
• あなたのブランドをより関連性のあるものにするためのロゴアニメーションのインスピレーション
• アニメーション製品解説動画を作成するためのステップバイステップガイド

基本を理解する

Webアニメーションは何に使用されますか？

Webアニメーションは、あらゆる種類のWebページで使用されます。それらは、訪問者がWebページをスクロールして要素に注意を引くときに発生する小さなWebアニメーション、製品を示すアニメーション、または何かを面白く魅力的に披露するプロモーションWebアニメーションです。

なぜウェブデザインの分野でアニメーションが重要なのですか？

Webアニメーションは、注目を集め、人々をよりよく引き付け、より明確かつ効果的にコミュニケーションするために使用できます。静的なWebページよりも長く、人々の注意を引き付け、保持することができます。 Webアニメーションはスムーズで意味があり、訪問者の旅をサポートする必要があります。

Webで使用される最も一般的なタイプの基本的なアニメーションは何ですか？

Webアニメーションの基本的なタイプは、CSSおよびJavaScriptアニメーション、Scalable Vector Graphics（SVG）、SMIL、GIF、キャンバス、およびビデオです。各Webアニメーションの種類は、目的に最も適しています。たとえば、CSSトランジションとアニメーションは、理想的にはUIと基本的なトランジションに使用する必要があります。

Flashとその用途は何ですか？

Flashは、Adobeのアニメーションツールおよびブラウザプラグインです。これは、Webアニメーションを構築するためにフレームベースのタイムラインを使用し、ActionScriptと呼ばれるスクリプト言語を使用して実現される対話性を持つことができます。ほとんどのモバイルデバイスはそれをサポートしておらず、すべてのWebブラウザは徐々にサポートを終了しています。