← 教材一覧へ戻る

脱・属人プログラム — 学習ノート

AIにブラウザを操作させて、
画面つきマニュアルを作る

— 「画面を開く・撮る・枠をつける」までAIに任せる。ただし“見せるだけ”で

社内の手順書は、文章だけだと伝わりません。かといって、スクショを撮って赤枠を付けて…は手間がかかります。Claudeにブラウザを操作させれば、この作業の大半を任せられます。この教材では、そのための3つのやり方の違いと選び方、そして会社の管理画面やメールをAIに触らせるときの守り方をまとめました。

2026.10.08 作成 ／ 2026.10.08 更新（「まず1回、一緒にやる」工程を追加）

この話の結論（4つ）
  1. いきなりAIに作らせない。まず1回、人がAIと一緒に実際の作業をやる
    AIは会社ごとの「正しいやり方」を知らない。マニュアルの材料は、実際にやった記録
  2. やり方は3つ。デスクトップアプリを使っているなら、まず「内蔵ブラウザ」から
    普段のログインを引き継がない＝AIが触れるのは、自分でログインしたサイトだけになる
  3. AIは本当にクリックする。マニュアル作りでも「見せるだけ」のルールを最初に渡す
    保存・送信・削除は押さない、押す必要が出たら止まって聞く——を作業の前に
  4. 守りは「お願い」より「仕組み」で
    指示文に加えて、触れるサイトを絞る・まっさらなブラウザを使う、で事故の入口を減らす

CHAPTER 1

何ができるのか

Claude Codeは、ブラウザ（ChromeやEdgeなど、Webサイトを見るアプリ）を操作できます。ページを開く、ボタンを押す、文字を入力する、画面を撮る——人が手でやることを、言葉で頼むだけで代わりにやってくれます。

マニュアル作りでいえば、次の流れのほとんどをAIに任せられます。

まず1回、人がAIと一緒に実際の作業をやって、手順を固める ↓ 「この手順のマニュアルを作って」と頼む ↓ AIがブラウザで該当の画面を順番に開く ↓ 各画面のスクショを撮る（Chrome拡張なら動きをGIF動画にもできる） ↓ 押す場所に赤枠を付けて、手順書に画像を入れる ↓ 人が確認してから、社内に配る

FIG. AIに任せるマニュアル作りの流れ

たとえ話 新人さんに「この設定画面のマニュアル作っといて」と頼むのと同じです。違うのは、新人さんなら言わなくても分かる「見るだけで、保存ボタンは押さないでね」を、AIには言葉にして渡す必要があるところ。この教材の後半は、ほぼその話です。

CHAPTER 2

3つのやり方の違い

Claudeにブラウザや画面を操作させる方法は、2026年10月時点で3つあります。いちばん大きな違いは「普段のログイン状態をAIが使えるかどうか」です。

① Chrome拡張
（Claude in Chrome）		② デスクトップアプリの
内蔵ブラウザ		③ デスクトップアプリの
コンピュータ操作
準備Chromeに拡張機能を入れる不要。Codeタブで Ctrl+Shift+B（Macは Cmd+Shift+B）設定でオンにする（初期状態はオフ）
ログイン普段のChromeのログインをそのまま使うまっさら。必要なサイトにだけ、画面の中でログインし直す（Googleのログインもできる）パソコンの画面全体を操作する
向いている作業自分としてログインしている業務サイトでの作業ログインが要らないサイト、または1つのサイトだけで済む作業ブラウザ以外のアプリ
確認の仕組みサイトごとの許可クリックや入力をAIの安全チェックが見張る。初めてのサイトでは「1回だけ許可／常に許可／拒否」を聞かれるアプリごとの許可
動画（GIF）の録画できる（公式に記載あり）公式に記載が見当たらない—
使えるプランPro・Max・Team・EnterpriseClaude Codeのデスクトップアプリで使えるPro・Maxのみ（Team・Enterpriseでは使えない）。お試し段階の機能

① Chrome拡張（Claude in Chrome）

いつも使っているChromeに、Claudeの拡張機能を入れて使います。Claude Codeとつなぐと、Claudeが新しいタブを開いて作業します。普段のログイン状態を共有するので、ログインしている業務サイトなら、どこでもAIが操作できるのが強みであり、注意点でもあります。

② デスクトップアプリの内蔵ブラウザ

Claudeのデスクトップアプリ（Codeタブ）の中にあるブラウザです。公式の説明では「個人のブラウザとは別の、まっさらな状態」で、保存したログインも閲覧履歴も持っていません。

