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

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

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

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

プレビューページのタイトル ​

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

プレビューページでのバナーの順序 ​

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

プレビューページのレイアウトを選ぶ ​

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

Masonryレイアウトグリッド ​

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

Centeredレイアウトグリッド ​

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

プレビューページで「ダークモード」を有効にする ​

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

プレビューページにブランド入りのヘッダーを追加する ​

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

Custom HTML ​

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

Custom CSS ​

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

プレビューページをオンラインで共有する ​

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

Tiiny Hostで手早く手動アップロードする ​

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

組み込みの直接アップロード ​

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

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

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

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

Commentfulでプレビューを使う ​

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