---
url: "/ja/bannerify/animation/animating-banners.md"
description: "FigmaのフレームをBannerifyに読み込んだら、プラグインのタイムライン機能を使って、バナー内のどのレイヤーにもアニメーションを適用できます。"
---

# バナーにアニメーションを付ける

> FigmaのフレームをBannerifyに読み込んだら、プラグインのタイムライン機能を使って、バナー内のどのレイヤーにもアニメーションを適用できます。

### 動画チュートリアル：Figmaでバナーにアニメーションを付けてHTMLにエクスポートする

Figmaから、そのまま入稿できるHTMLバナーにアニメーションを付けて数秒でエクスポートする方法を解説した動画です。
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## アニメーションを選ぶ {#selecting-animations}

[Video](/assets/videos/bannerify/animation/select-animations.mp4)

Bannerifyには、キーフレームをベースにした数十種類のアニメーションが用意されており、次の5つのカテゴリに分かれています。

- Entrances
- Exits
- Basic Transforms
- Attention Seekers
- Background Pans

**登場アニメーション**を設定するには、Bannerifyのタイムラインでアニメーションを付けたいレイヤーにマウスを重ね、**上のセレクトボックス**をクリックします。アニメーションの一覧をスクロールし、アニメーション名を**クリック**するとレイヤーに適用されます。新しいアニメーションを適用したバナーのプレビューが、すぐに更新されます。

> **Tip:** **レイヤーからアニメーションを外す**。レイヤーにアニメーションを付けたくない場合は、**No Entry Animation**や**No Exit Animation**を選びます。または、Figmaのレイヤー名の先頭に**locked-** を付けても（例：*locked-RectangleBackground*）、アニメーションが追加されなくなり、プラグインのタイムラインでもアニメーションのセレクトボックスが無効になります。

## タイムラインでバナーのアニメーションをプレビューする {#previewing-your-banner-animations-in-the-timeline}

[Video](/assets/videos/bannerify/animation/preview-banner.mp4)

**Play**アイコンボタンをクリックするとバナーのアニメーションをプレビューでき、**Pause**アイコンボタンをクリックすると、どの時点でもタイムラインを一時停止できます。**Restart**アイコンボタンをクリックすると、アニメーションを最初から再生し直せます。

バナーの上にある時間ルーラーをクリックまたはドラッグすると、アニメーションをスクラブできます。共有の再生ヘッドは、すべてのバナーのタイミングトラックと位置がそろったままです。ルーラーが表示されていれば、バナーのヘッダーからスクラブすることもできます。

