# AIで手順書を自動生成する仕組み｜画面操作の記録からマニュアルを作る技術解説【FlowLens開発記】｜テクノスフィア

> 「操作するだけで手順書ができる」をどう実装するか。Windowsの画面操作をイベント駆動でキャプチャし、Vision対応LLM（Claude）で解析してスクリーンショット付き手順書を自動生成する、自社製品FlowLensのアーキテクチャを開発チームが解説。キャプチャ方式の比較、プライバシー設計、2段LLMパイプラインのコスト最適化、中間表現JSONまで。

URL: https://technosphere.co.jp/blog/ai-manual-auto-generation

「手順書を作る時間がなくて、結局作られない」「システム更新のたびにマニュアルだけが古くなる」——どの現場でも聞く悩みです。弊社ではこの問題に対して、**普段のPC操作をそのまま記録し、生成AIがスクリーンショット付きの手順書に変換する**という自社製品「FlowLens（フローレンズ）」を開発しています。

 本記事では、その開発の裏側を技術者向けに解説します。画面キャプチャ方式の設計判断、プライバシー保護の実装方針、Vision対応LLMのコスト最適化、そして出力を支える中間表現の設計まで、実際の技術検討の内容をベースにお届けします。

 ** FlowLensが**製品として何を解決するのか**（できること・想定ユースケース・先行モニター募集）は、[FlowLens 製品ページ](https://technosphere.co.jp/flowlens)にまとめています。本記事は実装技術にフォーカスします。

## 全体アーキテクチャ

 FlowLensは大きく3つのコンポーネントで構成されます。

```
[Windows クライアント (常駐エージェント)]
  ├─ 画面キャプチャ（操作イベント駆動 + 周期スクリーンショット）
  ├─ UI イベントフック（クリック / キー入力 / ウィンドウ遷移）
  └─ ローカルバッファ → 解析サーバへ送信
        │
        ▼
[解析サーバ (Docker)]
  ├─ Vision 対応 LLM による画面・操作解析
  ├─ 操作シーケンスの構造化（アプリ / 画面 / アクション）
  ├─ 手順書ジェネレータ（Markdown / docx 出力）
  └─ 最適化アドバイザ（操作パターン分析 → 改善提案）
        │
        ▼
[Web UI]
  ├─ 記録セッション一覧・手順書プレビュー / 編集
  └─ 改善提案レポート
```

 設計上のポイントは2つあります。1つは**クライアントを「記録に徹する軽量エージェント」に絞り、解析をすべてサーバ側に寄せた**こと。ユーザーのPCに負荷をかけず、AIモデルの差し替えや改善をサーバ側だけで完結できます。もう1つは解析サーバを**Dockerコンテナ**として構成したこと。クラウドにも顧客の社内サーバ（オンプレミス）にも同じ構成で展開でき、「画面データを社外に出せない」という要件に最初から備えています。

## 画面キャプチャ方式の設計判断

 「操作を記録する」と一口に言っても、実装方式はいくつかあります。検討した3方式の比較です。
| 方式 | 概要 | 長所 | 短所 |
|  **A. 周期スクリーンショット** |  1〜2秒間隔で画面全体をキャプチャ |  実装が単純、取りこぼしがない |  データ量が膨大、操作との対応付けが弱い、AI解析コスト増 |
|  **B. UIイベントフック** |  クリック・キー入力・ウィンドウ遷移の発生時のみ記録 |  データ量が少ない、「どのボタンを押したか」の意味情報が取れる |  フック実装の難易度、UIA情報が取れないアプリがある |
|  **C. 併用（イベント駆動キャプチャ）** |  イベント発生時にスクリーンショット + UI要素情報を取得し、低頻度の周期キャプチャで補完 |  手順書生成に最適な「操作と画面のペア」が得られる |  実装量は最大 |

 FlowLensは**C. 併用方式**を採用しました。手順書とは本質的に「操作 → 画面変化」の系列なので、**操作イベントを主キーにして画面を従属させる**データ構造が最も適しています。周期キャプチャだけでは「なぜ画面が変わったのか」が失われ、後段のAIに推測を強いることになります。

### Windows APIの選定

 実装に使うWindows API / ライブラリは役割ごとに次の通りです。
- **入力イベントフック**：`SetWindowsHookEx`（WH_MOUSE_LL / WH_KEYBOARD_LL）。PoCではPythonの`pynput`
- **ウィンドウ遷移の検出**：`SetWinEventHook`（EVENT_SYSTEM_FOREGROUND等）
- **UI要素情報**：UI Automation（UIA）。クリック座標から要素のName / ControlType / ウィンドウ階層を逆引き。PoCでは`uiautomation` / `pywinauto`
- **スクリーンショット**：Windows.Graphics.Capture / DXGI Desktop Duplication。PoCでは`mss`。マルチモニタとDPIスケーリング（125%〜200%）への対応が必須
   ポイント：** 検証速度を優先し、PoCはPython（pynput + uiautomation + mss）で構築。製品版クライアントは、UIAとWindows.Graphics.Captureのネイティブサポート、常駐サービス化と配布（MSIX）の容易さから**C#（.NET）を第一候補**にしています。RDPや一部Electron・Java SwingなどUIAが効かないアプリは、周期キャプチャ + Vision LLM解析でフォールバックします。

## プライバシー設計は「後付け」にしない

 画面操作の記録ツールで最初に設計すべきは、実は記録機能ではなく**「記録しない」仕組み**です。FlowLensでは以下を必須要件としてクライアント側に組み込んでいます。
1. **パスワードフィールド検出**：UIAの`IsPassword`プロパティを持つ要素へのフォーカス中は、スクリーンショットとキー入力記録を停止
2. **打鍵内容は保存しない**：既定では「テキストを入力した」というイベントと、入力後の画面上の表示のみを記録
3. **対象アプリのオプトイン**：記録対象を業務アプリのホワイトリストに限定。既定は「記録しない」
4. **送信前マスキング**：解析サーバへ送る前にクライアント側で機密領域をマスク。将来はOCRベースのPII検出を予定

 特に2番目は重要です。手順書に必要なのは「顧客コードを*入力した*」という事実と入力後の画面であって、打鍵の生ログではありません。**要件を分解すると「記録しなくていいもの」が明確になる**——監視ツールと業務改善ツールを分ける、設計上の分水嶺だと考えています。

## Vision LLMパイプラインとコスト最適化

 記録したスクリーンショットと操作イベントの解析には、画像を理解できるVision対応LLMとして**Claude API**を採用しました。日本語UIを含むスクリーンショットの理解精度と、高解像度画像で座標が実ピクセルと1:1対応する点（UI要素の位置特定に有利）が決め手です。

 ただし1回の記録セッションで画像は数十〜数百枚になるため、全部を高品質モデルに投げるとコストが成立しません。そこで**2段構成のパイプライン**にしています。

```
[大量スクリーンショット]
   │  ① 小型モデル（Claude Haiku 4.5）:
   │     画面の分類・重複除去・無意味フレームの間引き（安価・高速）
   ▼
[キーフレーム + 操作イベント]
   │  ② 高品質モデル（Claude Opus 4.8）:
   │     操作シーケンスの構造化・手順書生成・改善提案
   ▼
[手順書 / 改善レポート]
```

 さらに2つのAPI機能を前提に設計しています。
- **Batch API**：手順書生成はリアルタイム性が不要なため、非同期バッチ処理（料金50%オフ）を基本とする
- **Prompt Caching**：手順書フォーマット定義などのシステムプロンプトをキャッシュし、繰り返し入力分のコストを大幅に圧縮

 ** コスト試算（1セッション＝100操作・キーフレーム100枚の場合）
- ① 前段フィルタ（小型モデル・Batch適用）：約 **$0.10**
- ② 手順書生成（高品質モデル・Batch適用）：約 **$0.75**
- → 合計**1セッションあたり$1前後（150円程度）**。製品原価として成立する水準（2026年6月時点の料金で試算）

 なお、解析層はLLMプロバイダを差し替え可能な抽象化を入れています。データを一切外に出せない顧客向けには、オンプレGPUでのローカルVLM（オープンモデル）への切り替えを将来の選択肢として確保しています。まずはクラウドAPIで品質を確立するのが現在のフェーズです。

## 中間表現JSON——出力形式を増やすための土台

 FlowLensの内部では、キャプチャした操作も生成した手順も、すべて**JSONの中間表現**を正規形として扱います。クライアントが送る操作イベントはこんな形です。

```
{
  "session_id": "uuid",
  "seq": 42,
  "timestamp": "2026-07-17T10:23:45+09:00",
  "event": {
    "type": "click",              // click | input | key | window_change | scroll
    "app": "EXCEL.EXE",
    "window_title": "見積書.xlsx - Excel",
    "element": {                  // UIAで取得（取れない場合はnull → Vision LLMが補完）
      "name": "保存",
      "control_type": "Button",
      "path": ["リボン", "ホーム", "保存"]
    },
    "position": { "x": 120, "y": 48, "monitor": 0 }
  },
  "screenshot": "042.png"        // イベント直前のフレーム
}
```

 解析サーバが出力する「手順ステップ」も同様に正規形を定義しています。

```
{
  "step": 3,
  "title": "見積書を保存する",
  "description": "リボンの [保存] ボタンをクリックします。",
  "app": "Excel",
  "screenshot": {
    "image": "042.png",
    "annotation": { "type": "rect", "x": 100, "y": 30, "w": 60, "h": 40 }
  },
  "source_events": [41, 42],
  "notes": ["Ctrl+S で代替可能"]   // 最適化提案
}
```

 手順書はこの正規形からレンダリングして生成します。この分離のおかげで、**出力形式の追加が「テンプレートを1枚増やす」だけ**で済みます。
| 優先 | 出力形式 | 生成方法 |
| 1 | Markdown + 画像 | テンプレートレンダリング。Git管理・差分レビューが可能 |
| 2 | 社内Wiki（Growi） | REST APIで直接投稿。記録→Wiki反映まで自動化 |
| 3 | Word（docx） | pandoc変換を第一候補。体裁要件が厳しい場合はpython-docxでテンプレート化 |
| 4 | PDF | Markdown → HTML → headless Chrome印刷 |

 スクリーンショットへの注釈（クリック位置の枠や番号バッジ）はPillowで焼き込みますが、**注釈情報そのものは正規形に保持**します。画像を作り直さずに再レンダリングでき、マスキング領域も同じ仕組みで出力時に再適用できます。

## 手順書の先へ——操作の最適化提案

 中間表現には、もう1つの狙いがあります。操作イベントが構造化データとして蓄積されるため、**操作パターンの分析がそのまま業務改善の材料になる**のです。
- マウス操作の系列から、ショートカットや標準機能で置き換えられる操作を検出（例：メニュー3クリック → Ctrl+S）
- 同一セッション内・セッション間の繰り返しパターンから、無意味な往復や遠回りの操作列を発見
- 毎日発生する定型作業を、自動化（RPA化・スクリプト化）の候補としてレポート

 「手順書を作る」がゴールではなく、**記録された操作ログから手順そのものを良くしていく**——ここがFlowLensで一番作りたい部分です。

## よくある質問（FAQ）

### キー入力（打鍵内容）まで記録されるのですか？

いいえ。既定で打鍵内容は保存せず、「テキストを入力した」というイベントと入力後の画面表示のみを記録します。さらにUIAの`IsPassword`プロパティを監視し、パスワード欄へのフォーカス中は記録自体を停止します。

### UI要素の情報が取れないアプリでも手順書を作れますか？

リモートデスクトップや一部の描画系アプリなどUIAが効かない画面では、低頻度の周期スクリーンショットで補完し、Vision LLMが画像から操作コンテキストを推定するフォールバック設計にしています。

### AIの解析コストはどのくらいかかりますか？

前段フィルタ＋高品質モデルの2段構成にBatch APIとPrompt Cachingを組み合わせ、100操作程度のセッション1回あたり**$1前後（150円程度）**の試算です（2026年6月時点の料金）。

### 画面データを社外に出せない環境でも使えますか？

解析サーバはDockerコンテナとして社内（オンプレミス）にも構築できます。LLM層は差し替え可能な抽象化を入れており、完全閉域向けにローカルVLMへの切り替えも視野に入れています。

## まとめと現在地

 ** この記事のまとめ
- 手順書の自動生成は「イベント駆動キャプチャ + 周期補完」で、操作と画面のペアを主キーにするのが本質
- プライバシーは後付けせず、パスワード検出・打鍵非保存・オプトインをクライアント設計に組み込む
- Vision LLMは小型モデル前段＋高品質モデル本解析の2段構成。Batch + Cachingで1セッション$1前後に
- JSON中間表現を正規形にすれば、Markdown / Wiki / docx / PDFへの出力追加はテンプレート1枚で済む

 FlowLensは現在、キャプチャPoCと解析エンジンのコア開発を進めている段階です。実際の業務での検証にご協力いただける**先行モニター企業さまを募集**しています。この記事のアーキテクチャに興味を持たれた方も、「うちの手順書問題を何とかしたい」という方も、ぜひ製品ページをご覧ください。    ／この記事で解説した自社プロダクト＼

### FlowLens（フローレンズ）— 操作を記録するだけで、AIが手順書をつくる

いつも通りPCを操作するだけで、スクリーンショット付きの手順書と操作の改善提案が手に入ります。現在PoC開発中。一緒に育ててくださる先行モニター企業さまを数社限定で募集しています。  [FlowLens 製品ページを見る](https://technosphere.co.jp/flowlens) [先行モニターについて相談する](https://technosphere.co.jp/contact)      [# FlowLens](https://technosphere.co.jp/blog/) [# 手順書自動生成](https://technosphere.co.jp/blog/) [# Vision LLM](https://technosphere.co.jp/blog/) [# Claude API](https://technosphere.co.jp/blog/) [# 業務改善](https://technosphere.co.jp/blog/)   ** この記事をシェア [X](https://twitter.com/intent/tweet?url=https://technosphere.co.jp/blog/ai-manual-auto-generation&text=AIで手順書を自動生成する仕組み｜画面操作の記録からマニュアルを作る技術解説&via=technosphere_co) [Facebook](https://www.facebook.com/sharer/sharer.php?u=https://technosphere.co.jp/blog/ai-manual-auto-generation) [LINE](https://social-plugins.line.me/lineit/share?url=https://technosphere.co.jp/blog/ai-manual-auto-generation)