クライアント向けのマニュアル作成、時間がかかりすぎていませんか？
「操作手順を説明するマニュアルを作らないといけないけど、スクリーンショットを撮って、トリミングして、説明文を書いて...」という作業めんどくさいですよね。
この記事では、操作動画を録画して → Google AI Studio（Gemini）、Claude Code を組み合わせた「動画ベースのマニュアル自動生成」のワークフローを解説します。
このワークフローは以下のようなケースで特に有効です。
- クライアント向けの操作マニュアル
- 社内向けのシステム操作手順書
- SaaSツールの使い方ガイド
- Webアプリケーションのヘルプドキュメント
ワークフローの全体像
今回構築したワークフローは以下の4ステップです。
| ステップ | ツール | 作業内容 |
|---|---|---|
| 1 | QuickTime / OBS | 操作を画面録画 |
| 2 | Gemini（Google AI Studio） | タイムスタンプ抽出 |
| 3 | Claude Code | マニュアル生成 |
約15〜20分で、10ページ程度のマニュアルが完成します。
ステップ1：画面録画
使用ツール
- MacなQuickTime Player（標準搭載）
- WindowsなOBS Studio（無料）
5分以内に収める
Geminiの無料枠では、長すぎる動画は処理できない場合があります。複雑な操作は複数の動画に分割しましょう。
ステップ2：Geminiでタイムスタンプ抽出
Google AI Studioではなく通常のGeminiを使う
最初はGoogle AI Studio（aistudio.google.com）を試しましたが、動画アップロード時に「Token count failed」エラーが発生しました。
通常のGemini（gemini.google.com）の方が動画アップロードの制限が緩いため、こちらを使用します。
プロンプトの例
Geminiに動画をアップロードした後、以下のようなプロンプトを入力します。
この動画はShopifyの商品バリエーション設定の操作手順です。
以下の形式で、操作手順とスクリーンショット用のタイムスタンプを抽出してください。
## 出力形式
### ステップN: [操作の概要]
- タイムスタンプ: MM:SS
- 操作内容: [具体的な操作の説明]
- 画面要素: [クリックするボタンや入力するフィールドの名前]
- トリミング指示: [画面全体 / 中央のダイアログ / 左サイドバー など]
Geminiの出力例
Geminiは以下のような形式で出力してくれます。
# タイムスタンプ情報
このファイルには、Geminiから抽出した操作手順とタイムスタンプを記録します。
## 動画情報
- ファイル名: 画面収録 2026-01-21 13.52.16.mp4
- 長さ: 約4分
- 内容: Shopify商品バリエーションの設定手順（カートリッジタイプ：標準タイプ/高除去タイプ）
---
## 操作手順とタイムスタンプ
### ステップ1: 商品編集画面を開く
- タイムスタンプ: 00:05
- 操作内容: Shopify管理画面にログインし、左メニューから「商品管理」をクリック。バリエーションを追加したい商品を選択して編集画面を開く。
- 画面要素: 左メニュー「商品管理」、商品一覧
- トリミング指示: 左サイドバーと商品一覧
### ステップ2: バリエーションセクションを見つける
- タイムスタンプ: 00:15
- 操作内容: 商品編集画面を下にスクロールし、「バリエーション」セクションを表示。「⊕ サイズや色などのオプションを追加」をクリック。
- 画面要素: 「バリエーション」セクション、「⊕ サイズや色などのオプションを追加」リンク
- トリミング指示: 中央のバリエーションセクション
### ステップ3: オプションの種類を選択
- タイムスタンプ: 00:25
- 操作内容: オプション選択メニューが表示される。プリセット（色、サイズなど）ではなく「カスタムオプションを作成」を選択。
- 画面要素: オプション選択メニュー、「カスタムオプションを作成」
- トリミング指示: 中央のダイアログ
### ステップ4: オプション名と値を入力
- タイムスタンプ: 00:45
- 操作内容: オプション名に「カートリッジタイプ」と入力。オプション値として「標準タイプ」「高除去タイプ」を入力。
- 画面要素: オプション名入力フィールド、オプション値入力フィールド
- トリミング指示: 中央のフォーム
### ステップ5: バリエーションごとの価格を設定
- タイムスタンプ: 01:30
- 操作内容: 生成されたバリエーション一覧で、各バリエーションの価格と在庫数を設定。標準タイプ: ¥2,680、高除去タイプ: ¥2,980。
- 画面要素: バリエーション一覧テーブル、価格入力フィールド、在庫入力フィールド
- トリミング指示: 中央のバリエーション一覧
### ステップ6: メディアセクションに画像をアップロード
- タイムスタンプ: 02:15
- 操作内容: 商品編集画面上部の「メディア」セクションに、各バリエーション用の画像をアップロード。
- 画面要素: 「メディア」セクション、画像アップロードエリア
- トリミング指示: 上部のメディアセクション
### ステップ7: バリエーションに画像を紐付け
- タイムスタンプ: 02:45
- 操作内容: バリエーション一覧で、各行の画像アイコンをクリックし、該当する画像を選択して紐付ける。
- 画面要素: バリエーション行の画像アイコン、画像選択ダイアログ
- トリミング指示: 中央のバリエーション一覧と画像選択ダイアログ
### ステップ8: 保存
- タイムスタンプ: 03:15
- 操作内容: 設定が完了したら、右上の「保存」ボタンをクリックして保存。
- 画面要素: 右上の「保存」ボタン
- トリミング指示: 右上のボタンエリア
### ステップ9: フロントエンドで動作確認
- タイムスタンプ: 03:30
- 操作内容: 実際の商品ページでバリエーションが正しく表示されているか確認。オプション選択ボタン、価格変更、画像切り替えを確認。
- 画面要素: フロントエンドの商品ページ、オプション選択ボタン
- トリミング指示: 画面全体（フロントエンド）
---
## 注意事項
- タイムスタンプは推測値です。実際の動画と照らし合わせて調整してください。
- ffmpegで抽出後、画像が操作と一致しない場合は前後数秒で再抽出してください。
## 調整用コマンド例
```bash
# タイムスタンプを微調整したい場合
ffmpeg -i video/画面収録\ 2026-01-21\ 13.52.16.mp4 -ss 00:45 -vframes 1 screenshot/raw/step-04.png
# 前後0.5秒で複数枚抽出
ffmpeg -i video/動画.mp4 -ss 00:44 -vframes 1 screenshot/raw/step-04a.png
ffmpeg -i video/動画.mp4 -ss 00:45 -vframes 1 screenshot/raw/step-04b.png
ffmpeg -i video/動画.mp4 -ss 00:46 -vframes 1 screenshot/raw/step-04c.png
```
注意：Geminiの出力は必ず確認する
Geminiは優秀ですが、たまに勘違いします。
私の場合、「カートリッジタイプ（標準タイプ / 高除去タイプ）」で設定したバリエーションを、Geminiは「サイズ（S / M / L）」と誤認識しました。
Geminiの出力は必ず目視でチェックし、必要に応じて修正してください。
ステップ3：Claude Codeでマニュアル生成
最後に、Claude Codeを使ってマニュアルを自動生成します。
プロジェクト構成
以下のようなフォルダ構成を用意します。
manual-video/
├─ CLAUDE.md # Claude Codeへの指示
├─ video/ # 録画した動画
├─ screenshot/ # スクリーンショット/Premiereから書き出した静止画
├─ docs/
│ ├─ timestamps.md # Geminiの出力を貼り付け
│ └─ session-context.md # プロジェクトの背景情報
└─ output/ # 生成されたマニュアル
│ └─ cropped/ # トリミング後の画像
CLAUDE.mdの内容
CLAUDE.mdには、Claude Codeへの指示を記述します。
# マニュアル生成プロジェクト
## タスク
docs/timestamps.md の情報を元に、screenshot/ の画像を使って
Markdown形式のマニュアルを生成する。
## 処理フロー
1. timestamps.md を読み込む
2. 各ステップの画像をトリミング指示に従って処理
3. 初心者向けのマニュアルを生成
4. output/ に保存
## トリミング指示の解釈
- 「画面全体」→ トリミングなし
- 「中央のダイアログ」→ ダイアログ部分のみ切り出し
- 「左サイドバー」→ 左40%を切り出し
実行コマンド
Claude Codeで以下のように指示します。
動画からマニュアルを生成して
Claude Codeは timestamps.md を読み込み、画像のトリミング、マニュアル本文の生成を自動で行います。
トリミングの自動化
Claude Codeは画像を視覚的に分析し、トリミング指示を解釈してくれます。
「中央のダイアログ」という指示に対して、実際にダイアログがどの位置にあるかを画像から判断し、適切な範囲で切り出します。
ただし、判断が難しい場合もあるため、以下の注記を timestamps.md に追加しておくと安心です。
## 注意事項
- タイムスタンプは推測値です。実際の動画と照らし合わせて調整してください。
- ffmpegで抽出後、画像が操作と一致しない場合は前後数秒で再抽出してください。
この注記があることで、Claude Codeは「完璧である必要はない」と理解し、柔軟に対応してくれます。
作成したマニュアルの例
Shopify商品バリエーション設定マニュアル
https://gist.github.com/sarap422/a9c63d7ae8fdb4b2ed4731826d67a2c2- ページ数：9ページ
- 画像枚数：7枚
- 作成時間：約15分
内容には以下が含まれています。
- ステップバイステップの手順
- 各ステップに対応したスクリーンショット
- 「ポイント」セクションでの補足説明
- よくある質問（FAQ）
- 完成イメージの提示
Shopify商品ページ画像追加マニュアル
https://gist.github.com/sarap422/bd6fe8c970d02de38a0632cc1a0d59c6- ページ数：10ページ
- 画像枚数：8枚
- 作成時間：約15分
「テンプレートとは何か」という前提知識の説明から、セクションのコピー＆ペーストなどの便利技まで網羅しています。
まとめ
動画からマニュアルを自動生成するワークフローを紹介しました。
このワークフローを使えば、15〜20分で10ページ程度のマニュアルが完成します。
クライアントワークでマニュアル作成に時間を取られている方は、ぜひ試してみてください。
関連記事
Claude Codeでスクリーンショットからマニュアルを自動生成する方法
VS CodeでMarkdown記法をPDFに変換・整形する方法
