【初心者向け】Adobe XDでオープニングアニメーションを作ってみよう！

こんにちは！アニメーション大好きデザイナーの024と申します！
さて、みなさん。この記事をクリックしたということは、今まさにこのような気持ちでいるのではないでしょうか？
　

「XDでオープニングアニメーションを作ってみたいけど、なんか難しそう…」
「XDでオープニングアニメーションを作ってみたいけど、選ばれし者のみが受ける特殊な訓練が必要そう…」
「XDでオープニングアニメーションを作ってみたいけど、来世に期待して今日は寝よう…」
　

ちょっと待ってください。
一見、作るのが難しそうなオープニングアニメーション。でも実は、やり方さえわかれば誰でも簡単に作ることができるんです！
今回は、AdobeXDの自動アニメーションを使って、初めての方でも簡単にオープニングアニメーションを作成できる方法をお伝えします！
　

今回は、XDの自動アニメーションを使ったことがある方向けに解説をしていきます。
自動アニメーションの使い方については、こちらの記事をご覧ください！

https://grow-group.jp/archives/7135/

まずはじめに、アニメーションを動かす前の素材の準備をしましょう。
デザインのファーストビューをご用意ください。

説明用に事前に作っておいた架空のサイトが冷蔵庫に用意してあります。こちらです。

他意はございません（？）

グローバルナビ・背景画像・キャッチコピーの3つの要素で構成された、オーソドックスなよくあるデザインです。
こちらのデザインに、以下の順番で表示するアニメーションを付けたいと思います！
　

1. なにもない画面
2. ロゴ（単体）
3. 背景画像
4. キャッチコピーとグローバルナビ
   　

表示する順番を決めたら、それぞれの要素の塊をグループ化して、アートボードの中にすべて配置してください。
ファーストビューの要素以外のレイヤーは非表示にしましょう。
レイヤー名を、なるべくわかりやすい名前に変更することをおすすめします！

デザインの準備は、これで完了です！

自動アニメーションで繋げるためのアートボードを複製します。

先程作成したアートボードを、アニメーションの最終的なゴールとします。
上のスペースにアートボードを1つ複製し、1番目に表示する「なにもない画面」以外のすべてのレイヤーを非表示にします。
次に、1番目のアートボードを複製し、2番目に表示する「ロゴ」の非表示を解除します。
このように、アニメーションの流れを参考に、アートボードを複製してひとつずつ表示していき、最終的にファーストビューの状態にします！

アートボードの準備は、これで完了です！

アニメーションを調整してみよう

それでは、アニメーションを調整してみましょう。

基本的には「ディレイ」と「デュレーション」の秒数を調整して、要素が自然に認識できるタイミングで動くようにしていきます。
ここで注意したいのが、トップページが表示されるまでの時間が長くなりすぎると、普段温厚な焼肉の民もさすがにしびれを切らしてとっとと帰ってしまうかもしれないということです。
（※焼肉の民以外にも言えます）

こまめにプレビューしながら、長くなりすぎないように秒数を微調整していきましょう。
今回は、最終的にこのようになりました。

内容がわかりやすくなりました！
でも、どことなく動きが単調でつまらないですね…（ ´・ω・｀）

デザインの方を調整して、フェード以外の動きを付けてみましょう。
レイヤーで表示非表示を切り替えながら、位置やサイズを調整していきます。

調整した箇所

• ロゴを20px下げた
• 背景画像を拡大した
• グローバルナビとキャッチコピーを20px下げ、キャッチコピーをさらにバラバラに下げた
• ディレイとデュレーションの微調整

いかがでしたでしょうか？
「オープニングアニメーションって結構簡単かも！」
少しでもそう思っていただけたら嬉しいです！
最初は少し時間がかかるかもしれませんが、慣れてしまえばサッと作れるようになりますよ！！

プロトタイプに動きひとつあるだけで、デザインのクオリティや説得力、インパクトが爆上がりすること間違いなしです！ここぞというコンペの時や、動きも含めて伝えたいデザインがある時に、オープニングアニメーションを導入してみてくださいね。

また、エンジニアの方に動きのイメージを伝える時にも、頭の中のイメージをより正確に伝えることができます。デザインの段階でアニメーションも一緒に考えることは、最終的な仕上がりを意識した作りにするために大切なことです。

みなさまの素晴らしいデザインに、表現の幅が広がることを祈っております！
ここまでお読みいただき、ありがとうございました！