ポストフラッシュ時代のウェブアニメーション

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

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

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

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

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

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

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

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

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

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

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

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

インタラクションを含むサイト全体にわたってシンプルで無駄のないベクターベースのWebアニメーションを構築する機会により、（あまりにも）多くのアニメーション要素が風景に押し寄せるWebデザインの「バロック」期間と呼ばれるものが作成されました。 それにもかかわらず、Flashは動的なWebデザインの可能性を垣間見せ、デザイナーを自由に実験させ、Webデザインの急速な進化の時期を解き放ちました。

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

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

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

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アニメーションは、あらゆる動きの背後にあるストーリーを伝えます。 それはすべて、意味と「魂」（lat.anima）でアニメーションを生き生きとさせることです。

Webアニメーションは、スムーズで意味のあるものであり、訪問者の旅をサポートする必要があります。 Webデザイナー/アニメーターは、アニメーションがユーザーエクスペリエンスにどのように適合するかを認識し、可能性のあるユーザーフローを予測して、意味のある方法でそれをサポートする必要があります。

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

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

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

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

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

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

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

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

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

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

まず、アニメーションがユーザーエクスペリエンスにどのように影響するかを確認する必要があります。 それはウェブサイトのUXを改善しますか？ 設計者は次のことを行う必要があります。

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

単にトレンドを追跡するためにサイトでWebアニメーションを使用することはお勧めできません。

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

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

Toptal Designブログでさらに読む：

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