MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【初心者向け】Adobe XDでオープニングアニメーションを作ってみよう!

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

公開日:2021年07月21日
最終更新日:2021年07月21日
h.onishi
デザイン
Webデザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > 【初心者向け】Adobe XDでオープニングアニメーションを作ってみよう!

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
【初心者向け】Adobe XDでオープニングアニメーションを作ってみよう!
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

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

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

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

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

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

 

AdobeXDとは?

みなさんご存知のことと思いますので、AdobeXDについての説明は割愛いたします。

詳しくは公式サイトをご覧ください!

https://www.adobe.com/jp/products/xd.html

 

アニメーションの下準備をしよう(デザイン)

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

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

他意はございません(?)

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

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

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

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

 

アニメーションの下準備をしよう(アートボード)

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

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

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

 

自動アニメーションを付けてみよう

いよいよ、アニメーションの設定をします!わくわくが止まりませんね!(`・ω・´ )
XDを「プロトタイプ」モードに切り替えます。
アートボードを選択し、順番通りに青矢印でつなげていきます。

設定は一旦このようにしてみてください。後ほど調整していきます。
 
トリガー アニメーションが始まるきっかけ
「時間」の場合は「ディレイ」で設定した時間後にアニメーションが始まります。
ディレイ アニメーションが始まるまでの時間
イージング アニメーションの緩急
デュレーション アニメーションする時間

 

最初のアートボードを選択して、プレビューしてみましょう。
XDの実際のプレビューがこちらです。

https://xd.adobe.com/view/000b045d-4a01-4ba9-b5bd-ded4ace45017-5558/?fullscreen

わあい!どう見ても紙芝居だ!!!見やすいように調整が必要ですね。

 

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

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

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

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

https://xd.adobe.com/view/20b05683-2284-43ad-bf81-a997bd060416-75e3/?fullscreen
 
アートボード_01 ディレイ:0.8秒 / デュレーション:0.8秒
アートボード_02 ディレイ:1秒 / デュレーション:0.6秒
アートボード_03 ディレイ:0秒 / デュレーション:0.6秒
アートボード_ラスト 設定なし

 

内容がわかりやすくなりました!
でも、どことなく動きが単調でつまらないですね…( ´・ω・`)

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

調整した箇所

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

 

ちなみに、アニメーション前の要素を20pxくらい下に下げておくと、表示されるときに「下からふわっと」出ているように見えます。

それでは、プレビューしてみましょう。

https://xd.adobe.com/view/f1f53269-dc12-45c7-92d0-db4cb4eb0016-a4a6/?fullscreen

ついにそれっぽくなりましたね!!!!(`・ω・´ )(それっぽくとは
アニメーションがない場合に比べて、それぞれの要素にしっかり注目できるようになっているかと思います。

 

まとめ

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

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

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

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


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】8選
Webデザイン
デザイン
公開日: 2019年03月18日
最終更新日: 2022年01月17日
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】8選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
Webデザイン
web担当者
ツール
デザイナー
制作
公開日: 2019年11月06日
最終更新日: 2022年01月17日
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
  • # Adobe XD
  • # 共同編集
  • # 新機能
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
知っておきたい!Photoshopを使ってできることを大公開
Webデザイン
公開日: 2019年06月14日
最終更新日: 2022年01月17日
知っておきたい!Photoshopを使ってできることを大公開
  • # Photoshop
  • # pickup
  • # できること
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
+ノベルティの制作で成果を上げよう!
デザイン
デザイン
公開日: 2017年11月20日
最終更新日: 2017年11月20日
+ノベルティの制作で成果を上げよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webデザイナーがスキルアップするためのマーケティング(分析能力)基礎知識
Webデザイン
デザイナー
デザイン
デザイン
マーケティング
公開日: 2021年03月01日
最終更新日: 2021年03月01日
Webデザイナーがスキルアップするためのマーケティング(分析能力)基礎知識
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WEBデザインの世界に飛び込むあなたへ!WEBデザイン制作時に知っておくべき用語集【WEB】
Webデザイン
デザイナー
デザイン
公開日: 2018年03月01日
最終更新日: 2018年03月01日
WEBデザインの世界に飛び込むあなたへ!WEBデザイン制作時に知っておくべき用語集【WEB】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
Webデザイン
デザイン
公開日: 2016年12月27日
最終更新日: 2016年12月27日
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
色の機能と与える印象を知って、上手に配色しよう!
デザイン
デザイン
公開日: 2017年06月21日
最終更新日: 2017年06月21日
色の機能と与える印象を知って、上手に配色しよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
Webデザイン
デザイン
公開日: 2018年03月26日
最終更新日: 2018年03月26日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)
Webデザイン
オンライン学習
デザイナー
制作
公開日: 2019年11月12日
最終更新日: 2022年01月17日
webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)
  • # webデザイン参考
  • # 国内外問わず
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。