Stitch to Remotion ウォークスルービデオ

アプリケーションデザインからエンゲージングなウォークスルービデオを作成することに特化したビデオプロダクション専門家です。Stitch のスクリーン取得機能と Remotion のプログラマティックなビデオ生成を組み合わせて、スムーズでプロフェッショナルなプレゼンテーションを制作します。

概要

このスキルは、プロフェッショナルなトランジション、ズーム効果、コンテキストテキストオーバーレイでアプリスクリーンをショーケースするウォークスルービデオを作成できます。ワークフローは Stitch プロジェクトからスクリーンを取得し、それらを Remotion ビデオコンポジションにオーケストレーションします。

前提条件

必須:

• Stitch MCP Server へのアクセス
• Remotion MCP Server（または Remotion CLI）へのアクセス
• Node.js と npm のインストール
• デザイン済みスクリーンを備えた Stitch プロジェクト

推奨:

• Remotion のビデオ機能への理解
• React コンポーネントの知識（Remotion は React を使用）

取得とネットワーキング

ステップ 1: 利用可能な MCP サーバーを検出

list_tools を実行して、利用可能な MCP サーバーとそのプレフィックスを特定します：

• Stitch MCP: stitch: または mcp_stitch: プレフィックスを探す
• Remotion MCP: remotion: または mcp_remotion: プレフィックスを探す

ステップ 2: Stitch プロジェクト情報を取得

1. プロジェクト検索（プロジェクト ID が指定されていない場合）：

   • [stitch_prefix]:list_projects を filter: "view=owned" で呼び出す
   • タイトル（例："Calculator App"）でターゲットプロジェクトを特定
   • name フィールドからプロジェクト ID を抽出（例：projects/13534454087919359824）

2. スクリーン取得：

   • [stitch_prefix]:list_screens をプロジェクト ID（数値のみ）で呼び出す
   • スクリーンタイトルを確認してウォークスルーの全スクリーンを特定
   • 各スクリーンの name フィールドからスクリーン ID を抽出

3. スクリーンメタデータ取得： 各スクリーンについて：

   • [stitch_prefix]:get_screen を projectId と screenId で呼び出す
   • 以下を取得：
     • screenshot.downloadUrl — ビデオ用のビジュアルアセット
     • htmlCode.downloadUrl — オプション：テキスト/コンテンツ抽出用
     • width, height — 適切なスケーリングのためのスクリーン寸法
     • テキストオーバーレイ用のスクリーンタイトルと説明

4. アセットダウンロード：

   • web_fetch または curl を使用した Bash でスクリーンショットをダウンロード
   • ステージングディレクトリに保存：assets/screens/{screen-name}.png
   • 意図したウォークスルーフローの順序でアセットを整理

ステップ 3: Remotion プロジェクトをセットアップ

1. 既存の Remotion プロジェクトを確認：

   • remotion.config.ts または Remotion 依存関係を含む package.json を探す
   • 存在する場合、既存のプロジェクト構造を使用

2. 新しい Remotion プロジェクトを作成（必要に応じて）：

   npm create video@latest -- --blank
   

   • TypeScript テンプレートを選択
   • 専用の video/ ディレクトリでセットアップ

3. 依存関係をインストール：

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

ビデオコンポジション戦略

アーキテクチャ

以下のコンポーネントを備えたモジュラー Remotion コンポジションを作成します：

1. ScreenSlide.tsx — 個別のスクリーン表示コンポーネント

   • プロップス: imageSrc, title, description, width, height
   • 機能: ズームインアニメーション、フェードトランジション
   • 期間: 設定可能（スクリーンあたりデフォルト 3～5 秒）

2. WalkthroughComposition.tsx — メインビデオコンポジション

   • 複数の ScreenSlide コンポーネントをシーケンス
   • スクリーン間のトランジションを処理
   • テキストオーバーレイとアノテーションを追加

3. config.ts — ビデオ設定

   • フレームレート（デフォルト：30 fps）
   • ビデオ寸法（Stitch スクリーン寸法に一致させるか、適切にスケール）
   • 合計期間計算

トランジション効果

Remotion の @remotion/transitions を使用してプロフェッショナルな効果を実現：

• フェード: スクリーン間のスムーズなクロスフェード

  import {fade} from '@remotion/transitions/fade';
  

• スライド: 方向性のあるスライドトランジション

  import {slide} from '@remotion/transitions/slide';
  

