---
url: "/ja/bannerify/design/nested.md"
description: "親グループを移動、拡大縮小、回転、フェードさせながら、ネストされた子レイヤーではそれぞれのBannerifyアニメーションを再生できます。"
---

# グループとネストされたレイヤーを個別にアニメーションさせる

> 親グループを移動、拡大縮小、回転、フェードさせながら、ネストされた子レイヤーではそれぞれのBannerifyアニメーションを再生できます。

[Video](/assets/videos/bannerify/design/nested-layers.mp4)

### 動画チュートリアル：Group Motionでグループとレイヤーを個別にアニメーションさせる

[Embedded media](https://www.youtube-nocookie.com/embed/B_YTLpBfROg)

[ステップごとのチュートリアルを見る](/bannerify/tutorials/animate-groups-and-layers-independently)。

Bannerifyでは、親グループとその中のレイヤーに同時にアニメーションを付けられます。たとえば、グループ化した車をバナーの端から端まで動かしながら、タイヤのレイヤーを個別に回転させられます。

## 必要なもの {#things-you-ll-need}

- バナーデザインを含む、最上位のFigmaフレーム。
- 1つ以上の子レイヤーを含む親レイヤー。
- 個別にアニメーションさせたい子レイヤーには、それぞれ別の名前。

## 手順 {#steps}

1. Figmaで、関連するレイヤーを1つの親グループに入れます。車のアニメーションなら、`Body`、`Wheel Left`、`Wheel Right`を含む`Car`グループを作成します。
2. 次のどちらかの方法で、親グループを展開するようBannerifyに指示します。
   - 親レイヤーの名前に`[expand]`を追加します（例：`Car [expand]`）。
   - Bannerifyを開き、バナーのタイムラインの上部にある**List**アイコンをクリックしてから、親レイヤーの横にある**Arrow**をクリックします。
3. ネストされたレイヤーのパネルで、展開した親の横にある**Keep Parent Animatable**を有効にします。このオプションはデフォルトでオフになっているため、既存のネストされたレイヤーの設定は、子レイヤーだけをアニメーションさせる従来の動作のまま変わりません。
4. ネストされたレイヤーのパネルを閉じます。Bannerifyがバナーを更新し、展開された子レイヤーをタイムラインに追加します。
5. タイムラインに子レイヤーと、**(Group Motion)** というラベルの付いた別の親の行があることを確認します。この例では、親の行は`Car [expand] (Group Motion)`と表示されます。
6. 共通の動きは**Group Motion**の行に適用します。たとえば、**Slide In Left**を適用して、車全体をバナーに入ってこさせます。
7. 子の行には個別のアニメーションを適用します。たとえば、それぞれのタイヤに**Rotate 360°** を適用します。
8. **Play All Banners**をクリックするか、タイムラインのスクラバーを使って、組み合わせた結果をプレビューします。
9. 通常どおりバナーをエクスポートします。親と子のアニメーションは、HTML、GIF、MP4、WebM、その他のcanvasベースのメディアエクスポートで合成されます。

## Group Motion {#group-motion}

[Video](/assets/videos/bannerify/animation/nested-parent-animation.mp4)

**Keep Parent Animatable**を有効にすると、Bannerifyは親を**Animatable**としてマークし、タイムラインに別の**Group Motion**の行を追加します。親の行は、展開された子レイヤーを包むモーションラッパーとして機能します。親に適用した移動、拡大縮小、回転、不透明度、クリッピングは、各子に適用したアニメーションと組み合わされます。

**Keep Parent Animatable**をオフにすると、子レイヤーは展開されたままアニメーションを付けられますが、親の**Group Motion**の行は追加されません。Bannerifyは、このオプションを親レイヤーごとに記憶します。

> **Tip:** 同じ構成が複数のバナーサイズにある場合は、子レイヤーにわかりやすく統一した名前を付けてください。そうすれば、**Quick Select Layers**で一致するレイヤーを選択し、アニメーションをまとめて適用できます。

## 角丸マスクの中で写真を動かす {#moving-a-photo-inside-a-rounded-mask}

マスクしたグループをバナーにスライドインさせながら、中の写真を個別に動かすには、次の手順に従います。

1. Figmaで、1つの長方形をグループ全体のマスクとして使います。マスクは、切り抜くすべてのアートワークより下に置いてください。角ごとに異なる角丸の半径を使っても構いません。
2. Bannerifyでマスクグループを展開し、**Keep Parent Animatable**を有効にします。
3. グループの**Group Motion**の行に**Slide In Left**を適用します。
4. 写真の行には、**Zoom Pan Right**などの別のアニメーションを適用します。ゆっくりパンさせたい場合は、長さを延ばします。
5. バナーをプレビューしてエクスポートします。親のアニメーションでグループ全体が動く一方で、写真は角丸の輪郭の中で動きます。

この機能は、回転していない標準的な角の長方形マスクに対応しており、不透明な**Alpha**マスクまたは**Vector**マスクを使えます。マスク自体はアニメーションの行にはなりません。複数のマスク、一部の兄弟レイヤーだけにかかるマスク、ソフトマスクや輝度マスク、角の丸め（スムージング）、線、エフェクトを含むグループは、1枚の画像としての見た目を保つために折りたたんだままにしてください。

## Figmaのセクションを使う {#using-figma-sections}

**Use Figma sections as multi-scene banners**を有効にしている場合も、同じ設定で使えます。展開された各行にはシーン番号が付き、オプトインした親は、そのシーン内の別の**Group Motion**の行として引き続き使えます。

## FigmaのSlotレイヤー {#figma-slot-layers}

Bannerifyは、バナーフレーム内のFigmaの[スロットレイヤー](https://help.figma.com/hc/en-us/articles/38231200344599-Use-slots-to-build-flexible-components-in-Figma)にも対応しています。スロットのコンテナは、ネストされたレイヤーのグループと同じように扱われ、Bannerifyが最初に読み込んだときに展開された状態で始まるため、子レイヤーをすぐにタイムラインで使えます。

Slotレイヤーを手動で折りたたんだ場合、Bannerifyはバナーを更新してもその設定を記憶しています。

## グループや子レイヤーが表示されない場合 {#if-the-group-or-child-layers-are-missing}

- バナーが最上位のFigmaフレームであるか、マルチシーンモードで読み込んだセクションの中にあることを確認してください。
- 親に子レイヤーがあり、Bannerifyで展開されていることを確認してください。
- 子レイヤーは表示されるのに親の**Group Motion**の行がない場合は、ネストされたレイヤーのパネルを開き、親の横にある**Keep Parent Animatable**を有効にしてください。
- バナーを読み込んだ後で親の名前に`[expand]`を追加した場合は、**Refresh Banner Layers**をクリックしてください。
- 子レイヤーをFigmaで表示状態にしておき、展開した親の中にあることを確認してください。

## 関連リンク {#useful-links}

- [バナーのレイヤーにアニメーションを付ける](/ja/bannerify/animation/animating-banners)
- [Quick Selectで一致するレイヤーを選択する](/ja/bannerify/animation/quick-select-layers)
- [Figmaのセクションでマルチシーンバナーを作成する](/ja/bannerify/design/scenes)
- [アニメーションバナーをHTMLにエクスポートする](/ja/bannerify/export/html)
- [バナーを動画にエクスポートする](/ja/bannerify/export/video)