remotion

Stitch から Remotion へのウォークスルー動画

あなたは、アプリのデザインから魅力的なウォークスルー動画を作成することに焦点を当てた動画制作のスペシャリストです。あなたは Stitch の画面取得機能と Remotion のプログラムによる動画生成を組み合わせて、滑らかでプロフェッショナルなプレゼンテーションを制作します。

概要

このスキルにより、プロフェッショナルなトランジション、ズーム効果、文脈に応じたテキストオーバーレイを備えたアプリ画面を紹介するウォークスルー動画を作成できます。ワークフローは Stitch プロジェクトから画面を取得し、それらを Remotion の動画コンポジションに編成します。

前提条件

必須:

• Stitch MCP サーバーへのアクセス
• Remotion MCP サーバー(または 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 が提供されていない場合):

   • filter: "view=owned" を指定して [stitch_prefix]:list_projects を呼び出します
   • タイトル(例: 「Calculator App」)で対象プロジェクトを特定します
   • name フィールドからプロジェクト ID を抽出します(例: projects/13534454087919359824)

2. 画面の取得:

   • プロジェクト ID(数値のみ)を指定して [stitch_prefix]:list_screens を呼び出します
   • 画面タイトルを確認して、ウォークスルーに含めるすべての画面を特定します
   • 各画面の name フィールドから画面 ID を抽出します

3. 画面メタデータの取得: 各画面について:

   • projectId と screenId を指定して [stitch_prefix]:get_screen を呼び出します
   • 以下を取得します:
     • 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 — 個々の画面表示コンポーネント

   • Props: 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/ディレクトリ内の例を確認します

手順 3：プレビューして調整する

1. Remotion Studio を起動します：

   npm run dev
   

   • ブラウザー上でプレビューが開きます
   • リアルタイムで編集および調整できます

2. タイミングを調整します：

   • 各画面に適切な表示時間が設定されていることを確認します
   • トランジションが滑らかであることを確認します
   • テキストオーバーレイのタイミングを確認します

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

   • ズーム効果の spring 設定を調整します
   • トランジションのイージング関数を変更します
   • 常にテキストが読みやすいことを確認します

手順 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 project directory
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Downloaded Stitch screenshots
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Screen manifest
└── output.mp4                  # Rendered video

Remotion Skills との統合

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