**+**、**−**、ズームスライダー、またはルーラーやタイミングトラックの上でのトラックパッドの2本指ピンチで、**100%〜1000%** の範囲でズームできます。ズームしているときは、ルーラーの下にある青い角丸のスクロールバーのハンドルをドラッグすると、左右に移動できます。**Fit**をクリックすると、タイムライン全体がもう一度表示されます。これらの操作は表示を変えるだけで、アニメーションのタイミングやエクスポートの長さは変わりません。ナビゲーション操作の詳細は、[タイムラインのズームとスクロール](/ja/bannerify/animation/animation-speed-timing#zoom-and-scroll-the-timeline)をご覧ください。

さらに細かく編集するには、[スナップ、レイヤーフィルター、マーカー、再利用できるモーションシーケンス](/ja/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline)を使うか、トランジションを調整しながら[作業範囲をループ再生](/ja/bannerify/animation/previewing-animations#loop-a-work-area)します。

## Timeline Settings {#timeline-settings}

ヘッダーの**Timeline Settings**をクリックします。パネルは**General**タブで開き、4つのタブがあります。

| タブ | 設定できる項目 |
| --- | --- |
| **General** | タイムラインの長さ、Magic Delays、Magic Speeds |
| **Timeline Tools** | [プレビュー範囲のループ再生](/ja/bannerify/animation/previewing-animations#loop-a-work-area)と[名前付きマーカーの追加](/ja/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) |
| **Motion Sequences** | [連動したアニメーションの保存と再利用](/ja/bannerify/animation/animation-speed-timing#save-and-reuse-a-motion-sequence) |
| **Sync Timings** | [バナーサイズ間でのタイミングのコピー](/ja/bannerify/animation/animation-speed-timing#synchronise-timings-across-banner-sizes) |

**Snap**、レイヤーフィルター、**Zoom To Selection**、グループの折りたたみ操作は、**Timeline Settings → Timeline Tools**にあります。

## 編集履歴の確認と復元 {#review-and-restore-edits}

元に戻す・やり直す矢印の横にある**History**をクリックすると、[タイムラインの編集履歴を確認](/ja/bannerify/animation/undo-redo)できます。ステップを選ぶと、その時点まで戻ったり進んだりできます。**Current**は現在の状態を示します。前の状態に戻ってから新たに編集すると、それより後の履歴は置き換えられます。

## タイムラインの長さを調整する {#adjusting-the-timeline-length}

[Video](/assets/videos/bannerify/animation/adjusting-timeline.mp4)

**Timeline Settings → General**を開き、**Total Timeline Length**で長さを選んでから、**Update Timeline Length**をクリックします。選べる長さは1秒〜3分です。変更はすべてのバナーに適用され、短くしたタイムラインからはみ出すタイミングの範囲は、収まるように調整されます。

**Undo**を使うか、**History**で前のステップを選ぶと、以前の長さとタイミングに戻せます。[タイムラインの長さの調整](/ja/bannerify/animation/timeline-length)をご覧ください。

## 退場アニメーションを追加する {#adding-exit-animations}

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

**退場アニメーション**の追加方法は、登場アニメーションと同じです。上のセレクトボックスではなく、**下のセレクトボックス**をクリックして、レイヤーの退場アニメーションを選びます。

> **Note:** レイヤーに設定する退場アニメーションは、**「登場」アニメーションが終わった*後に*始まるように設定**してください。そうしないと、2つのアニメーションが重なり、同時にトランジションが競合する問題が起こります。

## アニメーションの速度とタイミングを調整する {#adjusting-animation-speeds-and-timings}

[Video](/assets/videos/bannerify/animation/adjust-speed.mp4)

レイヤーのタイムラインバーの左右の**端**を**クリック**し、マウスで**押したままドラッグ**すると、アニメーションの長さと開始・終了位置を変えて、速度と遅延を調整できます。

レイヤーのタイムラインバーの**中央**を**クリック**し、マウスで**押したまま**左右に**ドラッグ**すると、タイムライン上でアニメーションの位置を移動できます。

> **Tip:** **キーボードで正確なタイミングの数値を入力する**。タイミングバーを使いたくない場合は、タイムラインのレイヤーにある2つ目の値をクリックし、キーボードで新しい数値（例：*1.5*）を入力して秒数を設定することで、速度と遅延の値を指定することもできます。

## アニメーションをループさせる {#looping-animations}

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

特定のレイヤーのアニメーションを（バナーのタイムラインが終わった後も）無限に繰り返したい場合は、選択したアニメーションの横にある**Loop**トグルをオンにします。「Heartbeat」「Flicker」「Pulse」など、ループ再生に向いたごく短いアニメーションで便利です。

## アニメーションをコピー・ペーストする {#copy-pasting-animations}

[Video](/assets/videos/bannerify/animation/copy-paste.mp4)

**Copy**ボタンと**Paste**ボタンを使うと、タイムラインのあるレイヤーのアニメーションを別のレイヤーにすばやくコピーできます。**Copy**ボタンをクリックするとアニメーションがコピーされ、ほかのレイヤーで**Paste**ボタンをクリックすると貼り付けられます。

> **Tip:** **コピーしたアニメーションを複数のレイヤーに貼り付ける** [一括適用](/ja/bannerify/animation/animating-banners#applying-bulk-animations)機能を使うと、コピーしたアニメーションを複数のレイヤーにまとめて適用することもできます。

## アニメーションを一括適用する {#applying-bulk-animations}

[Video](/assets/videos/bannerify/animation/bulk-animations.mp4)

複数のレイヤーに同じアニメーションをすばやく適用するには、各レイヤー名の横にあるチェックボックスでレイヤーを選択し（または**Quick Select Layers**機能を使い）、プラグインのウィンドウ下部からスライドして現れるエリアでアニメーションを設定します。アニメーションが決まったら、**Apply Animations to Selected Layers**ボタンをクリックすると、選択したすべてのレイヤーに新しいアニメーションが適用されます。

## 似たレイヤーをすばやく選択する {#quick-selecting-similar-layers}

[Video](/assets/videos/bannerify/animation/quick-select.mp4)

同じ要素やレイヤーを含む複数のバナーからなるバナーセットで作業している場合は、Bannerifyのヘッダーにある**Quick Select Layers**メニューを使うと、すべてのバナーから似たレイヤーを自動で選択できます。各レイヤーに手作業でチェックを入れる代わりに便利です。

> **Tip:** **Quick Select Layersの使用例** たとえば、すべてのバナーに**CTA Button**という名前のレイヤーがある場合、その項目をクリックすると、すべての**CTA Button**レイヤーに自動でチェックが入ります。これで、すべてのバナーのそのレイヤーに、アニメーションをまとめて**一括適用**できます。

## Magic DelaysとMagic Speedsを使う {#using-magic-delays-and-magic-speeds}

[Video](/assets/videos/bannerify/animation/magic-timeline.mp4)

**Timeline Settings → General**を開き、**Magic Delays**または**Magic Speeds**で値を選びます。**Apply To All Entry Animations**または**Apply To All Exit Animations**をクリックすると、すべてのバナーに適用されます。

### Magic Delays {#magic-delays}

0.1〜0.5秒の範囲で、少しずつずらす遅延を選びます。各レイヤーには、アニメーションの長さを保ったまま、順にずれた遅延が設定されます。

### Magic Speeds {#magic-speeds}

0.1〜1秒の範囲で長さを選びます。開始時間は、タイムラインに収めるために早める必要がある場合を除き、そのまま保たれます。

1回の適用が、履歴の1ステップになります。**Undo**、**Redo**、または**History**パネルを使って、変更の間を移動できます。[Magic DelaysとMagic Speeds](/ja/bannerify/animation/magic-delays-speeds)をご覧ください。