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/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 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