Demo
https://demo-dynamic-menu.pages.dev/jp/
ここから体験も可能です
TL;DR
- 商品画像1枚 から Nano Banana Pro で「分解レイヤー画像」を生成
- Kling の Image-to-Video で「完成品 → 分解」のアニメーションを作成
- HTML/JS でホットスポットUI（材料選択ボタン）を実装
- Cloudflare Pages でデプロイ
- 結果：静止画メニューが「動く×カスタマイズできる」体験に進化
はじめに
動画生成AIが急速に進化しています。Sora、Kling、Runway、Pika...毎月のように新しいモデルが登場し、どれも驚くほど高品質な映像を生成できるようになりました。
こんなにも素晴らしい技術が誰でも使える時代になりました。なのに、どう活かせばいいのか、具体的なアイデアがなかなか思い浮かびませんでした。
技術は揃っています。あとは「使い方」だけです。
そんな中、SNSで活用事例を探していたら、このポストに出会いました。
コーヒーが構成要素に「分解」される動画です。これを見た瞬間、「これだ」 と思いました。
商品に命を吹き込むことができます。スクロールする手が止まります。そして何より、ビジネスとして実用的です。
この手法を応用して、「ダイナミックで目を引く」 かつ 「実際に役立つ」 ——この2つを両立するメニューUIを作ってみました。商品が分解されて、材料をカスタマイズできる「ダイナミックメニュー」です。
技術紹介
今回使った技術スタックを紹介します。
Claude（Anthropic）
プロジェクト全体の企画とプロンプト作成の壁打ち相手。画像生成プロンプトも動画生成プロンプトも、Claudeと壁打ちしながら作成しました。「exploded view（分解図）」という表現や、Klingに渡す動きの指示など、英語での表現をブラッシュアップするのに重宝しました。
Nano Banana Pro（Google）
API名: gemini-3-pro-image-preview。Googleの最新画像生成モデルです。
今回の肝は 「現実には撮影できない画像を生成できる」 こと。コーヒーが構成要素に分解された状態なんて、物理的に撮影不可能です。でもNano Banana Proなら、プロンプトで指示するだけで生成できます。
Kling（Kuaishou）
中国発の動画生成AIです。Start frame → End frame を指定できる Image-to-Video が強力です。
2枚の画像を渡すと、その間を補完する動画を生成してくれます。今回は「完成品 → 分解」の動画を作るのに使用しました。
全体アーキテクチャ
ポイント: 飲食店が持っている既存の商品写真をStart frameにできるので、あなただけのオリジナルメニューを作れます。End frame（分解画像）だけをAIで生成すればOKです。
Step 1: 分解レイヤー画像の生成（Nano Banana Pro）
コンセプト
カフェモカの完成品を「逆再生」したような画像を作ります。現実には撮影できない「コーヒーが構成要素に分解された状態」をAIで生成します。
商品画像（Start Frame）
これは実際の商品写真でOK。今回はNano Banana Proで生成しましたが、お店なら既存の写真を使えます
プロンプト（Claude Opusで作成）
Create an "exploded view" product photography of a cafe mocha drink.
The image should show all ingredients floating and separated vertically above an empty cup,
as if the drink has been deconstructed:
From top to bottom:
- Chocolate shavings and cocoa powder (at the very top)
- Steamed milk foam with latte art pattern (floating)
- Coffee beans (floating in the middle)
- Dark chocolate pieces (floating)
- Empty ceramic cup with brown/cream gradient glaze (at the bottom)
Style: Clean white background, professional product photography,
high-end advertising aesthetic, soft shadows,
each element clearly separated with space between them.
The cup should have the same design as a typical cafe latte cup
with horizontal stripes in brown, cream, and white.
生成結果（End Frame）
Nano Banana Proで生成した「分解レイヤー画像」です。現実には撮影不可能な構図です
なぜNano Banana Proか
- 構図の理解力: 「exploded view（分解図）」という概念を正しく解釈できる
- 一貫性: 元の商品画像のカップデザインを維持したまま分解画像を生成できる
- 商用利用: Google Cloud経由で商用利用可能
Step 2: 動画生成（Kling）
Klingの設定
| 項目 | 設定値 |
|---|---|
| モード | Image-to-Video |
| Start Frame | 商品画像（mocha.png） |
| End Frame | 分解画像（layer.png） |
| Duration | 5秒 |
| Motion | Standard |
プロンプト（Claude Opusで作成）
A café mocha in a speckled ceramic cup on a wooden table. The coffee art surface gently lifts upward, then layer by layer separates vertically: silky foam milk floats up, then roasted coffee beans on a small dish, then chocolate pieces, revealing chocolate sauce at the bottom of the cup. Soft steam wisps rise between each floating layer. The layers stabilize in position, hovering perfectly aligned. Finally, elegant Japanese text labels fade in beside each layer with subtle animations. Cozy café background with plants and window light stays softly blurred throughout. Cinematic smooth motion, warm natural lighting, infographic style reveal.
生成のコツ
- Start/End frameの整合性: カップのデザイン、背景色を揃える
- 動きの指示を明確に: 「上に浮かぶ」「分離する」など具体的に
- カメラは固定: 素材が動く、カメラは動かない
Step 3: ホットスポットUIの実装
分解動画の最後のフレームで、各材料の横に選択ボタンを配置します。
UI設計
┌─────────────────────────────────┐
│ │
│ 🍫 チョコ削り [選択] ○ │
│ │
│ 🥛 ミルク [選択] ○ │
│ │
│ ☕ コーヒー豆 [選択] ○ │
│ │
│ 🍫 ダークチョコ [選択] ○ │
│ │
│ ☕ [カップ] │
│ │
└─────────────────────────────────┘
実装のポイント
- 動画の最終フレームに合わせてボタンを配置: 分解された各要素の横にホットスポットを設置
- 選択状態の管理: どの材料が選択されているかをstateで管理
- アレルゲン表示: ⚠️アイコンでアレルギー情報を表示（ミルク、チョコなど）
学び
良かった点
✅ 既存素材の活用: 飲食店が持っている商品写真をそのまま使えます
✅ 「あり得ない画像」の生成: Nano Banana Proで現実には撮影できない分解図を作れます
✅ 自然な遷移: Klingが2枚の画像から滑らかな動画を生成してくれます
✅ 低コスト: 撮影なし、モデルなし、スタジオなしで制作可能です
応用アイデア
この手法は他のメニューにも応用できます：
- ハンバーガー: バンズ、パティ、野菜、ソースが分解
- パフェ: 層ごとに分解して、トッピングを選択
- サラダ: ドレッシング、トッピングをカスタマイズ
- ピザ: 生地、ソース、チーズ、トッピングを選択
「分解 → カスタマイズ」という体験は、どんな組み立て型の商品にも適用可能です。
コラボ募集
飲食店を経営されている方、メニュー制作に携わっている方へ
この「ダイナミックメニュー」を実際の店舗で導入してみませんか？
今回作ったのはデモですが、実際のお店の商品写真を使えば、あなたのお店だけのオリジナルダイナミックメニューを作ることができます。
こんな方と一緒に取り組みたいです：
- 新しいメニュー表現に興味がある飲食店オーナーの方
- SNSでの集客に力を入れている方
- お客様に「商品の中身」をもっと伝えたい方
- カスタマイズメニューを分かりやすく見せたい方
一緒にできること：
- お店の商品写真からダイナミックメニューを制作
- LINE Mini AppやWebサイトへの組み込み
- SNS向けの動画コンテンツ制作
興味のある方はお気軽にご連絡ください！
- X: https://twitter.com/Yoooongtae
- Facebook: https://www.facebook.com/yongtaih1
- Email: yong723.enjoy.everything@gmail.com
（複数媒体にご連絡いただけると確実です）
参考リンク
タグ: #Claude #NanoBananaPro #Gemini #Kling #生成AI #フロントエンド #飲食店DX #動画生成