MENU
カテゴリー

【2022年版】XDで動画を埋め込む方法を紹介!

【2022年版】XDで動画を埋め込む方法を紹介!

takato(@n8takato)です!

XDで動画を埋め込みたい

この記事は上記の課題に向けて作成しています。

XDではデザイン上に動画を埋め込むことが出来ます。

共有することでデザイン上で動画の動きを確認することが出来ます。

XDで動画を埋め込む方法について説明していきます。

この記事を読むメリット

  • XDで動画を埋め込む方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー3年目
  • web制作現場で学んだことを発信している人
目次

XDで動画を埋め込む方法

早速XDで動画を埋め込む方法を説明します。

XDで動画を埋め込む方法

  • XDのアートボード上に動画ファイルをドラッグ&ドロップする

ドラッグ&ドロップで埋め込む

XDはドラッグ&ドロップで動画を配置することが出来ます。

※画像も同じようにドラッグ&ドロップで配置することが出来ます。

①アートボードを開きます。

①アートボードを開きます。
アートボードを開く

②動画をドラッグ&ドロップします。

②動画をドラッグ&ドロップで埋め込みます。
動画を埋め込む

以上の手順で動画を埋め込むことが出来ます。簡単ですね。

プレビューで確認して動画が再生されれば完成です。

③プレビューで確認します。
プレビューで確認

↓プレビュー上で動画が再生されます。

動画をカスタマイズする

XDでは埋め込んだ動画のカスタマイズが出来ます。

カスタマイズ出来る内容は下記の通りです。

動画のカスタマイズ

  • 自動再生
  • ループ再生
  • ミュート
  • トリミング

自動再生

動画の自動再生を設定出来ます。

動画を選択した状態で右側メニューの「タップで再生」から「自動再生」を選びます。

①「タップで再生」を選択します。②「自動再生」を選びます。
自動再生を選択

プレビューで確認すると動画が自動再生されます。

ループ再生

動画をループ再生することが出来ます。

動画を選択した状態で「ビデオをカスタマイズ」を選択します。

①「ビデオをカスタマイズ」を選択します。
「ビデオをカスタマイズ」を選択

ループ再生」があるのでチェックを入れると完成です。

②「ループ再生」にチェックを入れます。
「ループ再生」を選択

動画がループ再生されるようになります。

ミュート

動画をミュート再生することが出来ます。

ビデオをカスタマイズ」→「音量マークをクリック」で出来ます。

①「ビデオをカスタマイズ」を選択します。②「音量マーク」をクリックします。
ミュートの設定

トリミング

動画の尺を短くすることが出来ます。

ビデオをカスタマイズ」→「ハサミマーク」で尺を調節出来ます。

①「ビデオをカスタマイズ」を選択します。②「ハサミマーク」からトリミングします。
トリミングの設定

XDでは簡単に動画を埋め込むことが出来る

最後にまとめです。

XDで動画を埋め込む方法

  • アートボード上に動画ファイルをドラッグ&ドロップする

非常に簡単に動画を埋め込むことが出来ます。

まだ動画を埋め込んだことの無い方は是非やってみてください。

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDで文字を縦書きにする方法を紹介! XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
あわせて読みたい
【2022年版】AdobeXDで波線を作る方法を紹介! XDで波線を作る方法を知りたい この記事は上記の課題に向けて作成しています。 web制作をしていると波線を作ることがたまにあります。 僕も最近波線を作成しました。 そ...
あわせて読みたい
【簡単】AdobeXDでフローを解除する方法を紹介! XDでフローを解除する方法を知りたい この記事は上記の課題に向けて作成しています。 XDで作業していると不要になったフローを解除する場合があります。 XDでは簡単にフ...
あわせて読みたい
【簡単】AdobeXDで吹き出しを作る方法を紹介! XDで吹き出しを作る方法を知りたい この記事は上記の課題に向けて作成します。 XDでデザインを作成する際吹き出しを作ることがあると思います。 XDでは簡単に吹き出しを...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次