1906年に最初のアニメーション動画が制作されたのは、ストーリーテリングにおける革新的な一歩でした。ストーリーテリングで用いられるアニメーション技術は、毎年格段に進歩しており、それは2018年も同様でしょう。Webデザイナーは古い技術ではなく、より高度な２Dや３Dのアニメーション画像を選ぶようになってきています。
2018年のアニメーション
Webデベロッパーは、FlashをやめてCSSやJavaScriptでアニメーションを作成するようになりました。Flashをサイトにインストールすることは、技術的な理由から段階的に廃止されました。Flashが廃止された第１の理由は、iPhoneやiPad、iPod TouchでFlashがサポートされていないため、モバイルデバイスできちんと読み込むことができないことにあります。これだけでも、Webサイトへのトラフィックを大幅に減少させてしまう可能性があります。
Flashが段階的に廃止された第２の重要な理由は、GoogleのクローラーがFlashを無視してしまうからです。Flashを使用したサイトは、検索結果において悪影響を受けます。
そして最後の理由は、経済的なものです。Flashは独自のソフトウェアであり、デザイナーはアップデートにお金を支払う必要があります。
２Dと３Dのアニメーション画像の組み合わせは、ここ数年の技術進歩においてよく使われるようになってきています。アニメーションは、短い時間の中でしかにユーザーの注意を引くだけでなく、フラットで味気のない画面に視覚的な魅力を与えます。
アクセスのしやすさ
アニメーションは、Webデザイナーにとってより実装しやすくなってきています。シンプルなgifから長いビデオまで、アニメーションを作成するための革新的なオープンソースソフトウェアが豊富にあります。多くの経営者が、プロの助けを借りずにこれらのデザインを制作することができます。アニメーションは、現在のトレンドであり、魅力的でモダンなものです。市場での競争力を維持するために、Webサイトの中に少しだけアニメーションを組み込むと良いでしょう。
そこでトラフィックを増やすアニメーションをWebサイトに組み込むための、革新的で実際に行えそうな５つの方法を紹介します。すべてHTMLとCSSを使います。
１．ロゴの操作
アニメーションをサイトに組み込む簡単な方法は、ロゴを動かすことです。 Googleが日々ロゴを変化させることについて考えてみましょう。動きやデザインの異なるロゴは、変化のない場合より、ユーザの注意を引きます。動くロゴは新しいデザイントレンドになりました。そして取り残されてしまうのは好ましくないでしょう。
LottieはAirbnbがデザインした素晴らしいアプリで、すでに画面上にある画像を移動したり変更したりすることができます。ロゴの回転、変形、拡大、再表示は容易に作成でき、Webサイト上に異なる世界を作り出します。
２．キネティックタイポグラフィー
キネティックタイポグラフィーは、「動くテキスト」と定義されています。テキストのデザインと動きは、特定の感情や態度を引き起こすために作成されています。キネティックタイポグラフィーというアニメーションは、CMやデジタル広告掲示板、またはWebサイトのランディングページなどで、毎日のように遭遇します。このタイプのアニメーションのポイントは、全体的なデザインに効果的に統合する方法を見つけることです。フォントやサイズ、動き、色など、すべての要素に関して検討する必要があります。
たとえば、ビーチリゾートのWebデザインであれば、海に関連する感情を引き起こすために、円や波の動きを取り入れると良いでしょう。少しの創造性が、デザインプロセスにおいて非常に役立ちます。
３．ホバー効果
Webデザインにアニメーションを追加するもう１つの簡単な方法は、ホバー効果の追加です。ホバーアニメーションは、マウスのポインターがページ上の何かを変換するときに起こります。オンラインストアでは、セール品の上へスクロールすると、リンクをクリックしなくても価格が表示されるといったように、ホバーアニメーションで目立たせるという手法が頻繁に使われています。
またホバー効果を使用して、グラフィックをほかのものに変えることもできます。たとえば、スクロールをすると鳥が飛ぶといったアニメーションが可能です。シンプルなアイデアは、時にはあなたのサイトの訪問者にとってもっとも魅力的なものになる可能性があります。
４．アニメーションマップマーカー
ほとんどの企業では、その企業サイト上に地図リンクがあります。地図上にマーカーをドロップすることは、ページに活気を与えるもう一つの効果的な方法です。マップマーカーは、Googleマップと、簡単なJavaScriptを使用して作成できます。デザイナーがより精巧なものを探している場合、CSSマップマーカーをコーディングするオンラインのチュートリアルがあります。プログラムに精通しているデザイナーなら、マーカーを急降下させたり、ホバーアニメーションを作成したり、色を変えたりすることもできます。
５．アニメーションドキュメンタリー
作成に時間がかかり、困難にはなりますが、アニメーションのドキュメンタリーはWebデザインを活気づける魅力的で創造的な方法です。この形式は、社会的および政治的な問題を活気づけるために作成することができます。2017年後半には、アニメドキュメンタリーがリリースされて、高い評価を得ました。タワーは、1966年にテキサス州オースティンで起こった、同国初の学校における大量虐殺の話を伝えています。この形式の魅力は、クリエイティブな群衆の視線を引くことと、その問題を効果的に伝えられることです。
動きを生み出すことの必要性
Webデザインにアニメーションを統合することの重要性は、大げさなものではありません。現代世界に存在する数十億のWebサイトのほとんどが、すでに動きを強みとして使用しています。動きのない古いサイトやFlashを使用しているサイトは、途中で脱落してしまい、本来あるはずのトラッフィクが得られなくなってしまいます。ユーザーは、動かず活気のないWebサイトを訪れた場合、サイトに長く滞在しない可能性もあるでしょう。
今日の消費者、特にミレニアル世代と呼ばれる人々は、注意持続時間が低下してきています。技術が刺激やカスタマイズといったより多くの手段を作り出すことが大きな理由でしょう。ユーザーは絶えず大量の情報を受け取っています。そのため、停滞した画面ではユーザーのエンゲージメントを促すことはできません。画面上での動きが、注目を集める鍵となるのです。企業やWebサイトの所有者が、アニメーションを追加する十分な手腕がない場合、Webデザイナーを雇うことも１つの選択肢です。この領域への投資は、あなたのUXに驚異的な結果をもたらし、デジタルブランドを強化することができます。
