ウォークスルービデオジェネレーター

Remotion を使用してアプリスクリーンショットまたはライブサイトから専門的なウォークスルービデオを作成します。トランジション、ズーム効果、テキストオーバーレイを備えた滑らかで洗練された MP4 ビデオを生成します。

概要

このスキルはスクリーンショットのセット（または実行中のアプリからキャプチャ）を取得し、以下の機能を備えた Remotion ビデオコンポジションに統合します：

• 画面間のスムーズなトランジション（フェード、スライド、ワイプ）
• ズーム効果で特定の UI エリアをハイライト
• テキストオーバーレイタイトル、説明、コールアウト付き
• プログレスインジケーターでウォークスルーの位置を表示
• オプションのボイスオーバーナレーショントラック

前提条件

• Node.js 18+ がインストールされていること
• スクリーンショット（またはスクリーンショット可能なアプリ）
• Remotion の経験は不要 — スキルがすべてのコードを生成します

ワークフロー

ステップ 1: スクリーンショットを収集

いずれかのアプローチを選択します：

オプション A: 既存のスクリーンショットから

ユーザーがすでにスクリーンショットを持っている場合（例：design-loop または product-showcase から）：

スクリーンショットを以下から読み込む：
- .design/screenshots/
- .jez/screenshots/
- ユーザー指定のディレクトリ

ウォークスルーの順序でソート（ファイル名でアルファベット順、またはユーザーが指定した順序）。

オプション B: 実行中のアプリからキャプチャ

アプリがローカルで実行されている場合：

1. Playwright CLI セッションを開始
2. 各画面を順番に移動
3. 一貫した寸法でスクリーンショット（ビデオ用に 1280×720 推奨）
4. video/public/screens/ に保存

playwright-cli -s=walkthrough open http://localhost:3000
playwright-cli -s=walkthrough resize 1280 720
playwright-cli -s=walkthrough screenshot --filename=video/public/screens/01-home.png
# 次のページに移動...
playwright-cli -s=walkthrough screenshot --filename=video/public/screens/02-dashboard.png

オプション C: ライブ URL から

オプション B と同じですが、パブリック URL を使用します。各主要ページをスクリーンショット。

ステップ 2: スクリーンマニフェストを作成

ウォークスルーを説明する screens.json を構築：

{
  "projectName": "My App Walkthrough",
  "fps": 30,
  "width": 1280,
  "height": 720,
  "screens": [
    {
      "id": "home",
      "title": "Welcome to MyApp",
      "description": "The landing page introduces the core value proposition",
      "imagePath": "screens/01-home.png",
      "durationSeconds": 4,
      "transition": "fade",
      "zoomTarget": null
    },
    {
      "id": "dashboard",
      "title": "Your Dashboard",
      "description": "See all your projects at a glance",
      "imagePath": "screens/02-dashboard.png",
      "durationSeconds": 5,
      "transition": "slide-left",
      "zoomTarget": { "x": 100, "y": 200, "width": 400, "height": 300, "delay": 2 }
    }
  ]
}

フィールド	型	説明
id	string	一意のスクリーン識別子
title	string	テキストオーバーレイのタイトル
description	string	サブタイトルまたはナレーションテキスト
imagePath	string	video/public/ に対する相対パス
durationSeconds	number	この画面を表示する期間
transition	string	fade, slide-left, slide-right, slide-up, wipe, none
zoomTarget	object/null	設定した場合、delay 秒後にこのリージョンにズーム

ステップ 3: Remotion プロジェクトをスカフォールド

Remotion プロジェクトが存在しない場合：

mkdir -p video
cd video
npm init -y
npm install remotion @remotion/cli @remotion/transitions react react-dom
npm install -D typescript @types/react

プロジェクト構造を作成：

video/
├── src/
│   ├── Root.tsx                    # Remotion エントリーポイント
│   ├── WalkthroughComposition.tsx  # メインコンポジション
│   ├── components/
│   │   ├── ScreenSlide.tsx         # 個別スクリーン表示
│   │   ├── TextOverlay.tsx         # タイトル/説明オーバーレイ
│   │   ├── ProgressBar.tsx         # ウォークスループログレスインジケーター
│   │   └── ZoomEffect.tsx          # リージョンへのズーム
│   └── config.ts                   # screens.json の読み込み、期間計算
├── public/
│   └── screens/                    # スクリーンショットアセット
│       ├── 01-home.png
│       └── 02-dashboard.png
├── screens.json                    # スクリーンマニフェスト
├── remotion.config.ts
├── tsconfig.json
└── package.json

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

各コンポーネントファイルを生成。主要パターン：

Root.tsx

import { Composition } from "remotion";
import { WalkthroughComposition } from "./WalkthroughComposition";
import { screens, totalDurationInFrames, FPS, WIDTH, HEIGHT } from "./config";

export const RemotionRoot = () => (
  <Composition
    id="Walkthrough"
    component={WalkthroughComposition}
    durationInFrames={totalDurationInFrames}
    fps={FPS}
    width={WIDTH}
    height={HEIGHT}
    defaultProps={{ screens }}
  />
);

ScreenSlide.tsx パターン

import { AbsoluteFill, Img, spring, useCurrentFrame, useVideoConfig } from "remotion";

interface ScreenSlideProps {
  imageSrc: string;
  title: string;
  description: string;
}

