🐶 らぼまるの速報チェック！
「Webサービスのアップデートのたびにマニュアルのスクリーンショットを撮り直したり、説明文を書き直したりするのって本当に大変ですよね…！なんとPlaywrightでブラウザ操作を自動化し、LLMにキャプチャとDOM構造を渡すだけで、常に最新のユーザーガイドを全自動生成できる仕組みが実現しました！もうドキュメント負債に悩まされる必要はありません🐶⚡」
- 🚀 ツールの特徴: 実践Tips / 開発・運用自動化の超強力アプローチ
- 💻 動作環境・推奨スペック: Node.js環境 (ローカルPC/CI・CDパイプライン) + LLM API (OpenAI GPT-4oなど)
- 🎯 こんな人におすすめ: ドキュメント更新の手間を減らしたいエンジニア / SaaS運用担当者 / 開発チーム
- ✨ ここがスゴい！（導入メリット）: 画面キャプチャ撮影とテキスト執筆作業を100%自動化し、仕様変更時の修正コストを9割削減！
1. 【結論】暮らしや仕事はどう変わる？（Before / After）
WebサービスやSaaSの開発現場では、機能追加やUI変更が日常的に行われます。しかし、マニュアルやチュートリアルの更新は後回しになりがちで、「画面のボタン配置が旧デザインのまま」「新しい機能の説明が存在しない」といった「ドキュメント負債」が蓄積してしまいます。
-
Before（従来の苦労）
- アプリのUIが変わるたびに、担当者が手作業でブラウザを開き、1画面ずつスクショを撮影。
- 画像編集ソフトで矢印や注釈を追加し、Wikiやマニュアル作成ツールにペタペタ貼り付け。
- 多言語対応がある場合は、言語ごとに上記作業を何度も繰り返し、数日間の工数が消えていく。
-
After（本手法導入後）
- E2Eテストツール「Playwright」が自動で画面遷移と高精細スクショ、DOM構造（HTML情報）を取得。
- 取得データを視覚・文脈理解が得意な「LLM（GPT-4o等）」に投入し、操作手順の解説文を自動生成。
- CI/CDパイプライン（GitHub Actionsなど）に組み込めば、コードをデプロイするたびにユーザーマニュアルが自動更新！
2. 【動作環境】自分のPCで動く？必要スペックと導入難易度
本ソリューションはローカルの開発環境やクラウドCI環境で簡単に構築可能です。
- 実行環境: Node.js環境（Playwrightが動作する環境）
- 推奨スペック: 普通のノートPC（Core i5 / M1 Mac、メモリ8GB以上）で十分動作。ブラウザはヘッドレスで高速に動作します。
- 外部API: マルチモーダル対応LLM（OpenAI API GPT-4o, Anthropic Claude 3.5 Sonnetなど）
- 導入難易度: 中級者向け（Node.jsおよびPlaywrightの基本的なスクリプト記述と、API連携の知識が必要）
3. 【定量比較】既存ツール・従来手法との違い
従来の「完全手作業」や「従来のスクショ自動撮影ツール」と比較すると、本手法の圧倒的なアドバンテージが際立ちます。
| 比較項目 | 従来の手作業マニュアル作成 | 従来のスクショ自動化ツール | Playwright + LLM 自動生成（本手法） |
|---|---|---|---|
| 作業時間 / コスト | 1ガイドあたり数時間〜数日 | スクショのみ自動（テキストは手動） | わずか数分でスクショ＋説明文が完成 |
| ドキュメントの鮮度 | 陳腐化しやすく遅れがち | 画像のみ更新、説明とズレが生じる | コード更新と同時に常に最新化 |
| DOM/文脈の理解力 | なし（人間が判断） | なし | 高（DOM属性やコンテキストをLLMが解析） |
| 多言語対応 | 各言語ごとに再撮影・再翻訳 | 撮影のみ各言語対応が必要 | LLMが自然な多言語解説文を一括生成 |
| 実務・時短インパクト | 非常に低い（負担大） | 中程度 | 圧倒的（ドキュメント作成コスト9割削減） |
4. 【裏技・超効率化レシピ】差がつく実践テクニック
Playwrightでキャプチャと同時にDOM情報を収集し、LLMに渡す構造化プロンプトの設計が成功の鍵です。
① Playwrightでのキャプチャ＆情報抽出コード例
import { test } from '@playwright/test';
import * as fs from 'fs';
test('マニュアル用データ自動収集シナリオ', async ({ page }) => {
// ログインページへ移動
await page.goto('https://example.com/login');
// スクリーンショット撮影
await page.screenshot({ path: './shots/step1_login.png' });
// 視覚情報補強用のDOMコンテキスト取得
const pageContext = await page.evaluate(() => {
const buttons = Array.from(document.querySelectorAll('button')).map(b => b.innerText);
return { title: document.title, buttons };
});
fs.writeFileSync('./shots/step1_context.json', JSON.stringify(pageContext));
});
② LLM（GPT-4o等）へ渡す視覚＋文脈プロンプト例
スクリーンショット画像とともに以下のプロンプトを投げることで、正確でわかりやすい手順書が吐き出されます。
【指示】
添付されたWeb画面のスクリーンショットと、以下のDOM構造データを元に、エンドユーザー向けの親切な操作マニュアルテキスト（Markdown形式）を作成してください。
【コンテキスト情報】
- ページタイトル: ログイン画面
- 画面上の主要要素: メールアドレス入力欄, パスワード入力欄, 「ログイン」ボタン
【出力フォーマット】
### ステップ1: ログイン画面へのアクセス
1. 指定のURLにアクセスします。
2. **メールアドレス**と**パスワード**をそれぞれのフォームに入力してください。
3. 青色の『ログイン』ボタンをクリックしてダッシュボードに遷移します。
5. 【注意点】使うときの落とし穴・向いていないケース
- ダイナミックな動的コンテンツの揺らぎ: 毎回データが変わる動的グラフやランダム要素があるページでは、LLMの出力表現がブレる可能性があります。
data-testid等で固定化する工夫が必要です。 - LLM APIのコストとトークン制限: 大量の高解像度画像を頻繁にLLM APIに送信するとコストがかさむ場合があります。変更差分があるステップのみをLLMに投げるトリガー処理を入れるとコスト削減になります。
- 極めて複雑なエンタープライズUI: 複雑すぎるDOM構造をそのまま全パースして投入するとトークンオーバーや認識精度の低下に繋がるため、必要な要素（フォーム、ボタン、主要文言）のみをキュレーションして渡す設計が必要です。
6. まとめ・らぼまるの総括アドバイス
「コードは更新したのに、ドキュメントが古くてユーザーから問い合わせが殺到する…」というエンジニア・開発チーム共通の悩みを、Playwright × LLMのタッグは見事に解決してくれます！ まずはCI/CDに組み込む前に、主要なログインフローやコア機能の1画面から自動生成化を試してみてください。驚くほどスムーズに最新マニュアルが生成され、チームの「ドキュメント負債」が一気に解消されるのを実感できますよ！🐶✨