③ デスクトップアプリのコンピュータ操作

ブラウザだけでなく、パソコンの画面全体（ほかのアプリ）をAIが操作する機能です。お試し段階（リサーチプレビュー）の機能で、Pro・Maxプランのみ。TeamやEnterpriseでは使えません。ブラウザでの作業は①②の方が正確なので、Claudeもブラウザの作業には先に①を使う作りになっています。マニュアル作りでは、ブラウザ以外のアプリの手順書を作るときの選択肢です。

正直な注記 ②の内蔵ブラウザでスクショを画像ファイルとして保存できるか、GIF録画ができるかは、公式ドキュメントに記載が見当たりませんでした（2026年10月8日時点）。使う前に一度、短い作業で試してから本番のマニュアル作りに入ってください。

CHAPTER 3

どれを選ぶか

迷ったら、次の順に考えます。

  1. ブラウザの中で済む作業か？
    ブラウザ以外のアプリ（会計ソフトなど）の手順書なら③。ただしPro・Maxのみ。
  2. デスクトップアプリを使っているか？
    使っているなら、まず②。準備が要らず、AIが触れる範囲を自分で決めたサイトだけにできる。
  3. 「普段のログインのまま」作業させる必要があるか？
    複数の業務サイトをまたぐ、ログインのやり直しが難しい、GIF録画が欲しい——なら①。その場合は第5章の「仕組みで守る」を先に済ませる。
たとえ話 ①は自分の社員証を貸して、社内を自由に歩いてもらうやり方。
②は来客用の入館証を1枚だけ渡して、行ってほしい部屋にだけ案内するやり方。
マニュアルを作るだけなら、たいていは②で足ります。

CHAPTER 4

マニュアル作りの流れ

  1. まず1回、人がAIと一緒に実際の作業をやる
    AIは、あなたの会社の「正しいやり方」を知りません。公式の情報だけで書かせると、一般的な手順にはなっても、会社ごとの事情（すでに入っている設定、社内の決まり、迷いやすい画面）が抜けます。AIに公式の情報を調べて案内してもらいながら、人が画面を操作し、スクショ（または画面の録画。下の囲みを参照）をAIに渡して進めます。手順を知っているベテランがいれば、その人にやってもらいながら説明してもらう形でも構いません。マニュアルの材料は、この「実際にやった記録」です。
  2. その記録から、文章だけの手順書を作る
    「誰が・どの画面で・何をするか」を先に固めます。画面から作り始めると、撮ったものに引っ張られて手順がぶれます。
  3. 「どの手順に、どの画面が要るか」をAIに一覧にさせる
    全部の手順に画像は要りません。迷いやすい画面だけに絞ります。
  4. 「守ること」の指示文を渡してから、画面を開かせて撮らせる
    第6章の指示文を、作業を始める前に貼ります。途中から渡すと、それまでにした操作が対象外になります。
  5. 撮った画像を、人が全部見る
    メールアドレス・人の名前・件数・顧客名などが写り込んでいないか。写っていたら、切り取るかぼかすよう頼みます。
  6. 押す場所に赤枠を付けさせる
    画像の加工もAIに頼めます（パソコンの中の画像加工ツールで処理します）。
  7. 手順書に入れて、公開範囲を確かめてから配る
    社内だけで見る資料なら、社外の人が開けない場所に置きます。

手順1は、スクショの代わりに「画面の録画」でもできる

1枚ずつスクショを撮って送るのが面倒なら、作業の様子をまるごと録画して、そのファイルをClaude Codeに渡す方法もあります。

  1. 作業を録画する
    Windows 11なら「Snipping Tool」の録画、Macなら「画面収録」で、作業の様子を動画ファイル（MP4など）に残します。
  2. Claude Codeに渡して、こう頼む
    「この録画を数秒ごとの静止画に切り出して、どの画面で何をしたかを手順として書き出して」。Claude Codeは動画をそのまま見ることはできません（読めるのは画像やPDF）。そのため、FFmpeg（無料の動画変換ツール）で静止画に切り出してから読み取ります。FFmpegが入っていなければ、入れてよいか確認されます。
  3. 迷った点や判断は、文字で添える
    録画の「声」はAIに伝わりません。「ここで迷った」「うちはこっちを選んだ理由」は、メモにして一緒に渡します。
