【Google Veo】SaaSのプロダクトデモ動画をAIで生成してみた — Excel翻訳ツールのUI動画をスクリーンショット3枚から作る
TL;DR
- Google Veoの image-to-video機能 に、SaaS UIのスクリーンショット3枚を入力して8秒のプロダクトデモ動画を生成した
- UIレイアウト・配色・トランジション・カーソルモーション の再現度は実用水準
- テキストレンダリングが壊滅的 — 「Custom Glossary」→「Custiom Glosssary」、「Columns」→「Colllurss」など
- SaaS UIデモ動画のプロンプト設計パターンと、実務で使える ハイブリッドワークフロー を共有
この記事の背景
私は exceltranslator.ai というSaaSを開発しています。Excelファイル（.xlsx）をアップロードするだけで、AIがセル内のテキストを丸ごと翻訳してくれるツールです。
ランディングページに掲載するプロダクトデモ動画が必要になり、Google の動画生成AI 「Veo」 を使って、UIのウォークスルー動画を生成できないか実験してみました。
結論から言うと、UIの雰囲気やトランジションの再現度は想像以上に高い一方、テキストレンダリングには明確な限界があるということが分かりました。
対象読者
- SaaS/Webアプリのプロダクトデモ動画を効率的に作りたい開発者
- AI動画生成（Veo / Sora / Runway など）をプロダクトマーケティングに活用したい人
- Veoのimage-to-video機能のプロンプト設計に興味がある人
1. なぜAI動画生成を試したのか
SaaSのプロダクト動画を作る選択肢は、大きく3つあります。
| 手法 | メリット | デメリット |
|---|---|---|
| 画面収録 + 後処理 | 正確、テキスト崩れなし | カーソル調整・編集に時間がかかる |
| Figmaモック → モーション化 | 高品質、ブランド統一 | 制作コスト高い |
| AI動画生成（Veo等） | 圧倒的に速い | テキスト精度に課題 |
特にLP用の 5〜8秒ループ動画 のような短尺コンテンツなら、AI動画生成で十分実用に耐えるのではないかと考えました。
2. 素材の準備
exceltranslator.ai のUIはステップ形式のウィザードになっています。
- Select Languages — ソース言語とターゲット言語をドロップダウンで選択
- Translation Style — General / Formal / Casual などのスタイルを選択
- Document Context — 翻訳の背景情報を任意で入力
- Custom Glossary — 統一したい用語ペアを登録
- Exclude Content — 翻訳対象外のカラム・行・シートを指定
Veoは 最大3枚の画像 を入力として受け付けるため、フローの中から代表的な3ステップを選びました。
入力画像1: Select Languages（言語選択画面）
ファイルカードの下に「From」「To」の2つのドロップダウンが並ぶシンプルな構成。
入力画像2: Custom Glossary（用語集画面）
「Original term = Translation」の対になった入力フィールドと、ダッシュ線の「+ Add term」ボタン。
入力画像3: Exclude Content（除外設定画面）
3つの入力フィールドが縦に並び、右下に紫の「Start Translation」ボタン。
3画面とも同じUIフレーム（上部にファイルカード、中央にコンテンツ、下部にBack/Nextボタン）を共有しています。このレイアウトの一貫性が、Veoのトランジション生成の安定性に寄与しました。
3. プロンプト設計
Veoの image-to-video機能では、入力画像がキーフレームとして扱われ、プロンプトで動きの方向性を指示します。
使用したプロンプト
Cinematic screen recording of a clean, modern SaaS translation
web application on a white background. The video begins on a
language selection screen showing an uploaded Excel file card
at the top with a spreadsheet icon, the filename and file size
displayed on a light gray rounded card. Below, a bold heading
reads the step title, with two rounded dropdown selectors
labeled From and To, connected by a right arrow icon. A smooth
mouse cursor glides to the From dropdown, clicks it, selects
a language, then moves to the To dropdown and selects another
language. The cursor then moves down to a rounded purple Next
button in the bottom-right corner and clicks it. The entire
page content smoothly slides to the left, revealing the next
step...
プロンプト設計の4つのポイント
① screen recording というフレーミング
Veoに「これはUIの画面収録である」という文脈を明示します。カメラアングルが固定され、UI要素の一貫性が保たれやすくなります。
+ Cinematic screen recording of a clean, modern SaaS...
- Cinematic video of a clean, modern SaaS...
② UIエレメントの視覚属性を具体的に記述
形状・色・角丸・位置をセットで記述すると再現度が上がります。
# ❌ 曖昧
a dropdown and a button
# ✅ 具体的
two rounded dropdown selectors with chevron icons,
connected by a right arrow icon...
a rounded purple Next button with white text
in the bottom-right corner
③ カーソル操作の時系列記述
cursor glides to → clicks → selects → moves to → clicks
操作の順序を明確にすることで、Veoが自然なカーソルモーションを生成しやすくなります。
④ トランジション方向の指定
The entire page content smoothly slides to the left,
revealing the next step
「方向（left）」と「動きの質感（smoothly slides）」の両方を言語化します。
4. 生成結果の分析
8秒の動画が生成されました。
✅ うまくいったこと
UIレイアウトの再現度が高い。 ファイルカード、見出し、入力フィールド、ボタンの配置は入力画像をかなり忠実に再現。白背景 + 紫アクセントの配色も正確。
トランジションが自然。 3画面間の遷移がスムーズなスライドアニメーションで繋がっており、ステップウィザードの操作感が伝わる仕上がり。
カーソルアニメーションの自動生成。 手のアイコン型カーソルが生成され、ボタンに向かって移動→クリックするモーションが付加。プロンプトの指示通り。
全体の雰囲気。 「モダン・ミニマル・クリーン」のトーン指定が正しく反映。
以下がVeo生成動画の各ステップのスクリーンショットです。
Veo生成: Select Languages（0:02付近）
レイアウトの再現度は高い。しかし「Select Languiages」「Tog, Spainish」などのスペルミスが発生。
Veo生成: Custom Glossary（0:04付近）
カーソルが紫の「Add term」ボタンに向かうモーションは自然。一方「Adld term」「Translatioion A」とテキストが崩壊。
Veo生成: Exclude Content（0:07付近）
「Colllurss」「Shefts」「Start Transiation」— ほぼ全ラベルでスペリングが崩壊。
❌ 課題：テキストレンダリングの崩壊
最も深刻な問題は テキストの再現精度 です。
| 元のUI表記 | Veo生成結果 | 問題の種類 |
|---|---|---|
| Select Languages | Select Languiages | 文字挿入 |
| Custom Glossary | Custiom Glosssary | 入れ替え + 重複 |
| Exclude Content | Exicliube Content | 入れ替え + 挿入 |
| Columns | Colllurss | 文字重複 |
| Sheets | Shefts | 文字欠落 |
| Start Translation | Start Transiation | 文字欠落 |
| Add term | Adld term | 文字挿入 |
| Translation A | Translatioion A | 文字重複 |
これはVeoに限らず、現行の拡散モデルベース動画生成AI全般に共通する構造的な課題です。拡散モデルはピクセルレベルで画像を生成するため、文字のスペリングという「離散的な正確さ」を保証する仕組みを持っていません。
元のUIとVeo生成結果の並列比較
| ステップ | 元のUI | Veo生成結果 |
|---|---|---|
| Select Languages | |
|
| Custom Glossary | |
|
| Exclude Content | |
|
5. 実務への示唆
AI動画生成が有効なケース
- 抽象的なコンセプト動画、ブランドイメージ動画
- LP背景のアンビエント・ループ動画
- モーショングラフィックス風のSNSティーザー
- テキストが少ない、またはテキスト精度が重要でないコンテンツ
現時点で難しいケース
- UIのテキストを正確に見せたいプロダクトデモ
- チュートリアル、オンボーディングフロー動画
- ボタンラベルやフォーム入力がプロダクトの信頼性に直結するケース
推奨: ハイブリッドワークフロー
Veoでプロトタイプ（演出・トランジション・タイミング検討）
↓
実際の画面収録をベースに最終動画を制作
↓
Veoで得た演出アイデアを適用
Veoを 「動画のラフスケッチツール」 として位置づけることで、制作ワークフロー全体の効率を上げられます。
6. プロンプト設計Tips まとめ
| Tip | 効果 |
|---|---|
screen recording を冒頭に入れる |
カメラ固定、UI正面アングル安定 |
| 色 + 形状 + 位置をセットで記述 | UI要素の再現度向上 |
| 入力画像のレイアウト一貫性を保つ | トランジション破綻を防止 |
| 短いプロンプトから段階的に詳細化 | 生成安定性の確保 |
static camera, no camera movement を追加 |
不要なカメラ動きの抑制 |
seamless loop を末尾に追加 |
ループ動画の繋ぎ改善 |
まとめ
Google Veoを使ったSaaSプロダクトデモ動画の生成は、「UIの雰囲気を伝えるビジュアル素材」としては驚くほど高いクオリティ を発揮しました。レイアウト再現、配色、トランジション、カーソルモーションはいずれも実用水準です。
一方で、テキストの正確な再現は現時点では期待できません。これは拡散モデルベースの動画生成AI全般に共通する構造的な制約です。
SaaSのデモ動画制作においては、Veoを「完成品を一発で生成するツール」ではなく 「演出のプロトタイピングツール」 として位置づけるのが、現時点で最も現実的なアプローチだと感じています。
exceltranslator.ai について
Excelファイル（.xlsx）をアップロードするだけで、AIがセル内のテキストを丸ごと翻訳するSaaSツールです。用語集の登録、翻訳スタイルの選択、特定カラム/行/シートの除外など、業務翻訳に必要な細かい制御が可能です。
👉 exceltranslator.ai