動画チュートリアル:動画とGIFを埋め込む
この動画では、YouTube・Vimeoの動画やGIFをFigmaのスライドデザインに埋め込み、Pitchdeckプラグインを使って実際のプレゼンテーションで使う方法を紹介します。
スライドにGIFを検索・挿入する
内蔵のGIPHY検索連携でGIFを追加するには、GIFs/Videos/Embedsタブをクリックし、GIFを埋め込みたいレイヤーの横にあるSearch GIFsアイコンをクリックして検索パネルを開きます。検索欄にキーワードを入力し、Searchボタンをクリックすると、キーワードに一致するGIFの一覧が読み込まれます。
選択したレイヤーにGIFを挿入するには、GIPHYの検索結果一覧でGIFのサムネイルをクリックします。
レイヤーからGIFを削除するには、レイヤー名の横にあるRemove media(×)アイコンをクリックするか、レイヤーのテキスト欄からURLを削除します。
メディアを設定したレイヤーには、GIF、YouTube、Figmaなど、検出された種類を示すバッジが表示されます。タブ上部のWith mediaにチェックを入れると、それらのレイヤーだけが表示されます。Supported embedsから、埋め込みの種類の一覧をすべて確認できます。
自分の.gifのURLも埋め込めます。 自分のWebサイトやほかのWebサイトでホストしているGIFを埋め込みたい場合は、.gifファイルへの有効な直接リンクを埋め込みのテキスト入力欄に手動で貼り付けます。
Figmaドキュメント内のネイティブのGIFレイヤー塗りにも対応しています。 Figmaのデザイン内に「直接」追加したGIFは、エクスポート時に自動的に含まれます。
スライドにストック動画を検索・挿入する
内蔵のPixabay検索連携でストック動画を追加するには、GIFs/Videos/Embedsタブをクリックし、動画を埋め込みたいレイヤーの横にあるSearch free images and videosアイコンをクリックして検索パネルを開きます。検索欄にキーワードを入力し、Searchボタンをクリックすると、キーワードに一致するストック動画の一覧が読み込まれます。
選択したレイヤーに動画を挿入するには、Pixabayの検索結果一覧で動画のサムネイルをクリックします。
レイヤーからストック動画のURL埋め込みを削除するには、レイヤー名の横にあるRemove media(×)アイコンをクリックするか、レイヤーのテキスト欄からURLを削除します。
自分の.mp4動画も、Backblaze B2やDropboxなどでホストし、そのURLをPitchdeckにコピー&ペーストすれば追加できます。
動画はWebプレゼンテーションでのみ使われます。 追加した動画の埋め込みは、Pitchdeck Webアプリにアップロードしたプレゼンテーションでのみ使われます。そのため、KeynoteやGoogle Slidesへのエクスポートには動画は含まれません。
レイヤーにMP4動画URL(.mp4への直接リンク)の埋め込みがある場合は、PowerPointのエクスポート設定でInclude MP4 Video URL Embedsのトグルをオンにできます(オプション)。オンにすると、MP4動画がPowerPointアプリで再生できる動画レイヤーとして埋め込まれます。
スライドに外部の動画URLを埋め込む
YouTubeとVimeoの外部動画URLを追加するには、GIFs/Videos/Embedsタブをクリックし、埋め込みたいレイヤーの下にあるテキスト欄に、YouTubeまたはVimeoの有効な動画URLを貼り付けます。リンクが完全なURLでない場合は、欄の下に修正すべき点を説明するメッセージが表示されます。
自分の.mp4動画も、Backblaze B2やDropboxなどでホストし、そのURLをPitchdeckにコピー&ペーストすれば追加できます。
レイヤーから外部動画URLの埋め込みを削除するには、レイヤー名の横にあるRemove media(×)アイコンをクリックするか、レイヤーのテキスト欄からURLを削除します。
動画はWebプレゼンテーションでのみ使われます。 追加した外部動画の埋め込みは、Pitchdeck Webアプリにアップロードしたプレゼンテーションでのみ使われます。そのため、PowerPoint・Keynote・Google Slidesへのエクスポートには動画は含まれません。
レイヤーにMP4動画URL(.mp4への直接リンク)の埋め込みがある場合は、PowerPointのエクスポート設定でInclude MP4 Video URL Embedsのトグルをオンにできます(オプション)。オンにすると、MP4動画がPowerPointアプリで再生できる動画レイヤーとして埋め込まれます。
YouTube・Vimeoの埋め込みの自動再生を切り替える。 標準では、YouTubeとVimeoの動画埋め込みは、そのスライドが読み込まれると自動再生されるように設定されています。埋め込みURLの下にあるAutoplayスイッチでオフにできます。YouTube、Vimeo、MP4、MP3の埋め込みでは、LoopとControlsのスイッチも使えます。なお、リモコンでWebプレゼンテーションを行っている場合、この設定は無視されます。その場合はパソコンやマウスから離れていることが多いため、動画は常に自動再生されます。
GIF・MP4動画の埋め込みのサイズを調整する
GIFやMP4の埋め込みのサイズの合わせ方は、URL欄のすぐ下にあるフィットメニューで選べます。
- Fillはレイヤー全体を覆います。外側が一部トリミングされることがあります。
- FitはGIFや動画全体をレイヤー内に収めます。左右または上下に余白ができることがあります。
PowerPoint用のPPTXエクスポートにMP4動画URLを埋め込む(オプション)
動画チュートリアル:FigmaからMP4動画の埋め込み付きPowerPointファイルをエクスポートする
この動画では、Pitchdeckプラグインを使って、FigmaからMP4動画の埋め込み付きPowerPoint(.pptx)ファイルをエクスポートする方法を紹介します。
レイヤーにMP4動画URL(.mp4への直接リンク)の埋め込みがある場合は、PowerPointのエクスポート設定でInclude MP4 Video URL Embedsのトグルをオンにできます(オプション)。オンにすると、MP4動画がPowerPointアプリで再生できる動画レイヤーとして埋め込まれます。
下のプラグインのドロップダウンオプションから、動画のサムネイルをカスタマイズすることもできます。
- Automatic Video Thumbnails from MP4:動画埋め込みのフレーム(動画の最初、中間、最後のいずれか)を自動的にサムネイルとして使います。
- Use Figma Layer for Video Thumbnails:.mp4ファイルを埋め込んだFigmaレイヤーの内容を、完全にカスタムのサムネイルとして使います。
- No Custom Video Thumbnails:サムネイルを設定しません(以前の動作と同じで、PowerPointが独自の標準の再生ボタンのサムネイルを設定します)。
PowerPointは「Fill」のサイズ設定に対応していないため、縦横比に関係なく、動画はFigmaレイヤーのサイズに「Fit」で収まります。