---
url: "/ja/bannerify/animation/ai-prompt-animations.md"
description: "Bannerifyですぐに使えるJSONアニメーションを生成し、FigmaのBannerifyのカスタムアニメーションパネルに貼り付けます。"
---

# AIプロンプトでJSONアニメーションを作成する

> Bannerifyですぐに使えるJSONアニメーションを生成し、FigmaのBannerifyのカスタムアニメーションパネルに貼り付けます。

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

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

## bannerify.hypermatic.comでアニメーションのJSONを生成する {#generate-your-animation-json-on-bannerify-hypermatic-com}

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

1. [https://bannerify.hypermatic.com](https://bannerify.hypermatic.com)を開きます。
2. **Create Your Custom Bannerify Animation**セクションで、作りたいアニメーションを説明します（例：「左から少し回転しながら弾むようにスライドインする」）。
3. **Copy Prompt to Clipboard**をクリックしてChatGPTやClaudeに貼り付けるか、**Open Prompt in ChatGPT** / **Open Prompt in Claude**をクリックします。
4. 生成されたアニメーションのJSONスニペットをコピーします。
5. Figmaファイルを開き、Bannerifyプラグインを実行します。
6. Bannerifyで**Custom Animations**パネルを開きます。
7. **Paste generated JSON code here**と書かれたテキストエリアにJSONを貼り付けます。
8. タイムラインのアニメーションプリセットのドロップダウンに、そのアニメーションが表示されることを確認します。

アニメーションは貼り付けた時点で自動保存され、レイヤーのタイムラインのアニメーションメニューから、ほかのプリセットと同じように選べます。

> **Warning:** カスタムアニメーションは、現在のFigmaファイルに保存されます。別のFigmaファイルに切り替えた場合は、そのファイルでもう一度JSONを貼り付ける必要があります。