バナーをMP4動画にエクスポートする

タイムラインでレイヤーのアニメーションを作り終えたら、バナーをMP4動画にエクスポートできます。

動画チュートリアル：FigmaからバナーをMP4動画にエクスポートする

この動画では、Bannerifyプラグインを使って、そのまま入稿できるアニメーションバナーをFigmaからMP4動画にエクスポートする方法を紹介します。

Export to GIF/Videoをクリックしてエクスポート設定を行ったら、エクスポートパネルの下部にあるExport MP4 (n Banners) ボタンをクリックして、FigmaからMP4へのバナーのエクスポートを開始します。アニメーションバナーは、h264でエンコードされたMP4動画としてエクスポートされます。

ブラウザの対応状況 ：ブラウザの互換性の問題により、MP4動画はChromeまたはFigmaデスクトップアプリを使った場合にのみエクスポートできます。

MP4は自動で最適化されます 。MP4動画のエクスポートは、最小のファイルサイズで最高の画質になるよう自動で最適化されます。

エクスポートにバナーを含める・除外する 。既定では、Bannerifyにバナーとして読み込まれた、Figmaファイルの最上位のレイヤーがすべてエクスポートに含まれます。（選択したバナーを再読み込みせずに）一部のバナーを除外したい場合は、そのバナーのタイムラインヘッダーにあるInclude In Exportスイッチを「オフ」に切り替えてください。そのバナーのタイムラインが非表示になり、エクスポートの対象からも除外されます。

フレームレート（Frames Per Second） ​

Frames Per Secondのセレクトボックスのオプションで、GIFエクスポートのフレームレートを変更できます。選べるFPSは次のとおりです。

  • 60 FPS（Ludicrous Mode）
  • 30 FPS（Ultra Smooth）
  • 24 FPS（Smooth）
  • 18 FPS（Less Smooth）
  • 12 FPS（Least Smooth）
  • 6 FPS（Jittery）

FPSが高いほどレンダリングに時間がかかります。 フレーム数が多いほどエクスポートに時間がかかり、ファイルサイズも大きくなる点に注意してください。たとえば、5秒のタイムラインを24 FPSでエクスポートすると、バナー1つあたり 120フレームがレンダリングされます。

MP4動画のエクスポートに音声トラックを追加する ​

動画チュートリアル：Figmaの動画バナーのエクスポートに音声を追加する

この動画では、Bannerifyプラグインを使って、FigmaからエクスポートするMP4動画バナーに音声ファイルを追加する方法を紹介します。

MP4動画をエクスポートする前に、パソコンから.mp3ファイルをBannerifyのエクスポート設定にドラッグ＆ドロップすると、エクスポートする動画に.mp3の音声ファイルを含められます（.mp3の音楽ファイルはPixabayなどのサイトからダウンロードできます）。その後、エクスポートパネルの下部にあるExport MP4 (n Banners) ボタンをクリックすると、音声トラックを自動で含めたうえで、FigmaからMP4へのバナーのエクスポートが始まります。

また、すでにいずれかのレイヤーに動画のURLを埋め込んでいて、その動画の音声を使いたい場合は、Use audio from embedded videoトグルを有効にすると、バナーのタイムラインのレイヤーにある動画の音声が自動で含まれます。

ブラウザの対応状況 ：ブラウザの互換性の問題により、MP4動画はChromeまたはFigmaデスクトップアプリを使った場合にのみエクスポートできます。

最終的なMP4動画の.zipファイルをダウンロードする ​

Bannerifyでバナーの処理が終わると、確認メッセージが表示されます。Download your .zip fileボタンをクリックすると、エクスポートしたバナーを含む.zipファイルをダウンロードできます。

Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンのDownloadsフォルダに保存されます）。

MP4動画の.zipファイルを開く ​

Figmaからパソコンに.zipファイルをダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした.zipファイルをダブルクリックすると内容が解凍され、バナーを自由に使えるようになります。