---
url: "/ja/bannerify/export/html.md"
description: "タイムラインでレイヤーのアニメーションを作り終えたら、バナーをアニメーションHTMLバナーとしてエクスポートできます"
---
# バナーをHTMLにエクスポートする
> タイムラインでレイヤーのアニメーションを作り終えたら、バナーをアニメーションHTMLバナーとしてエクスポートできます
### 動画チュートリアル：FigmaからバナーをHTML/GSAPにエクスポートする
この動画では、Bannerifyプラグインを使って、そのまま使えるアニメーションバナーをFigmaからHTML/GreenSock（GSAP）に数秒でエクスポートする方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/SS2J6k5Wo7s)
### 動画チュートリアル：FigmaからHTMLバナーを複数の広告プラットフォームにエクスポートする
この動画では、Bannerifyプラグインを使って、FigmaからアニメーションHTMLバナーを1クリックで複数の広告プラットフォーム向けにエクスポートする方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/Q16MPp9YKjg)
[Video](/assets/videos/bannerify/export/html-export.mp4)
## HTMLにエクスポートする {#exporting-to-html}
バナーが完成し、HTMLにエクスポートしたくなったら、Bannerifyのヘッダーで**Export to HTML**ボタンをクリックします。HTMLエクスポート設定が開きます。
HTMLエクスポートの設定をすべて済ませたら、エクスポートパネルの下部にある**Export _n_ Banners**ボタンをクリックすると、FigmaからバナーをHTMLにエクスポートできます。
Bannerifyでバナーの処理が終わると、確認メッセージが表示されます。**Download your .zip file**ボタンをクリックすると、エクスポートしたバナーを含む`.zip`ファイルをダウンロードできます。
エクスポートしたバナーのファイル名には、Figmaのフレーム名に含まれる**Å、Ä、Ö、å、ä、ö**などの文字がそのまま残ります。エクスポートのフォルダ名とメインのZIPファイル名も、アクセント付きの文字に対応しています。パスの区切り文字やサポートされていない記号は、引き続きフレームのファイル名から削除されます。
Figmaから`.zip`ファイルをパソコンにダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした`.zip`ファイルを**ダブルクリック**すると内容が解凍され、バナーを自由に使えるようになります。
> **Note:** **バナーを使ったり広告プラットフォームにアップロードしたりする前に、まずエクスポートした`.zip`ファイルを必ず解凍してください。** エクスポートした.zipファイルには、個々のバナーがすべて含まれています（入れ子になった`_zips`フォルダには、広告プラットフォームにそのまま入稿できるよう、すべてのバナーが個別にZIP圧縮されています）。
> **Warning:** **ブラウザの広告ブロッカーによって、ローカルのバナープレビューが正しく再生されないことがあります。** エクスポートしたHTMLバナーが止まって見える、アニメーションしない、ブラウザのプレビューで動作が異なるといった場合は、エクスポートし直す前に、ローカルのプレビューファイルに対して広告ブロッカー・プライバシー系の拡張機能を一時的に無効にするか、別のブラウザでテストしてください。
HTMLの出力形式ごとに、設定とパッケージの要件が異なります。エクスポートする前に、[広告プラットフォームのオプション](/ja/bannerify/export/code-output)のガイドで正しい形式を選んでください。
> **Tip:** **Figmaからダウンロードしたファイルの保存** Figmaの**デスクトップアプリ**を使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、**Webブラウザ**でFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンの**Downloads**フォルダに保存されます）。
> **Tip:** **エクスポート設定を別のFigmaファイルで再利用する：** Export to HTMLの設定パネルが開いてフォーカスされている状態で、Ctrl + Shift + Eを押すと、現在のエクスポート設定が`bannerify-export-settings.json`として保存されます。別のFigmaファイルで同じパネルを開いてCtrl + Shift + Iを押すと、そのJSONファイルを選んで、現在のページに設定を適用できます。WindowsとMacのどちらでも、Controlキーを使います。
## マスク内の写真の自動トリミング {#automatic-cropping-of-masked-photos}
標準の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 にも対応しています。入場と退場のアニメーションが重なり、変形が組み合わさる可能性がある場合は、元の画像を保持します。
この最適化は自動で行われ、[画像圧縮とファイルサイズの目標](/ja/bannerify/export/banner-size-optimization)とは別の機能です。トリミング後のファイルが小さくなる場合にのみ画像を置き換えます。削減量は、アニメーション全体を通してマスクの外に残る元の写真の範囲によって異なります。
未対応のアニメーション、挿入したカスタムコード、Figma Motion、回転やエフェクトを適用した画像、その他のエクスポート形式では、元の画像を保持します。トリミングに失敗した場合も元の画像を使用し、エクスポートを続行します。
スプレッドシートから生成したバリエーションでは、各行で正しい写真を使用できるように元の画像を保持します。元のマスターバナーを含む通常のバナーでは、引き続き自動トリミングを利用できます。
## 標準のオプション {#standard-options}
### すべてのバナーに1pxの黒い枠線を追加する {#adding-a-1px-black-border-to-all-banners}
1pxの枠線のオプションを有効にすると、すべてのバナーのCSSに`1px solid black`の枠線が自動で追加されます。バナーに1pxの黒い枠線を付けることを推奨または必須としている広告プラットフォームで役立ちます。
### すべてのバナーにプリローダーのアニメーションを追加する {#adding-a-preloader-animations-to-all-banners}
プリローダーのオプションを有効にすると、すべてのバナーのHTMLにプリローダーが自動で追加されます。このローディングアニメーションは、バナーの画像がすべてWebブラウザに読み込まれるまで表示されます。
## 再生のオプション {#playback-options}
### バナーの再生回数を設定する {#setting-the-number-of-times-to-play-through-banners}
このオプションでは、すべてのバナーでタイムラインを最初から最後まで何回再生するかを指定します。デフォルトは**1**で、バナーはアニメーションのタイムラインを最初から最後まで**1回**再生します。
数値の入力欄に**6**のような大きな数を入力すると、回数を変更できます。この場合、すべてのバナーでタイムラインのアニメーションが最初から最後まで**6回**再生されます。
### バナーを無限ループさせる {#infinitely-looping-your-banners}
**Infinitely loop all banners**オプションを有効にすると、すべてのバナーでアニメーションのタイムラインを*いつまでも*繰り返し再生できます。
## バナーごとに個別の.zipファイルを含める {#include-individual-zip-files-for-each-banner}
**Include individual .zip files for each banner**トグルを有効にすると、エクスポートしたファイルに`_zips`という追加のフォルダが含まれます。`_zips`フォルダには、エクスポートしたバナーごとの個別のZIPファイルが入ります。広告プラットフォームでバナーごとにZIPファイルをアップロードする必要がある場合に便利で、時間の節約にもなります。
> **Info:** **ZIPにbackup.jpgを含めるかどうかを選ぶ** 各ZIPの中に`backup.jpg`画像ファイルを含めたい場合は、**Add "backup.jpg" to individual zip files**トグルを有効にすると、個別のZIPに`backup.jpg`画像が含まれます。バナーを個別にZIP圧縮する際にこのトグルを無効にしていて、*さらに* **Add "backup.jpg"** トグルも有効にしている場合は、すべてのバックアップ画像が、Bannerifyでエクスポートしたメインの`.zip`ファイルのルートにある`_backups`フォルダにも含まれます。
## HTMLの出力形式を選ぶ {#choosing-an-html-output-format}
Bannerifyでは、プラットフォームに依存しないHTML、プラットフォーム固有の入稿用パッケージ、レスポンシブなレイアウト、いくつかの一括形式をエクスポートできます。**Code Output Settings**の各オプションには、[広告プラットフォームのオプション](/ja/bannerify/export/code-output)に専用のガイドがあり、設定、クリックの処理、パッケージの構成、テストの注意点を説明しています。
## エクスポートにバナーを含める・除外する {#including-or-excluding-banners-in-your-export}
デフォルトでは、Bannerifyにバナーとして読み込まれたFigmaファイルのトップレベルのレイヤーがすべてエクスポートに含まれます。（[選択したバナーを読み込み直す](/ja/bannerify/design/figma-frames#refreshing-or-re-loading-multiple-all-banners)ことなく）エクスポートから除外したいバナーがある場合は、そのバナーのタイムラインのヘッダーにある**Include In Export**スイッチを「オフ」にします。そのバナーのタイムラインが非表示になり、エクスポートにも追加されなくなります。
## 圧縮（minify）したコードのエクスポート {#minified-code-exports}
ファイルサイズを最適化するため、Bannerifyはデフォルトでエクスポートするすべてのコードを圧縮（minify）し、バナーごとに1つの`.html`ファイルとして保存します。コードを読みやすくしたい場合や、`.html`、`.css`、`.js`の別々のファイルに分けたい場合は、コードのエクスポートオプションで**Minified**トグルをオフにしてください。
## テキストをSVG画像ではなく段落タグとしてエクスポートする {#export-text-as-paragraph-tags-instead-of-svg-images}
デフォルトでは、Bannerifyのタイムラインにあるテキストレイヤーは（imgタグ内の）SVG画像としてエクスポートされますが、**Export text as tags instead of