【Adobe XD】プロトタイプの自動アニメーションで動きのあるデザインを作ろう！

こんにちは、デザイナーの原です！

WEBデザイナーがデザイン業務で欠かせないツールの一つ、「Adobe XD」は常に進化を続けています。

今回はXDの大きな特徴である「プロトタイプ」について、その使い方や特徴を使用例を交えて徹底解説します！！

プロトタイプアクションの種類

まずは、プロトタイプの種類から確認していきましょう。

現在XDのプロトタイプでは、以下のようなアクションの種類が存在します。

• トランジション
• 自動アニメーション
• ハイパーリンク
• オーバーレイ
• ひとつ前のアートボード
• オーディオ再生
• 音声を再生

これらは全て、プロトタイプから選択できるアクションの種類になりますが、それぞれアクションのルールや使い方が異なります。

今回は、その中でも複雑なアニメーションを再現することができる自動アニメーションについて解説します！

自動アニメーションを作る方法

まずはじめに、XDでアニメーションを作る手順についてですが、概ね以下のような流れになります。

　❶ アートボードを２つ用意

　❷ 用意したアートボードに状態の前後のオブジェクトを作る

　❸ それらをプロトタイプでつなげる

たったこれだけでOKです！

こうすることにより、XDが「前後の状態の変化」を自動で認識していい感じにアニメーションを作ってくれます！

ですが、XDがこの「状態の変化」を認識させるためにはいくつかの守るべきルールがあります。これを理解することでアニメーションがマスターできると言うわけです。

自動アニメーションを作るためのルールと特性

続いて、自動アニメーションのルールについて解説します。

複雑な動きを再現することができる自動アニメーションですが、その特性は比較的単純で以下のような２つのルールでアニメーションの仕方が決定しています。

ルール①｜アートボード間に状態の前後のオブジェクトが同じ名前で存在する場合、そのオブジェクトの属性差がアニメーション化される

一つ目のルールです。

アートボード間に同じオブジェクト名で存在する場合、その間の大きさや位置、色の変化などの状態を自動で補完してアニメーションしてくれます。

このように前後の状態「状態A」と「状態B」のアートボード作成し、

プロトタイプから自動アニメーションを設定することで自動で状態の間を補完したアニメーションが完成するという訳です。素晴らしい機能です。

では、実際に上部のアートボードをアニメーションさせると・・・

動いた！！！！！

ルール②｜アートボード間に、状態の前後のオブジェクトが異なる名前、もしくは存在しない場合、オブジェクトはフェードイン/フェードアウトする

二つ目のルールです。

前の状態のオブジェクトがフェードアウトし、後の状態のオブジェクトがフェードインされて現れます。

このように「状態A」と「状態C」のアートボードを作成し、

プロトタイプから自動アニメーションを設定すると状態の間は補完されずつながりません。それぞれの位置で「状態A」はフェードアウトし「状態C」がフェードインします。ナイスな機能ですね。

では、実際に上部のアートボードをアニメーションさせると・・・

消えた！！！出てきた！！！！

なんとなく伝わりましたか？

では次に、以上を踏まえたアニメーションを作ってみましょう！

アニメーションの作り方

ここからは実際にアニメーションを作りながら作り方をご説明していきます！

１.ベースとなるアートボードを作成

今回はよく使うUIのカルーセルスライダーを作っていこうと思います。

まずはベースとなるアートボードを作成します。

スライダーを再現する際は左右にスライダーを動かしたいので

事前に画面外の見えていない画像箇所も作成しておきましょう。

先に次の状態のアニメーション部分を作成しておくことが肝です。後からの作業が楽になります！

２.ベースとなるアートボードをコピー＆ペースト

ベースとなるデザインができたら、作成したアートボードをアニメーションしたい数だけコピー＆ペーストしましょう。

複製することで、オブジェクトのレイヤー名も必然的に複製されるため、後にレイヤー名を揃える手間が省けるため効率がいいです。

必ず複製して作るようにしましょう。

３.変化させたい状態をそれぞれ調整

複製したら、それぞれ変化を加えたいレイヤーのオブジェクトを調整します。

今回は動物達の画像とスライダー下部のインジケーター（スライダーの現在地を示す下の丸）をアニメーションさせたいので、画像の位置とサイズ、インジケーターの色を調整しました！

余談ですが、ちなみに僕の一番好きな動物はゴリラです。

４.アートボードをプロトタイプで繋ぎ【自動アニメーション】を設定

全ての状態のアートボードが作成できたら、アートボードをプロトタイプでつなぎます。

繋いだら画面右側の【アクション】から【種類】→【自動アニメーション】を設定しましょう。

今回はスライド用の『＞』ボタンを押した時に次の画像へスライドさせたいので、

ボタンのオブジェクトから次のアートボードに繋げ、【トリガー】（発火させたいタイミング）は【タップ】に指定しました。

イージングやデュレーションはごねごねいい感じに調整します。

全てのアニメーション分プロトタイプを繋げると・・・

なんじゃあこりゃあ…！！！！

ごちゃごちゃしてきます。

これがページ全体ともなるとさらにつなぎ合わせたせんでごちゃついてきます。。

でも全て繋いだ謎の達成感に駆られるので頑張ってください！

ここまで見ていただきありがとうございます！完成しました☆

以下が今回作成したアニメーションになります。

細かいボタンのホバーアニメーションなど入れていますが、こちらのやり方はまた後日別の記事でご説明します！！

いい感じにできましたね！

おまけ｜〜自動アニメーションの活用例〜

おまけ１

以上の自動アニメーションを使ってこねくり回せば、さらに複雑な以下のようなシームレスなアニメーションなども再現することができます！

こういったデザインだけで伝えにくい動きなども実際にプロトタイプを作成することで提案レベルが格段に上がりますね！

おまけ２

今回ご説明はしていませんが、アートボードを繋げて表示を切り替えられる性質を利用して以下のようにデザインパターンの切替画面なども作ることができます。

こちらは提案時にとても役立つので是非活用してください！

まとめ

今回は自動アニメーションについてご説明しましたがいかがでしたか！

プロトタイプを活用することで提案がさらに伝わりやすくクライアントも喜ぶこと間違いなしで受注率も上がりそうですね。

皆さんも是非プロトタイプをフルに活用し提案レベルを爆上げしましょう！！

御拝読ありがとうございました！