XDの自動アニメーションを使えば、Webページのアニメーションのイメージをクライアントやチームメンバーへ簡単に共有できます。
とはいえ、やり方が分からない人もいると思うので、今回はそんな人に向けて自動アニメーションの作り方を分かりやすく画像付きで説明します！
Adobe XDの自動アニメーションの作り方
完成イメージは、こちらです。
次のステップで作成していきます。
- ベースデザインの作成
- ベースデザインを複製
- 自動アニメーションのデザイン調整
- プロトタイプで動きをつける
順番に作り方を説明していくので、手を動かしながら実践してみましょう！
ステップ１.ベースデザインの作成
まずは、ベースとなるデザインを作成します。今回は、このようなデザインを作成しました。
ベースデザイン作成時にスライドさせる画像も追加しておきます。
上の画像だと分かりづらいですが、スライドさせる順番に画像を重ねている状態です。
スライド時に固定で表示させておきたいアイコンやページャー、キャッチコピーなどのパーツがあれば、併せて作成しておきます。
ステップ２.ベースデザインを複製
ベースとなるデザインが作成できたら、アートボードをコピー&ペーストもしくは、Windowsの方はAltキー、Macの方はOptionキーを押しながら横にドラック&ドロップして複製します。
アートボードの名前も分かりやすくしておきましょう。
ステップ３.自動アニメーションのデザイン調整
アートボードを複製したら、2枚目のアートボードは2番目に表示させたい画像に設定し、3枚目のアートボードでは3枚目に表示させたい画像に設定します。
それぞれのアートボードで使わない画像を非表示にしておくと、後で画像の順番を変更する際に表示/非表示で入れ替えることができるので便利です。
ページャーも表示されている画像に合わせて変更していきましょう。
ステップ４.プロトタイプで動きをつける
ここまでできたら、XD操作画面のタブを「プロトタイプ」に切り替えて、自動アニメーションを作成します！
まず最初に設定の完成イメージはこちらです。
順番に作り方を説明します！
1枚目のアートボードをクリックした時にでてくる青いハンドルを2枚目にドラック、2枚目も同様に3枚目のアートボードへドラックします。
今回は、無限ループするスライドを作成したいので、一番最後のアートボードのハンドルは1枚目に戻ってくるように設定しましょう。
次に右側のパネルにある値を設定していきます。
今回は、このように設定しています。
それぞれの意味については、次のとおりです。
トリガー
なにをきっかけにアニメーションを動かすか
ディレイ
何秒後にアニメーションを開始するか
種類
アクションの種類
イージング
動きの緩急
ディレーション
イージング効果が持続する時間の長さ
移動先は、ハンドルで設定しているので、そのままで大丈夫です。
ここまで出来たらきちんと設定できているかXD操作画面の右上にある「▶」のアイコンをクリックしてプレビューしてみましょう！
誰かに共有したい場合は、XD操作画面の「共有」タブを選択し、
「リンクを作成」をクリックして、生成されたURLを共有しましょう！
Adobe XDの自動アニメーションの使い方のコツ
- 繰り返し使うパーツはコンポーネント化
- 自動アニメーションの動きは細かくチェックする
①繰り返し使うパーツはコンポーネント化
スライド画像や左右の矢印アイコン、キャッチコピーなどの繰り返し使うパーツは、変更が必要になった時のことを想定してコンポーネント化しておきましょう。
クライアントからの修正指示や社内で変更があった際に一括で修正できるので、とても便利です。
Windowsの場合はCtrl + K、Macの場合はCommand + Kで簡単にコンポーネント化できるので、ベースデザインを作成する段階でやっていきましょう。
②自動アニメーションの動きは細かくチェック
自動アニメーションの動きや種類が増えると、それに伴ってアートボードやレイヤーの数も多くなっていきます。
確認せず最後まで進めてしまうと、後で上手く動かなかった時にどこでエラーがでているのかを探すのに苦労してしまいます。
そのため、誰が見ても分かりやすいようにレイヤーを整理しながら、細かく動きをチェックしていきましょう！
トータルで考えた時に時間の節約になります。
Adobe XDの自動アニメーションの使う際の注意点
アートボード同士のレイヤー構造が異なると上手く機能しない
自動アニメーションを作成するうえで1番重要なことは、レイヤー構造です。
XDは、ユーザーに手間をかけないようにアートボード同士の違いを見つけて、それを自動的にアニメーションの対象にしようとします。
これによって簡単にアニメーションが作成できるようになっていますが、XDが同じレイヤーだと判断するためには、レイヤー名やグループ階層などはアートボードで一致している必要があります。
ベースデザインを複製すれば、レイヤー名や階層構造も引き継がれます。また、あとから変更した時に階層が複雑にならないようコンポーネント化やグループ化は徹底して行いましょう！
Adobe XDで自動アニメーションを使いこなそう！
Web制作を効率良く進めるうえで、制作物の修正回数を減らすことはとても重要です。仕事がどんなに早くてもやり直しばかりでは、進行も中々進みません。
XDの自動アニメーションの作り方をマスターすれば、より完成のイメージに近い形でクライアントへの確認や社内共有ができるので、意思相違によるやり直しのリスクが抑えられます！
今回ご紹介した自動アニメーション以外にも様々な動きを作れるので、今日から実践して自分に合ったものを見つけましょう！