【Adobe XD】XDのプロトタイププレビューで動画が動くようになっていた件

こんにちは。ビーズクリエイト　デザイナーの野尻です。
ウェブ制作において、普段からお世話になっているAdobeXD。
このツールはウェブデザイナーにとって最早導入必須のツールと言えると思います。
特にプロトタイプの作成機能は、他の追随を許さないレベルでツールとしてのクオリティが高く、簡単なアクションイメージならばこの段階で作り込めてしまう便利さです。

ここ最近wordpressテンプレートのカスタマイズ案件が多かったので、デザインを作り込むことは少なかったのですが、久しぶりにデザイン案件で触ってみる機会がありました。
すると、以前はできなかった「プロトタイプ上で動画を自動再生する機能」が実装されているではありませんか！

今回XDのプロトタイププレビュー上で動画を自動再生するための手順をまとめてみました。

サポートされていない形式の動画ファイルだと動かない

現在Webサイトに適用する動画ファイルとして広く出回っているのは、mp4の動画ファイルかと思います。
しかし、mp4ファイルをドラッグアンドドロップすると下記のようなメッセージが表示されることがあります。

同じMP4でも、動画圧縮の形式が異なったりすると、調整が必要となります。

サポートされているビデオ形式

表示されたメッセージにもリンクがある、Adobe Media Encoderを使用すると、簡単に形式を変更することができます
https://helpx.adobe.com/jp/xd/help/work-with-videos.html?trackingid=4X3B8ZV4&mv=in-product

このフォーマットに変換すると、画像と同じようにドラッグ＆ドロップで簡単に動画ファイルを組み込むことができるようになります。

組み込んだ動画を再生するタイミングや、ループを設定することも可能

動画イメージをアクティブ状態にすると、画面右側のツールに「ビデオ」ブロックが表示されます。
この中でプレビュー時の動画の動きを指定することができます。

自動再生やタップ再生を指定

動画の切り抜きやループの指定

このあたりを指定して、プレビューすると、もう本番のイメージさながらに動画を動かすことが可能なんです！

プレビュー画面で自動再生できる動画はひとつだけ

一点だけ注意点としては、プレビュー画面で同時に再生できる動画はひとつだけのようです。（2022年6月現在）
例えば2つの動画に「自動再生」を設定して、デザイン上でプレビューしている場合でも、自動的に動き出す動画はひとつだけです。
※このあたりは、私が試した限りとなりますので、やり方を知っている方がいましたらぜひ教えてほしいところです笑

しかし、プレビュー画面上で動画をクリックすれば再生するので、イメージを確認するならば十分なレベルといえます。

動画を含むデザインイメージを固めていくうえで、非常に心強いツールに

昨今のWebサイトデザインにおいて、動画の使用は当たり前となっています。
XDに追加された機能をうまく活用して、よりクオリティの高いデザイン提案ができるようになったかと思います。

ビーズクリエイトでは、デザインにこだわったウェブ制作ももちろん受け付けております！
ご興味がありましたら、ぜひお問い合わせください！
https://www.bscre8.com/contact/