• ズーム: 強調用のズームイン/アウト効果

  • スムーズなズームに spring() アニメーションを使用
  • 重要な UI 要素に適用

テキストオーバーレイ

Remotion のテキストレンダリングを使用してコンテキスト情報を追加：

1. スクリーンタイトル: 各フレームの上部または下部に表示
2. 機能コールアウト: 特定の UI 要素をアニメーション化されたポインターで強調表示
3. 説明: 各スクリーンの説明テキストをフェードイン
4. 進捗インジケータ: ウォークスルー内の現在のスクリーン位置を表示

実行ステップ

ステップ 1: スクリーンアセットを収集

1. ターゲット Stitch プロジェクトを特定
2. プロジェクト内の全スクリーンをリスト化
3. 各スクリーンのスクリーンショットをダウンロード
4. ウォークスルーフローの順序に整理
5. マニフェストファイルを作成（screens.json）：

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Home Screen",
      "description": "Main calculator interface with number pad",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "History View",
      "description": "View of previous calculations",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

ステップ 2: Remotion コンポーネントを生成

Remotion のベストプラクティスに従ってビデオコンポーネントを作成：

1. ScreenSlide.tsx を作成：

   • アニメーション用に useCurrentFrame() と spring() を使用
   • ズームとフェード効果を実装
   • 適切なタイミングでテキストオーバーレイを追加

2. WalkthroughComposition.tsx を作成：

   • スクリーンマニフェストをインポート
   • <Sequence> コンポーネントでスクリーンをシーケンス
   • スクリーン間にトランジションを適用
   • 適切なタイミングとオフセットを計算

3. remotion.config.ts を更新：

   • コンポジション ID を設定
   • ビデオ寸法を設定
   • フレームレートと期間を設定

参考リソース:

• resources/screen-slide-template.tsx を出発点として使用
• resources/composition-checklist.md で完全性を確認
• examples/walkthrough/ ディレクトリの例を確認

ステップ 3: プレビューと調整

1. Remotion Studio を起動：

   npm run dev
   

   • ブラウザベースのプレビューを開く
   • リアルタイム編集と調整が可能

2. タイミングを調整：

   • 各スクリーンが適切な表示期間を持つようにする
   • トランジションがスムーズであることを確認
   • テキストオーバーレイのタイミングを確認

3. アニメーションを微調整：

   • ズーム効果のスプリング設定を調整
   • トランジションのイージング関数を変更
   • テキストがすべての時点で読める状態を確保

ステップ 4: ビデオをレンダリング

1. Remotion CLI を使用してレンダリング：

   npx remotion render WalkthroughComposition output.mp4
   

2. 代替案: Remotion MCP を使用（利用可能な場合）：

   • [remotion_prefix]:render をコンポジション詳細で呼び出す
   • 出力形式を指定（MP4、WebM など）

3. 最適化オプション：

   • 品質レベルを設定（--quality）
   • コーデックを設定（--codec h264 または h265）
   • 並列レンダリングを有効化（--concurrency）

高度な機能

インタラクティブホットスポット

クリック可能な要素または重要な機能を強調表示：

import {interpolate, useCurrentFrame} from 'remotion';

const Hotspot = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

ボイスオーバー統合

ウォークスルーにナレーションを追加：

1. スクリーン説明からボイスオーバースクリプトを生成
2. テキスト音声変換を使用するか、オーディオを録音
3. <Audio> コンポーネントで Remotion にオーディオをインポート
4. スクリーンタイミングをボイスオーバーペースと同期

動的テキスト抽出

Stitch HTML コードからテキストを抽出して自動アノテーション：

1. 各スクリーンの htmlCode.downloadUrl をダウンロード
2. HTML をパースして主要なテキスト要素（見出し、ボタン、ラベル）を抽出
3. 重要な UI 要素の自動コールアウトを生成
4. 時間指定テキストオーバーレイとしてコンポジションに追加

ファイル構造

project/
├── video/                      # Remotion プロジェクトディレクトリ
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # ダウンロードした Stitch スクリーンショット
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # スクリーンマニフェスト
└── output.mp4                  # レンダリング済みビデオ

Remotion スキルとの統合

Remotion はベストプラクティスを定義する独自の Agent Skills を保有しています。高度なテクニックのためにこれらを確認してください：

• リポジトリ: https://github.com/remotion-dev/remotion/tree/main/packages/skills
• インストール: npx skills add remotion-dev/skills

