---
url: "/ja/bannerify/design/scenes.md"
description: "同じサイズの複数のFigmaフレームをセクションでまとめて1つのマルチシーンバナーにし、BannerifyでアニメーションさせてHTML、GIF、動画にエクスポートする方法を説明します。"
---

# Figmaのセクションでマルチシーンバナーを作成する

> 同じサイズの複数のFigmaフレームをセクションでまとめて1つのマルチシーンバナーにし、BannerifyでアニメーションさせてHTML、GIF、動画にエクスポートする方法を説明します。

### 動画チュートリアル：Figmaでマルチシーンのアニメーションバナーを作成する

この動画では、Bannerifyプラグインを使ってFigmaでマルチシーンのアニメーションバナーを作成し、HTMLや動画にエクスポートする方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/_RJoxtwDC04)

## マルチシーンバナーとは？ {#what-are-multi-scene-banners}

デフォルトでは、BannerifyはトップレベルのFigmaフレームを1つずつ別のバナーとして扱います。

**Use Figma sections as multi-scene banners**を有効にすると、Bannerifyは各**Figmaセクション**を1つのバナーとして扱い、そのセクション内にある同じサイズのフレームを、同じタイムライン上の別々のシーンとして扱います。

1つのバナーのエクスポートで、複数のクリエイティブの状態やメッセージを順番に見せたい場合に最適です。

Bannerifyはセクション内のFigmaのフレームの表示上のレイヤー順に従います。そのため、Figmaでシーンのフレームを並べ替えた場合は、バナーを更新して読み込み直すと、Bannerifyのシーンの順番も更新されます。

## クイックセットアップ {#quick-setup}

1. 通常どおりFigmaでバナーのフレームを作成します。
2. 1つのバナーのシーンにしたいフレームを選択します。
3. 右クリックして**Wrap in new section**を選びます。
4. Bannerifyで**Refresh All Banners**をクリックし、読み込み画面に戻ります。
5. **Use Figma sections as multi-scene banners**を有効にします。
6. **Load Checked Banners**（または**Load All Banners**）をクリックします。

これで、セクションごとに1つのバナーが表示され、タイムラインのレイヤーがシーンごとにまとめられます。

## ステップごとのワークフロー {#step-by-step-workflow}

### 1. Bannerifyを実行する {#_1-run-bannerify}

FigmaのプラグインからBannerifyを開きます。
よく使う場合は、すぐに開けるよう**Saved plugins**リストに保存しておきましょう。

### 2. デフォルトの動作を確認する（任意） {#_2-confirm-default-behavior-optional}

セクションモードを有効にする前は、Bannerifyはトップレベルのフレームをそれぞれ別のバナーとして読み込みます。

元のフレームが正しく検出されているかを確認するのに役立ちます。

### 3. シーンのフレームをセクションでまとめる {#_3-wrap-scene-frames-in-a-section}

1つのマルチシーンバナーにまとめたいフレームをすべて選択し、次の操作を行います。

**Right click -> Wrap in new section**

これで、そのセクションがセクションモードでの1つのバナーのコンテナになります。

### 4. 読み込み直してセクションモードに切り替える {#_4-reload-and-switch-to-sections-mode}

Bannerifyで**Refresh All Banners**をクリックし、次の設定を有効にします。

**Use Figma sections as multi-scene banners**

これで、Bannerifyは個々のフレームではなくセクションを読み取るようになります。

### 5. セクションのバナーを読み込む {#_5-load-section-banners}

**Load Checked Banners**または**Load All Banners**をクリックします。

次のように表示されます。
- セクションごとに1つのバナー
- タイムライン上のシーンのまとまり（Scene 1、Scene 2、Scene 3など）
- シーンに対応したレイヤーのラベルとコントロール

> **Tip:** Scene 3をScene 2より前に表示したい場合や、Scene 1を最後に移したい場合は、セクション内のシーンのフレームをFigmaで希望する表示上のレイヤー順に並べ替えてから、Bannerifyでセクションを更新して読み込み直してください。

### 6. シーンの順番に合わせてタイムラインの長さを調整する {#_6-adjust-timeline-length-for-scene-sequencing}

シーンが重なっている場合は、タイムラインの長さを延ばし（例：`5s`から`15s`へ）、**Update Timeline Length**をクリックします。

次に、長くなったタイムライン全体で各シーンが順番に登場・退場するよう、レイヤーのタイミングを調整します。

タイムラインの長さの変更は、マルチシーンバナーも含め、プレビューとGIF・動画のエクスポートにすぐ反映されます。再生時間を変更した後にバナーを読み込み直す必要はありません。

> **Tip:** レイヤーを1つずつ調整する代わりに、シーンごとにまとめたタイミングのコントロールを使うと、シーンのタイミングのブロックをよりすばやく移動できます。

### 7. プレビューしてエクスポートする {#_7-preview-and-export}

プレビュー再生でシーンの順番とタイミングを確認してから、必要に応じてエクスポートします。

- 広告・プラットフォーム向けのコードパッケージには**HTML**エクスポート
- アニメーション画像の出力には**GIF**エクスポート
- 動画の納品物には**MP4/Video**エクスポート

セクション内のすべてのシーンは、1つにつながったバナーのシーケンスとしてエクスポートされます。

## 複数のサイズと複数のセクションを扱う {#working-with-multiple-sizes-and-multiple-sections}

セクションを複製して、バナーのサイズやバリエーションを追加できます。

更新すると、Bannerifyは各セクションを別々のバナーとして読み込み、それぞれに独自のシーンが含まれます。
これにより、複数のサイズとマルチシーンのバリエーションを一括でエクスポートできます。

## 重要な要件：シーンのフレームのサイズを揃える {#important-requirement-scene-frames-must-match-dimensions}

フレームを同じバナーのシーンとして扱うには、セクション内のフレームのサイズがまったく同じである必要があります。

サイズがわずか1pxでも違うフレームがあると、Bannerifyはそのフレームをセクションのシーンから除外することがあります。

> **Warning:** 例：2つのフレームが`269x250`で、1つが`268x250`の場合、Bannerifyはサイズが一致するフレームだけをシーンとして読み込むことがあります。

その場合は、次の手順で対処してください。

1. セクション内のシーンのフレームの幅と高さをすべてまったく同じにします。
2. バナーを更新します。
3. セクションのバナーを読み込み直します。

## トラブルシューティングのチェックリスト {#troubleshooting-checklist}

- **一部のシーンしか読み込まれない**：セクション内のすべてのフレームのサイズが同じか確認してください。
- **セクションの変更が反映されない**：**Refresh All Banners**をクリックして読み込み直してください。
- **シーンの順番が違う**：Figmaのセクション内でフレームを並べ替えてから、**Refresh All Banners**をクリックして読み込み直してください。
- **シーンが重なりすぎている**：タイムラインの長さを延ばし、タイミングを配分し直してください。
- **エクスポートがプレビューと違って見える**：タイムラインを変更した後に、レイヤーのタイミングとシーンの順番を確認し直してください。

## まとめ {#summary}

FigmaのセクションをBannerifyと組み合わせると、すべてを1つの巨大なフレームに詰め込むことなく、長めのストーリー性のあるバナーのシーケンスを最も早く作れます。

各シーンを通常のフレームとしてデザインし、セクションでまとめてセクションモードを有効にしたら、1つにつながったバナーとしてアニメーションを付けてエクスポートしましょう。