【Gemini×Claude Code】画面録画から操作マニュアルとナレーション字幕を自動生成する方法

クライアント向けの操作マニュアル、作るの面倒ですよね。

スクリーンショットを撮って、トリミングして、説明文を書いて、PDF化して...。
1つのマニュアルに数時間かかることも珍しくありません。

この記事では、画面録画 → Gemini → Claude Code を組み合わせて、PDFマニュアルと字幕付きの解説動画を一度に作るワークフローを紹介します。

このワークフローで作れるもの：

画像付きPDFマニュアル（Markdown → PDF変換）
字幕オーバーレイ動画（Remotion → ProRes 4444 透過動画）

こんなケースに有効です：

クライアント向けの操作マニュアル
社内向けのシステム操作手順書
SaaSツールの使い方ガイド
WordPressサイトの管理者向けマニュアル

ワークフローの全体像

全8ステップで構成されています。ポイントはcontent.ts（タイムスタンプデータ）を中心に据えることで、PDFマニュアルと字幕動画の両方を同じデータソースから生成できる点です。

/	ツール	作業内容	成果物
1	-	session-context.md の作成	案件の背景情報
2	QuickTime / OBS + Premiere	画面録画 → 簡易編集	recording.mp4
3	Premiere	主だった部分の静止画書き出し	スクリーンショット
4	Claude Code	下書き（構成ガイド）の作成	draft.md
5	Gemini	タイムスタンプデータの作成	content.ts
6	Claude Code	PDFマニュアルの生成	manual.md
7	VS Code	PDF変換	manual.pdf
8	Claude Code + Remotion	字幕オーバーレイの生成	caption.mov

必要なもの

項目	説明
Claude Code	Anthropicのコマンドラインツール
Gemini	Googleの動画解析AI（gemini.google.com）
画面録画ツール	QuickTime Player（Mac）/ OBS Studio（Windows）
Premiere Pro（任意）	動画の簡易編集・静止画書き出し
Remotion（任意）	字幕動画が必要な場合のみ

プロジェクト構成

manual-project/
├─ CLAUDE.md                    # Claude Codeへの指示書
├─ docs/
│   └─ session-context.md      # 案件の背景・文脈
├─ screenshots/                 # Premiereから書き出した静止画
├─ drafts/                      # 下書き（構成ガイド）
│   ├─ draft-XXXX.md
│   └─ draft-YYYY.md
├─ src/
│   ├─ content-XXXX.ts        # Geminiが生成したタイムスタンプ
│   └─ content-YYYY.ts
├─ output/                      # 完成したマニュアル
│   ├─ manual-XXXX.md
│   └─ manual-XXXX.pdf
├─ public/
│   └─ video/
│       └─ recording-XXXX.mp4  # 画面録画
└─ .claude/
    └─ commands/
        └─ proofread.md         # 校正用カスタムコマンド

Step 1：session-context.md の作成

Claude Codeは会話の文脈を知らないため、案件の背景を説明するドキュメントが必要です。

# セッション・コンテキスト

## 案件概要
- クライアント: 株式会社〇〇
- サイト: https://example.com
- 目的: 社員専用サイトの操作マニュアル作成（管理者向け）
- 対象読者: PC操作に慣れていない担当者

## アカウント構成
| 種別 | 役割 |
|------|------|
| 管理者 | メンバー管理・記事投稿を行う担当者 |
| 一般ユーザー | 閲覧専用アカウント |

## 作成するマニュアル一覧
| ファイル名 | 内容 |
|-----------|------|
| draft-XXXX.md | ログイン方法 → 記事の閲覧 |
| draft-YYYY.md | 管理者ログイン → 記事の投稿 |

案件固有の情報（クライアント名、サイトURL、アカウント構成など）を記載することで、Claude Codeが適切な説明文を生成できます。

Step 2：画面録画 → 簡易編集

録画

操作手順を画面録画します。

MacなQuickTime Player（標準搭載）
WindowsなOBS Studio（無料）

5分以内に収めるのがポイントです。Geminiの無料枠では長すぎる動画を処理できない場合があります。複雑な操作は複数の動画に分割しましょう。

簡易編集（Premiere Pro）

録画した動画をPremiere Proで開き、不要な部分（待ち時間、誤操作など）を削除します。
適切に編集する必要はありません。ざっくり不要部分をカットするだけでOKです。

Step 3：Premiereから静止画を書き出し

Premiere Proのタイムライン上で、操作の主だったポイントのフレームを静止画として書き出します。

ファイル名の規則：

screenshot-XXXX.00_00_06_25.002.jpg
screenshot-YYYY.00_00_25_48.004.jpg

[操作名].[時_分_秒_フレーム].[連番] の形式にすると、Claude Codeが操作の順序を把握しやすくなります。
日本語が入ると Remotion でエラーが出るので、日本語は削除します。

なぜ静止画が必要か？

次のステップでClaude Codeに下書き（構成ガイド）を作ってもらう際、スクリーンショットを渡すことで「どの画面で何の操作をしているか」を正確に理解してもらえます。

