日頃からお世話になっている社内のUさん(@haru-qiita)に痒い所に手が届くAI活用術を教えていただいたので、記事にしました！
はじめに
テスト業務での不具合証跡の作成や、社内向けの運用マニュアル、環境構築手順書で、「ここを押してください」を示す赤枠と丸数字つきのスクリーンショットが大量に必要になる機会が多い人間でした。
画像編集ソフトは一切使わず、手順のテキストを書いて、そのあとに1行足すだけで作れたので、そのプロンプトを共有します。
環境は macOS + Claude Code + Chrome、それと Claude in Chrome（ブラウザ拡張）です。
実際に投げたプロンプト
手順を箇条書きで書いたあと、最後にこれを付けただけです。
上記をChromeから該当画面のスクショを取得しボックスなどをつけて
手順ページを作成してください
これで Claude が、
- Claude in Chrome で対象ページを開いてスクリーンショットを撮る
- 撮った画像に赤枠と丸数字を重ねる
- キャプション付きの手順ページに組む
まで通しでやってくれます。こちらは画像編集ソフトを開いていません。
「Chromeから」が効きます。 Claude in Chrome は自分のログイン済み Chrome をそのまま操作してくれるので、ログインが必要な画面でもそのまま撮れます。社内ツールや管理画面の手順書だと対象がだいたいログイン後の画面なので、ここが一番大きいです。
撮れた素材がこれです。
気になるところがあれば直してもらう
だいたいそのまま使えますが、枠や番号の位置が惜しいことはあります。今回は初回がこうでした。
枠の位置は合っているものの、①の丸数字が検索欄の虫めがねアイコンに、②が「投稿する」の文字に被っています。気になったので直してもらいました。
このとき、文章だけで直させないのがコツです。出来上がった画像そのものを見せて、自分で確認させます。
出力した画像を見て。
①の枠が「検索欄」を、②の枠が「投稿する」ボタンを
ちょうど囲めているか確認して。
丸数字が対象に被っていたら枠の外に逃がして。
直したらまた画像にして見せて。
「ずれてる」ではなく囲むべき対象を名前で言うと伝わりが良いです。Claude が画像を見て自分で判定できるので、当てずっぽうの往復になりません。「直したら画像にして見せて」も付けておくと、そのまま見て確認できます。
見せたい範囲だけに切ってもらって、完成がこれです。
気をつけること
元のスクショは加工させない。 「元のPNGは加工しないで、注釈は重ねる形にして」と一言入れておくと、UIが変わったときスクショを撮り直して差し替えるだけで済みます。注釈を焼き込ませると毎回ゼロからです。
そのかわり、目隠しには使えない。 機密が映った部分を黒い矩形で覆っても、それは上に重ねているだけで元のPNGには中身がそのまま残ります。画像ファイルを直接開けば読めるし、PDFに書き出せばPDFの中にも入ります。配布物にするなら、映らない状態で撮り直すか、画像ファイル自体を塗り潰して保存し直させてください。
ログイン済みブラウザで撮るということ。 この記事の画像も、右上に自分のアイコンと通知件数が映っています。公開するものは撮る前に一度見てください。
まとめ
手順のテキストの下に「上記をChromeから該当画面のスクショを取得しボックスなどをつけて手順ページを作成してください」と足すだけ。気になるところがあれば、出てきた画像を見て「①が○○を囲めてない」と返せば直ります。
画像編集ソフトを開かずに手順書ができるようになったので、UIが変わっても撮り直しが怖くなくなりました。
参考
関連記事
- プロンプト1発でCodexに赤枠・番号付きの手順画像を自動で作ってもらった … 同じことをCodexでやった版。ツールごとの得意不得意を見比べたい人向け
- 読みにくいmdはClaudeに投げてHTML/CSSにするだけでよかった … 作った手順画像を貼りつける資料そのものを、読まれる形にする話