商品画像1枚から、世界観を伝える15秒PR動画｜架空の化粧水作例

この動画では、AIで用意した背景透過のボトル画像に、プログラムで文字・粒・水滴の動きを付け、MP4へ書き出しています。AIは、商品の見せ方や素材、動きの設計を相談する相手です。「一度指示しただけで、必ずこの完成形になる」という作り方ではなく、短い指示で調整を重ねた実例として見てください。

まずは、動かす商品画像を1枚用意しよう

今回の元素材は、細長い透明なガラスボトルを正面から見た、背景透過のPNGです。背景が透明だと、明るい画面から暗い画面へ切り替えても、商品のまわりに白い四角が残りません。

自分の商品を使う場合は、正面に近い写真から背景を取り除いたPNGを用意します。架空の商品で練習するなら、画像生成AIへ次のように依頼できます。

架空の化粧水の、動画用の商品画像を作ってください。

・細長い透明なガラスボトルを1本だけ
・正面向きで、まっすぐ立った形
・中身は、ごく淡いシャンパン色
・短い金属のキャップ、厚みのある透明な底
・ラベルは「ESSENCE」「LOTION」「01」だけ
・背景は完全に透明なPNG
・縦横比2:3のキャンバスの中央に配置
・キャップから底まで全部入れ、上下に少し余白を残す
・背景の市松模様、床、落ちる影、飾りの文字は描かない
・成分名、濃度、効果を表す文言は入れない

商品画像の周囲に文字や図形を重ねて動かす素材として使います。

保存した画像は、明るい背景と暗い背景の両方で見てみましょう。キャップと底が切れていないか、ラベルが読めるか、背景の市松模様が絵として描き込まれていないかを確認します。画像生成AIの出力が、そのまま背景透過PNGになるとは限らないため、保存形式と透明部分も確かめてください。

AIには、雰囲気より先に「何をどう動かすか」を伝えよう

「高級感のある動画を作って」だけでは、完成イメージに幅が出ます。今回のような作品なら、商品画像に加えて、秒数・画面比率・場面の順番・文字・止める時間を伝えると、調整する場所が分かりやすくなります。

添付のボトルPNGを使い、15秒の縦型モーショングラフィックを作りたいです。

画面は1080×1920、30fps、無音のMP4。
商品画像の形やラベルは描き変えず、そのまま使ってください。

構成：
1. 淡いアイボリーの背景。小さな粒が集まって一滴になる。
2. 一滴が落ち、円形の切り替えから暗い背景へ。
3. ボトルが現れ、「こだわりを、」と「LOTION」を見せる。
4. 縦の帯で明るい画面へ切り替える。
5. 「一滴に、こだわりを凝縮。」と商品名を置く。

色はアイボリー、落ち着いた金色、濃いチャコール。
文字と商品を重ねすぎず、最後の約2秒は止めて読ませてください。

最初に場面ごとの静止画で構図を確認し、その後に動画を書き出す手順にしてください。
実行コードを作る場合は、必要な素材と動かす環境も説明してください。

これは動きを相談するための指示例です。文章への回答だけでMP4が完成するわけではなく、画像や文字を動かして書き出す実行環境が必要です。下の練習ノートでは、その動きの部分をあらかじめ用意しています。

ブラッシュアップは、一つの変更から

この動画の制作では、途中で「成分を凝縮させて、こだわりの化粧水のような感じに」という方向を加えています。それを、粒が一滴へ集まり、ボトルにつながる動きに置き換えました。

全体の落ち着いた雰囲気は保ったまま、
小さな粒が一滴へ集まる動きを、もう少し分かりやすくしてください。
商品や文字の動きは増やさず、最後の約2秒は静止させてください。

一度に色・文字・秒数・動きを全部変えるより、「粒の集まり方だけ」「文字を読む時間だけ」と一つずつ直すと、良くなった点を見比べやすくなります。

自分の画像で、同じ動きを試してみよう

