近年では誰もがアニメーションを活用します。たとえばBttn.cssやHover Buttonsといった、ボタンに追加できる非常に小さなホバー効果や、Granim.jsを介して動く、魅力的でダイナミックなグラデーションスタイルの背景などが存在します。サイズにかかわらず、アニメーションはタイポグラフィやナビゲーション、ロゴタイプなどと同じように、インターフェイスにとって不可欠な要素です。アニメーションを短い時間で消滅する、ある種の無駄な要素だと考えているなら、それは間違いです。
アニメーションはただユーザーを楽しませるだけの要素ではありません。とても深い目的のために働くものです。ユーザー体験全体を結びつけるために使われるものもあれば、インターフェイスのアクセシビリティを向上させ、見つけやすく理解しやすくするために使われるものもあります。
マイクロインタラクションは 小さくとも有意義なアニメーションの好例です。小さいながらも効果は強力で、ユーザーに視覚的な手がかりを与え、体験を楽しいものにします。Micronをぜひご覧ください。Micronは、JavaScriptで出力されたCSSアニメーションの小さなライブラリです。
それぞれの効果は、HTMLレイアウトの中やスクリプトを介して任意のDOM要素に適用することができます。
もう１つの有名で便利なアニメーションが、ローディングアニメーションです。ほとんどのユーザーはこのエフェクトに慣れています。Blotter.jsといった独自のタイポグラフィアニメーションのように、ユーザーを驚かせたり感動させたりすることはありませんが、それでも優れたユーザー体験にとっては貴重な存在です。Webサイトがコンテンツを表示する準備をしている間、ユーザーの興味を持続させる効果があります。
フリーズした画面では、ユーザーは簡単に離れていくものです。そこで、小さなプログレスバーを設置することで、訪問者に魅力的な形で進行状況を通知することができます。
アニメーションはデザインの多くの側面に良い影響を与えます。小さなエフェクトが大きな違いを生み出すのです。Pretty CheckboxとHamburgersを見てみましょう。Pretty Checkboxは、チェックボックスやラジオボタンとのインタラクションを豊かにできるCSSエフェクトが存在する小さなライブラリです。このエフェクトは一見ただの装飾に見えますが、ユーザーが選択するプロセスに重点を置くことで、意思決定が肯定的で「大きく」なります。
Kurt Petrek氏によるプロジェクトのようなHamburgersには、ハンバーガーメニューのための魅力的な変形エフェクトがたくさん含まれています。小さな３つの平行線には開閉機能があり、２つの状態の間を心地良く変化することで、訪問者に注意を喚起し、上手く目的を思い出さます。
至るところに存在する別のアニメーションに、スクロールバーによって起動するものがあります。ストーリーを伝えるWebサイトが発端となり、徐々に知名度を獲得しました。
この技術は、ユーザー体験を滑らかで一貫したものにする接着剤として見なされています。加えて、視覚的な導線にユーザーを注目させるためにも配置されます。たとえば、T-Scrollはスクロールアニメーションを扱っていて、CSSとJavaScriptを利用しています。
※編注：翻訳元の記事ではもう一つ取り上げていましたが、元記事からリンクが外れていた上、検索してアクセスしてみるとウィルス反応がありましたので編集部の判断で除外しました。元記事を参照の際にはお気をつけください。
装飾アニメーション
現代のツール（プラグインやライブラリ、巧妙なコードスニペット）は、インターフェイスの詳細を簡単にアニメーションにするのに役立ちます。この例としては、Mimic.CSSやAnimate Plus、AnimTrapなどの普遍的なソリューション、あるいはjQuery DrawSVGやMoving Lettersなどの具体的なソリューションなどが挙げられます。
Mimic.CSSは、拍動して始まったり、急降下して終わったりするような広く使われるエフェクトが20点集まったコレクションです。適切なクラスを追加するだけで、任意のDOMの要素に適用できます。
AnimatePlusは、パフォーマンスと柔軟性に重点を置き、簡単で直感的なものを集めた軽量のJavaScriptベースのライブラリです。
AnimTrapは、単なるアニメーションツールではありません。アニメーションのためのCSSフレームワークであり、アニメーションの安全な基盤として機能します。実行可能なスクロールベースのアニメーションを作成する際に使用しましょう。
Leonardo Santos氏による素晴らしいjQueryのプラグインは、SVGに生命を吹き込みます。能動的にユニークなエフェクトを生み出すグラフィックを実現できるよう、パスと連携して機能します。たとえば、ユーザーを引きこむスクロール効果、マスクアニメーションなどの再現に利用すると良いでしょう。
Moving LettersはTobias Ahlin氏の個人的なプロジェクトで、素晴らしいタイポグラフィベースのアニメーションを16個提供しています。コードスニペットをコピー&ペーストするだけで、プロジェクトの中で望んだエフェクトを再現することができます。
DrawSVGやMoving Lettersは純粋に訪問者を楽しませるためのツールです。私たちのコレクションにはTilt.js、Pixel Wave、3D linesという、装飾のために使われる３つのツールもあります。これらは豊かなユーザー体験を提供できるよう、トレンドに沿った機能をインターフェイスに組み込むために作成されました。
Tilt.jsはユーザーを惹きつける繊細な視差効果を作成できる小さなプラグインです。またPixelWaveは幾何学的な雰囲気があり、流行のWebサイトに馴染むように、トランジションがピクセルの波に変わります。
3D linesはThree.jsをベースにした小さなソリューションです。変化し続ける色と動き続ける線によって現代的な背景を作成するときに使ってください。
アニメーションは、些細な作業に非常に役立ちます。たとえば、ソートを視覚的に美しくしたい場合は、MixItUpを使用しましょう。このエフェクトは、フィルタリングやソート、挿入などのアクションにアニメーションをつける依存性のないソリューションです
その他のアイデア
プラグインに代わる有効な方法は、コードスニペット、特にMary Lou氏のような本物のプロが作成したスニペットです。Decorative Letter AnimationsやGlitch Effectを検討してみましょう。どちらの記事にも目を見張る再現可能なデモが含まれていて、新鮮でスタイリッシュです。他方で主な短所として、非常に先駆的でブラウザの互換性に欠けている点が挙げられますが、それは克服できない障害ではありません。最終的にこの問題は解決されるでしょう。
まとめ
静止したままのWebサイトは、化石とすら言えるでしょう。アニメーションは演劇のようなものです。Webインターフェイスの動的な側面を活用する必要があります。Webサイトでもっとも先駆的で参考になる技術の背後にある、Three.jsやWebGL、GSAPといったツールを紹介しませんでしたが、これらのツールを利用してこの分野の第一歩を踏み出すことももちろんできます。
アニメーションへのこだわりについて、あなたはどのように考えますか？ プロジェクトにどのようなエフェクトを採用していますか？ アニメーションに関して、パフォーマンスやブラウザの互換性など、どのような要因を考慮に入れていますか？
