Figmaでバナーフレームを1つ以上デザイン済みなら、Bannerifyはその元のフレームから、複数サイズの新しいバナーフレームを生成できます。
完成度の高いマスターサイズを1つ仕上げたら、すべてのレイアウトを一から手作業で作り直さなくても、ほかの標準的な広告サイズのたたき台をBannerifyでまとめて作れるので便利です。
この機能でできること
- 選択した最上位のFigmaフレームやインスタンスを、新しいフレームに複製します。
- 複数の標準バナーサイズを一度に選べます。
- カスタムの出力サイズに対応しています。
- 必要に応じて、新しいアスペクト比ごとにテキスト、ロゴ、CTA、グラフィックを再レイアウトできます。
- 元のソースフレームは変更しません。
この機能は制作の近道として使い、クリエイティブのレビューの代わりにはしないでください。Bannerifyですばやく完成に近い状態まで仕上げ、最終的なデザインの調整はFigmaで直接行えます。
ステップ1. Generateタブを開く
FigmaでBannerifyを開き、通常のLoad Banners from Figma FramesタブからGenerate New Banner Sizes from Figma Framesタブに切り替えます。
Bannerifyが現在のページを調べ、ソースバナーとして使える最上位のFigmaフレームとインスタンスを探します。
ステップ2. ソースフレームを選択する
出発点として使いたいソースフレームに、1つ以上チェックを入れます。
次のようなフレームが適しています。
- 完成したバナーデザイン
300x250や1200x628などの、完成度の高いマスターサイズ- 構成が整理され、要素がわかりやすくグループ化されたフレーム
Bannerifyは選択したソースから新しいフレームを生成し、元のフレームは上書きしません。
ステップ3. 出力サイズを選ぶ
生成したいバナーサイズを有効にします。
Generateタブには、次のような一般的な広告サイズが用意されています。
- Leaderboard（
728x90） - Medium Rectangle（
300x250） - Large Rectangle（
336x280） - Skyscraper（
120x600） - Wide Skyscraper（
160x600） - Half-Page Skyscraper（
300x600） - Banner（
468x60） - Square（
250x250）
標準以外のサイズが必要な場合は、幅と高さを入力してAdd Custom Sizeをクリックします。
ステップ4. 必要に応じてスマートレイアウトを有効にする
新しい各バナーの中身をBannerifyで自動的に調整したい場合は、次の設定をオンにします。
- Auto re-layout new Figma frame content layers (BETA)
有効にすると、Bannerifyは新しい各フレームのコンテンツをリサイズ・再配置し、目的のアスペクト比により自然に収まるようにします。 また、コンテンツを元のフレームでの配置の偏りに近い位置に保とうとするため、上寄せや端揃えで始まったレイアウトが中央に寄ってしまうことが少なくなります。
無効にした場合も、新しいフレームサイズは作成されますが、外側のフレームがリサイズされるだけで、内側のコンテンツの配置は元のソースレイアウトに近いまま残ります。
ステップ5. Generateをクリックする
Generateボタンをクリックすると、選択したサイズが作成されます。
Bannerifyはページ上に新しいFigmaフレームを作成し、ソースフレームの名前と出力サイズから名前を付けます。例：
Homepage Promo / Leaderboard (728x90)Homepage Promo / Medium Rectangle (300x250)Homepage Promo / Half-Page Skyscraper (300x600)
スマートレイアウトで調整されるもの
再レイアウトのトグルを有効にすると、Bannerifyは次のことを試みます。
- テキストブロックをリサイズ・再配置する
- 幅の狭い縦長の形式や、高さがごく低い横長の形式でも、見出しを読みやすく保つ
- 上・中央・下に寄せたコンテンツを、元のソースでの位置に近い場所に保つ
- 新しいサイズのアスペクト比が元に近い場合は、構図全体を縮小しすぎないようにする
- 幅の広いテキストエリアの周りの余白を保つ
- 装飾要素や図形を、新しいアスペクト比に合わせて移動する
- できるかぎり、グループ化されたコンテンツをまとめておく
- 目立つ重なりやはみ出しを減らす
具体的な結果は、ソースフレームの構成と、元のサイズと目的のサイズのアスペクト比の差によって変わります。
再レイアウトを有効にするか無効にするか
オンにするとよい場合
- 複数の新しいサイズのたたき台をすばやく作りたい
- ソースバナーのコンテンツがわかりやすく構成されている
- 最終的な仕上げの前に、手間のかかる作業をBannerifyに任せたい
オフのままにするとよい場合
- 新しいフレームサイズをすばやく作成したいだけ
- Figmaですべてを自分で手動で配置し直す予定
- ソースのレイアウトが非常に独特で、手動で正確にコントロールしたい
よりよい結果を得るためのベストプラクティス
Figmaでソースバナーがわかりやすく構成されているほど、安定した結果が得られます。
重要な要素は直下の子レイヤーか論理的なグループにする
たとえば、次のようなグループです。
- 見出しのグループ
- 本文のグループ
- CTA・ボタンのグループ
- ロゴのグループ
- 商品画像のグループ
こうしておくと、Bannerifyが各要素の役割を判断しやすくなり、適切に再レイアウトできます。
無関係なレイヤーを1つの巨大なフラットなフレームに並べない
すべての要素が論理的なグループなしでルートフレームにばらばらに置かれていると、Bannerifyが手がかりにできる意味的な情報が少なくなります。
長い文章には適切なテキストボックスを使う
バナーに長い法的表記や注意書きのテキストが含まれる場合は、ソースフレームでそのテキストレイヤーに現実的な幅を設定してください。
HTMLエクスポートでその文章をスクロールできるようにする必要がある場合は、スクロールできるテキストレイヤーをご覧ください。
セクションはマルチシーンバナーにだけ使う
Generate機能は、既存のフレームから新しいサイズを作成します。
複数のフレームを組み合わせて1つのアニメーションバナーのシーケンスにしたい場合は、マルチシーンバナーをご覧ください。
生成した後は
生成されたバナーは、通常のFigmaフレームです。次のことができます。
- レイアウトを手動で微調整する
- Bannerifyでアニメーションを付ける
- HTML、GIF、MP4、WebMなど、対応する形式にエクスポートする
後で元のソースデザインを更新した場合は、もう一度Generateで新しく生成してください。
トラブルシューティングのヒント
- 生成されたレイアウトの手直しが多すぎる場合は、再レイアウトのトグルをオフにして、バリエーションを手動でリサイズしてみてください。
- テキストの多いサイズでまだ調整が必要な場合は、ソースのレイアウトをシンプルにしてから、もう一度生成してみてください。
- ごく小さいサイズで、生成されたバナーの文章が多すぎる場合は、ソースの文章を短くするか、スクロールやポップアップのテキストを使ってください。
- 複数のフレームを1つのバナーとしてBannerifyに扱わせたい場合は、Generate機能の代わりにFigmaのセクションを使ってください。
まとめ
Generate機能を使えば、完成したFigmaのバナー1つ以上から、新しいバナーサイズの一式を最も早く作れます。
ソースフレームを選択し、出力サイズを選び、Auto re-layout new Figma frame content layers (BETA) を有効にするかどうかを決めれば、Bannerifyがページ上に新しいフレームを直接生成します。