今回のモーションをもとにした、Google Colab用の練習ノートを用意しました。粒→一滴→商品→最後の商品画面という動きを、自分で用意したボトルPNGに適用できます。動画生成APIのキーは使いません。

化粧水モーショングラフィックの練習セットをダウンロード（ZIP）

完成作例と練習ノートの違い：完成作例に使った元のボトルPNGは、この練習セットに含めていません。同じ商品画像がなければ、完成動画と見た目が完全に同じにはなりません。練習セットでは自分の画像を使い、動きの組み立てを体験します。見本のMP4と説明書も同梱しています。

先に、縦横比2:3の透明キャンバスに、正面向きの細長いボトルを中央配置したPNGを用意してください。1024×1536が一例です。ノートで使えるのは15MB以下、長辺4096px以下、短辺100px以上のPNGです。横長の写真や、商品が大きく片側に寄った画像は、この見本の配置には適しません。

操作は、ノートの①〜④を順番に進める

1. ZIPを展開し、Google Colabの「ファイル」→ノートブックのアップロードから、essence-motion-practice.ipynbを開きます。
2. 「① 準備する」を実行し、必要な準備が終わるまで待ちます。GPUは不要です。
3. 「② 商品PNGをアップロードする」を実行し、用意した背景透過PNGを選びます。「画像を確認しました」と検証結果が表示されたことを確認します。
4. 「③ 動画を作る（15秒）」を実行し、完了まで待ちます。
5. 「④ 再生して保存する」を実行し、プレーヤーを表示してMP4をダウンロードします。

初めて使う場合は、Googleアカウントとインターネット接続が必要です。ライブラリやフォントの取得、動画の書き出しにかかる時間は環境によって変わります。ランタイムを再起動した場合は①から実行してください。無料Colabの利用制限やノートの読み込みは、公式FAQでも確認できます。

別の画像で作り直すときは、②→③→④を実行します。③は同名のMP4を上書きするため、前の作品を残す場合は先に別名で保存してください。このノートで、文字・色・ボトルの配置まで変えるにはコードの調整が必要です。まずは用意した動きで1本保存し、そこから自分の目的に合わせて変更してみましょう。

完成動画と手順を、実際にチェックしました

今回の記事は、添付された15秒版そのものと、制作時の記録・コードを照合して作成しています。完成MP4を改めて調べ、1080×1920・30fps・15.000秒・450フレーム・H.264・無音であることと、全フレームを正常に読み込めることを確認しました。

配布する練習ノートも、Google Colab上で①の準備、②の画像選択、③の書き出し、④の表示と保存まで実行しました。元のボトルPNGとは別の検証用画像を使い、15秒のMP4が作成できることと、保存した450フレームすべてを正常に読み込めることを確認しています。これはモーションと書き出し手順の検証であり、完成作例との画素単位の一致を確認したものではありません。

ご自身の画像で作った動画も、保存したファイルを開いて確認してください。特に見たいのは、次の点です。

• 粒が集まる動きと、一滴へのつながりが伝わる。
• 商品が現れたあと、ボトル全体やラベルを確認する時間がある。
• キャップや底、文字が意図せず切れていない。
• 暗い場面でも、商品の輪郭が見える。
• 最後のコピーを読む時間があり、画面が落ち着いて終わる。
• 保存したMP4が最後まで再生できる。

完成作例は、AIで作成した商品PNGと、JavaScript／SVGによる文字・図形・画像のアニメーションを組み合わせ、Sharpで各フレームを画像化し、FFmpegでMP4へ書き出したものです。本文はこの15秒版を対象とし、後から制作された液面上昇の18秒版は含めていません。

元の商品PNGは練習セットに含みません。配布ノートは自分のPNGで同じモーション構成を試すための教材です。AIへの指示例を送るだけで、この動画と完全に同じ結果になることを保証するものではありません。

参考：Sharp公式ドキュメント、FFmpeg公式ドキュメント、Google Colab公式FAQ。確認日：2026年10月22日。