ウォークスルー動画を生成する
Remotion を使って、Stitch プロジェクトの画面からアニメーション付きトランジションのプロフェッショナルなウォークスルー動画を作成します。
remotion スキルは、Stitch プロジェクトの画面を洗練されたウォークスルー動画に変換します。クロスフェードトランジション、スプリングアニメーションのズーム効果、テキストオーバーレイを備えています。デモ、ステークホルダーレビュー、ドキュメントに役立ちます。
前提条件
- デザイン済みの画面が 2 つ以上ある Stitch プロジェクト
- Node.js と npm がインストールされている
- Stitch MCP サーバーへのアクセス
画面を取得する
PROMPT
List all screens in Stitch project projects/123456 and download their screenshots.
スキルは MCP 経由で画面メタデータを取得し、フル解像度のスクリーンショットを assets/screens/ にダウンロードし、タイトル、サイズ、画面ごとの表示時間を含む screens.json マニフェストを作成します。
セットアップして生成する
Remotion プロジェクトが存在しない場合、スキルが作成します。その後、トランジションを設定します：
フェード（デフォルト）
画面間を滑らかにクロスフェードします。落ち着いたプロフェッショナルなプレゼンテーションに最適です。
PROMPT
Use fade transitions between all screens with 15 frames overlap.
スライド
連続するユーザーフローのための方向性のあるスライドです：
PROMPT
Use slide transitions from left to right to show the user journey.
ズーム
特定の機能を強調するためのスプリングアニメーションのズーム効果です：
PROMPT
Add a zoom-in effect on the hero section of the home screen before transitioning to the features page.
組み合わせて使いましょう。ほとんどの画面にはフェードを使い、重要な瞬間を強調するにはズームを使います。
テキストオーバーレイを追加する
画面タイトル
PROMPT
Add the screen title as a bottom overlay on each slide, fading in after 0.5 seconds.
機能のコールアウト
PROMPT
Add a pulsing circle highlighting the search bar on the navigation screen.
進行状況インジケーター
PROMPT
Add a thin progress bar at the top showing the current position in the walkthrough.
動画をレンダリングする
まず、ブラウザベースの Remotion Studio でプレビューします：
PROMPT
Start the Remotion Studio to preview the walkthrough video.
次にファイルにレンダリングします：
PROMPT
Render the walkthrough video as walkthrough.mp4 with H.264 codec.
品質オプション
| フラグ | 効果 |
|---|---|
--quality 100 | 最高品質（ファイルサイズ増） |
--codec h264 | 最高の互換性 |
--codec h265 | より良い圧縮、互換性は低め |
--concurrency 4 | 高速化のための並列レンダリング |
ペースを調整する
- 速すぎる？
screens.jsonの画面ごとの表示時間を増やします（デフォルトは 3〜5 秒） - 遅すぎる？ 表示時間を短くするか、より動的なトランジションを追加します
- 不均一？ 複雑な画面には長めの、シンプルな画面には短めの表示時間を設定します
PROMPT
Set the dashboard screen duration to 6 seconds and the login screen to 3 seconds.
トラブルシューティング
| 問題 | 解決方法 |
|---|---|
| スクリーンショットがぼやける | フル解像度にするには、ダウンロード URL に =w{width} を追加する |
| アニメーションがカクつく | フレームレートを 60fps に上げる |
| テキストオーバーレイの位置がずれる | コンポジションのサイズを画面のサイズに合わせる |
| Remotion のビルドが失敗する | Node のバージョン互換性を確認する。npm install を実行する |
原文: https://stitch.withgoogle.com/docs/skills/walkthrough-videos/
本ページは Google Stitch 公式ドキュメントの翻訳です。原文の著作権は Google LLC に帰属します。本サイトは独立した非公式の翻訳です。