foolhardy45/portfolio

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 が指定されていない場合）:

   • [stitch_prefix]:list_projects を filter: "view=owned" で呼び出します
   • タイトル（例：「電卓アプリ」）で対象のプロジェクトを特定します
   • name フィールド（例：projects/13534454087919359824）からプロジェクト ID を抽出します

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 — 個別画面表示コンポーネント

   • プロパティ: 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": "電卓アプリ",
  "screens": [
    {
      "id": "1",
      "title": "ホーム画面",
      "description": "テンキー付きのメイン電卓インターフェース",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "履歴表示",
      "description": "以前の計算結果の表示",
      "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 は、ベストプラクティスを定義する独自のエージェントスキルを維持しています。高度なテクニックについてはこれらを確認してください:

• リポジトリ: 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）

使用例

ユーザープロンプト:

私の Stitch プロジェクト「電卓アプリ」の画面を確認し、画面のウォークスルーを示す remotion 動画を
作成してください。

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

1. Stitch プロジェクトをリスト → 「電卓アプリ」を検索 → プロジェクト ID を抽出
2. プロジェクト内の画面をリスト → すべての画面を特定（ホーム、履歴、設定）
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

使用するタイミング

このスキルは、上記で説明されている主要なドメインや機能に関連するタスクに取り組むときに使用します。