動画チュートリアル：FigmaからバナーをHTML/GSAPにエクスポートする
この動画では、Bannerifyプラグインを使って、そのまま使えるアニメーションバナーをFigmaからHTML/GreenSock（GSAP）に数秒でエクスポートする方法を紹介します。
動画チュートリアル：FigmaからHTMLバナーを複数の広告プラットフォームにエクスポートする
この動画では、Bannerifyプラグインを使って、FigmaからアニメーションHTMLバナーを1クリックで複数の広告プラットフォーム向けにエクスポートする方法を紹介します。
HTMLにエクスポートする
バナーが完成し、HTMLにエクスポートしたくなったら、BannerifyのヘッダーでExport to HTMLボタンをクリックします。HTMLエクスポート設定が開きます。
HTMLエクスポートの設定をすべて済ませたら、エクスポートパネルの下部にあるExport n Bannersボタンをクリックすると、FigmaからバナーをHTMLにエクスポートできます。
Bannerifyでバナーの処理が終わると、確認メッセージが表示されます。Download your .zip fileボタンをクリックすると、エクスポートしたバナーを含む.zipファイルをダウンロードできます。
エクスポートしたバナーのファイル名には、Figmaのフレーム名に含まれるÅ、Ä、Ö、å、ä、öなどの文字がそのまま残ります。エクスポートのフォルダ名とメインのZIPファイル名も、アクセント付きの文字に対応しています。パスの区切り文字やサポートされていない記号は、引き続きフレームのファイル名から削除されます。
Figmaから.zipファイルをパソコンにダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした.zipファイルをダブルクリックすると内容が解凍され、バナーを自由に使えるようになります。
バナーを使ったり広告プラットフォームにアップロードしたりする前に、まずエクスポートした.zipファイルを必ず解凍してください。 エクスポートした.zipファイルには、個々のバナーがすべて含まれています（入れ子になった_zipsフォルダには、広告プラットフォームにそのまま入稿できるよう、すべてのバナーが個別にZIP圧縮されています）。
ブラウザの広告ブロッカーによって、ローカルのバナープレビューが正しく再生されないことがあります。 エクスポートしたHTMLバナーが止まって見える、アニメーションしない、ブラウザのプレビューで動作が異なるといった場合は、エクスポートし直す前に、ローカルのプレビューファイルに対して広告ブロッカー・プライバシー系の拡張機能を一時的に無効にするか、別のブラウザでテストしてください。
HTMLの出力形式ごとに、設定とパッケージの要件が異なります。エクスポートする前に、広告プラットフォームのオプションのガイドで正しい形式を選んでください。
Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンのDownloadsフォルダに保存されます）。
エクスポート設定を別のFigmaファイルで再利用する： Export to HTMLの設定パネルが開いてフォーカスされている状態で、Ctrl + Shift + Eを押すと、現在のエクスポート設定がbannerify-export-settings.jsonとして保存されます。別のFigmaファイルで同じパネルを開いてCtrl + Shift + Iを押すと、そのJSONファイルを選んで、現在のページに設定を適用できます。WindowsとMacのどちらでも、Controlキーを使います。
マスク内の写真の自動トリミング
標準のHTML/CSS + GSAPエクスポートでは、長方形または角丸のモーションマスク内にある対象のJPEG写真から、使われない画像領域を自動で取り除けます。Bannerifyは、対応する Zoom Pan Left と Zoom Pan Right のアニメーション全体で必要な領域を、小さな安全マージンとともに保持します。静止写真やフェードにも適用できる場合があります。Figmaのレイヤーとアニメーションの位置は変わりません。
方向付きの Fade In/Out、Slide In/Out、Wipe In/Out、Instant Show/Hide、Scale Up/Down Center にも対応しています。入場と退場のアニメーションが重なり、変形が組み合わさる可能性がある場合は、元の画像を保持します。
この最適化は自動で行われ、画像圧縮とファイルサイズの目標とは別の機能です。トリミング後のファイルが小さくなる場合にのみ画像を置き換えます。削減量は、アニメーション全体を通してマスクの外に残る元の写真の範囲によって異なります。
未対応のアニメーション、挿入したカスタムコード、Figma Motion、回転やエフェクトを適用した画像、その他のエクスポート形式では、元の画像を保持します。トリミングに失敗した場合も元の画像を使用し、エクスポートを続行します。
スプレッドシートから生成したバリエーションでは、各行で正しい写真を使用できるように元の画像を保持します。元のマスターバナーを含む通常のバナーでは、引き続き自動トリミングを利用できます。
標準のオプション
すべてのバナーに1pxの黒い枠線を追加する
1pxの枠線のオプションを有効にすると、すべてのバナーのCSSに1px solid blackの枠線が自動で追加されます。バナーに1pxの黒い枠線を付けることを推奨または必須としている広告プラットフォームで役立ちます。
すべてのバナーにプリローダーのアニメーションを追加する
プリローダーのオプションを有効にすると、すべてのバナーのHTMLにプリローダーが自動で追加されます。このローディングアニメーションは、バナーの画像がすべてWebブラウザに読み込まれるまで表示されます。
再生のオプション
バナーの再生回数を設定する
このオプションでは、すべてのバナーでタイムラインを最初から最後まで何回再生するかを指定します。デフォルトは1で、バナーはアニメーションのタイムラインを最初から最後まで1回再生します。
数値の入力欄に6のような大きな数を入力すると、回数を変更できます。この場合、すべてのバナーでタイムラインのアニメーションが最初から最後まで6回再生されます。
バナーを無限ループさせる
Infinitely loop all bannersオプションを有効にすると、すべてのバナーでアニメーションのタイムラインをいつまでも繰り返し再生できます。
バナーごとに個別の.zipファイルを含める
Include individual .zip files for each bannerトグルを有効にすると、エクスポートしたファイルに_zipsという追加のフォルダが含まれます。_zipsフォルダには、エクスポートしたバナーごとの個別のZIPファイルが入ります。広告プラットフォームでバナーごとにZIPファイルをアップロードする必要がある場合に便利で、時間の節約にもなります。
ZIPにbackup.jpgを含めるかどうかを選ぶ 各ZIPの中にbackup.jpg画像ファイルを含めたい場合は、Add "backup.jpg" to individual zip filesトグルを有効にすると、個別のZIPにbackup.jpg画像が含まれます。バナーを個別にZIP圧縮する際にこのトグルを無効にしていて、さらに Add "backup.jpg" トグルも有効にしている場合は、すべてのバックアップ画像が、Bannerifyでエクスポートしたメインの.zipファイルのルートにある_backupsフォルダにも含まれます。
HTMLの出力形式を選ぶ
Bannerifyでは、プラットフォームに依存しないHTML、プラットフォーム固有の入稿用パッケージ、レスポンシブなレイアウト、いくつかの一括形式をエクスポートできます。Code Output Settingsの各オプションには、広告プラットフォームのオプションに専用のガイドがあり、設定、クリックの処理、パッケージの構成、テストの注意点を説明しています。
エクスポートにバナーを含める・除外する
デフォルトでは、Bannerifyにバナーとして読み込まれたFigmaファイルのトップレベルのレイヤーがすべてエクスポートに含まれます。（選択したバナーを読み込み直すことなく）エクスポートから除外したいバナーがある場合は、そのバナーのタイムラインのヘッダーにあるInclude In Exportスイッチを「オフ」にします。そのバナーのタイムラインが非表示になり、エクスポートにも追加されなくなります。
圧縮（minify）したコードのエクスポート
ファイルサイズを最適化するため、Bannerifyはデフォルトでエクスポートするすべてのコードを圧縮（minify）し、バナーごとに1つの.htmlファイルとして保存します。コードを読みやすくしたい場合や、.html、.css、.jsの別々のファイルに分けたい場合は、コードのエクスポートオプションでMinifiedトグルをオフにしてください。
テキストをSVG画像ではなく段落タグとしてエクスポートする
デフォルトでは、Bannerifyのタイムラインにあるテキストレイヤーは（imgタグ内の）SVG画像としてエクスポートされますが、Export text as <p> tags instead of <svg> トグルのオプションを有効にすると、代わりに（段落タグ内の）リッチテキストとしてエクスポートできます。
選んだテキストレイヤーを画像のまま残す
段落としてエクスポートするオプションが有効な場合、Figmaでロックしたテキストレイヤーは、編集可能なHTMLテキストにはならず、SVG・画像の出力のまま残ります。
- Figmaで、アートワークとして残したいテキストレイヤーをそれぞれロックします。親のグループやフレームだけでなく、テキストレイヤー自体をロックしてください。
- HTMLで編集したいテキストレイヤーはロックしないままにします。
- Export text as <p> tags instead of <svg> を有効にして、もう一度エクスポートします。
たとえば、販売店名のプレースホルダーはロックせず、その周りのコピーをロックします。プレースホルダーは編集可能なHTMLのまま残り、ロックしたコピーは画像素材のまま残ります。ロックしてもバナーからアートワークが削除されることはなく、エクスポートしたファイルへのアクセス制御になるわけでもありません。テキストレイヤーのロックを解除すると、次回のエクスポートで再びリッチテキストの対象になります。既存のテキストの対象条件や形式の制限は引き続き適用されます。
編集可能なテキストでブランドフォントを使うには、編集可能なHTMLテキストにカスタムフォントを追加するをご覧ください。