インタラクティブなアニメーションのテクニック＆Webデザイン実例まとめ

最近のWebデザインではアニメーションは「インタラクション」として考えられており、CSSだけで気持ちのいいアニメーションを実装できるようにもなりました。

Webデザインにおけるアニメーションは、装飾としてではなく、機能に対してフィードバックを返す働きをもったアニメーションに変わりつつもあります。

人は動くものを捉える性質をもっています。この性質を利用して、注意を引きつける機能として設計されています。直感的で応答性があるUIは、ユーザーに寄り添うために適した手段です。

インタラクティブなアニメーションのテクニック

ボタン

実際の生活においてボタンは、行動に対してわかりやい変化を提供します。これは、Webにおいても同じことです。慣れ親しんだ動作を提供すれば、ユーザーは「ボタン」の役割を認識できます。

出典：Jaron Pulver

ユーザーアクションの視覚化

ユーザーの行動を視覚情報にすることで、間違いに対してのフィードバックを強調して伝えられます。

iPhoneのロック画面では、ユーザーが間違ったパスワードを入力した場合、画面を左右に振って「やり直し」を求めます。これは、人が頭を左右に振るような動作に似ていますね。ユーザーはアニメーションからメッセージに気づき、現在の状況を把握します。

下の画像では、実行中のアニメーションが存在感を放っています。ユーザーが送信ボタンを押すと、送信状況を示すアニメーションが表示されるのです。

スピンナーが時間の経過を表現し、チェックマークのアニメーションが無事に送信が完了したことをユーザーに伝えています。

出典：Colin Garven

関連性を示す

トランジションを使用した、インタラクティブなアニメーションはUI上の状態を切り替える間に何が起こっているのかを変化を表現できます。

ユーザーは画面が切り替わったことと、どんな機能が表示されているのかを認識しやすくなります。

出典：Anish Chandran

サムネイルの切り替えや、詳細の表示を関連つけるアニメーションも有効です。

次の画像の例では、カードから詳細を表示するために変化します。アニメーションをうまく使用し、前の画面から移動していないように感じさせたまま詳細情報を表示します。

出典：Charles Patterson

新しいオブジェクトを出現させるときにも有効です。どこから出現して、どこへ消えていくのかを伝えられます。ハンバーガーメニューのほか、サイドコンテンツの切り替えやドロワメニューを開くときにも使用できます。

下の例では、アイコンをクリックするとナビゲーションがスライドします。メニューは「消えた」のではなく「格納」されたのです。

出典：Tamas Kojo

進捗を可視化したインジケーター

データのアップロードやダウンロードの際は、インジケーターを表示しやすいです。ローディングバーは、アクションが処理される間表示され、処理が失敗した時にも役立ちます。快適なアニメーションである必要はありませんが、最適な方法で表示してください。

出典：xjw

再読み込み完了

アクションを開始した後から、ユーザーは画面に処理の結果が反映されるのを待ちます。この時、システムが処理を受け取ったことが確認できないと、ユーザー再度読み込みを行います。

読み込みに対するアニメーションを与えることで、ユーザーは処理が正常に行われているかどうかを確認できます。

出典：Tony Babel

解説のためのアニメーション

ユーザーにフローを伝えるなど、特定のアクションに対してどのようにUIを操作するかという情報を提供します。
未知のアクションや、見慣れないUIの操作に対して説明を行います。

オンボード

オンボードでは、高度なUXが要求されます。
興味のないユーザーの心を掴むような魅力的なアニメーションを提示し、操作や使い方のフローを説明します。

出典：Anastasiia Andriichuk

アニメーションのテクニックとWebデザイン実例まとめ9サイト

1. KAMABOKO ROAD TO 1000

コンテンツのサイズがヘビーで読み込みに時間がかかる場合は、ローディング画面を使いましょう。上記の例では、ローディング画面がかまぼこのアニメーションになっています。ローディング画面はWebサイトの世界観を伝えるのにもぴったりです。

http://kama1000.jp/

2. AIR FRANCE music

ミュージックプレイリストのボタンをクリックすると、円が画面いっぱいに広がりプレイリストが表示されます。2つの画面の関係性をうまく表せています。

https://music.airfrance.com/en

3. り山

トップページにはスクロールを促すアイコンが。楕円のアイコンが上下に動くさまは、人が指でスクロールする動作を連想させます。

http://www.rizan-s.com/

4. Digital Asset

左右に移動するFABをクリックすると、アニメーションと共にページごと左右に流れます。

https://www.digitalasset.com/

5. relax

トップページからログイン画面を開くと、ページが繊維せず、背景が少しフェードアウトしログイン画面が浮かび上がります。

https://rlx.jp/

6. iOSの設定画面

iOSのUIの至るところに使われているのが緑色のボタンです。白い円がスライドする様子は、まさに本物のボタンのようです。

https://www.apple.com/jp/ios/ios-11/

7. フェリッシモ

ロード時間が数値でわかりやすく表示されています。

https://www.felissimo.co.jp/500/index2.cfm

8. Twitter

おなじみTwitterの更新表示は、更新している時と更新し終わった時が明確にわかるようデザインされています。

https://twitter.com/

9. DNA トラベル

飛行機の形をしたインジケーターが、検索中であることを示しています。検索に長時間がかかる場合、アニメーションを使ってユーザーを離脱させない工夫が必要です。

まとめ

実例とともに、アニメーションを使うテクニックをご紹介しました。Webデザインにおいて、アニメーションは次のような役割を果たします。

• ビジュアルフィードバック
• インタラクションデザインは、ユーザーのアクションに対してフィードバックを返します。
• ユーザーの行動が正しいものでも、間違っていても、結果をわかりやすく返し対話的に機能します。

デザイナーはデザインを作る段階で、インタラクティブなアニメーションも想定しながら作る必要があります。
機能を作る上での有効的な表現方法として、選択肢に入れてみてください。

（翻訳：Yuri Tanaka）