Amazon Nova Reel × GradioでGIFバナーを自動生成する社内ツールを作ってみた

生成AIまわりではBedrockやClaudeなどいろいろ触ってきたのですが、画像生成や動画生成については前から気になっていたものの、あまり手を出せていませんでした。

そんなときに今年3月のAWS Innovateへ参加したところ、電通デジタルのAmazon Nova Reel導入事例を知りました。Nova Reelで生成した背景動画とバナー画像を合成して動くGIFバナーを自動生成するというもので、社内ツールとしても普通に使えそうだな...と思い、勉強がてら自分でも作ってみることにしました。

https://www.dentsudigital.co.jp/knowledge-charge/articles/2025/2025-0124-aws#02

https://aws.amazon.com/jp/advertising-marketing/nova/

## ※ 元記事

https://dev.to/aws-builders/how-i-used-amazon-nova-reel-and-gradio-to-auto-generate-stunning-gif-banners-4kn7

## Nova Reelとは
Nova Reelは、Amazon Bedrockに搭載された動画生成AIモデルです。プロンプトから最大6秒の動画を生成でき、商用利用も可能な設計になっています。

https://aws.amazon.com/jp/ai/generative-ai/nova/

例えば、以下のようなプロンプトを与えると...

>A seamless loop of glowing neon lights forming a tunnel in a futuristic cyberpunk city, vivid pinks, blues, and purples, flying particles, digital haze, sci-fi ambiance

このような近未来的なアニメーション背景が生成されます(※下のGIFはバナー合成済みの例です)。

![animated_banner_generated_video (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/237fe461-400b-4c66-9844-b80415c8f6ff.gif)

## システム構成
以下が今回作成した処理の流れです。

1. バナー画像(背景透過済)をアップロード
2. Nova Reelで背景動画を生成
3. `moviepy`で動画からフレームを抽出
4. 各フレームにバナー画像を合成
5. 合成済みフレームをGIFに変換
6. 完成したGIFをS3にアップロード

ソースコードはこちらです。

https://github.com/suzuki0430/animated-banner-generator

## GradioによるUI構築
誰でも簡単にGIFを生成できるように、[Gradio](https://www.gradio.app/)で以下のUIを構築しました。

- 透過PNG画像のアップロード
- Nova Reel用プロンプトの入力欄
- 「手動透過画像を使うか」のチェックボックス
- GIF生成の実行ボタン
- 実行ログ＋生成されたGIF＋S3リンクの表示
- GIFのダウンロードボタン

![スクリーンショット 2025-04-16 21.43.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/e95d6667-1669-470c-aac6-9424587fd563.png)

このUIはそのままHugging Face Spacesにデプロイし、Organizationのメンバーだけが使えるように制限をかけています。

https://huggingface.co/spaces

## AWSとの接続
Gradioアプリからは、以下のAWSサービスと連携しています。

- S3：バナー・動画・生成されたGIFの保存先
- Bedrock：Nova Reelによる動画生成

セキュリティ上、AWSキーはHugging Face SpacesのSecretsに保存し、`boto3`から環境変数経由で読み込んでいます。

```python
s3 = boto3.client("s3", region_name=os.environ["AWS_REGION"])
s3_bucket = os.environ["S3_BUCKET"]
```

## 実際に生成したGIF例
### 1. ゴールド光背景 × セールバナー
「ラグジュアリー」「限定感」「きらびやかさ」を演出したいときのセールバナーを想定しました。

#### 使用画像
![Big-sale-banner-design-template-on-transparent-background-PNG.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/161dbf13-b6dd-488d-abab-94e9680d075d.png)

#### プロンプト
```
A radiant golden light background, with shimmering beams of light radiating outward from the center, glowing and elegant, soft gradients, luxurious and ethereal atmosphere, seamless and loopable
```

#### 生成されたGIF
![gradio_generated_banner.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/604ffd85-6563-464d-a023-881a8b004484.gif)

### 2. サイバーパンクなネオン背景 × 高級車
先進的なブランドやプロダクトのイメージ訴求を想定しました。

#### 使用画像
![luxury_car_banner_500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/303698bd-869e-40e4-8c00-58c25c8ebca0.png)

#### プロンプト

```
A seamless loop of glowing neon lights forming a tunnel in a futuristic cyberpunk city, vivid pinks, blues, and purples, flying particles, digital haze, sci-fi ambiance
```

#### 生成されたGIF
![animated_banner_generated_video (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/02d247bf-1c1f-4b5d-b78c-4dd89ce591e4.gif)

### 3. データセンター風背景 × ペンギン
テクノロジー感満載の背景にペンギンを重ねて親しみやすさを加えてみました。

#### 使用画像
![penguin_running_box_500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/e0b2c27d-a285-4661-8d0f-8771274da7f7.png)

#### プロンプト

```
A high-tech data center corridor with glowing blue server racks, animated fast-scrolling binary code and data streams flying through the aisles, motion blur, futuristic cyberpunk lighting, ultra detailed
```

#### 生成されたGIF
![animated_banner_generated_video.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/946e35e6-e3b3-47fe-9b9c-86dbfc669a44.gif)

## まとめ
生成には1回あたり5分ほどかかりますが、SNS広告やLP素材として活用できそうな動画バナーが手軽に作れるのはかなり魅力的だと思います。

Nova Reelはまだ知名度の低いモデルかもしれませんが、アイデア次第でかなり使いようがありそうだと思いました。

## おまけ
ワッパーの後ろでハンバーガーの王様が走っているバナーです。

![gradio_generated_banner (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/1f8d899d-6cb8-4dc5-b400-a931634ca049.gif)