export const ScreenSlide: React.FC<ScreenSlideProps> = ({ imageSrc, title, description }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // フェードイン
  const opacity = spring({ frame, fps, config: { damping: 20 } });

  // 微妙なズーム（Ken Burns エフェクト）
  const scale = 1 + frame * 0.0002;

  return (
    <AbsoluteFill style={{ backgroundColor: "#000" }}>
      <Img
        src={imageSrc}
        style={{
          width: "100%",
          height: "100%",
          objectFit: "contain",
          opacity,
          transform: `scale(${scale})`,
        }}
      />
      {/* 下部のテキストオーバーレイ */}
      <div style={{
        position: "absolute",
        bottom: 40,
        left: 40,
        right: 40,
        opacity: spring({ frame: frame - 15, fps, config: { damping: 20 } }),
      }}>
        <h2 style={{ color: "#fff", fontSize: 32, fontWeight: 700, textShadow: "0 2px 8px rgba(0,0,0,0.8)" }}>
          {title}
        </h2>
        <p style={{ color: "#ccc", fontSize: 18, textShadow: "0 1px 4px rgba(0,0,0,0.8)" }}>
          {description}
        </p>
      </div>
    </AbsoluteFill>
  );
};

画面間のトランジション

@remotion/transitions でトランジションを使用：

import { TransitionSeries } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";

// WalkthroughComposition 内：
<TransitionSeries>
  {screens.map((screen, i) => (
    <TransitionSeries.Sequence
      key={screen.id}
      durationInFrames={screen.durationSeconds * FPS}
    >
      <ScreenSlide {...screen} />
    </TransitionSeries.Sequence>
    // 画面間にトランジションを追加（最後の後ではない）
    {i < screens.length - 1 && (
      <TransitionSeries.Transition
        presentation={getTransition(screens[i + 1].transition)}
        timing={springTiming({ config: { damping: 20 }, durationInFrames: 15 })}
      />
    )}
  ))}
</TransitionSeries>

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

cd video
npx remotion studio

ブラウザベースのプレビューが開きます。確認事項：

• 各画面のタイミングが適切に感じられるか
• トランジションがスムーズか
• テキストオーバーレイが読みやすいか
• ズームターゲットが正しいエリアをヒットしているか
• プログレスバー（含める場合）が正確か

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

cd video
npx remotion render Walkthrough output.mp4 --codec h264

高品質の場合：

npx remotion render Walkthrough output.mp4 --codec h264 --quality 90

Web 最適化（ファイル容量小）：

npx remotion render Walkthrough output.webm --codec vp8

高度な機能

リージョンへのズーム

画面の特定のエリアにズームしてフィーチャーをハイライト：

// ZoomEffect.tsx 内 — スケールと変換を補間
const zoomScale = interpolate(frame, [delayFrames, delayFrames + 30], [1, 2.5], {
  extrapolateRight: "clamp",
});
const translateX = interpolate(frame, [delayFrames, delayFrames + 30], [0, -targetX], {
  extrapolateRight: "clamp",
});

アニメーションコールアウトサークル

UI 要素に注意を向ける：

// 特定の点に表示されるパルスサークル
const scale = spring({ frame: frame - delay, fps, config: { damping: 8, stiffness: 80 } });
<div style={{
  position: "absolute",
  left: x - 20, top: y - 20,
  width: 40, height: 40,
  borderRadius: "50%",
  border: "3px solid #3B82F6",
  transform: `scale(${scale})`,
  opacity: Math.min(1, scale),
}} />

背景音楽

微妙な背景トラックを追加：

import { Audio } from "remotion";

<Audio src={staticFile("music/background.mp3")} volume={0.15} />

イントロとアウトロスライド

スタート時にタイトルカード、エンド時に CTA を追加：

// 最初のシーケンス：タイトルカード（3秒）
<TransitionSeries.Sequence durationInFrames={90}>
  <TitleCard projectName="MyApp" tagline="The future of project management" />
</TransitionSeries.Sequence>

// ... スクリーンシーケンス ...

// 最後のシーケンス：CTA カード（4秒）
<TransitionSeries.Sequence durationInFrames={120}>
  <CtaCard url="myapp.com" text="Try it free" />
</TransitionSeries.Sequence>

トランジション リファレンス

名前	エフェクト	最適用途
fade	クロスフェードディゾルブ	デフォルト、どこでも機能
slide-left	新しい画面が右から スライドイン	シーケンシャルフロー（次ページ）
slide-right	新しい画面が左からスライドイン	戻る操作
slide-up	新しい画面が下からスライドイン	詳細への深掘り
wipe	ワイプトランジション	ドラマチックな表示
none	ハードカット	素早い比較

出力オプション

フォーマット	コマンド	用途
MP4 (H.264)	--codec h264	汎用互換性
WebM (VP8)	--codec vp8	Web 埋め込み、ファイル容量小
GIF	--image-format png その後 ffmpeg	短いループ、ソーシャルメディア
PNG シーケンス	--image-format png --sequence	ポストプロダクション編集

ヒントと落とし穴

• 1280×720、画面あたり 3～5 秒、合計 90 秒未満 — これを超えると注意力が低下します
• フェードが最も安全なトランジション — 1～2 つのトランジションタイプを選んで一貫性を保つ
• テキストオーバーレイはコントラストが必須 — テキストシャドウまたは半透明背景を使用。小さすぎたり低コントラストだと「AI が作った」ように見えます
• Ken Burns（微妙なズーム）は静的なスクリーンショットが退屈に見えるのを防ぎます。イントロ/アウトロカードを追加してビデオが唐突に感じないようにします
• レンダリング前にプレビュー — npx remotion studio は完全レンダリング時間を節約できます
• スクリーンショットの寸法を一致させる（不一致はスケーリング問題の原因）。public/ アセットに staticFile() を使用