---
url: "/ja/bannerify/export/preview.md"
description: "Bannerifyでエクスポートしたバナーの.zipファイルには、HTMLプレビューページが含まれます。すべてのバナーのプレビューをクライアントやチームの関係者と共有するのに便利です。"
---

# エクスポートしたHTMLバナーのプレビューページをカスタマイズする

> Bannerifyでエクスポートしたバナーの.zipファイルには、HTMLプレビューページが含まれます。すべてのバナーのプレビューをクライアントやチームの関係者と共有するのに便利です。

[Video](/assets/videos/bannerify/export/customize-preview-page.mp4)

HTMLバナーをエクスポートすると、BannerifyはHTMLプレビューページを自動で含めます。このファイルはエクスポートしたすべてのバナーを同じページに読み込み、グリッド状に並べるので、すべてを一度に確認できます。

HTMLエクスポートの設定パネルでは、**Generate Preview Page**トグルが既定で有効になっています。プレビューページを生成して`.zip`パッケージに追加したくない場合は、必要に応じてこのトグルをオフにできます。

## プレビューページのタイトル {#preview-page-title}

BannerifyからエクスポートしたHTMLプレビューページの``タグには、**Figmaドキュメント**の名前が使われます。

## プレビューページでのバナーの順序 {#preview-page-banner-order}

プレビューページでのバナーの並び順には、Figmaのレイヤーパネルでのバナーフレームの順序が使われます。

## プレビューページのレイアウトを選ぶ {#selecting-a-layout-for-your-preview-page}

**preview page layout**のセレクトボックスのオプションを変更すると、生成される`index.html`プレビューページでバナーを配置するグリッドのスタイルが設定されます。セレクトボックスで別のオプションを選ぶと変更できます。

### Masonryレイアウトグリッド {#masonry-layout-grid}

Masonryレイアウトモードでは、すべてのバナーが収まる最適なレイアウトが自動で決まります。バナーの数が多い場合に適したオプションです。

### Centeredレイアウトグリッド {#centered-layout-grid}

Centeredレイアウトモードでは、すべてのバナーを垂直方向に揃え、水平方向の中央に配置します。バナーの数が少ない場合に適したオプションです。

## プレビューページで「ダークモード」を有効にする {#enabling-dark-mode-on-your-preview-page}

**Use Dark Mode**設定を有効にすると、生成される`index.html`プレビューページにダークテーマ（暗い背景）が適用されます。バナーのデザインが暗い背景に映える場合は、この設定を有効にしてください。

## プレビューページにブランド入りのヘッダーを追加する {#adding-a-branded-header-to-your-preview-page}

`index.html`プレビューページをクライアントや外部の関係者に見せる場合は、独自のHTMLとCSSを追加して、自社のブランディングやカスタムヘッダーをページに適用できます。

### Custom HTML {#custom-html}

**Custom HTML**フィールドに追加したコードは、生成される`index.html`ページの``タグの直後にそのまま挿入されます。カスタムヘッダーや、会社のロゴにリンクする``タグのようなシンプルなものまで、何でも追加できます。

### Custom CSS {#custom-css}

**Custom CSS**フィールドに追加したコードは、`index.html`ページ内のカスタムの`style`タグに挿入されます（入力内容に`style`タグを自分で追加する必要はありません）。追加した**Custom HTML**のスタイル設定に使えます。

## プレビューページをオンラインで共有する {#sharing-your-preview-page-online}

Bannerifyでエクスポートした`.zip`には、エクスポートしたすべてのバナーを表示するルートの`index.html`ファイルが含まれています。このパッケージは、組み込みの連携機能のいずれかを使ってBannerifyからアップロードするか、静的ホスティングサービスに手動でアップロードできます。

### Tiiny Hostで手早く手動アップロードする {#quick-manual-upload-with-tiiny-host}

ドラッグ＆ドロップで手早く済ませたい場合は、[Bannerifyでエクスポートした`.zip`をTiiny Hostに手動でアップロード](/ja/bannerify/export/tiiny-host)できます。パッケージには必要なルートの`index.html`がすでに含まれているため、事前にエクスポートしたファイルを並べ替える必要はありません。

### 組み込みの直接アップロード {#built-in-direct-uploads}

BannerifyのHTMLエクスポートパネルで**Upload Preview Page**を有効にし、次のホスティングサービスのいずれかを選択します。

- **[Netlify](/ja/bannerify/export/netlify)** は、プレビューパッケージをNetlifyのサイトにアップロードします。
- **[Cloudflare Pages](/ja/bannerify/export/cloudflare-pages)** は、CloudflareのAPIトークン、アカウントID、Pagesのプロジェクト名を使います。Pagesのプロジェクトがまだない場合は、Bannerifyが自動で作成します。
- **[Vercel](/ja/bannerify/export/vercel)** は、Vercelのアクセストークンとプロジェクト名、必要に応じてTeam IDを使います。エクスポートのたびに、新しいプレビューデプロイのURLが作成されます。

Cloudflare Pagesには静的サイト向けの無料プランがあり、現在の[Pagesの制限](https://developers.cloudflare.com/pages/platform/limits/)が適用されます。Vercelにも無料のHobbyプランがありますが、VercelはHobbyアカウントを個人の非商用利用に限定しています。業務やチームでの作業には、対象となる有料プランが必要です。

ZapierとMakeも、独自の自動化に引き続き利用できます。これらの連携ではエクスポートした`.zip`がWebhookに送信されるため、公開プレビューのURLを返したい場合は、ZapやMakeのシナリオの後段に静的ホスティングが必要です。

### Commentfulでプレビューを使う {#using-the-preview-with-commentful}

Commentfulのレビューリンクは現在、外部のライブHTMLプレビューを埋め込むのではなく、Figmaのフレームを表示します。QAでは、アニメーションとインタラクションの確認用にホストしたBannerifyのプレビューURLを、フレーム単位のコメントと承認用にCommentfulのレビューリンクを、あわせて共有してください。