Step 4：Claude Codeで下書き（構成ガイド）の作成

Claude Codeにスクリーンショットを読み込ませて、マニュアルの構成ガイドを作成します。

#新しいセッション開始
claude --enable-auto-mode            # オートモードで起動

## 作成するマニュアル一覧

| ファイル名 | 内容 |
|-----------|------|
| draft-login.md | ログイン方法 → 記事の閲覧 |

スクリーンショットを確認して、ログイン操作の下書き `draft-login.md` を作成してください。

下書きの役割は「Geminiへの入力」です。最終的なマニュアルの文章は content.ts から生成するので、下書きは構成（ステップの順序と概要）だけで十分です。

# ログイン方法・記事の閲覧

## ステップ1：サイトにアクセスする
## ステップ2：ユーザー名とパスワードを入力する
## ステップ3：掲示板の一覧を確認する
## ステップ4：記事を開く

なぜ下書きを先に作るのか？

Geminiに動画を渡していきなりタイムスタンプを生成させると、説明を省略したり、ステップを飛ばしたりすることがあります。下書き（構成ガイド）を一緒に渡すことで、「このステップは省略しないで」と指示できます。

Step 5：Geminiでタイムスタンプ（content.ts）の作成

Gemini（gemini.google.com）に動画と下書きをアップロードし、タイムスタンプデータを生成させます。

Google AI Studioではなく通常のGeminiを使う
最初はGoogle AI Studio（aistudio.google.com）を試しましたが、動画アップロード時に「Token count failed」エラーが発生しました。
通常のGemini（gemini.google.com）の方が動画アップロードの制限が緩いため、こちらを使用します。

プロンプト例

この動画は「ログイン方法・記事の閲覧」の操作手順です。
draft-XXXX.md の構成に沿って、字幕のタイムスタンプデータを作成してください。

## 出力形式
TypeScript の配列として出力してください。Markdown は不要です。

import type { Caption, ManualVideoConfig } from "./types";

export const VIDEO_CONFIG_LOGIN: ManualVideoConfig = {
  fps: 30,
  width: 3840,          // 動画の解像度に合わせる
  height: 2160,
  durationSeconds: 41,  // 動画の長さ（秒）
};

export const CAPTIONS_LOGIN: Caption[] = [
  { id: 1, start: "MM:SS.ff", end: "MM:SS.ff", caption: "字幕テキスト" },
  ...
];

## 制約
- start/end は "MM:SS.ff" 形式（例: "00:05.00", "01:30.15"）
- caption は日本語40文字以内
- 配列のみ出力（説明文不要）
- VIDEO_CONFIG の durationSeconds は動画の実際の長さに合わせる

Geminiの出力をチェックする

Geminiの出力は必ず目視でチェックしてください。

よくある問題：

タイムスタンプのズレ — 数秒ずれていることがある
ステップの省略 — 長い操作の後半を端折る（下書きを渡すことで軽減できる）
用語の誤認 — 画面上のテキストを読み間違える
VIDEO_CONFIG の値 — durationSeconds や解像度が間違っていることがある

VIDEO_CONFIG のテンプレートをプロンプトに含めておくと、後から追加する手間が省けます。

Step 6：Claude Codeで PDFマニュアル（manual.md）の作成

content.ts からマニュアルを生成します。下書き（draft）からではありません。

**Step 6：PDFマニュアル（manual.md）の作成**

- @src/content-XXXX.ts         # タイムスタンプ

content-XXXX.ts のタイムスタンプデータと screenshots/ の画像を使って、
output/manual-XXXX.md を生成してください。

- 各キャプションに対応するスクリーンショットを挿入
- 「〜してください」「〜します」の丁寧語で統一
- PC初心者向けの説明
- ボタン名は 太字 で強調

content.ts を「確定版の構成」として使うことで、字幕（ステップ8）とマニュアルの内容が一致します。

CLAUDE.md の設定

CLAUDE.md に出力形式のルールを書いておくと、毎回指示する必要がなくなります。

# マニュアル自動生成プロジェクト

## 概要
content-*.ts のタイムスタンプデータと screenshots/ のスクリーンショットを使用して、
管理者向け操作マニュアル（Markdown形式）を生成する。

## 画像選択ルール
- 1ステップに対して1枚の画像を使用する
- 「操作前」と「操作後」が伝わる画像を優先する
- 重要なUIパーツ（ボタン・リンク・入力欄）が写っている画像を選ぶ

## 出力形式
- 見出し: ## ステップN：〇〇
- 画像パス: ../screenshots/ からの相対パス
- 強調: <strong>太字</strong> でボタン名・重要な用語を強調
- 注意事項: > ⚠️ 注意：〇〇 の引用ブロック形式

## トーン・文体
- 「〜してください」「〜します」で統一
- 専門用語は使わない
- PC操作に不慣れな担当者でもわかる丁寧な説明

## 注意事項
- 本番パスワードや個人情報はマニュアルに記載しない
- スクリーンショットに写っているパスワード欄は「●●●●●●」と表記する

