walkthrough-video

ウォークスルー動画ジェネレーター

アプリのスクリーンショットや実際のサイトから、Remotion を使ってプロ品質のウォークスルー動画を作成します。トランジション、ズーム効果、テキストオーバーレイを備えた、滑らかで洗練された MP4 動画を生成します。

概要

このスキルでは、スクリーンショットのセット（または実行中のアプリからキャプチャした画像）を使い、以下の要素を含む Remotion の動画コンポジションを作成します。

• 滑らかなトランジションによる画面切り替え（フェード、スライド、ワイプ）
• ズーム効果による特定の UI 領域の強調
• テキストオーバーレイによるタイトル、説明、コールアウトの表示
• 進行状況インジケーターによるウォークスルー内の位置表示
• オプションのボイスオーバーナレーショントラック

前提条件

• Node.js 18 以降がインストールされていること
• アプリのスクリーンショット（またはスクリーンショットを撮影できる実行中のアプリ）
• Remotion の経験は不要です。このスキルがすべてのコードを生成します

ワークフロー

ステップ 1：スクリーンショットを集める

次のいずれかの方法を選びます。

オプション A：既存のスクリーンショットを使う

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

Read screenshots from:
- .design/screenshots/
- .jez/screenshots/
- User-specified directory

ウォークスルーの順に並べ替えます（ファイル名のアルファベット順、またはユーザーの指定順）。

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

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

1. Playwright CLI セッションを開始します
2. 各画面を順番に移動します
3. 一貫した寸法でスクリーンショットを撮影します（動画では 1280x720 を推奨）
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
# Navigate to next page...
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 entry point
│   ├── WalkthroughComposition.tsx  # Main composition
│   ├── components/
│   │   ├── ScreenSlide.tsx         # Individual screen display
│   │   ├── TextOverlay.tsx         # Title/description overlay
│   │   ├── ProgressBar.tsx         # Walkthrough progress indicator
│   │   └── ZoomEffect.tsx          # Zoom into regions
│   └── config.ts                   # Load screens.json, calculate durations
├── public/
│   └── screens/                    # Screenshot assets
│       ├── 01-home.png
│       └── 02-dashboard.png
├── screens.json                    # Screen manifest
├── 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();

  // Fade in
  const opacity = spring({ frame, fps, config: { damping: 20 } });

  // Subtle zoom (Ken Burns effect)
  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})`,
        }}
      />
      {/* Text overlay at bottom */}
      <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";

// In WalkthroughComposition:
<TransitionSeries>
  {screens.map((screen, i) => (
    <TransitionSeries.Sequence
      key={screen.id}
      durationInFrames={screen.durationSeconds * FPS}
    >
      <ScreenSlide {...screen} />
    </TransitionSeries.Sequence>
    // Add transition between screens (not after last)
    {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

ウェブ向けに最適化する場合（ファイルサイズを小さくする場合）：

npx remotion render Walkthrough output.webm --codec vp8

高度な機能

領域へのズーム

画面の特定の領域にズームして、機能を強調します。

// In ZoomEffect.tsx — interpolate scale and translate
const zoomScale = interpolate(frame, [delayFrames, delayFrames + 30], [1, 2.5], {
  extrapolateRight: "clamp",
});
const translateX = interpolate(frame, [delayFrames, delayFrames + 30], [0, -targetX], {
  extrapolateRight: "clamp",
});

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

UI 要素に注目を集めます。

// Pulsing circle that appears at a specific point
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),
}} />

BGM

控えめなバックグラウンドトラックを追加します。

import { Audio } from "remotion";

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

オープニングとエンディングのスライド

冒頭にタイトルカードを、最後に CTA を追加します。

// First sequence: Title card (3 seconds)
<TransitionSeries.Sequence durationInFrames={90}>
  <TitleCard projectName="MyApp" tagline="The future of project management" />
</TransitionSeries.Sequence>

// ... screen sequences ...

// Last sequence: CTA card (4 seconds)
<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	ウェブへの埋め込み、ファイルサイズの縮小
GIF	--image-format png を指定してから ffmpeg	短いループ、ソーシャルメディア
PNG シーケンス	--image-format png --sequence	ポストプロダクション編集

ヒントと注意点

• 1280×720、画面ごとに3〜5秒、全体で90秒未満 — これを超えると、視聴者の集中力が低下します
• フェードが最も安全なトランジションです — トランジションの種類は1〜2つに絞り、一貫性を保ちましょう
• テキストオーバーレイにはコントラストが必要です — text-shadowまたは半透明の背景を使いましょう。文字が小さすぎたりコントラストが低かったりすると、「AIが作った」ように見えます
• ケン・バーンズ効果（控えめなズーム）を使うと、静止スクリーンショットに動きが生まれます。動画が唐突に終わらないよう、イントロとアウトロのカードを追加しましょう
• レンダリング前にプレビューしましょう — npx remotion studioを使えば、フルレンダリングより時間を節約できます
• スクリーンショットの寸法を合わせましょう（一致しないと拡大縮小の問題が発生します）。public/のアセットにはstaticFile()を使いましょう