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

自動アニメーションを使用すると、没入型のトランジションを作成して、複数のアートボードにわたるコンテンツの動きを視覚化できます。

ドラッグ & タイム トリガーを組み合わせると、YouTube スワイプやドラッグなどの幅広い効果を作成して、プロトタイプのストーリーをより的確に伝えることができます。

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

アニメーションプロトタイプを作成するには、次の手順を実行します。

  1. 始める前に、以下の簡単なルールを確認して、アニメーション中にオブジェクトが処理される方法を把握します。

    • 移動先のアートボードにオブジェクトが存在しない場合、オブジェクトがフェードインします。
    • 移動元のアートボードにオブジェクトが存在しない場合、オブジェクトがフェードアウトします。
    • オブジェクトのレイヤー名とグループの両方が一致している場合、属性がアニメーション化されます。サポートされているプロパティとトランジションの完全なリストについては、XD アートボードトランジションでの自動アニメーションのサポート対象および対象外のプロパティを参照してください。
  2. プロトタイプモードでアートボードを接続します。 

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

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

    A. トリガーの種類を選択します。 B. アクションを選択して、自動アニメーションを実行します。 C. 移動先のアートボードを選択 D. イージング効果を選択 
  4. オブジェクトのインタラクションをさらに定義するには、既にインタラクションが定義されているオブジェクトを選択し、アートボードの「+」ボタンをクリックします。プロパティインスペクターで「+」をクリックすることもできます。

    トリガーのうち、タップ、ドラッグ、ホバー時間は 1 回しか適用できず、音声キー/ゲームパッドは何度でも適用できることに注意してください。

  5. サポートされているブラウザー を選択してアニメーションをプレビューします。 

    XD は、自動アニメーションアートボードのプレビュー時に、スクロールをサポートしません。

例とサンプルファイル

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

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

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

アートボードを接続し、プロトタイプのプロパティインスペクターで以下のオプションを選択します。

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

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

視聴時間:1 分


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

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

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

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


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

ベストプラクティス

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

視聴時間:1 分


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

リーガルノーティス   |   プライバシーポリシー