Step 7：Markdown → PDF 変換

VS Codeの拡張機能「Markdown PDF」を使って、MarkdownファイルをPDFに変換します。

VS Codeで output/manual-XXXX.md を開く
コマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）→「Markdown PDF: Export (pdf)」
同じディレクトリに manual-XXXX.pdf が生成される

校正（任意）

Claude Codeのカスタムコマンドで校正を実行できます。

.claude/commands/proofread.md を用意：

# /proofread コマンド

## 修正すべきもの
1. 明確な誤字・脱字・スペルミス
2. 助詞の誤用（文意が通じない場合のみ）
3. 用語の誤り
4. 画像パスの誤り（存在しないファイル参照）

## 修正してはいけないもの
1. Markdown記法のスタイル
2. 表現上の軽微な問題
3. 読点の位置

実行：

/proofread output/manual-XXXX.md

Step 8：Remotionで字幕オーバーレイの生成（任意）

解説動画に字幕を付けたい場合は、同じ content.ts から Remotion で字幕オーバーレイ（透過動画）を生成できます。

共通型定義（types.ts）

// src/types.ts
export interface Caption {
  id: number;
  start: string;   // "MM:SS.ff"
  end: string;
  caption: string;
}

export interface ManualVideoConfig {
  fps: number;
  width: number;
  height: number;
  durationSeconds: number;
}

字幕コンポーネント（Caption.tsx）

// src/components/Caption.tsx
import { useCurrentFrame, interpolate, Easing } from "remotion";

export const Caption: React.FC<{
  text: string;
  startFrame: number;
  endFrame: number;
}> = ({ text, startFrame, endFrame }) => {
  const frame = useCurrentFrame();

  const opacity = interpolate(
    frame,
    [startFrame, startFrame + 8, endFrame - 8, endFrame],
    [0, 1, 1, 0],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
  );

  const translateY = interpolate(
    frame,
    [startFrame, startFrame + 8],
    [20, 0],
    {
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
      easing: Easing.out(Easing.cubic),
    },
  );

  if (frame < startFrame || frame > endFrame) return null;

  return (
    <div style={{
      position: "absolute",
      bottom: 80,
      left: "50%",
      transform: `translateX(-50%) translateY(${translateY}px)`,
      opacity,
      backgroundColor: "rgba(0, 0, 0, 0.75)",
      color: "#FFFFFF",
      padding: "24px 56px",
      fontFamily: "'Noto Sans JP', sans-serif",
      fontSize: 56,
      fontWeight: 700,
      textAlign: "center",
    }}>
      {text}
    </div>
  );
};

書き出しコマンド

npx remotion render CaptionLogin output/caption-XXXX.mov --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444 --muted

書き出された .mov ファイルを Premiere Pro のタイムラインで元動画の上に配置するだけで、字幕が合成されます。ProRes 4444 は透過をネイティブで認識するため、特別な設定は不要です。

# Premiere Pro タイムライン
├─ V2: caption-XXXX.mov（字幕オーバーレイ）
└─ V1: recording-XXXX.mp4（元動画）

ワークフロー全体のポイント

content.ts を「単一の情報源」にする

このワークフローの核心は、content.ts（タイムスタンプデータ）を中心に据えることです。

draft（構成ガイド）
    ↓ Geminiへの入力
content.ts（確定データ）
    ├─→ manual.md → PDF（ステップ6-7）
    └─→ caption.mov（ステップ8）

draft から直接 manual.md を作ると、Gemini で修正した内容が反映されません。content.ts を経由することで、マニュアルと字幕の内容が自動的に一致します。

下書きの役割を絞る

下書き（draft）は「Geminiへの構成ガイド」に徹します。説明文やスクリーンショットの選定は manual.md 生成時に行えば、重複作業がなくなります。

Geminiへのプロンプトに VIDEO_CONFIG を含める

Gemini にタイムスタンプを生成させるとき、VIDEO_CONFIG のテンプレートを含めておくと、後から手動で追加する手間が省けます。解像度や FPS、動画の長さなどの情報はプロンプト時点で指定しておきましょう。

作成したマニュアルの例

Shopify商品バリエーション設定マニュアル

https://gist.github.com/sarap422/a9c63d7ae8fdb4b2ed4731826d67a2c2

ページ数：9ページ
画像枚数：7枚
作成時間：約15分

Shopify商品ページ画像追加マニュアル

https://gist.github.com/sarap422/bd6fe8c970d02de38a0632cc1a0d59c6

ページ数：10ページ
画像枚数：8枚
作成時間：約15分

まとめ

画面録画からマニュアルを自動生成するワークフローを紹介しました。

content.ts を中心に据えることで、PDFマニュアルと字幕動画の両方を同じデータから生成でき、内容の一貫性を保てます。

一度プロジェクト構成を作っておけば、別の操作マニュアルにもそのまま流用できます。クライアントワークでマニュアル作成に時間を取られている方は、ぜひ試してみてください。