動画チュートリアル：Figmaでマルチシーンのアニメーションバナーを作成する
この動画では、Bannerifyプラグインを使ってFigmaでマルチシーンのアニメーションバナーを作成し、HTMLや動画にエクスポートする方法を紹介します。
マルチシーンバナーとは？
デフォルトでは、BannerifyはトップレベルのFigmaフレームを1つずつ別のバナーとして扱います。
Use Figma sections as multi-scene bannersを有効にすると、Bannerifyは各Figmaセクションを1つのバナーとして扱い、そのセクション内にある同じサイズのフレームを、同じタイムライン上の別々のシーンとして扱います。
1つのバナーのエクスポートで、複数のクリエイティブの状態やメッセージを順番に見せたい場合に最適です。
Bannerifyはセクション内のFigmaのフレームの表示上のレイヤー順に従います。そのため、Figmaでシーンのフレームを並べ替えた場合は、バナーを更新して読み込み直すと、Bannerifyのシーンの順番も更新されます。
クイックセットアップ
- 通常どおりFigmaでバナーのフレームを作成します。
- 1つのバナーのシーンにしたいフレームを選択します。
- 右クリックしてWrap in new sectionを選びます。
- BannerifyでRefresh All Bannersをクリックし、読み込み画面に戻ります。
- Use Figma sections as multi-scene bannersを有効にします。
- Load Checked Banners（またはLoad All Banners）をクリックします。
これで、セクションごとに1つのバナーが表示され、タイムラインのレイヤーがシーンごとにまとめられます。
ステップごとのワークフロー
1. Bannerifyを実行する
FigmaのプラグインからBannerifyを開きます。 よく使う場合は、すぐに開けるようSaved pluginsリストに保存しておきましょう。
2. デフォルトの動作を確認する（任意）
セクションモードを有効にする前は、Bannerifyはトップレベルのフレームをそれぞれ別のバナーとして読み込みます。
元のフレームが正しく検出されているかを確認するのに役立ちます。
3. シーンのフレームをセクションでまとめる
1つのマルチシーンバナーにまとめたいフレームをすべて選択し、次の操作を行います。
Right click -> Wrap in new section
これで、そのセクションがセクションモードでの1つのバナーのコンテナになります。
4. 読み込み直してセクションモードに切り替える
BannerifyでRefresh All Bannersをクリックし、次の設定を有効にします。
Use Figma sections as multi-scene banners
これで、Bannerifyは個々のフレームではなくセクションを読み取るようになります。
5. セクションのバナーを読み込む
Load Checked BannersまたはLoad All Bannersをクリックします。
次のように表示されます。
- セクションごとに1つのバナー
- タイムライン上のシーンのまとまり（Scene 1、Scene 2、Scene 3など）
- シーンに対応したレイヤーのラベルとコントロール
Scene 3をScene 2より前に表示したい場合や、Scene 1を最後に移したい場合は、セクション内のシーンのフレームをFigmaで希望する表示上のレイヤー順に並べ替えてから、Bannerifyでセクションを更新して読み込み直してください。
6. シーンの順番に合わせてタイムラインの長さを調整する
シーンが重なっている場合は、タイムラインの長さを延ばし（例：5sから15sへ）、Update Timeline Lengthをクリックします。
次に、長くなったタイムライン全体で各シーンが順番に登場・退場するよう、レイヤーのタイミングを調整します。
タイムラインの長さの変更は、マルチシーンバナーも含め、プレビューとGIF・動画のエクスポートにすぐ反映されます。再生時間を変更した後にバナーを読み込み直す必要はありません。
レイヤーを1つずつ調整する代わりに、シーンごとにまとめたタイミングのコントロールを使うと、シーンのタイミングのブロックをよりすばやく移動できます。
7. プレビューしてエクスポートする
プレビュー再生でシーンの順番とタイミングを確認してから、必要に応じてエクスポートします。
- 広告・プラットフォーム向けのコードパッケージにはHTMLエクスポート
- アニメーション画像の出力にはGIFエクスポート
- 動画の納品物にはMP4/Videoエクスポート
セクション内のすべてのシーンは、1つにつながったバナーのシーケンスとしてエクスポートされます。
複数のサイズと複数のセクションを扱う
セクションを複製して、バナーのサイズやバリエーションを追加できます。
更新すると、Bannerifyは各セクションを別々のバナーとして読み込み、それぞれに独自のシーンが含まれます。 これにより、複数のサイズとマルチシーンのバリエーションを一括でエクスポートできます。
重要な要件：シーンのフレームのサイズを揃える
フレームを同じバナーのシーンとして扱うには、セクション内のフレームのサイズがまったく同じである必要があります。
サイズがわずか1pxでも違うフレームがあると、Bannerifyはそのフレームをセクションのシーンから除外することがあります。
例：2つのフレームが269x250で、1つが268x250の場合、Bannerifyはサイズが一致するフレームだけをシーンとして読み込むことがあります。
その場合は、次の手順で対処してください。
- セクション内のシーンのフレームの幅と高さをすべてまったく同じにします。
- バナーを更新します。
- セクションのバナーを読み込み直します。
トラブルシューティングのチェックリスト
- 一部のシーンしか読み込まれない：セクション内のすべてのフレームのサイズが同じか確認してください。
- セクションの変更が反映されない：Refresh All Bannersをクリックして読み込み直してください。
- シーンの順番が違う：Figmaのセクション内でフレームを並べ替えてから、Refresh All Bannersをクリックして読み込み直してください。
- シーンが重なりすぎている：タイムラインの長さを延ばし、タイミングを配分し直してください。
- エクスポートがプレビューと違って見える：タイムラインを変更した後に、レイヤーのタイミングとシーンの順番を確認し直してください。
まとめ
FigmaのセクションをBannerifyと組み合わせると、すべてを1つの巨大なフレームに詰め込むことなく、長めのストーリー性のあるバナーのシーケンスを最も早く作れます。
各シーンを通常のフレームとしてデザインし、セクションでまとめてセクションモードを有効にしたら、1つにつながったバナーとしてアニメーションを付けてエクスポートしましょう。