---
url: "/ja/bannerify/design/variants.md"
description: "Bannerifyでは、エクスポート時にCSV、XLSX、ZIPのスプレッドシートの行を適用して、1組のFigmaバナーからHTML、GIF、MP4、WebM、APNG、WebP、画像、PDFのバナーバリエーションを複数エクスポートできます。"
---

# スプレッドシートのデータからバナーのバリエーションを作成する

> Bannerifyでは、エクスポート時にCSV、XLSX、ZIPのスプレッドシートの行を適用して、1組のFigmaバナーからHTML、GIF、MP4、WebM、APNG、WebP、画像、PDFのバナーバリエーションを複数エクスポートできます。

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

この動画では、Bannerifyプラグインを使って、スプレッドシートからFigmaのバナーバリエーションをHTMLや動画・GIFに一括エクスポートする方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/EiVk0G0nEU4)

[Video](/assets/videos/bannerify/export/banner-spreadsheet-variants.mp4)

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

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

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

## ステップ1：スプレッドシートの見出しをFigmaのレイヤー名に合わせる {#step-1-match-your-spreadsheet-headers-to-figma-layer-names}

スプレッドシートの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つのバナーバリエーションになります。

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

## スプレッドシートのセルで使える値 {#supported-spreadsheet-cell-values}

現在、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ファイルをアップロードする {#step-2-upload-your-csv-xlsx-or-zip-file}

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

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

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

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

## ステップ3：バリエーションを有効にし、エクスポートする行を選ぶ {#step-3-enable-variants-and-choose-which-rows-to-export}

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

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

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

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

## 不足しているフォントとエクスポートのフォールバック {#missing-fonts-and-export-fallback-behavior}

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

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

## バリエーションのフォルダ名とファイル名の自動設定 {#automatic-variant-folder-and-file-naming}

**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`

## エクスポートのフォルダ名とファイル名をカスタマイズする {#customizing-export-folder-and-file-names}

**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`のようなファイルが作成されます。

### スプレッドシートの見出しのプレースホルダーを使う {#using-spreadsheet-header-placeholders}

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

- `#{headline}`
- `#{cta}`
- `#{campaign}`
- `#{product_name}`

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

### Bannerifyの組み込みプレースホルダーを使う {#using-bannerify-s-built-in-placeholders}

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}`

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

## ZIPの構成とプレビューページの動作 {#zip-structure-and-preview-page-behavior}

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

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

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

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

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

## スプレッドシートのメディアファイルのパッケージ方法 {#how-spreadsheet-media-files-are-packaged}

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

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

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

## 実践的なヒント {#practical-tips}

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