日頃からお世話になっている社内のUさん(@haru-qiita)にAI活用術を教えていただいたので、記事にしました！
はじめに
操作マニュアルでは、文章だけで説明するよりも、実際の画面に赤枠や番号を付けた画像がある方が伝わりやすくなります。
今回はCodexへ1つのプロンプトで対象ページと完成条件を伝え、Chromeの操作、スクリーンショット取得、赤枠と番号の追加、画像の配置まで自動で作成してもらいました。
この記事では、そのときに行った設定と、実際にCodexへ出した指示、完成した手順ページを紹介します。業務内容や固有名詞は公開できないため、完成例の文字はぼかしています。
想定するユースケース
この方法は、Web画面の「どこを、どの順番で操作するか」を画像で伝えたい場面に利用できます。特に、次の2つの用途と相性がよいです。
マニュアル・手順書の操作画像
社内向けマニュアル、利用者向けガイド、管理画面の設定手順などに掲載する画像を作成できます。
- 操作するボタンや入力欄を赤枠で示す
- 操作順に丸数字を付ける
- 画像と説明文を対応させる
- 複数画面にまたがる操作を順番に並べる
テストで見つかった不具合の再現手順画像
Webアプリのテスト中に見つかった不具合について、発生までの操作と問題箇所を画像で残せます。
- 不具合が起きるまでの操作を順番に撮影する
- 入力値やクリック箇所を赤枠で示す
- 実際の表示崩れやエラー箇所を強調する
- 開発者が同じ操作を再現できる資料として添付する
動画や長い文章だけで報告するよりも、操作順と不具合箇所を短時間で把握しやすくなります。
この記事で行うことは次のとおりです。
- macOSでComputer Useの権限を設定する
- Chromeで撮影対象のページを開く
- Codexへ撮影対象と完成条件を伝える
- Chrome操作から画像加工までCodexへ任せる
- 自動生成された手順ページを確認する
- 公開前に機密情報を確認する
※本記事の手順画像もAIで作成したものを載せています。
1. Computer Useを使えるようにする
CodexにChromeを操作させるには、macOS側でComputer Use用アプリへ権限を付与します。
アクセシビリティを許可する
- macOSの「システム設定」を開く
- ①「プライバシーとセキュリティ」を選び、「アクセシビリティ」を開く
- ②
Codex Computer Use.appをオンにする
① 左側の「プライバシーとセキュリティ」から設定画面を開きます。② Codex Computer Use.app のスイッチをオンにします。
この設定により、クリック、キー入力、スクロールなどの操作が可能になります。
画面収録を許可する
- ①「プライバシーとセキュリティ」へ戻り、「画面収録とシステムオーディオ録音」を開く
- ②
Codex Computer Use.appをオンにする
① 左側の「プライバシーとセキュリティ」を開きます。② 画面収録を許可するアプリの一覧で Codex Computer Use.app をオンにします。
この設定により、Codexが画面の状態を読み取り、スクリーンショットを取得できるようになります。
設定後に操作できない場合は、Codexを終了して起動し直します。
2. Chromeを準備する
撮影対象のWebページへChromeでログインしておきます。
次の情報を整理しておくと、Codexへ指示しやすくなります。が、ざっくりとした指示でもいい感じに作ってくれます。
- 撮影対象のURL
- どの画面まで移動するか
- どのボタンや入力欄を強調するか
- 何枚の画像に分けるか
- 画像に写してはいけない情報
ログイン、パスワード入力、多要素認証は、人が完了させてからCodexへ引き継ぐとスムーズです。認証情報をプロンプトへ直接書かないようにします。
3. 1つのプロンプトで手順画像を作る
次のように、対象URL、操作内容、必要な画像、注釈方法をまとめて指定します。
Chromeで次のWebページを開き、操作手順のスクリーンショットを作成してください。
対象ページ：
https://example.com/page-1
撮影する手順：
1. サイドメニューから「設定」を開く
2. 「メンバー管理」を選ぶ
3. 「メンバーを追加」ボタンが見える状態にする
画像の条件：
- 各操作が分かるように画面を分ける
- 操作箇所を赤枠で囲む
- 操作順に丸数字を付ける
- 個人名、メールアドレス、通知、会話内容は隠す
- PNG形式で保存する
不具合の再現手順を作る場合は、次のように指示できます。
Chromeで次のWebページを開き、不具合の再現手順画像を作成してください。
対象ページ：
https://example.com/page-1
再現手順：
1. 「新規作成」を選ぶ
2. 必須項目を入力する
3. 「保存」を押す
4. 表示されたエラーを確認する
画像の条件：
- 各操作箇所を赤枠で囲む
- 操作順に丸数字を付ける
- 最後の画像では不具合が発生している場所を強調する
- 入力した個人情報や認証情報は隠す
- 開発者が同じ操作を再現できる説明を付ける
4. 指示後はCodexが自動で作業する
プロンプトを送ると、Codexが画面の状態を確認し、指定したメニューやボタンを順番に操作しました。その後、必要な場面でスクリーンショットを取得し、操作箇所へ赤枠と丸数字を追加しました。
今回、Codexが自動で行った作業は次のとおりです。
- 既存資料から必要な操作手順を読み取る
- Chromeで指定したWebページを開く
- 手順に沿って画面を移動する
- 必要な状態でスクリーンショットを取得する
- 個人情報や不要な画面領域を隠す
- 操作箇所へ赤枠と丸数字を付ける
- 手順文と画像を対応させる
- 完成した手順ページへ画像を配置する
自分でスクリーンショットを切り抜いたり、画像編集ソフトで赤枠を描いたりする作業は行っていません。画面の選定と注釈も含めてCodexへ任せました。
途中で意図と異なる画面になった場合だけ、次のような短い指示を追加しました。
その画面で停止してください。
右側の入力欄まで見えるようにしてください。
通知が写らない状態で撮り直してください。
次は確認画面まで進めてください。ただし送信はしないでください。
送信、削除、公開、設定変更など、外部状態が変わる操作を含む場合は、どこまで進めてよいかを明確にします。
5. 実際に自動生成された手順ページ
以下は、Codexが実際のWeb画面を操作し、スクリーンショットと手順文を組み合わせて作成したページです。公開用に業務内容と固有名詞をぼかしていますが、ページ構成、画面の配置、赤枠、丸数字は実際の成果物です。
画面の中で操作する場所には赤枠と丸数字が付き、画像の上下には対応する説明文が配置されています。
複数の操作がある場合は、画面の状態が変わる単位で画像が分けられました。1枚へ情報を詰め込みすぎず、利用者が上から順に確認できる構成になっています。
6. 赤枠の位置もあとから修正できる
今回の成果物では、CodexがHTML上で画像に赤枠と番号を重ねました。
<div class="annotated-shot">
<img src="operation-screen.png" alt="操作対象の画面">
<span class="shot-box" data-no="1"
style="left:5%; top:58%; width:19%; height:9%;"></span>
<span class="shot-box" data-no="2"
style="left:25%; top:86%; width:74%; height:13%;"></span>
</div>
位置と大きさがパーセント指定されているため、画像サイズが変わっても赤枠が操作箇所へ追従します。
枠の位置が少しずれていた場合も、「赤枠をボタン全体へ合わせて」「丸数字を左上へ移動して」と追加で指示すると、Codexが修正します。Qiitaへ掲載するときは、赤枠と番号を反映したPNGを書き出しました。
7. うまく操作できない場合
Chromeが表示されているのにクリックできない
macOSの「アクセシビリティ」で Codex Computer Use.app がオンになっているか確認します。
画面を読み取れない
「画面収録とシステムオーディオ録音」で Codex Computer Use.app がオンになっているか確認します。
ログイン画面で止まる
人がログインと多要素認証を完了し、「Chrome準備完了」と伝えて作業を再開します。
画面が切り替わらない
Chromeが最前面にあるか確認します。別のアプリが選択されている場合は、Chromeをクリックしてから再度依頼します。
8. 公開前のチェック
- 個人名やメールアドレスが写っていないか
- 社内URLや顧客名が写っていないか
- 別タブのタイトルが写っていないか
- 通知やチャット内容が写っていないか
- 認証情報やアクセストークンが写っていないか
- 赤枠が操作対象とずれていないか
- 番号と説明文が対応しているか
まとめ
Codexへプロンプトを1つ渡すことで、Chrome操作、スクリーンショット取得、赤枠・番号の追加、手順ページへの配置まで自動で進められます。
社内マニュアルの操作画像だけでなく、テストで発見した不具合の再現手順を開発者へ共有する用途にも活用できます。
良い手順画像を作るポイントは次の3つです。
- 撮影する画面と完成条件を具体的に指定する
- Chromeへログインした状態でCodexへ引き継ぐ
- 自動生成後に機密情報と赤枠の位置を確認する
次の記事では、ここで作成した手順画像を使い、社内向けのHTML・PDFマニュアルへ仕上げる方法を紹介します。