こんにちは、デザイナーの松並です。
早速ではございますが、今回もAdobe XDの新機能のご紹介です。
10月26日のアップデートにてリリースされたXD45では動画の再生ができるようになりましたので、そちらをご紹介させていただきます。
それでは参りましょう。
Table of contents
動画のインポート
画像と同じくドラッグアンドドロップで簡単にインポートできます。
| サポートされているビデオ | |
|---|---|
| 動画ファイル形式 | MP4 |
| 動画圧縮（コーデック） | H.264 |
| オーディオコーデック | AAC |
| 最大サイズ | 15 MB |
| 最大解像度 | 4K |
| 最大解像度 | 4K |
※動画が表に示されている要件を満たしていない場合、XDにインポートするときにエラーが発生します。
動画設定の調整
読み込みが完了すると、動画の最初のフレームが表示されます。デザインタブでは、選択されている動画アセットの左上隅に再生アイコンが表示されます。
動画をプレビューしたり設定を調整したりするには、「ビデオ」セクションにあるボタンをクリックし、次の設定を調整します。
動画のトリミング
トリミングアイコンをクリックし、スライダーで開始位置と停止位置を決定して、クリップを選択します。チェックマークをクリックして、トリミングを保存します。
動画のサムネールの変更
サムネールアイコンをクリックして、画像を参照して選択後「読み込み」をクリックします。
動画のループ再生の設定
「ループ再生」トグルを使用して、動画のループ再生を有効または無効にします。
動画のミュート
スピーカーアイコンをクリックして、動画のサウンドトラックをミュートまたはミュート解除します。
再生オプションの設定
動画設定を調整したら、再生オプションを選択して、動画の再生方法を制御します。デザインタブで、「ビデオ」セクションにあるプリセットの再生オプションのいずれかを選択します。
- タップで再生（デフォルト）
- 自動再生する
- 再生不可
デザインタブで再生オプションを選択すると、プロトタイプタブで動画のインタラクションが自動的に作成されます。
最後に
動画再生が可能になったことで、キービジュアルに動画を使用したWebサイトなどのイメージ作成が手軽になりました。
次々とアップデートが行われ、便利になっていくAdobe Xdですが、過去にもいくつか小ネタを記事にしていますので、よろしければ合わせて確認してみて下さい。
少しでも皆様のお役に立てれば幸いです。
最後までご高覧いただきありがとうございました。