足立区にあるホームページ制作・管理の デザインオフィスすぴか SEO対策・動画制作もお任せください!

足立区にあるホームページ制作・管理の デザインオフィスすぴか

070-5366-8255

お問い合わせ

Adobe XD操作マニュアル

実際にデザインしながら
Adobe XDの使い方を解説します。

動画を配置する

2021年10月のアップデートで、遂にXDで動画の再生ができるようになりました。WEBサイト上で動画を使用する機会も増えてきたので、念願の機能とも呼べるでしょう。実際のWEBサイトに近いプレビュー画面を見れるXDで、デザインと合わせて動画が再生されたときの様子を確認できるようになったのは画期的です。
今回はアップデートにて実装された動画データの配置や再生に関する機能に注目して、新たに何ができるようになったのかを確認していきましょう。

念願の動画再生

とうとうXDが動画データに対応!ということで、まずは読み込める動画データの要件から確認しましょう。
2021年10月のアップデートで対応された動画は2種類、動画制作をする人ならお馴染みの「mp4」と近年WEBアニメーションとして注目されている「Lottie」です。GIFアニメーションについては今まで通り、読み込んでも静止画としてしか表示されないので注意が必要です。

mp4動画

読み込めるビデオの要件
ビデオファイル形式 mp4
ビデオ圧縮形式(コーデック) H.264
オーディオコーデック ACC
最大ファイルサイズ 25MB
最大解像度 4K
制限事項(2022年4月26日時点)
  • 1つのXDドキュメントに読み込める動画数は最大20個まで。
  • 複数の動画を同時再生できない。
  • リピートグリッド内の動画は置き換えられない。
  • 最初の動画を除いたリピートグリッド内の他の動画は、デフォルトが再生不可に設定される。
    (リピートグリッド後に再生する設定に変えたら再生する)
  • 動画の反転はできない。
  • 動画に塗りや線は設定できない。
  • 動画の角を丸くすることはできない。
  • アクション「自動アニメーション」設定でない場合は、別のトリガーを開始すると動画の再生が停止する。
  • 動画の自動再生はアートボードの時間トリガーでは機能しない。

mp4動画の再生設定

XDに動画を読み込む方法はとても簡単です。画像の読み込みと同じようにファイル>読み込み作業スペースに直接ドラッグ&ドロップするだけ。更にあらかじめ作っておいたシェイプの中にドロップすることも可能です。
そしてXDに読み込んだ後、動画の再生に関する詳細設定を行うことができます。動画を選択した上でプロパティインスペクターを確認すると、ビデオという再生の設定欄が出現します。また動画の再生設定はデザイン画面・プロトタイプ画面の両方で行えます。

デザイン画面でのみ表示できるビデオをカスタマイズ(動画の詳細設定パネル)では、動画に組み込まれた音声やループ再生のON/OFFだけでなく、動画をトリミングして再生時間を短くしたり、動画再生前に表示されるサムネイル画像の設定までできてしまいます。細かな調整のために何度もAfter Effectsを開いて、手直しして、出力して…という作業がなくなるのは助かりますね。
また設定が完了したアートボード上に配置した動画は、デスクトッププレビューや共有URLで挙動を確認することができます。

動画の再生設定(デザイン画面)
動画の再生設定(プロトタイプ画面)

Lottieアニメーション

mp4動画と同時に対応されたLottie。Lottieとは、GIFアニメーションやmov形式などと比べて軽量なファイルサイズでありながら、SVGを使用している故の拡大縮小を気にせず行える綺麗な解像度を兼ね備えた、近年WEBアニメーションで注目を集めているアニメーション形式のことです。LottieアニメーションはAfter Effectsに専用の拡張機能をインストールして、JSON形式で出力することで使用することができます。
メリットは前述した軽量サイズであることと綺麗な解像度、そしてJavaScriptで再生速度の調整や逆再生などのカスタマイズができること。デメリットは出力できない表現が存在することです。例としてはシンプルなラインアニメーションなどは出力できますが、グラデーション等を用いるようなリッチな表現のアニメーションや音声付きのアニメーションなどは出力できません。こういった場合は今まで通りmp4でアニメーションを出力して配置する方が良いでしょう。
Lottieの性質やデータの出力方法など、Lottieアニメーションの詳細な解説についてはここでは割愛します。

Page Top