海外デザインブログWebdesigner Depotで公開された「The ultimate guide to Web animation」の著者より許可をもらい、要点をまとめて日本語抄訳しています。
ウェブテクノロジーが発達したおかげで、これまではデザイン性が求められていたアニメーションも、ユーザビリティーを考慮したり、ユーザーが何をしているのか分かりやすく理解する手助けとして活用されるようになりました。
アニメーションは、もはやウェブデザイナーにとって珍しいものではなくなってきています。ストーリーを伝える新しい方法として、効果的なインタラクションデザインの基本と言ってもよいでしょう。
アニメーション・テクノロジーは全てのブラウザがサポートしているわけではありませんが、プラグインなどを使わずに表現する新しい方法が見つかってきています。今回は、そんなアニメーションの具体的な活用方法5つをまとめてご紹介します。
ウェブアニメーションの種類について
ユーザーインターフェースの操作性を良くしたり、強調するためにアニメーションが使われますが、実際にはどのような動きがあるのでしょう。他のデザイン要素同様に、利用するアニメーションの種類やタイミングは、注意深く検討する必要があります。
また導入方法も重要な課題で、アニメーションのリソースが大きすぎることで読み込み速度が遅くなってしまう恐れがあります。では、ウェブデザインでよく使われているアニメーション5種類について見ていきましょう。
インターフェース要素のアニメーション
このアニメーションは、ユーザーがどのような行動をしたのか（たとえばボタンをクリック）、知らせてくれる役割があります。クリックすることで他のページに誘導したり、サイドバーやモーダルウィンドウを表示したり、お問い合わせフォームからメールを送信したりします。
フラットスタイルがトレンドとなっているいま、このアニメーションは必要不可欠なものになってきています。またアニメーションはシンプルなもので、ボタンの背景色を変更したり、すこしだけバウンドさせるだけでも十分です。ウェブページをふんわりとしたアニメーション付きで表示することも、このカテゴリーといえるでしょう。
待機アニメーション
このアニメーションは、ユーザーに背景で何かが起こっているのかを伝え、驚かさないようにする役割があります。
このテクニックは、ユーザーインターフェースがはじめて発明されたときから採用されており、マウスカーソルが砂時計にかわったり、読み込みバーを表示するのも同じ手法です。ユーザーはなにかおかしいと感じると、クリックやタッピングする傾向があるので、できるだけできるだけ状況を伝えるアニメーションの実装を検討しましょう。
Beegitというアプリでは、イメージ画像のアップロードがどのくらい完了したのか、プログレス円グラフで知らせてくれます。
ストーリーを伝えるアニメーション
言葉やイメージ写真、音をつかってコンテンツを表現するストーリーテリング（英: Story-telling）は、今では漫画アニメを超える勢いです。実際にいくつのウェブサイトでは、ユーザーがウェブページを下にスクロールするのに合わせて、物語を使えるアニメーションが適用しています。
これらのアニメーションの効果は間違いなく、通常はあまりユーザビリティーなどは気にせずに、ユーザーを魅了することを目的にし、テーマとなるコンテンツが並びます。職人の熟練の技術を見せたり、商品やブランドをより体験、共有できるように考えられていることもあるでしょう。
アニメーションの品質だけでなくサイトのパフォーマンスや、ページの読み込みに影響がでないように実装されています。具体例としてAppleでは、スクロールすることでMac Proがどのような構成となっているのか、詳しく確認することができます。
純粋な装飾アニメーション
装飾としてのアニメーションは、ユーザーがCTAを完了するまで完全に隠しておくべきです。同様にヘッダーやフッターなどをマスクホバーするなど、ユーザーが特定の操作をするときに適用されるアニメーションにも活用できるテクニックです。
テクニックを活用したユニークな例として、Photojojo.comはオススメです。ページの一番下までスクロールすると、キャラクターの恐竜があなたの写真を撮影する仕掛けがされています。
広告としてのアニメーション
もしもユーザーに広告を注目して欲しいのなら、アニメーションを加えるのはとてもよい方法です。しかし装飾的なデコレーションと同様に、広告としてのアニメーションでもユーザーの行動の邪魔をします。オンライン販売では、この邪魔が命取りとなってしまいます。
広告を配信したり、アニメーションを加えたりプロジェクトに応じて検討する必要があるでしょう。
アニメーションの導入について
アニメーションを導入するときに、特に注意したいポイントをまとめています。これから利用しようとしているテクノロジーやテクニックに、ちょっとだけ理論付けがあることで、ユーザーは喜んでくれるでしょう。
パファーマンスを考慮しよう。
たくさんのアニメーションや特別なエフェクトを実装し、読み込みにプログレスバーを搭載しているウェブサイトでは、ユーザーは情報が読み込むまで待ってくれません。ユーザーを待たせるということは、ユーザーを失っていると考えると良いでしょう。
技術面でのアニメーションのパフォーマンスを考慮すると、JavaScriptよりCSSを利用するのが良いでしょう。CSSをベースとしたアニメーションで、予備としてJSを活用してみましょう。
小さいものからはじめよう。
アニメーションをデザインツールとして考えたとき、まずは小さくて目立たないものから実装していきましょう。次に、大きくて目立つアニメーションは、「見た目が良い」だけでなく、役立つコンテンツが必要となります。
アニメーションを実装するときは、ユーザーのサイト体験を改善できるかどうか、自分に問いかけてみましょう。ちょっとした動きが良いデザインの鍵となり、しばしば見落とされがちです。
アニメーション持続時間は短く。
日常生活でものを掴んだり、動かしたりする場合、動きは素早く行われます。「ミリセカンド（英: Millisecond）」単位での調整が必要で、アニメーションの持続時間は短くするようにしましょう。そうでなければスローモーションのように、動きを遅く感じてしまいます。
バウンド・エフェクトを利用しよう。
UIコンポーネントは小さい、平面的なオブジェクトとなります。ボタンをクリックしたり、ファイルを移動したりするときに、すこしだけバウンドするエフェクトを追加してみましょう。
ユーザー・エクスペリエンスの向上だけでなく、うまく実装することで立体的にバウンドしているエフェクトを実現できます。
物体は急には止まりません。
動いている物体が止まるまでにはすこし時間がかかります。物体が動いたり、止まったりするアニメーションを再現するときは、最初は速度をあげ、終わりは速度を落としてみましょう。「イージング（英: Easing）」というテクニックで、CSS機能として活用することができます。
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！
アニメーションの基本原則12個をどのようにHTML/CSSで再現するのか、サンプルファイルも一緒に公開されています。
参照元リンク : The Ultimate Guide to Web Animation | Webdesigner Depot
