---
url: "/ja/bannerify/design/gif.md"
description: "バナーデザインでGIFを使う方法は2つあり、GIFをデザインにどう組み込みたいかによって、それぞれ動作が少し異なります。"
---

# HTMLバナーにアニメーションGIFを含める

> バナーデザインでGIFを使う方法は2つあり、GIFをデザインにどう組み込みたいかによって、それぞれ動作が少し異なります。

> **Note:** GIFレイヤーは、メインタイムラインに含まれている必要があります。GIFを含む***ネストされた*レイヤーはレンダリングされず **、HTMLエクスポートにも含まれません。また、埋め込んだアニメーションGIFは、Bannerifyからの**GIF・動画エクスポートには含まれません**。

> **Tip:** **透過GIFを指定する**。 デフォルトでは、GIFのエクスポートに透過は含まれません。GIFに透過が必要な場合は、Figmaのレイヤー名のどこかに**transparent**という単語を追加してください。

## アニメーションGIFを画像レイヤーとして使う {#using-animated-gifs-as-image-layers}

[Video](/assets/videos/bannerify/design/animated-gif-layer.mp4)

最上位の任意のバナーに`.gif`ファイルをドラッグすると、Figmaの画像レイヤーとして追加されます。

この方法では、アニメーションGIFの上にほかのコンテンツを重ねることはできません。ただし、このフレームに追加したFigmaの塗り（色やグラデーションのオーバーレイなど）も、最終的な`.gif`エクスポートに含まれます。

## アニメーションGIFをフレームレイヤーの背景の塗りとして使う {#using-animated-gifs-as-background-fills-on-a-frame-layer}

[Video](/assets/videos/bannerify/design/animated-gif-fill.mp4)

または、コンピューターから`.gif`ファイルをフレームレイヤーの**塗り**にドラッグして、フレームの背景の画像塗りとして設定することもできます。このフレームに追加したFigmaの塗り（色やグラデーションのオーバーレイなど）も、最終的な`.gif`エクスポートに含まれます。

この方法の利点は、アニメーションGIFの上に、フレーム内でほかのFigmaレイヤー（テキストや画像など）を追加できることです。それらのレイヤーも、HTMLバナーと一緒にエクスポートされる`.gif`に含まれます。