gabelul/stitch-kit

Stitch → Remotion ウォークスルー動画

制約: ユーザーが「Stitch」とウォークスルー動画、デモ、またはRemotionについて明示的に言及した場合にのみ、このスキルを使用してください。

あなたは、Stitchアプリのデザインからウォークスルー動画を作成する動画制作スペシャリストです。Stitchのスクリーンショットを取得し、Remotionコンポジション（スライドトランジション、ズームアニメーション、テキストオーバーレイ）を構築します。

前提条件

• Stitch MCPサーバー（または既知の画面ID）
• Node.js 18+ および npm
• Remotion CLI (npm install -g remotion または npx 経由で使用)

ステップ1: Stitchアセットを収集する

画面を探索する

1. list_tools を実行 → Stitch MCPプレフィックスを見つける
2. [プレフィックス]:list_projects を呼び出す → プロジェクトを選択
3. [プレフィックス]:list_screens を projects/[プロジェクトID] で呼び出す → すべての画面を一覧表示
4. 動画に含めたい各画面について、数値IDを指定して [プレフィックス]:get_screen を呼び出す

スクリーンショットをダウンロードする

各画面について:

# スクリーンショットをアセットディレクトリにダウンロード
curl -L "[スクリーンショット.downloadUrl]" -o "video/public/assets/[画面名].png"

または、取得スクリプトを使用:

bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/[画面名].html"
# スクリーンショットは別途です — スクリーンショットURLをcurlでダウンロード

画面マニフェストを作成する

動画を記述する screens.json を作成:

{
  "projectName": "私のアプリ",
  "fps": 30,
  "screens": [
    {
      "id": "home",
      "title": "ホーム画面",
      "description": "主要な指標を表示するメインダッシュボード",
      "imagePath": "./public/assets/home.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 4
    },
    {
      "id": "profile",
      "title": "ユーザープロフィール",
      "description": "設定とアカウント管理",
      "imagePath": "./public/assets/profile.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 3
    }
  ]
}

ステップ2: Remotionプロジェクトをセットアップする

# 作業ディレクトリ内に新しいRemotionプロジェクトを作成
cd video
npm create video@latest -- --blank
cd walkthrough-video
npm install @remotion/transitions

ステップ3: コンポジションを構築する

ScreenSlideコンポーネント

// video/src/ScreenSlide.tsx
import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'

interface ScreenSlideProps {
  /** スクリーンショット画像へのパス */
  imagePath: string
  /** オーバーレイとして表示される画面タイトル */
  title: string
  /** 補足説明テキスト */
  description: string
  /** 表示中に少しズームするかどうか */
  withZoom?: boolean
}

/**
 * 単一画面スライド。オプションのズーム効果とテキストオーバーレイ付き。
 * フェードインし、保持され、フェードアウトします。
 */
export function ScreenSlide({ imagePath, title, description, withZoom = true }: ScreenSlideProps) {
  const frame = useCurrentFrame()
  const { fps, durationInFrames } = useVideoConfig()

  // 最初の15フレームでフェードイン
  const fadeIn = spring({ fps, frame, config: { damping: 200 } })

  // 微妙なズーム: 100% → 105%（動画の再生時間全体で）
  const scale = withZoom
    ? interpolate(frame, [0, durationInFrames], [1, 1.05], { extrapolateRight: 'clamp' })
    : 1

  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      {/* スクリーンショット */}
      <AbsoluteFill style={{ opacity: fadeIn, transform: `scale(${scale})`, transformOrigin: 'center' }}>
        <Img src={imagePath} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </AbsoluteFill>

      {/* 下部テキストオーバーレイ */}
      <AbsoluteFill
        style={{
          justifyContent: 'flex-end',
          padding: '40px 60px',
          background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
          opacity: fadeIn,
        }}
      >
        <h2 style={{ color: '#fff', fontSize: 36, fontWeight: 700, margin: 0 }}>{title}</h2>
        {description ? (
          <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 20, margin: '8px 0 0' }}>
            {description}
          </p>
        ) : null}
      </AbsoluteFill>
    </AbsoluteFill>
  )
}

ウォークスルーコンポジション

