映像関係者こそ使うべし!!デザインプロトタイプを作るソフト、Adobe XD

皆さんこんにちは!

今回は『映像関係者こそ使うべし!!デザインプロトタイプを作るソフト、Adobe XD』というタイトルでお届けします!

映像関係者こそ使うべしシリーズ第二弾です。

さて、デザイン・プロトタイプ制作ツールとしてリリースされているAdobe XD、映像関係の方は使ってない方の方が多いはずです。

そもそも、XDって?

XDって何?という話ですが、以下のようなポイントがあります。

  • 軽い!!
  • アドビのソフト
  • .psdや.aiのファイルを読み込むことができる
  • 実は基本機能はタダでも使える
  • 毎月機能のアップデートがある(←結構ヤバイ)
  • とにかく軽い!!

といったところです。
キャッチフレーズは「DESIGN AT THE SPEED OF THOUGHT」とあるようにとにかく軽さに重点を置いて作られているアプリケーションのようです。
実際、PhotoshopやIllustratorと比にならないくらい軽いです。(もちろん機能面では劣りますが、、)
また、共有機能以外はタダで使える無料プランもありますので、Adobe Creative Cloudコンプリートプランを契約していなくても/何も契約していなくても使えてしまいます。
詳しいことは本家のページ(https://www.adobe.com/jp/products/xd.html)をご覧いただければと思うのですが、今回はこのツール、XD×映像ということでお話ししていきます。

XD×映像?

さてここからが本題です。
XDと映像をどう絡めていくのか。

例えば、映像にはテロップを載せたり、ベクトルモーショングラフィックをつけたりしますよね。
クライアントさんの前で絵コンテのように描いて試しに見せたりしません?
そんな時に便利なのが、XD。
とにかく軽いのでサクサクっと簡単なものであれば作れてしまいます。

作ってみましょう

では早速作ってみることにします。
今回はインタビューの映像に載せるテロップを作ってみます。
まず、XDを立ち上げてみましょう。

こんなアイコンです。

立ち上げるとすぐにスタート画面になります。

皆さんもやってみるとわかると思うのですが、Premiere ProやAfter Effectsと比べてとにかく立ち上がりが早いです。
ここでは"Web 1920"を選択します。これで、1920×1080のアートボードができます。
他の解像度が良ければ、他のプリセットから選ぶか、カスタムサイズの部分に数値を打ち込んでください。

そうすると、ポンと編集画面が出てきます。

画面上部を見ていただくと雲のアイコンがあると思います。
2018年12月のアップデートで追加された機能なのですが、デフォルトでクラウド(アドビのクラウド)に自動保存されるようになりました。
これによって、同じAdobe IDのPCでは続きの編集が簡単にできますし、何より保存する手間がなくなったのは最高ポイントですね!
ファイル名は後ほど変更できますので、とりあえずこのまま作業を続けます。

XDで作れるものは画面左側にあるこのツールで作ったものです。

基本ベクトルベースで作るので、Illustratorに近いようなものが並んでいます。
右側にはIllustratorのプロパティパネルに近いものがあります。
パスファインダーもあります。

この辺りを使ってテロップを作っていきます。

まず、背景に画像を当てたい…
しかし、残念ながらXDに動画を読み込むことはできません…
なので、Premiere Proなどで、フレームの書き出しを使い用意しましょう。

もちろん、丸などを作って表現することもできます。
今回はその方法で行きましょう。
丸を二つ書いて、グループ化して、ロックをしました。

そして、右下のテロップを作りました。

これくらいなら1分とかからずに出来上がります。
色つけて、フォントも少しいじって、角を丸くして(ライブコーナー機能を使いました)、とするとこんな感じ。

ここまででもXDを使うメリットはあるのかなと思うのですが、ここからがポイントです。

これで仮にOKが出たとします。
これを画像として書き出して、フェードかけて出すのでも良いですが、流石にちょっとさみしいですよね。
せっかくならモーションをつけたい。

ん?モーション?
モーションをつけるなら?
そう、After Effects

実は2018年秋のアップデートでAfter Effectsとの連携ができるようになりました。

XDからAfter Effectsへ、ほぼ編集可能な状態で移行することができるようになりました。
図形はシェイプレイヤーで、テキストは編集可能なテキストデータで持っていくことができます。
つまり、デザインのプロトタイプをXDで作成し、そのままAfter Effectsに持っていって本番のモーションを作成する、という流れが可能になりました。

ではやってみましょう。
移行する前に、ファイル名の変更および保存と、アートボードの名前を修正しました。
アートボードの名前は、移行先であるAfter Effectsのコンポジションの名前になるので、それを意識して付け直すと良いと思います。

移行していきます。
画面上の"ファイル"から"書き出し"、"After Effects"を選択します。

ショートカットだと、Command+option+F(winの方はCtrl+Alt+F)ですね。
そうするとAfter Effectsが起動します。

私の環境ではCC2018でもCC2019でも移行できました。

構造を見てみましょう。

先ほども解説した通り、すべてのレイヤーが編集可能な状態できています。
ロックしたものもそのままロックされています。
一つ注意点としては、グループ化されたものについては、何もないシェイプレイヤーを親として移行されます。
我々Ae使いはここではヌルオブジェクトを使うことが多いと思いますが、ちょっと違うので注意です。
とはいえ、特に操作には問題ないので、気にならない方はこのままでも大丈夫だと思います。

あとはモーションをいつも通りAfter Effectsで作成し、というような流れになります。

映像関係者もXDを使おう!

いかがだったでしょうか?
かなりシームレスにできることがお分かりいただけたと思います。
「XDはデザイナーが使うツール」「Web系の人じゃん?」「そもそもXDって何?」っていう方、一度試してみてください!

14クリップする
クリップしておくと
あとからいつでも
見返したりできます。

    コメント

    • まだコメントはありません