録画を使うときの注意 録画には、スクショ以上に余計なものが写ります（スクロール中に流れていく受信トレイ、途中で出る通知など）。録画の前に通知とほかのウィンドウを閉じ、1つの作業ごとに短く録り、使い終わった録画ファイルは消す——の3つを守ってください。
なお、ブラウザで使うClaude（claude.ai）のチャット画面は、公式の対応形式に動画が載っていません。録画を渡す方法は、パソコンの中で動くClaude Code向けです。
（動画を静止画に切り出して読み取れることは、2026年10月8日に試して確かめました）

CHAPTER 5

安全のルール（ここが一番大事）

マニュアル作りで開く画面は、たいてい会社の管理画面です（サーバーの設定、メールの設定、業務システムの管理者ページ）。AIはそこで本当にクリックします。次の6つを守ってください。

ルール理由
1. 見せるだけ保存・作成・削除・送信は押させない。マニュアルに必要なのは「画面」で、「設定の変更」ではない
2. 開いてよい画面を具体的に「メールは開かない」のような禁止だけだと、作業そのものができなくなる。「設定の画面だけ開いてよい。受信トレイと個々のメールは開かない」と、許す範囲で書く
3. 送らないメールの送信・返信・転送・下書き作成をさせない。メールにつながる連携機能（コネクタ）も使わせない
4. 写り込みは人が確認録画やスクショには、映っているものが全部入る（公式の注意書きどおり）。載せる前に人が全部見る
5. 画像を外に出さない撮った画像や読んだ画面の内容を、ほかのAI・外部サービス・Web検索に送らせない
6. 迷ったら止まる押す必要がありそうな場面では、その場で止めて人に聞かせる

指示文に加えて、仕組みで守る

指示文は「お願い」です。AIが読み違えることもあります。次の仕組みを先に整えておくと、事故の入口そのものが減ります。

ここが落とし穴 ①のChrome拡張は、普段ログインしているものすべてにAIが届く状態になります。会社のメール、共有ドライブ、顧客管理システム——マニュアルを作りたい画面が1つでも、AIが入れる場所はその全部です。「見せるだけ」の指示文と、操作してよいサイトの絞り込みは、セットで使ってください。

CHAPTER 6

そのまま貼れる「守ること」の指示文

マニュアル作りを頼む前に、次の文をチャットに貼ってください。【　】の中は、作る手順書に合わせて書き換えます。

これから【〇〇の設定手順】のマニュアルを、画面つきで作ってもらいます。作業を始める前に、次を必ず守ってください。 ■ 開いてよい画面 - 開いてよいのは【〇〇の管理画面の、設定のページ】だけ。それ以外のページ（受信トレイ・顧客の一覧・個々のメールやデータ）は開かない、クリックしない、読まない - 画面に映った人の名前・メールアドレス・件名・顧客名などを、読み取ったり書き写したりしない ■ やってはいけない操作 - 保存・作成・削除・送信は押さない。チェック・選択・入力も変えない - 見せるために開いた小さな画面は「キャンセル」で閉じる - メールの送信・返信・転送・下書き作成をしない。メールの連携機能（コネクタ）も使わない ■ スクショ・画像 - 設定の部分だけを切り取る。人や顧客が分かるもの、パスワード欄は写さない。写り込んだら、ぼかすか切り取る - 撮った画像や読んだ画面の内容を、手順書以外の場所（他のAI・外部サービス・Web検索）に送らない - 画像は手順書に入れる前に一覧で私に見せて、OKをもらってから入れる ■ 共通 - 押す必要がありそうな場面になったら、その場で止めて私に聞く - 画面の名前は、実際の画面で確かめてから書く

PROMPT. マニュアル作りの前に貼る「守ること」

書き方のコツ 「〇〇しないで」だけを並べると、AIは作業できなくなるか、抜け道を自分で解釈します。
「ここまでは開いてよい」と許す範囲を先に書き、そのうえで「これはしない」を書くと、作業も進み、守りも効きます。

CHAPTER 7

実例：メール設定の切り替えマニュアルで学んだこと

2026年10月、ある会社で「Gmailで会社のメールを受け取る設定を、新しい方式に切り替える」社員向けマニュアルを作りました（Gmailの「他のアカウントのメールを確認」という機能が2027年1月に終わるため、全員に作業してもらう必要があった）。最初は文章だけの手順書を作りましたが、「文章だけだと分かりにくい」となり、Chrome拡張で画面つきに作り直すことにしました。そこで分かったことが4つあります。

