自動アニメーションとドラッグジェスチャーを使用してデザインとプロトタイプを作成する方法について説明します。

自動アニメーションでは、臨場感あふれるアニメーション化されたトランジションでプロトタイプを簡単に作成できます。アートボードを複製し、サイズ、位置、回転などのオブジェクトプロパティを変更し、自動アニメーションアクションを適用して、アートボード間のアニメーションによるトランジションを作成するだけです。自動アニメーションを使用するには、アニメーション化するオブジェクトのレイヤー名が、各アートボード間で同じであることを確認します。改善された検索エクスペリエンスを使用して、レイヤー構造(展開したグループなど)なしで、キーワードを含んだ関連するレイヤーとアートボードのみを表示することもできます。

自動アニメーションのしくみ

従来、デザイナーは様々なアートボードで複数のトランジションを使用してプロトタイプのインタラクションをつなげていました。自動アニメーションでは、デザイナーは XD を使用して、次の方法により 2 つのアートボード間のミクロインタラクションを作成できます。

タップしてトランジションをトリガーするのと同様、ドラッグと自動アニメーションを使用してアートボード間にマイクロインタラクションを指定できます。自動アニメーションを使用したトランジション中に、新しいオブジェクトがフェードインし、削除されたオブジェクトがフェードアウトします。

注意:

  • 「自動アニメーション」を使用したプロトタイプには、テキストのアニメーションにおいて特定の制限事項があります。現在、Web 上での字間、行間、および段落間のアニメーション化はサポートされていません。
  • 現在、Web 上でのドラッグジェスチャーはサポートされていません。ドラッグトリガーを使用したプロトタイプはタップすると消滅します。

ドラッグジェスチャーと自動アニメーションが連動するしくみ

Adobe XD は、基本的なクリックスルーアプリケーションから、時間タップドラッグ音声など、様々なプロトタイプオプションを提供するように進化しました。

ドラッグジェスチャーを使用して、カードや画面をドラッグするなどのユーザーエクスペリエンスをシミュレートできます。トリガーのリストから「ドラッグ」を選択すると、XD は自動的に「アクション」を「自動アニメーション」に切り替えます。

注意:

現在、ドラッグジェスチャのプレビューはデスクトップとモバイルでのみサポートされています。

  1. プロトタイプモードで、移動先のアートボード上の同じオブジェクトの位置を変更し、「トリガー」を「ドラッグ」に設定します。

  2. オブジェクトの開始位置と終了位置により、ドラッグの方向が決まります。最初のアートボード上のオブジェクトが左であり、2 番目のアートボード上の同じオブジェクトの位置が右側の場合は、プレビューウィンドウまたはモバイルアプリケーションで左から右にドラッグします。同様に、右から左、上から下などのドラッグイベントを作成することができます。

  3. デスクトップまたはモバイル上の変更をプレビューするには、プレビュー アイコン を選択します。

     

    動作時のドラッグジェスチャー
    動作時のドラッグジェスチャー

オンボードワークフローのドラッグジェスチャーを使用して自動アニメーショントランジションを作成する

  1. プロトタイプモードで、キャンバス上のすべてのアートボードを選択して、アートボード間のワイヤーを表示します。

  2. コネクタをソースアートボードのレイヤーから移動先のアートボードにドラッグします。最初のエレメントをワイヤで接続すると、そのエレメントのアートボードがホームアートボードとして設定されます。

  3. トリガー」ヘッドアップディスプレイで、以下のオプションを設定します。

    • トリガー:ジェスチャーの種類を「ドラッグ」に設定します。
    • アクション:「自動アニメーション」に設定します。
    • 移動先:移動先を 2 番目のアートボードに設定します。
    • イージング:ドロップダウンリストからオプションを選択します。
    自動アニメーションワークフロー
    自動アニメーションワークフロー

    A. ジェスチャーの種類を「ドラッグ」に設定 B. アクションを「自動アニメーション」に設定 C. 移動先アートボードを設定 D. イージングオプションを選択 
  4. デスクトップまたはモバイル上の変更をプレビューするには、デスクトッププレビュー  アイコン を選択します。

    動作時の自動アニメーション
    動作時の自動アニメーション

自動アニメーショントランジションの録画

  1. XD デスクトップアプリケーションで、右上隅にある「共有」アイコンをクリックし、「ビデオを録画」を選択します。

  2. プレビューモードでは、録画ボタン を使用してアニメーションを録画します。

デスクトップとモバイルでのプロトタイプリンクの共有と確認

デスクトップアプリケーションで、「共有」をクリックして「プレビューのための共有」(プロトタイプの場合)または「開発のための共有」(デザインスペックの場合)を選択します。プロトタイプおよびデザインスペックの共有について詳しくは、プロトタイプおよびデザインスペックを共有するを参照してください。

注意:

自動アニメーションを使用したプロトタイプは、アニメーションの再生に対応しておらず、アートボードの最初から最後まで、次のブラウザーで表示すると消滅します。

  • IE 11 ブラウザー
  • Edge 12

回避策として、必要システム構成に記載されているその他のサポートされているブラウザーでプロトタイプを開きます。

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

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