Adobe XDで動画を使う方法と注意すべきこと3つ

Adobe xdで動画を使うときに気をつけたいこと

みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。

Adobe  XDが先日さらにアップデートし、XD上で動画があつえるようになりました。

今回はAdobe XDでの動画の使い方とその際の注意について紹介します。

 

この投稿をInstagramで見る

 

Shun(@shun_webdesign)がシェアした投稿

動画を貼り付けてもサクサク動くが…

動画を扱うとなると容量が重いイメージもあり、動きが重くなってしまうのではないかとイメージしてしまう方もいるかもしれません。

全く重くもならず、これまで通り快適に使うことができます。さすがXD。

動画でできること
  • 動画のトリミング
  • サムネイルの変更

というのも扱える動画にも容量の制限があります。

動画の使用条件

ファイル形式:MP4

最大サイズ:15MB

アートボード1枚 : 1つのみ再生

XDについてさらに知りたい方はこちら

【Adobe XD】まるっと解説!ホバーステートの使い方 【Adobe XD】コーディングが分からなくても迷わない!XDの使い方

動画の貼り付け方

ビデオをXDにインポートするには、ビデオをアートボードにドラッグします。
または、「ファイル」→「インポート」を選択。

注意1

動画が表の要件を満たしていない場合、XDにインポートする際にエラーが発生します。

動画がこれらの要件を満たすように変換またはトリミングしてください。Adobe Media Encoderでトリミングできます。

Media Encoderの使い方

STEP.1
ビデオを選択する

メディアエンコーダーを開きます。

対象の動画をドラッグで青枠のワークスペースウィンドウに追加。
もしくは「ファイル」→ 「ソースの追加」に移動し、対象の動画を見つけて、[開く]をクリックします。

STEP.2
プリセット
キューで動画を見つけて、[プリセット]リンクをクリックします。
STEP.3
エクスポートの設定


[エクスポート設定]ウィンドウで、次の手順を実行します。

ビデオのサイズを15MB以下にするには、ビデオをトリミングするか、解像度の低いプリセットを選択します。
トリミングしたり、さまざまなプリセットを試したりすると、ウィンドウの右下隅に推定ファイルサイズが表示されます。
推奨されるプリセットは「高品質 720p HD」です。

[OK]をクリックします
STEP.4
エクスポート
キューで、右上隅にある緑色の再生ボタンをクリックしてエクスポートします
STEP.5
インポート
XDを開き、ビデオをインポートします。

 

動画の設定

インポートされると、動画の最初のフレームがキャンバスに表示されます。デザインモードで動画を選択すると、左上隅に再生アイコンが表示されます。(上画像参照)

動画をプレビューしたり、設定を調整したりするには、プロパティインスペクターの[動画]セクションにあるボタンをクリックします。ヘッドアップディスプレイ(HUD)が開きます。

再生をクリックして動画をプレビューできます。

ビデオをトリミングしたり、サムネイルを変更したり、再生をループに設定したり、オーディオを無効にしたりできます。

動画をトリミングする

※XDの画面上で動画のトリミングできますがサイズが15MB以内の場合のみです。

STEP.1
トリミング


画面右側にある[ビデオ]から動画のアイコンをクリック。
ハサミマークのアイコンをクリックします。

STEP.2
クリップを選択
スライダーの開始点と停止点をドラッグして、クリップを選択します。
STEP.3
エクスポート設定
チェックマークをクリックして、クリップを保存します。

ビデオのサムネイルを変更する

STEP.1
アイコンをクリック


サムネールアイコンをクリックして、フォルダーを開きます。

STEP.2
画像の選択
画像を参照して選択します。
STEP.3
エクスポートの設定
[インポート]をクリックします。
サムネイルを削除するには、[削除]をクリックします。

まとめ

気をつけたいこと
  1. 動画のファイルサイズ:最大15MB
  2. ファイル形式:MP4
  3. 動画の幅、高さのサイズ

補足ですが動画の上に動画は重ねた状態はどちらかの動画しか再生できません。まだまだできないことも多いので使い手としては工夫が必要ですね。

最後まで読んでいただきありがとうございます。SNSでも随時情報を発信していますのでフォローしていただけると励みになります。

参考
https://helpx.adobe.com/xd/help/work-with-videos.html?trackingid=4X3B8ZV4&mv=in-product/

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA