動画チュートリアル：スプレッドシートからFigmaのバナーバリエーションを一括エクスポートする

この動画では、Bannerifyプラグインを使って、スプレッドシートからFigmaのバナーバリエーションをHTMLや動画・GIFに一括エクスポートする方法を紹介します。

Bannerifyでは、エクスポート時にスプレッドシートの行を1行ずつ適用することで、読み込んだ1組のバナーから多数のバリエーションをエクスポートできます。BannerifyはスプレッドシートをFigmaファイルに恒久的に同期するわけではありません。選択した行をエクスポート時の一時的な入力として使い、バナーのバリエーションをそれぞれ生成してから、それらのファイルを最終的な.zipにまとめます。

バナーのバリエーションは次のエクスポートで使えます。

• HTMLバナーのエクスポート
• GIF、MP4、WebM、アニメーションWebP、アニメーションPNGのエクスポート
• 静止画のJPG、PNG、WebP、PDFのエクスポート

ステップ1：スプレッドシートの見出しをFigmaのレイヤー名に合わせる

スプレッドシートの1行目には、エクスポート時にBannerifyで置き換えたいレイヤーの名前を入れます。

テキストレイヤーの場合は、Figmaのテキストレイヤーの名前をスプレッドシートの見出しと完全に一致するように変更します。

画像レイヤーの場合は、Figmaの画像塗りのレイヤーの名前をスプレッドシートの見出しと完全に一致するように変更し、スプレッドシートのセルに画像URL、data:image/...の値、ZIP内の素材の参照のいずれかを入れます。

埋め込みメディアのレイヤーの場合は、対象となるテキスト以外のFigmaレイヤーの名前をスプレッドシートの見出しと完全に一致するように変更し、スプレッドシートのセルに.mp4、.webm、.jsonへの直接のURLか、アップロードしたZIPに含まれる対応する.mp4、.webm、.jsonファイルの参照を入れます。エクスポート時、Bannerifyは動画の値を埋め込み動画のソースとして、.jsonの値を埋め込みLottieのソースとして扱います。

スタイルを同期する場合は、対象のレイヤーの名前をスプレッドシートの見出しと完全に一致するように変更し、スプレッドシートのセルにcolor:#ffffff; font-size:48px;やdisplay:none;のような有効なCSS宣言の文字列を入れます。

表示・非表示を制御する場合は、対応するスプレッドシートのセルに_hideまたは_showを入れて、バリエーションのエクスポート時にそのFigmaレイヤーを非表示・表示にすることもできます。

簡単な例を示します。

headline	cta	logo	badge
今すぐ購入、お支払いは後で	アプリをダウンロード	logo-1.png	display:none;
お支払いを分割	詳しく見る	logo-2.png	opacity:0.5;
柔軟な支払い能力	今すぐはじめる	logo-3.png	background-color:#111111; color:#ffffff;

データの各行が1つのバナーバリエーションになります。

通常の.csvや.xlsxの代わりに.zipファイルをアップロードすると、BannerifyはZIP内で最初に見つかったスプレッドシートファイルを使います。また、同じZIPに同梱された画像、.mp4、.webm、.jsonのメディアファイルを、ファイル名や相対パスから参照することもできます。

スプレッドシートのセルで使える値

現在、Bannerifyはバリエーションのエクスポート時に、次の種類のスプレッドシートの値を適用します。

• 対応するFigmaテキストレイヤー向けのプレーンテキストの値
• 対応する画像塗りのレイヤー向けの画像の参照： 画像URL、data:image/...の値、アップロードしたZIPに同梱された画像ファイルの参照
• 対応する埋め込みメディアのレイヤー向けの、.mp4、.webm、.jsonへの直接のURL
• 対応する埋め込みメディアのレイヤー向けの、アップロードしたZIPに同梱された.mp4、.webm、.jsonファイルの参照
• 対応する同期対象のレイヤー向けのCSS宣言の文字列
• 対応するレイヤー向けの表示・非表示のコマンド_hideと_show

スプレッドシートから表示・非表示やスタイルを制御したい場合は、display:none;、opacity:0;、left:20px;、transform:translateX(40px);のようなCSSの値を使います。

現在、Bannerifyはスプレッドシートの値で次のCSSプロパティを受け付けます。

• width、height、opacity
• background、background-image、background-color
• border-radius、border、border-left、border-right、border-top、border-bottom、border-color、border-width
• font-size、color、font-family、font-weight、text-transform、font-style、line-height、text-align、vertical-align
• display、flex-direction、gap、justify-content、align-items
• padding、padding-top、padding-right、padding-bottom、padding-left
• box-shadow、filter、transform、left、top

ステップ2：CSV、XLSX、ZIPファイルをアップロードする

BannerifyでVariantsパネルを開き、Data Sourceセクションで.csv、.xlsx、.zipファイルをアップロードします。

Bannerifyがファイルを読み込むと、パネルの左側に現在のスプレッドシートのプレビューが表示されます。エクスポートする前に、見出しや行の値が正しいかどうかを確認できます。

プレビューの表では、画像の値はサムネイル付きで強調表示され、動画の値はVideo EmbedまたはVideo URLのバッジ、CSS宣言の値はスタイルのトークン、_hide・_showの値はレイヤーの表示・非表示のコマンドとして表示されます。そのため、エクスポート前にテキスト以外の行をすぐに見分けられます。

後で新しいファイルをアップロードすると、Bannerifyは現在のファイルのソースを最新のものに置き換えます。

ステップ3：バリエーションを有効にし、エクスポートする行を選ぶ

スプレッドシートを読み込んだら、Enable Banner Variants During Exportsをオンにします。

表のチェックボックスを使って、バリエーションとしてエクスポートする行を正確に選べます。

• 表の見出しのチェックボックスで、すべての行を選択・選択解除します
• 各行のチェックボックスで、そのバリエーションを含めるか除外するかを切り替えます
• エクスポートには、チェックした行だけが使われます

Bannerifyは保存したスプレッドシートのソースごとに行の選択を記憶するため、プラグインを開き直しても、含める行と除外する行はそのまま維持されます。

不足しているフォントとエクスポートのフォールバック

バリエーションが有効な場合、Bannerifyはエクスポート前に、選択したバナーに不足しているフォントがないかを確認します。

Figmaでフォントが不足しているレイヤーが見つかった場合は、Variantsパネルに警告が表示されます。その場合、Bannerifyは壊れたスプレッドシートのバリエーションをレンダリングしようとせず、元のバナーをエクスポートします。

バリエーションのフォルダ名とファイル名の自動設定

Export Folder Structure Namingを空欄のままにすると、Bannerifyはエクスポートする各バリエーションに自動で名前を付けます。

自動のルールは次のとおりです。

1. スプレッドシートのバリエーションと一緒に含める元のエクスポートは、小さなスプレッドシートではrow-0に、行の総数によってゼロ埋めが必要な場合はrow-000にまとめられます。
2. バリエーションのフォルダのパスには、スプレッドシートのfolderの値があればそれが使われます。
3. folderの値がない場合、Bannerifyは小さなスプレッドシートではrow-1、row-2のように名前を付け、大きなセットではrow-001、row-002のようにゼロ埋めします。
4. エクスポートするファイル名には、スプレッドシートのnameの値があればそれが使われます。
5. nameの値がない場合、Bannerifyはエクスポートに元のFigmaバナーの名前を使います。

つまり、名前の欄が空欄の場合は、次のようなパスになります。

• row-0/300x250_Homepage Hero
• product-launch/300x250_Homepage Hero
• row-003/300x250_Homepage Hero

エクスポートのフォルダ名とファイル名をカスタマイズする

Export Folder Structure Namingに独自のテンプレートを入力すると、自動の命名を上書きできます。

次のいずれかの形式を使います。

• name-only-template
• folder/name-template

最後の/より前がバリエーションのフォルダのパスになり、それより後がエクスポートするファイル名になります。

名前のテンプレートだけを入力した場合、Bannerifyはその解決後の値を、エクスポートするアイテムのパスとして使います。HTMLエクスポートでは、#{Item_Name}によってsummer-saleのようなフォルダが作成され、その中にindex.htmlが入ります。画像や動画のエクスポートでは、summer-sale.png、summer-sale.gif、summer-sale.mp4のようなファイルが作成されます。