// video/src/WalkthroughComposition.tsx
import { Series, TransitionSeries } from '@remotion/transitions'
import { fade } from '@remotion/transitions/fade'
import { slide } from '@remotion/transitions/slide'
import screensData from '../../screens.json'
import { ScreenSlide } from './ScreenSlide'

const TRANSITION_FRAMES = 15  // 30fpsで0.5秒

/**
 * メインのウォークスルーコンポジション — 各画面は1スライド、フェード/スライドトランジション。
 */
export function WalkthroughComposition() {
  return (
    <TransitionSeries>
      {screensData.screens.map((screen, i) => (
        <>
          <TransitionSeries.Sequence
            key={screen.id}
            durationInFrames={screen.durationSeconds * screensData.fps}
          >
            <ScreenSlide
              imagePath={screen.imagePath}
              title={screen.title}
              description={screen.description}
            />
          </TransitionSeries.Sequence>
          {/* 画面間のトランジションを追加（最後の画面の後は除く） */}
          {i < screensData.screens.length - 1 && (
            <TransitionSeries.Transition
              key={`t-${screen.id}`}
              timing={fade({ durationInFrames: TRANSITION_FRAMES })}
            />
          )}
        </>
      ))}
    </TransitionSeries>
  )
}

Root.tsxに登録

// video/src/Root.tsx
import { Composition } from 'remotion'
import { WalkthroughComposition } from './WalkthroughComposition'
import screensData from '../../screens.json'

const TOTAL_FRAMES = screensData.screens.reduce(
  (acc, s) => acc + s.durationSeconds * screensData.fps,
  0
)

export const RemotionRoot = () => (
  <>
    <Composition
      id="Walkthrough"
      component={WalkthroughComposition}
      durationInFrames={TOTAL_FRAMES}
      fps={screensData.fps}
      width={screensData.screens[0]?.width ?? 390}
      height={screensData.screens[0]?.height ?? 844}
    />
  </>
)

ステップ4: プレビューとレンダリング

# ブラウザでプレビュー
cd video/walkthrough-video
npm run dev

# MP4にレンダリング
npx remotion render Walkthrough output.mp4

# 高品質レンダリング
npx remotion render Walkthrough output.mp4 --jpeg-quality 95 --concurrency 4

一般的な動画スタイル

スタイル	設定
クイックデモ（1〜2分）	各画面2〜3秒、フェードトランジション、タイトルのみ
機能ウォークスルー	各画面4〜5秒、ズーム＋スライド、タイトル＋説明
プレゼンテーション	各画面5〜8秒、フェードのみ、説明文オーバーレイ
ソーシャルメディアクリップ	各画面1〜2秒、高速カット、音楽トラック

ファイル構造

project/
├── screens.json             ← 画面マニフェスト
├── scripts/fetch-stitch.sh  ← GCSダウンローダー
└── video/
    ├── public/
    │   └── assets/          ← ダウンロードしたスクリーンショット
    └── walkthrough-video/
        ├── src/
        │   ├── WalkthroughComposition.tsx
        │   ├── ScreenSlide.tsx
        │   └── Root.tsx
        ├── remotion.config.ts
        └── package.json

トラブルシューティング

問題	解決策
スクリーンショットがぼやける	フル解像度でダウンロード: サムネイルではなく、スクリーンショットURLを直接使用
レイアウトが合わない	Remotionコンポジションの寸法を、get_screen から取得した画面の width + height に合わせる
トランジションがぎこちない	TRANSITION_FRAMES を増やすか、slide から fade に切り替える
ESMでビルドが失敗する	package.json に "type": "module" を追加し、Remotionのバージョン互換性を確認
MP4が再生できない	FFmpegがインストールされているか確認: ffmpeg -version

参考情報

• Remotionドキュメント: https://www.remotion.dev/docs/
• Remotionトランジション: https://www.remotion.dev/docs/transitions
• scripts/fetch-stitch.sh — 信頼性の高いGCSダウンローダー
• stitch-mcp-list-screens — Stitchプロジェクト内の画面を探索
• stitch-mcp-get-screen — スクリーンショットのダウンロードURLを取得