自動アニメーションを使用してマイクロインタラクションを作成する方法について説明します。

自動アニメーションを使用すると、YouTube のスワイプ/ドラッグや、アートボード間のコンテンツの動きを視覚化するリップル効果を使用して、アニメーション化されたプロトタイプを簡単に作成できます。これにより、ユーザーエクスペリエンス全体にリッチなレイヤーを追加しながら、より優れたプロトタイプストーリーを伝えることができます。

Web サイトでのリップルインタラクション
Web サイトでのリップル効果
タッチ対応デバイスでのスワイプ&ドラッグ効果
タッチ対応デバイスでのスワイプ&ドラッグ効果

アニメーションプロトタイプの作成

  1. はじめに:

    • アニメーション化するオブジェクトのレイヤー名が、すべてのアートボードで同じである必要があります。
    • サイズ、位置、回転などの特定のオブジェクトプロパティのみをアニメーション化できます。詳細については、オブジェクトプロパティを参照してください。
  2. プロトタイプモードでアートボードを接続します。 

  3. コネクターをクリックして、プロパティインスペクターに表示されたインタラクションパネルで、次のオプションを設定します。

    • トリガー:アニメーションを起動するオプションを選択します。例えば、カードのタッピング操作をシミュレートするには、タップを選択します。
    • アクション:「自動アニメーション」を選択します。
    • 移動先:アニメーションを移動する先のアートボードを選択します。
    • イージング:イージング効果をシミュレートするためのオプションを選択します。例えば、アニメーションをプロトタイプからイーズアウトする場合は、イーズアウトを選択します。
    自動アニメーションワークフロー
    自動アニメーションワークフロー

    A. トリガーの種類を選択します。 B. アクションを選択して、自動アニメーションを実行します。 C. 移動先のアートボードを選択 D. イージング効果を選択 
  4. デスクトップ、モバイル、または Web 上の対応ブラウザーでアニメーションをプレビューするには、XD アプリケーションで を選択します。XD デスクトップアプリケーションからプロトタイプを関係者と共有するには、「共有」をクリックし、「レビュー用に共有」を選択します。

例とサンプルファイル

Behance の自動アニメーション UI キット

自動アニメーションの基礎を学習したい場合は、この UI キットを使用してください。これには基本的なインタラクション、UI 要素、ドラッグの例が用意されています。

このようなサンプルファイルをさらに使用して、自動アニメーションをテストすることもできます。

YouTube のスワイプ効果

タイムラインとキーフレームの煩わしさなしに YouTube で見るようなスワイプ効果を実現できます。

アートボードを接続し、トリガーヘッドアップディスプレイで次のオプションを選択します。

  • トリガー:「ドラッグ」を選択します。
  • アクション:「自動アニメーション」を選択します。
  • 移動先:アニメーションを移動する先のアートボードを選択します。
  • イージング:イージング効果の作成オプションを選択します。例えば、アニメーションをプロトタイプからイーズインアウトする場合は、イーズインアウトを選択します。

サンプルファイルをダウンロードして実際に試すか、このビデオで詳細をご覧ください。

視聴時間:1 分


アニメーションモバイルメニュー

ここでは、アニメーションモバイルメニューを簡単に作成する方法を説明します。

  1. サンプルファイルをダウンロードします。
  2. プロトタイプモードで、ハンバーガーメニューを home_expanded アートボードに接続し、トリガーヘッドアップディスプレイで次のオプションを選択します。
  • トリガー:「タップ」を選択します。
  • アクション:「自動アニメーション」を選択します。
  • 移動先:アニメーションを移動する先のアートボードを選択します。
  • イージング:「イーズイン」効果を選択します。
  • 間隔:0.8 秒の間隔を選択します。

After-Effects による高度なマイクロインタラクションの追加

デザインに高度なアニメーションを追加する場合は、このビデオで、After-Effects の操作方法をご覧ください。 

Adobe XD から After Effects への書き出し(視聴時間:1 分)


また、 XD コミュニティで、このようなチュートリアルサンプルファイルをさらにチェックすることもできます。

ベストプラクティス

様々なイージングオプションを試して、アニメーションプロトタイプのユーザーエクスペリエンスを変更することができます。ベストプラクティスについての記事を読み自動アニメーショントの使用に関するコツをご覧ください

視聴時間:1 分


本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー