いろんなアプリとXDを組み合わせる実験

ADOBE XD USER FESTIVAL 2021のXD Challengeに合わせて以下のような動画を作りました。「これはXDのアウトプットという括りで良いのか？」という疑問はありますが、今年は「多彩」というテーマなので良しとしました。
XDUGが作る水「XDUW（XDユーザーウォーター）」のサイトか何かという設定です。

いろんなアプリとXDを組み合わせる実験
「これはXDのアウトプットという括りで良いのか？」という疑問はありますが、今年は「多彩」というテーマなので良しとしました。
XDUGが作る水「XDUW（XDユーザーウォーター）」のサイトか何かです。

コメント欄にnoteあり！#XDUFes2021 #XDChallenge #AdobeXD pic.twitter.com/pcUgvPcjTW

— by｜Sasaki｜AdobeMAX2021登壇 (@by15816785) September 8, 2021

この記事では、何のアプリケーションを使い、どのようにして、この動画を作成したかを順に紹介します。
こんな方法もあるのかという発想のきっかけになれば嬉しいです。

また、特に何も考えずに作り出し、細かい部分は目を瞑ると数時間で完成しますので、皆さんも試してみてください。
※今回はアプリケーションの詳細な使い方は紹介しません

作成するパーツ一覧

A：缶が落下するアニメーション
B：大枠となるXDの操作アニメーション
C：最終アウトプット（AとBを組み合わせます）

Illustratorでパッケージを作る

最初は、Aパーツで必要な缶のパッケージをIllustratorで作ります。
すごくシンプルなのは、面倒だったからです。
完成度を高めるのであれば裏面までしっかり準備しましょう！

パッケージの縦横サイズが、よくわからなかったので、Dimensionで缶のモデリングを用意し、XYZ座標からサイズを出しました。

その結果、少しサイズが違いました笑
ちょっと横幅を大きめに作っても良いかもしれません。
（一番左の缶に注目、帯が足りていません……）

Dimensionで3D素材を作る

Aパーツで必要な3D素材を作ります。
最終的にはBlenderを使って動かすので、3D素材の作成もBlenderでできる方はその方が良いでしょう。

できあがったらBlenderに配置するために書き出します。
あまり良くなさそうでしたが、今回は.glb形式で書き出しました。（私の無知ゆえに他の形式では、Blenderに配置できなかったため）

また、このタイミングでレンダリングし.psd形式のデータも書き出します。こちらはBパーツで使用します。

Photoshopで最終画面を作る

Dimensionで書き出した.psd形式のデータを使って、Bパーツの最終画面用にDebut!の文字を入れた画像も作っておきます。
何がDebut!なのか、深いことは考えないのがコツです。

Blenderで缶が落下する動きを作る

Dimensionで書き出した.glb形式のデータを使って、Aパーツである「缶が落下するアニメーション」を作ります。
何となく勘で作業したのですが、おそらく間違っていると思いますので、この内容は、各自「Blender、落下」などのキーワードで調べてください笑

XDでアニメーション全体の構成を作る

ここでようやくXDの出番です。
Bパーツ「大枠となるXDの操作アニメーション」を作成します。
今回はトリガーをドラッグにすることで「XDで作る意味」を無理矢理持たせました。
この時、Aパーツが入る部分はグリーンバックにしてデータを作成し、録画します。

Premiere Proで2つの動画を組み合わせる

AパーツとBパーツを合わせて、最終アウトプットを作成して完成です。
初めて行いましたが、グリーンバックは簡単に切り抜きできるんですね！

まとめ

無駄にいろんなアプリケーションを使った気がします。