スプレッドシートの見出しのプレースホルダーを使う

スプレッドシートのどの見出しも、次のように囲むことで動的なトークンとして使えます。

• #{headline}
• #{cta}
• #{campaign}
• #{product_name}

見出しにスペースや記号が含まれる場合は、正規化したアンダースコア形式も使えます。たとえば、CTA Labelという見出しは、#{CTA Label}または#{cta_label}として使えます。

Bannerifyの組み込みプレースホルダーを使う

Bannerifyでは、次の組み込みの値も使えます。

• #{row_number}：1から始まる現在の行番号
• #{row_index}：0から始まる行のインデックス
• #{figma_name}：Figmaのバナー名
• #{figma_width}：バナーの幅
• #{figma_height}：バナーの高さ
• #{figma_size}：300x250のようなバナーのサイズ
• #{source}：スプレッドシートのソース名
• #{source_slug}：ソース名をスラッグ化したもの
• #{platform}：現在のエクスポート先のプラットフォーム

例：

• #{campaign}/#{figma_size}_#{figma_name}
• #{row_number}_#{headline}
• exports/#{campaign}/#{figma_name}
• exports/#{row_number}_#{figma_size}

nameやfolderのように、組み込みのトークン名と重なるスプレッドシートの見出しがある場合は、#{csv_name}や#{csv_folder}を使って、スプレッドシートの元の値を明示的に参照できます。

ZIPの構成とプレビューページの動作

バリエーションが有効な場合、Bannerifyは最終的な.zipファイルの中で、各行をそれぞれのバリエーションのフォルダにエクスポートします。

HTMLエクスポートでは、生成されたプレビューのindex.htmlが、各バリエーションのバナーのエクスポート先のパスを自動で参照します。

GIF、MP4、WebM、アニメーションWebP、アニメーションPNG、静止画のエクスポートなど、canvasベースのエクスポートでも、プレビューのindex.htmlは同じバリエーションのフォルダ名とファイル名のルールに従います。

そのため、プレビューページは次の内容と常に同期されます。

• 選択したスプレッドシートの行
• フォルダ名とファイル名のカスタムテンプレート
• row、folder、nameにもとづく自動のフォールバックパス

スプレッドシートのメディアファイルのパッケージ方法

スプレッドシートの行で埋め込みメディアのレイヤーを差し替える場合、Bannerifyはソースの種類に応じてメディアを処理します。

• .mp4、.webm、.jsonへの直接のURLは、エクスポートしたHTMLバナーでもリモートのURLのままになります
• ZIPに同梱された.mp4、.webm、.jsonファイルは、エクスポートした各HTMLバナーのフォルダにコピーされ、ローカルで参照されます
• GIF、MP4、WebM、アニメーションWebP、アニメーションPNGなど、canvasベースのエクスポートでは、Bannerifyはレンダリング時にリモートのメディアURLまたはZIP内のメディアファイルを読み込み、その一時的なメディアソースをエクスポートするフレームに使います

Bannerifyがスプレッドシートのメディアの値を適用するのはエクスポート時だけです。Figmaレイヤーに保存されている元のメディアURLが恒久的に上書きされることはありません。

実践的なヒント

• スプレッドシートの見出しは短く、内容がわかるものにしましょう
• 下書きの行は削除せず、行のチェックボックスで除外しましょう
• スプレッドシートとローカルの画像素材、またはローカルの.mp4、.webm、.jsonメディアファイルをまとめたい場合は、ZIPのソースを使いましょう
• .mp4、.webm、.jsonファイルがすでにオンラインでホスティングされている場合は、メディアへの直接のURLを使いましょう
• GIFファイルの差し替えには画像塗りのレイヤーを使いましょう。埋め込みメディアのバリエーションが現在対応しているのは.mp4、.webm、.jsonです
• カスタムのフォルダ構成が必要な場合を除き、名前の欄は空欄のままにしましょう
• 新しい命名テンプレートを導入する場合は、まず1つだけエクスポートしてテストしましょう