Motion Design Festivalに参加　制作プロセス編

Twitterで見かけたCocoda!さんのMotion Design Festival (通称モデフェス)に参加して、初めてMotion Designに挑戦しました！
完走はできませんでしたが、作ったものの紹介と、Adobe XDでの制作プロセスを書いておきたいと思います。
今回は制作プロセスです。自分が初めてXDでモーションデザインをした記録をします。

作品紹介記事はこちら
https://note.com/riko200702/n/n4fed31a1f7c6

Motion Design Festivalの詳細はこちら
https://motion.cocoda.design/

この記事では、「宇宙」がお題のこの作品について紹介します。

用意したもの

・Macbook Pro
・iPhoneX
・使ったソフト：Adobe XD(@PC)、ショートカット(iPhoneアプリ)

AfterEffectsを使うのが一般的だと思いますがお金がかかります(ちょっと厳しい...)が、XDなら無料で簡単にモーションデザインができます。

構成を考える

お題は「宇宙」でした。
あひるを使ったモーションにしたいなと思っていたのですが、
あひるが宇宙船に乗って宇宙に行くより、水に潜って行ったら宇宙になっていたみたいなアニメーションにしようかなと思いました。

あひるさんを作る

今回のモデフェスで使ったあひるさんはこんな風に作りました。

アートボードを作る

動きに合わせて必要な枚数のアートボードを作ります。
今回は9枚になりました。

1~2. 水面にあひるさんが浮かんでいる→潜る

ちょっと反動をつけるために胴体を反らせて、羽を動かすボードを作成しました。
波オブジェクトの作成には、スピードグリッドを利用しています。

2~4. 水の中に潜っていく　(3枚目はモーションに使用していません)

ここでのポイントは２つありました。

・潜る時に水しぶきを上げること
・水面から水中に背景を展開すること

2枚目のアートボードでは波オブジェクトの下に、水中背景オブジェクトと水しぶきのオブジェクトを隠しておいて、3枚目で展開しています。
水中背景オブジェクトの色は線形グラデーションにして、だんだん水深が深くなる感じを出しています。

※モーションをつけるときに、アートボード間でオブジェクトの名前が共通でないといけないので注意。

4~6. 水中から宇宙へ　(5枚目はモーションに使用していません)

あひるさんが深く潜って行ったところで、水中から宇宙に自然に遷移していくように工夫しました。
水中背景オブジェクトの線形グラデーションをだんだん濃い色に変化させて水深の深さと、潜り切った感を出しました。
あひるさんの態勢もブレーキがかかった感じ、かつ宇宙空間に浮いているように、ちょっとだけ水平から反らせています。

宇宙っぽくなるよう、下からだんだんとぼんやりした光が現れて星になっていくようなアニメーションにしました。
5枚目まではぼんやりした光のオブジェクトのみ登場させて、6枚目で星の核オブジェクトを中心に登場させ、7枚目で星になります。

7~9. 宇宙と流れ星

宇宙感を出すため、流れ星を走らせました。
7枚目で画面からはみ出した左上に星オブジェクト(ただの円)と帯オブジェクトを配置し、8枚目で右下に配置することで流れていく動きを作っています。

7枚目で左上に隠れている時の帯オブジェクトは小さく縮小されていて、8枚目で大きく拡大することで星が流れていくような動きを作っています。色は7枚目では透明、8枚目では黄色の線形グラデーションで透明度の変化をつけています。
9枚目では、帯オブジェクトのサイズは変えず、色を透明にしてすっと消えていく動きをつけました。

アートボードまとめ

動きをつける

XDにある「プロトタイプ」機能を使いました。

今回はアニメーションとして動かすので、アートボード同士を繋いでいきます。オブジェクトをタップして遷移させたい場合はオブジェクトとアートボードを繋げたりします。

例えばアートボード6枚目から7枚目への動きはこんな感じです。

トリガー：時間
　　ディレイ：0秒
アクションの種類：自動アニメーション
　　イージング：イーズイン/アウト
　　デュレーション：0.4秒

トリガーは、何によって遷移が起きるかを表しています。
どこかで止まったりタップしたりすることなく遷移して欲しかったのでトリガーは時間にしました。6枚目からすぐにアニメーションによって7枚目に移って欲しかったのでディレイは0秒です。

アクションの種類は自動アニメーションです。
加えてイージングが選べます。
イージングには何種類かあり、詳しい説明は他にわかりやすい記事があるので参照してみてください。

参考にした記事：https://creerue.com/blog/xd/autoanimation/

この作業を繰り返してモーションができていきます。

画面右上にある「▶︎」マークを押すとプレビューすることができます。
プレビューしつつ自然な動きになっているか確認して、デザインとプロトタイプ機能で色々調整します。

書き出し

プレビュー画面の右上に録画ボタンがあるので録画して書き出します。

GIFへの変換

作ったモーションをGIFに変換します。ソフトを入れてもいいのですが、iPhoneのiOS13に入っている「ショートカット」アプリを使えば動画をすぐGIFに変換できます。

この記事に書いてある通りです。

作品の投稿

モデフェスはCocoda!さんのイベントです。
できた作品はCocoda!とtwitterに投稿しました。
Cocoda!のお題ページにはヒントになる記事が紹介されていて、とても役に立ちました。他のお題のヒントも見てみるといいと思います。

・Cocoda!でのお題ページ
・私の投稿ページ
・私のtwitterでの投稿

まとめ

初めて挑戦したモーションデザインですが、楽しく制作することができました。まだまだ勉強中ですが、ちょっとずつ成長できたらなと思います。
モデフェスに参加して、色々な方の素敵な作品を見られたこともとてもいい経験になったと思っています。
作品をSNSやCocoda!さんで投稿してみると意外と反応があったりして楽しいです。この記事を読んでくださった方のモーションデザインが見られることを楽しみにしています。最後まで読んでくださりありがとうございました。