活用すべき主要な Remotion スキル：

• アニメーションタイミングとイージング
• コンポジションアーキテクチャパターン
• パフォーマンス最適化
• オーディオ同期

一般的なパターン

パターン 1: シンプルスライドショー

フェードトランジション付きの基本的なウォークスルー：

• スクリーンあたり 3～5 秒
• クロスフェードトランジション
• スクリーンタイトルを含む下部テキストオーバーレイ
• 上部の進捗バー

パターン 2: 機能ハイライト

特定の UI 要素に焦点を当てる：

• 特定の領域へのズーム
• 機能を指すアニメーション化された円または矢印
• 主要なインタラクションへのスローモーション強調表示
• 側面の前後比較

パターン 3: ユーザーフロー

ステップバイステップのユーザージャーニーを表示：

• 方向性のあるスライド付きの順序立ったスクリーンフロー
• ステップ番号付きオーバーレイ
• ユーザーアクション（クリック、タップ）を強調表示
• アニメーション化されたパスでスクリーンを接続

トラブルシューティング

問題	ソリューション
ぼやけたスクリーンショット	ダウンロード画像が最高解像度であることを確認。screenshot.downloadUrl の品質設定を確認
テキスト配置のズレ	スクリーン寸法がコンポジションサイズと一致することを確認。実際のスクリーン寸法に基づいてテキスト位置を調整
ぎくしゃくしたアニメーション	フレームレートを 60fps に増加。適切なダンピング設定でスプリング設定を使用
Remotion ビルドが失敗	Node バージョン互換性を確認。すべての依存関係がインストールされていることを確認。Remotion ドキュメントを確認
タイミングがおかしい	マニフェスト内のスクリーン期間を調整。Remotion Studio でプレビュー。実際のユーザーでテスト

ベストプラクティス

1. アスペクト比を維持: 実際の Stitch スクリーン寸法を使用するか、比例してスケール
2. 一貫したタイミング: 特定のスクリーンを強調しない限り、スクリーン表示期間を一貫性を保つ
3. 読みやすいテキスト: 十分なコントラストを確保。適切なフォントサイズを使用。乱雑なオーバーレイを回避
4. スムーズなトランジション: スプリングアニメーションで自然な動きを使用。不快な切り替えを回避
5. 徹底的にプレビュー: 最終レンダリング前に常に Remotion Studio でプレビュー
6. アセットを最適化: 画像を適切に圧縮。効率的な形式を使用（UI の PNG、写真の JPG）

使用例

ユーザープロンプト:

Look up the screens in my Stitch project "Calculator App" and build a remotion video 
that shows a walkthrough of the screens.

エージェントワークフロー:

1. Stitch プロジェクトをリスト化 → "Calculator App" を検索 → プロジェクト ID を抽出
2. プロジェクト内のスクリーンをリスト化 → 全スクリーンを特定（Home、History、Settings）
3. 各スクリーンのスクリーンショットをダウンロード → assets/screens/ に保存
4. スクリーンメタデータで screens.json マニフェストを作成
5. Remotion コンポーネントを生成（ScreenSlide.tsx、WalkthroughComposition.tsx）
6. Remotion Studio でプレビュー → タイミングとトランジションを調整
7. 最終ビデオをレンダリング → calculator-walkthrough.mp4
8. ビデオプレビューリンク付きで完了を報告

成功のコツ

• シンプルに始める: 複雑なアニメーション追加前に基本的なフェードトランジションで開始
• Remotion パターンに従う: Remotion の公式スキルとドキュメントを活用
• マニフェストファイルを使用: スクリーンデータを JSON で整理。簡単な更新が可能
• 頻繁にプレビュー: Remotion Studio を使用して早期に問題を発見
• アクセシビリティを考慮: キャプションを追加。テキストが読める状態を確保。明確なビジュアルを使用
• プラットフォーム向けに最適化: ターゲットプラットフォーム（YouTube、ソーシャルメディアなど）に合わせてビデオ寸法を設定

参考資料

• Stitch ドキュメント: https://stitch.withgoogle.com/docs/
• Remotion ドキュメント: https://www.remotion.dev/docs/
• Remotion スキル: https://www.remotion.dev/docs/ai/skills
• Remotion MCP: https://www.remotion.dev/docs/ai/mcp
• Remotion トランジション: https://www.remotion.dev/docs/transitions