XDでWEBサイトをデザインする際、要所要所でイラレやフォトショを併用する機会は多くあると思いますが、動画編集ソフトの「After Effects(以下AE)」とも互換があることをご存知ですか?
アニメーションやインタラクティブなど、動きをつけたWEBサイトはもう当たり前になっている現在。カンプだけでは伝わりづらいイメージをわかりやすく伝えるために、実際にXDで作成したデザインパーツに動きをつけてみましょう。

今回は前編として、XDで作ったデータがAEで読み込んだ時の
元データ(XD)との差異について、気付いたことをまとめました。

 

データの準備

今回はサイトのOPの動きをつける想定で進めます。
完成イメージはこんな感じです。

XDで作ったデザインをAEに読み込んでみよう

まずはAEに読み込むためのデザインをXDで作成します。
① ローディング画面
② タイトルテキストの表示
③ KVを表示
この3つのデザインをアートボードを分けて準備します。

読み込みたいアートボードをアクティブにした状態で、
左上ツールバーの 「ファイル」>「書き出し」>「After Effectsへ書き出し」を選択してください。
すると、自動的にアートボードを読み込んだ状態でAEが立ち上がります。

 

AEに読み込んだ場合のXDとの差

ここで本題の読み込んだ際の元XDデータとの差や互換について確認できた点は下記の通りです。

・グループ化は正しく再現できない(オブジェクトがグループ化されていない状態となる)
グループ化ができないので、一つ一つのオブジェクトが単体レイヤーとなってしまい、ややこしくなりがちです。複雑なデータの場合はXD上でわかりやすい名前を付けておくと良いです。

 

・XDのレイヤー順がそのままAEへ引き継がれる

・XD上でつけたシャドウは正しく再現されない
文字下に黒が付いてきていますが、ボケ感などは表現されません。AE上で再設定する必要があります。
(タイムラインを選択>キーボード[E]でエフェクトを開く>ドロップシャドウ として、確認することができます。)

・カラーモードは再現される
・不透明度も再現される。が、、、
カラーモードはそのまま再現されました!
不透明度もほぼ大丈夫ですが、XDで10%に薄く設定すると、AEではほぼ見えない色の薄さになってしまいました。

・データの同期、置き換えはできない
イラレ等の場合、元のイラレを編集して保存をすれば、AEも同期されますが、XDの場合はそれができないようです。
今回の丸オブジェクトは、AEでオブジェクトとして読み込まれているため、変更したいときはAE上で色変更しましょう。

 

まとめ

個人的に、WEB以外で動画を作る際の元データとしてもXDが使えないものかと考えていましたが

・データの同期、置き換えはできない
→この点が非常にネックに感じました。

実務の場合、元データありきの修正が発生するとXD・AEの2重の修正になるかも?と考えると、XD&AEの用途は、やはりイメージづくり程度に留めた方が良さそうかなと思いました。

ですが、WEBサイト用としてのシンプルなムービー作りや、今回の目的である動きのスタディでは問題なく使えそうです!
また、XDは現在進行形で続々とアップデートがかかっているソフトですので、今後ますますの改良も期待できます。

 

次回は、AEで動きをつけてみよう編です。
実際に動きのつけ方など、AEの使い方をご紹介します!