AIエージェントによる管理画面操作マニュアルの自動生成

こんにちは、チャボです！

見つけてくれて、ありがとう！

026の窓口担当をしています！

どのようなことを知りたいですか？

CHALLENGE

課題

EC-CUBEなどのECプラットフォームでは、管理画面の操作マニュアルをクライアントに納品する必要があります。
しかし、従来のマニュアル作成プロセスには多くの課題がありました。

1画面あたりのマニュアル作成に数時間を要し、管理画面全体では数十画面に及ぶため、
プロジェクト後半のリソースを大きく圧迫していました。

APPROACH

Cursor IDEのAIエージェントに「マニュアル作成スキル」を定義し、
Excel設計書の読み取りから最終的な納品用スライド出力までを自動化するワークフローを構築しました。

Step 1 — Excel設計書の構造化読み取り: openpyxlで画面項目定義シートを解析し、表示エリアごとに項目をグルーピング。操作可能な項目に自動でコールアウト番号（①②③…）を割り当て
Step 2 — Playwright MCPによる画面キャプチャ: 管理画面にアクセスし、フルページスクリーンショットを取得。折りたたみパネルの展開やチェックボックス操作による隠しUIの表示も自動実行
Step 3 — コールアウト画像の自動生成: Pythonスクリプト（Pillow）でキャプチャ画像上にコールアウト番号を自動配置。要素座標はPlaywrightのDOM解析で取得
Step 4 — Markdownマニュアルの生成: 設計書の技術的記述を利用者向けの平易な文言に自動変換し、画像付きの操作手順テーブルとしてMarkdownに出力
Step 5 — manusによるスライド生成・納品物化: 生成したMarkdownとコールアウト画像をmanusに入力し、PowerPoint形式のスライドを自動生成。左側にキャプチャ画像、右側に操作手順テーブルという納品用レイアウトに自動で整形

OUTCOME

従来は手作業で数時間かかっていた1画面分のマニュアル作成が、
AIエージェントとの対話形式で大幅に効率化されました。

Cursorエージェントで技術的な処理（設計書解析・キャプチャ取得・画像加工・Markdown生成）を担い、
manusでドキュメントとしての体裁を整える（スライドレイアウト・デザイン調整）という
役割分担型のAI活用により、人間の介在を最小限にしつつ高品質な納品物を実現しました。

さらに、CursorのAIエージェントスキルとして定義したことで、
チームの誰でも同じ品質のマニュアルを生成できる再現可能なプロセスとして定着しました。

スキルファイルにノウハウを集約することで、属人化していたマニュアル作成業務が標準化され、
プロジェクト全体の納品品質の向上にもつながりました。