機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。
アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。
より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。
進捗
ローディングアニメーション
Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。
ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。
待ち時間を短くできないのなら、より楽しい待ち時間を提供する
ローディングアニメーションは、シンプルなものが理想的です。音などの余分なエフェクトは必要ありません。また、優れたローディングアニメーションはユーザーを惹きつけます。待っている間に興味をひかれるものや見ていて面白そうなものがあると、ユーザーは待ち時間の長さにさほど集中しなくなります。
ローディング時間が短くても、楽しいアニメーションがあると待ち時間が少し楽しくなります。クレジット：Thomas Bogner
プログレスバー
アニメーションは、線形の動きで進行具合を表示できます。古典的な「ローディングバー」は、このアニメーションのもっとも典型的な例です。
Aviasalesのプログレスバー イメージクレジット：Mark
ほかに、複数のステップの進捗を伝えるプログレスバーもあります。
アニメーションは、線形の動きで進捗を表示できます。イメージクレジット：Joshua Sortino
スケルトンスクリーン
スケルトンスクリーンとは、情報が徐々に読み込まれるページの空白状態のことです。情報が画面上に徐々に表示されるので、即座に反応しているという感覚を生み出します。コンテンツを読み込んでいる間もユーザーの関心を維持するために、小さなアニメーションとともにスケルトンスクリーンを利用することができます。
スケルトンスクリーンは、コンテンツが完全に読み込み終わる前に、UIを徐々に完成させていきます。イメージクレジット：tandemseven
視覚のフィードバック
ユーザーの行動に対するアニメーションでの応答
優れたインタラクションデザインとは、あらゆるインタラクションの結果を伝えるフィードバックを提供することで、ユーザーが視覚的に結果を理解できるようにするものです。どの部分が操作可能なのか、どのようなインタラクションが望まれているのかをサイト訪問者がわからないと、訪問者が混乱する原因になります。この混乱に対処するには、インタラクションを明確かつ理解しやすいように、十分に考えてデザインすることが重要です。
ホバーアニメーションとエレベーション
要素が操作可能であることを示す手段として、ホバー効果は視覚的なフィードバックのもっとも典型的な例の１つです。
ユーザーは要素の機能に疑問を抱くと、その箇所にマウスを移動させる傾向があります。ですから、ホバーアニメーションが直感的に際立つ必要があります。ソース：codepen
しかしモバイル端末では、マウスカーソルがないためホバー効果は機能しません。ですから、ボタンやその他の操作可能な要素に、ユーザーがそれらをタップしなくても操作可能なものだとわかるような視覚的なサインが必要です。また、インタラクションしたら即座に応答しなければなりません。以下の図にあるボタンは、タップすると押し下げられたように見えます。このようにユーザーの操作にサイトが対応したことをユーザーに示すのです。
陰影によって、要素がタップ可能であることを示します。イメージクレジット：Vadim Gromov
注目を集める
人間の目が動きに引き寄せられることはよく知られています。ですから、アニメーションは注意を引き、ユーザーが実行しているアクションを促進するのに最適なツールなのです。
たとえば、フォーム入力はアニメーションを使うことで大幅に改善することができます。正しいデータが入力されていれば、完了時に簡単な「うなずく」アニメーションを導入することができるでしょう。逆に、横に振動することで入力内容が拒否されたことを示せます。このようなアニメーションがあると、ユーザーは即座にその行動を理解することができます。
フォームが頭を横に振っていることを表現しています。イメージクレジット：MichaëlVillar
ナビゲーション
関係と遷移
最近のトレンドは、ハンバーガーアイコンをクリックすると表示される隠れたナビゲーションメニューです。アニメーションは、２つの異なる状態の画面をつなげたり、不快な遷移を防止したりする上で不可欠です。遷移の仕方をうまくデザインすれば、ユーザーはどこに注意を集中すべきかを明確に理解することができます。
アニメーションを使って遷移をより明白にすることができるので、ユーザーが元いた場所から終了した場所までの間に起こったことがはっきりします。クレジット：codyhouse
以下はBrian Hoff DesignのWebサイトの例です。ユーザーが円で囲まれた矢印ボタンをクリックすると、右から大きなメニューボックスが飛び出てきます。「飛び出る」アニメーションは、メニューが画面外からスライドして来たかのように見せ、全体のインタラクションをスムーズに動かすことができます。
アニメーションは、２つの異なる状態の画面をつなぐのに役立ちます。
スムーズな状態変化
遷移は状態の変化を示すのに不可欠です。Adrian Zumbrunnen氏は記事『Smart Transitions In User Experience Design』において、同じページの異なるセクションにつながるリンクをクリックしたとき、前後の文脈を保持したまま遷移するのにアニメーションがどう役立つかについて、効果的な例を提唱しています。
以下のぶつ切りに感じられてしまう、静的で突発的な変化と比較してみてください。
人がもっとも不自然に感じるのは突然の変化です。このようなインターフェイスの変化はユーザーの行動を困難にします。イメージクレジット：smashingmagazine
ここにアニメーションが入ると以下のようになります。
アニメーションとは、「生命を吹き込む」ということです。イメージクレジット：smashingmagazine
後者の例では、小さなアニメーションを使用することで、ほかのセクションとの関係のなかで記事のどこにいるか、ユーザーは確認することができます。
クリエイティブな効果
クリエイティブなアニメーションは、UXをより楽しく記憶に残りやすいものにすることができます。インターフェイスにエンターテインメント的な価値をもたらすのです。
長いスクロールのあるサイト
つい最近まで、ファーストビューで勝負するのが疑う余地のないルールでした。デザイナーはこのエリアを価値のある情報でいっぱいにすることに多大な労力を費やしてきました。幸いなことに現在では、「ファーストビューのルール」は必ずしも真実ではないことがわかっています。実際に、一般的なメディアページにおいて、注意の66％はファーストビュー以下に向いています。焦点がファーストビューからそれ以下に移ったことで、スクロールがインタラクションデザインにおいて重要な要素となりました。
アニメーションはスクロールに生命と楽しさを吹き込む
サイトの流れを伝える観点では、アニメーションは、ともすれば単調になってしまうインターフェイスに情感のあるつながりを加えられることができます。既に一般的になっている視差的なアニメーションではなく、もっと小さなものを選びましょう。
サイトをスクロール可能な「チャンク」に分割してみてください。各チャンクのなかで、アニメーションを通してコンテンツを紹介することができます。以下にあるアニメーションの例は、ただのイラストにアニメーションをつけることで、コンテンツがまるで「生きている」かのようになっています。
イメージクレジット：Le Mugs
結論
デザインとは視覚的な提示だけでなく、インタラクティブなものなのです。アニメーションはコミュニケーションにおいて決定的に重要なものです。私たちは初めからWebのインタラクティブな性質を受け入れ、デザインにおいて当然のものだととらえる必要があります。
