ShunNote 
みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。
Adobe XDが先日さらにアップデートし、XD上で動画があつえるようになりました。
今回はAdobe XDでの動画の使い方とその際の注意について紹介します。
この投稿をInstagramで見る
Table of Contents
動画を貼り付けてもサクサク動くが…
動画を扱うとなると容量が重いイメージもあり、動きが重くなってしまうのではないかとイメージしてしまう方もいるかもしれません。
全く重くもならず、これまで通り快適に使うことができます。さすがXD。
- 動画のトリミング
- サムネイルの変更
というのも扱える動画にも容量の制限があります。
ファイル形式：MP4
最大サイズ：15MB
アートボード1枚 : 1つのみ再生
XDについてさらに知りたい方はこちら
動画の貼り付け方
ビデオをXDにインポートするには、ビデオをアートボードにドラッグします。
または、「ファイル」→「インポート」を選択。
動画が表の要件を満たしていない場合、XDにインポートする際にエラーが発生します。
動画がこれらの要件を満たすように変換またはトリミングしてください。Adobe Media Encoderでトリミングできます。
Media Encoderの使い方
メディアエンコーダーを開きます。
対象の動画をドラッグで青枠のワークスペースウィンドウに追加。
もしくは「ファイル」→ 「ソースの追加」に移動し、対象の動画を見つけて、[開く]をクリックします。
[エクスポート設定]ウィンドウで、次の手順を実行します。
ビデオのサイズを15MB以下にするには、ビデオをトリミングするか、解像度の低いプリセットを選択します。
トリミングしたり、さまざまなプリセットを試したりすると、ウィンドウの右下隅に推定ファイルサイズが表示されます。
推奨されるプリセットは「高品質 720p HD」です。
動画の設定
インポートされると、動画の最初のフレームがキャンバスに表示されます。デザインモードで動画を選択すると、左上隅に再生アイコンが表示されます。（上画像参照）
動画をプレビューしたり、設定を調整したりするには、プロパティインスペクターの[動画]セクションにあるボタンをクリックします。ヘッドアップディスプレイ（HUD）が開きます。
再生をクリックして動画をプレビューできます。
ビデオをトリミングしたり、サムネイルを変更したり、再生をループに設定したり、オーディオを無効にしたりできます。
動画をトリミングする
※XDの画面上で動画のトリミングできますがサイズが15MB以内の場合のみです。
画面右側にある[ビデオ]から動画のアイコンをクリック。
ハサミマークのアイコンをクリックします。
ビデオのサムネイルを変更する
サムネールアイコンをクリックして、フォルダーを開きます。
サムネイルを削除するには、[削除]をクリックします。
まとめ
- 動画のファイルサイズ：最大15MB
- ファイル形式：MP4
- 動画の幅、高さのサイズ
補足ですが動画の上に動画は重ねた状態はどちらかの動画しか再生できません。まだまだできないことも多いので使い手としては工夫が必要ですね。
最後まで読んでいただきありがとうございます。SNSでも随時情報を発信していますのでフォローしていただけると励みになります。
参考
https://helpx.adobe.com/xd/help/work-with-videos.html?trackingid=4X3B8ZV4&mv=in-product/
