サイトやアプリの使い心地を改善!UIアニメーションを良くする実践テクニック、小技7個まとめ

ui-animation-tip-top-1

 

実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。

 

たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。

 

今回はこれらのサンプル例を作成するために、Material MotionIBMのアニメーション原則Motion in Manifestoのガイドラインを参考にしています。

 

また今回のサンプル例は、InVision Studio(現在は限定ユーザーのみのアーリーアクセスで、メール登録で申請可能)で作成しており、すべてのソースはこちらのDropboxリンクよりダウンロードできます。

 

 

01. タブ操作に横スライドを加えよう。

 

左のサンプル例では、コンテンツはフェードイン/アウトで切り替わり、もうひとつはタブ操作によって右方向へのスライドが追加されています。

 

  • 「良い」アニメーションは、コンテンツが遷移するときにフェードインやフェードアウトします。
  • 「より良い」アニメーションは、コンテンツが移動するときに動かすことで、コンテンツの連続性を示します。

タブやフライアウトメニュー (英: Fly-out Menu)のような動きをデザインするときは、コンテンツを開く方向を考えて移動させてみましょう。このテクニックによって、コンテンツが確認しやすくなるだけでなく、配置を移動させることもできます。また。コンテンツ移動が行いやすいように、スワイプ・ジェスチャーも一緒に追加すると良いでしょう。

 

 

02. コンテンツの共有している部分なつなげてみよう。

 

左のサンプル例では、コンテンツが上方向へのスライドで新しいコンテンツが表示され、右側のサンプル例ではカード型レイアウトがフルスクリーン表示されています。

 

  • 「良い」アニメーションでは、コンテンツの詳細情報を表示するときに、左に押したり、上方向にスワイプなどの遷移アニメーションを使用します。
  • 「より良い」アニメーションでは、共有している部分にアニメーションを加え、2つのコンテンツがつながっていることを表現します。

異なる状態にアニメーションを追加するときは、それらのコンテンツの間に共有している要素があるか確認し、アニメーションを使ってうまくつなげてみましょう。InVision Studio では、2つの画面をリンク付すると自動的にアニメーションが追加されます。これによってウェブサイトやアプリのプロトタイプ作成におけるアニメーション追加がより手軽になります。

 

 

03. コンテンツに「すだれ」f効果を利用しよう。

 

 左側のサンプル例では、スライドとフェードイン・アニメーションが利用されています。もうひとつは、同じアニメーションですが、カードごとに遅延によりタイミングをずらしています。

 

  • 「良い」アニメーションでは、コンテンツが表示されるときに位置と不透明度を変更します。
  • 「より良い」アニメーションでは、素早くそれぞれの要素をずらして表示します。

「すだれ」効果(英: Waterfall Effect)をうまく実装するには、各コンテンツのグループごとに遅延アニメーションを適用してみましょう。同じ動きや適用のタイミングによって、コンテンツの一貫性を表現できます。各コンテンツは重ねたりしないようにして、要素のグループごとにアニメーションさせ、素早く行うことが大切です。実践では20ms以内で各要素をアニメーションさせてみるとことをオススメします。より詳しい説明に関しては、Material Motion の choreography 原則を確認してみると良いでしょう。

 

 

04. 他の要素を押し出してコンテンツを表示しよう。

 

左のサンプル例では、他のコンテンツの上にアニメーション表示され、右のサンプル例では他のコンテンツを押し出すようなプッシュ効果を利用しています。

 

  • 「良い」アニメーションでは、コンテンツを移動して表示させます。
  • 「より良い」アニメーションでは、コンテンツが変化したときに周囲の要素に影響するように表示されます。

コンテンツを表示するときに周りのデザイン要素も考慮して移動させてみましょう。このテクニックは、コンテンツの周りの要素に注目を集めるか、反対に目立たせないようにしたいときに効果的です。より詳しい詳細に関しては、Material DesignのAware Motionを参考にどうぞ。

 

 

05. コンテンツにあったメニュー表示を考えよう。

 

左のサンプル例では、下方向からメニューが飛び出して表示され、左側のサンプル例ではカスタマイズされたアニメーションによって一方向から拡張するように表示されます。

 

  • 「良い」アニメーションでは、ボタンを押した方向からコンテンツをポップアップ表示します。
  • 「より」良い」アニメーションでは、ボタンをクリックした場所から広がるようなアニメーションを使って、コンテンツを表示します。

 

 

06. ボタンを使って異なる状態を表現しよう。

 

左のサンプル例では、状態を示す文字テキストのみが表示されます。右のサンプル例では、プログレスバーを使って状態を示しています。

 

  • 「良い」アニメーションでは、ボタンの隣で状態を表示します。
  • 「より良い」アニメーションでは、ボタン自体を使ってさまざまな状態を表現します。

ユーザーの状態を視覚的に把握できるフィードバックには、ボタン自体に工夫を加えてみましょう。たとえば、Call-to-Actionボタンではローディング用スピナーや読み込みアニメーションを追加してみましょう。また、プログレスバーを加えて、進捗状況を確認することもできます。解決方法やテクニックはアイデア次第で、ユーザーが既に利用しているスペースを有効活用してみましょう。もうひと工夫として、ボタンの色やテキストを変更して、成功や失敗状態などの表示に活用してみましょう。

 

 

07. 重要なモノに注目を集めよう。

 

左のサンプル例では、要素を目立たせるために配色と配置を工夫しています。右のサンプル例では、ほんのわずかなアニメーションを加えることで、ユーザーの注目を集めています。

 

  • 「良い」アニメーションでは、ユーザーに気づいてほしい要素には、配色やサイズ、配置に工夫を凝らします。
  • 「より良い」アニメーションでは、アニメーションを加えることで、重要な要素に注目を集めています。

ユーザーが重要なアクションが必要なときは、アニメーションを使ってその注目していほしい要素を強調しましょう。ほんのわずかなアニメーションにはじまり、アクションの重要度応じて、サイズや色、アニメーション速度の変化などを追加してみましょう。このテクニックは、重要な要素にのみ利用してください。使いすぎるほど効果がなくなり、ユーザーが迷惑してしまうでしょう。

 

 

さいごに。

 

今回ここで紹介した7つのテクニックは、アニメーションを効果的に追加するのに役立ちます。InVision Studioなどの新しいプロトタイプツールによって、これからさまざまなマイクロインタラクションが登場すると予測されるため、これらのテクニックの正しい使い方を知っておくことがこれから重要になってくるでしょう。

 

これらの7つのアニメーションテクニックを使って、状態が変化したことを説明したり、ひとつの要素に注目を集めたり、コンテンツ間の関係性を表現したりしてみましょう。Material Designなどの基本原則、ガイドラインに従うことで、アニメーションをより素晴らしい魅力的なデザインに仕上げることができるでしょう。では、アニメーションを楽しんで!

 

CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選

Bootstrap 対応!マイクロインタラクションをクラス名だけで作ろう!ScrollReveal.js

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現!

Web新時代!心地よいアニメーションを実現する6つの基本テクニックまとめ

 

参照元リンク : Good to Great UI Animation Tips by Pablo Stanley, Designer at Carbon Health