0. 先に1回、一緒にやったから正しい手順書になった

手順書を作る前に、担当者がAIと一緒に、実際の切り替え作業を最後までやりました。AIが公式の情報を調べて案内し、担当者が画面を操作してスクショを送る、という進め方です。すると、公式の情報だけでは分からないことが次々に出てきました。

どれも手順書に「注意」として書くべきことで、実際にやらなければ書けなかったことです。画面の撮影はあとからAIに任せられますが、手順を固めるこの工程は省けません。

1. 「開かない」と書いたら、作業にならなかった

最初の指示文に「Gmailはブラウザで開かない」と書いたところ、AIはすでにGmailの設定画面を開いて作業していました。そもそも設定画面を撮るには、Gmailを開かないといけません。守りたかったのは「開くこと」ではなく、「メールの中身を読むこと・送ること・設定を変えること」でした。そこで「開いてよいのは設定の画面だけ」と、許す範囲で書き直しました（第6章の指示文はこの反省を反映した形です）。

2. 守ることの指示は、作業を始める前に

この例では、守ることの指示を作業の途中で追加しました。途中から渡すと、それまでの操作は指示の外です。そこで、追加の指示の最後に「ここまでにルールに当てはまる操作をしていたら、何をしたか正直に報告して」と一行足しました。最初から渡していれば、この一行は要りません。

3. Chrome拡張は「ログイン中のすべて」に届く

Chrome拡張でGmailの設定を開かせたとき、その同じGmailには社外からの大切なメールが並んでいました。マニュアルに要るのは設定画面1枚でも、AIが届く範囲は受信トレイ全体です。メールのような個人情報が多い場所の手順書なら、②の内蔵ブラウザで必要なアカウントにだけログインするか、その部分の画面だけは人が自分で撮る、という選び方も十分ありです。

一言まとめ マニュアル作りは、AIに任せると本当に速くなります。ただし相手は会社の管理画面です。「見せるだけ」を言葉で渡し、触れる範囲を仕組みで絞る——この2つをセットにしてから始めてください。

用語ミニ辞典

用語ミニ辞典

Claude in Chromeクロード・イン・クローム
ChromeやEdgeに入れる、Claudeの拡張機能。Claude Codeとつなぐと、Claudeがブラウザを操作できるようになる。
内蔵ブラウザないぞうブラウザ
Claudeのデスクトップアプリ（Codeタブ）の中にあるブラウザ。普段のブラウザとは別の、まっさらな状態で動く。
ログイン状態
一度ログインしたサイトに、次からパスワードなしで入れる状態。①はこれをAIと共有し、②は共有しない。
GIFジフ
音のない短い動画（パラパラ漫画のような画像）。操作の動きを見せるのに向く。
権限モードけんげんモード
AIに、どこまで確認なしで作業させるかの設定。毎回確認する設定から、AIの判断に任せる設定（Auto）まである。
リサーチプレビュー
正式版の前に試してもらう段階の機能。仕様が変わる可能性がある。

情報源・元にしたもの

情報源・元にしたもの

内容情報源
① Chrome拡張Claude Code公式「Use Claude Code with Chrome」（code.claude.com/docs/en/chrome）：必要なプラン、VS Codeの @browser、GIF録画と写り込みの注意、サイトの許可
② 内蔵ブラウザClaude Code公式「Desktop application」の Browse external sites（code.claude.com/docs/en/desktop）：まっさらな状態、Googleログイン可、安全チェック、サイトごとの許可、組織の許可・禁止一覧に従う／What's new 2026年第28週（In-app browser on Desktop）
③ コンピュータ操作Claude Code公式「Desktop application」の Computer use：Pro・Maxのみ、Team・Enterprise不可、リサーチプレビュー、初期状態はオフ
画面の録画Claudeのアップロード対応形式（support.claude.com「Upload files to Claude」に動画の記載なし）／動画を静止画に切り出して読み取れることは2026-10-08に手元で確認（FFmpeg）
第7章の実例2026年10月8日の社内作業記録（社名・アドレス・人名は省いて一般化）
カリキュラムMD新規テーマ（HTMLが初出・単一MDは未作成）｜（関連）配布資料/desktop-setup.html・code-surfaces.html・admin-rollout.html・resident-agent.html

すべて2026年10月8日に公式ドキュメントで確認しました。機能やプランの条件は変わりやすいので、使う前に最新の公式情報を確認してください。