業務システムの操作マニュアル、毎回スクショを撮って、赤枠つけて、手順を書いて……正直しんどくないですか？
今回は、Claude Codeのスキル機能を使って動画マニュアルを自動生成する仕組みを作ったので、その内容を紹介します。Playwrightでブラウザ操作を自動化し、録画しながらテロップまで入れてくれる。一度スキルを作れば、あとは /manual-recorder と打つだけです。
完成イメージ
まず、実際に生成されたマニュアル動画を見てください。
これは社内の業務システムに、Claude Legal Pluginを使ったAIリーガルチェック機能を追加した画面です。契約書をアップロードするとAIが自動でリスク分析し、RED / ORANGE / GREEN でフラグを立ててくれます。
フォーム入力 → 依頼送信
契約理由や期限を選択して、契約書PDFをアップロード。「依頼を送信」をクリックすると、バックグラウンドでAI分析が始まります。
詳細画面 → AI分析結果の確認
一覧から依頼をクリックすると詳細画面へ。AI分析の結果として**総合リスクスコア（17/25 = RED）**が表示され、各条項ごとにRED・ORANGE・GREENの評価が並びます。
コメント → 承認
分析結果を確認したら、コメントを入力して送信。最終的に承認ステータスに変更されます。
ポイントは、画面下部に出ている黒帯のテロップです。「新規依頼」をクリック、「コメントを入力」、「法務チェック デモ完了」——今どの操作をしているのかが、動画内にリアルタイムで表示されています。これもすべて自動です。
使った部品は3つだけ
このスキルを作るのに、自分でコードをゴリゴリ書いたわけではありません。やったのは3つの「部品」をClaude Codeに渡して、「これを組み合わせてマニュアル自動生成スキルを作って」と相談しただけです。
部品1: Playwright MCP — ブラウザ操作と録画
Playwright MCPは、Claude Codeからブラウザを自動操作できるMCPサーバーです。ページを開く、フォームに入力する、ボタンをクリックする——こういった操作をClaude Codeが代わりにやってくれます。
さらにPlaywrightにはrecordVideoという機能があり、操作している様子をそのまま動画ファイルとして保存できます。別途キャプチャソフトを用意する必要はありません。
部品2: Remotion Best Practices スキル — 動画へのテキスト挿入
Remotion Best Practices は、動画にテキストアニメーションやオーバーレイを入れるためのナレッジが詰まったスキルです。
操作を録画するだけだと「今なにをしているのか」が見ている人に伝わりません。このスキルのテキスト表示の知識を使って、操作中の画面にリアルタイムでテロップを表示しています。後から動画編集ソフトでテロップを入れる手間がゼロ。
部品3: ffmpeg — 動画の変換と結合
録画された動画の.webm → .mp4変換や、シナリオごとに分割録画した動画の結合、GIFアニメへの変換を担当します。これもClaude Codeが勝手にコマンドを組み立ててくれるので、ffmpegのオプションを覚える必要はありません。
Claudeに相談しただけ
この3つの部品を揃えた状態で、Claude Codeにこう伝えました:
「Webアプリの操作を自動で録画して、動画マニュアルを作るスキルを作ってほしい。Playwright MCPでブラウザを操作して、recordVideoで録画して、操作中に今なにをしているかテロップを画面に表示したい」
これだけです。 Playwrightの設定ファイル、テロップの表示ロジック、ffmpegでの変換コマンド——全部Claudeが書いてくれました。自分でAPIドキュメントを読む必要はありませんでした。
デモ: 法務チェック機能のマニュアルを自動生成
今回マニュアル生成の題材にしたのは、AIリーガルチェック機能です。
Claudeが公開しているLegal Plugin（/review-contractコマンド）を参考に、業務システムに法務チェック機能を組み込みました。契約書PDFをアップロードすると、AIが条項ごとにリスク分析して、GREEN / ORANGE / RED の3段階でフラグを立てます。
操作フロー
| ステップ | 画面 | 操作内容 |
|---|---|---|
| 1 | ログイン | メールアドレスとパスワードでログイン |
| 2 | 一覧画面 | 法務チェック依頼の一覧を確認 |
| 3 | 依頼フォーム | 会社名・契約理由・期限を入力し、契約書PDFをアップロード |
| 4 | 詳細画面 | AI分析の進行状況を確認 |
| 5 | 分析結果 | リスクスコアと条項別評価を確認 |
| 6 | 承認 | コメントを入力し、承認ステータスに変更 |
この6ステップの操作を /manual-recorder に渡すだけで、テロップ付きの動画マニュアルが自動生成されます。
使うときも日本語で話すだけ
作ったスキルを使うのも同じ。Claude Codeで /manual-recorder と打って、日本語で会話するだけです。
/manual-recorder
→ 法務チェック機能の操作マニュアルを作りたい
→ 対象はhttp://localhost:3000
→ ログインしてから、新規依頼を作って、AI分析結果を確認して、承認するまでの流れ
これだけ伝えれば、あとはスキルが勝手にやってくれます:
- シナリオを組み立てる
- Playwrightでブラウザを操作する
- 操作中の画面にテロップを表示する
- その様子を録画する
- MP4やGIFに変換して出力する
画面が更新されたら再実行するだけ。最新版のマニュアルがすぐ手に入ります。
まとめ
今回は、Claude Codeで動画マニュアルの自動生成スキルを作った話を紹介しました。
やったことはシンプルです:
- Playwright MCP（ブラウザ操作 + 録画）
- Remotion Best Practices スキル（動画へのテキスト挿入）
- ffmpeg（動画の変換・結合）
この3つをClaude Codeに渡して、「これでマニュアル自動生成するスキル作って」と相談した。それだけです。
PlaywrightのAPIもRemotionの使い方もffmpegのオプションも、自分では調べていません。「こういうことがやりたい」と日本語で伝えたら、Claudeが全部やってくれた。
Claude Codeのスキルは「部品を組み合わせて、面倒な作業を丸投げする仕組み」です。マニュアル作成に限らず、自分の業務で「毎回同じことやってるな」と感じたら、まずClaudeに相談してみてください。思ったより簡単に自動化できるかもしれません。
関連記事
- Claude Codeのskills機能でブログ執筆を自動化してみた — skills機能の基本
- Claude Codeで自社ブランドの提案書スキルを作った話 — 公式スキルのカスタマイズ例