ブラウザ上の定型作業をAIに自動実行させられるようになる

Chrome Web StoreからAnthropicが公開している「Claude」拡張機能をインストールします。

1. Chromeブラウザを開く
2. Chrome Web Storeにアクセス: https://chromewebstore.google.com
3. 検索バーに「Claude」と入力
4. Anthropicが公開している「Claude」拡張機能を選択
5. 「Chromeに追加」をクリック
6. 「拡張機能を追加」で確認
7. ツールバーにClaudeのアイコンが表示されることを確認する

▲ Chrome Web Storeで「Claude」を検索してAnthropicの拡張機能を追加する

1. ツールバーのClaudeアイコンをクリック
2. 「Sign in」をクリック
3. Claude.aiのログイン画面が開く
4. Proプラン以上に加入しているアカウントでログインする
5. 拡張機能の権限確認ダイアログが表示されたら確認して許可する

Claude in ChromeのブラウザAI自動化機能はProプラン以上の機能です。ページのスクリーンショット撮影・ブラウザアクション実行・バックグラウンドでのタスク継続実行には、通常のチャットよりも多くのリソースを使用するため有料プラン限定となっています。

1. ツールバーのClaudeアイコン → 設定（歯車アイコン）を開く
2. 「Action settings」または「操作の設定」を確認する
3. 「Ask before acting」（操作前に確認）モードになっていることを確認する
4. このモードを維持することを強く推奨する

以下のサイトは必ずブロックリストに追加してください：

• ネットバンキング・証券会社（三菱UFJ、ゆうちょ、楽天証券など）
• クレジットカードの管理サイト
• 個人情報が集中している行政サービス（マイナポータルなど）
• パスワード管理ツール

設定手順： ツールバーのClaudeアイコン → 設定 → 「Blocked sites」→「Add site」→ ドメインを入力して保存

*.smbc.co.jp
*.mizuhobank.co.jp
*.mufg.jp
*.rakuten-bank.co.jp
*.jnb.co.jp

サイドパネルはブラウザの右側に表示され、現在開いているページを操作しながらAIと会話できます。

• 方法1: ツールバーのアイコンをクリック
• 方法2: キーボードショートカット（設定でカスタマイズ可能）
• 方法3: ブラウザ上部のアドレスバー横のパネルアイコン → Claudeを選択

▲ Claude in Chrome のプロジェクト管理とスケジュールタスク画面

AIへのタスク依頼で精度を上げるコツと、安全に使うためのプロンプト例を紹介します。

[何をするか]を[どこで/何に対して]してください。
[制約・条件]

このページの連絡先フォームに以下の情報を入力してください。
送信ボタンを押す前に必ず確認を求めてください。

名前: 山田太郎
メール: yamada@example.com
件名: お問い合わせ

AIの操作を止めたいときは、サイドパネルの「Stop」または「停止」ボタンをクリックします。操作が実行中の場合でも即座に停止できます。

「Ask before acting」モードでは、フォームの送信前・ファイルのダウンロード前・新しいページへの遷移前に確認ダイアログが表示されます。「許可」または「キャンセル」を選択して操作を制御しましょう。

よく使うプロンプトをショートカットに登録することで、毎回プロンプトを書かずに済みます。

1. サイドパネルを開く
2. チャット欄の下部または設定から「Shortcuts」を選択
3. 「New shortcut」をクリック
4. 名前・スラッシュコマンド・プロンプトを入力する
5. 「Save」で保存する

ショートカット名: ページ要約
スラッシュコマンド: summary
プロンプト: 現在開いているページの内容を要約してください。
            - 記事の主題（1行）
            - 重要なポイント（箇条書き3〜5項目）
            - 結論または行動指針（1〜2行）
            日本語で出力してください。

1. サイドパネルのチャット欄をクリック
2. /（スラッシュ）を入力する
3. 登録済みショートカットの一覧が表示される
4. 使いたいショートカットを選択するかキーワードを入力して絞り込む
5. Enterキーで実行する

業務でよく使うショートカットのテンプレートです。コピーして活用してください。

現在表示されているメールに対して返信文を作成してください。
条件:
- 丁寧で簡潔なビジネス文書として作成する
- 件名に「Re:」を付ける
- 本文は3〜5段落に収める
- 送信はしない。テキストだけ出力する

現在のページまたは選択したテキストから予定の情報を読み取り、
Googleカレンダーに予定を追加してください。
- イベント名・日時・場所（あれば）・メモ（URLを記載）
登録前に内容を確認させてください。

現在のページの企業・製品・サービスについて調査してください。
調査項目：概要・主な特徴・強み・料金体系・競合との差別化ポイント

1. ツールバーのClaudeアイコン → 「Scheduled tasks」を開く
2. 「New task」をクリック
3. タスク名・実行タイミング（Once/Daily/Weekly）・対象URL・プロンプトを設定
4. 「Save」で保存する

タスク名: 朝のIT/AIニュース収集
実行タイミング: Daily（毎朝 8:00）
対象URL: https://news.google.com
プロンプト:
IT・AI・テクノロジー関連のニュースを10件選んで要約してください。
出力形式: 1. [タイトル] - [1行要約] - [URL]

▲ スケジュールタスク管理画面。毎日・毎週の自動実行タスクを一覧管理できる

今週のプロジェクト管理ツールを確認して、
今週完了したタスクと来週の予定を取りまとめてください。

出力形式:
## 週次サマリー（○月○日〜○月○日）
### 今週の完了事項
- [完了タスクの一覧]
### 来週の予定
- [予定タスクの一覧]
### 課題・ブロッカー
- [あれば記載]

メールの下書きとして作成してください（送信はしない）。

悪意のあるWebページが、ページのテキストの中に「AIへの命令」を隠しておく攻撃（プロンプトインジェクション）に注意が必要です。

Antigravityには2つの主要な操作モードがあります。

AntigravityのAIエージェントは、内蔵のブラウザエンジンを使ってページを開き、スクリーンショットを撮影しながらページの内容を解析します。その結果に基づいてクリック・入力・スクロールなどの操作を実行します。

▲ Antigravity のエージェント管理画面。複数のエージェントを並行管理できる

1. Antigravityを開く
2. 画面上部またはサイドバーのビュー切り替えアイコンをクリック
3. 「Agent Manager」を選択
4. Agent Manager Viewに切り替わる

エージェントが守るべきブラウザ操作のルールを rules.md に定義します。プロジェクトルートまたはAntigravityの設定ディレクトリに作成してください。

# ブラウザ操作の安全ルール

## 絶対に行ってはいけない操作
- ネットバンキング・金融サービスへのアクセス
- 決済・購入操作（カートへの追加は可）
- ファイルのダウンロード・実行
- パスワードや個人情報の入力（テスト用ダミーデータを除く）

## 確認が必要な操作
- フォームの送信（テスト環境を除く）
- 外部サービスへのAPI呼び出し

## テスト環境での動作
- localhost または staging 環境では自由にテストを実行してよい
- 本番環境URLへのテストは慎重に行う

## 操作の記録
- ブラウザ操作の結果は必ずスクリーンショットまたは動画で記録する

Viteで開発中のアプリをAntigravityに自動テストさせます。前提として npm run dev でローカルサーバーが起動していること（通常 http://localhost:5173）が必要です。

1. ターミナルでプロジェクトディレクトリに移動して npm run dev を実行
2. Antigravityを開き、Agent Manager Viewに切り替える
3. 以下のプロンプトでテストを依頼する

http://localhost:5173 を開いて、以下の動作確認テストを実行してください。

テストシナリオ:
1. トップページが正常に表示されることを確認する
2. ナビゲーションのリンクをすべてクリックして、各ページが表示されることを確認する
3. [機能名]フォームにテストデータを入力してSubmitボタンをクリックする
4. エラーメッセージや404ページが表示された場合はスクリーンショットを撮って報告する

各ステップの結果を箇条書きで報告してください。

複数のWebサイトにまたがる調査を自動化します。

以下の競合サービスを調査してください。各サービスのWebサイトを開いて情報を収集してください。

調査対象:
1. [サービス1のURL]
2. [サービス2のURL]
3. [サービス3のURL]

各サービスについて収集する情報:
- サービスの概要（1〜2行）
- 主な機能・特徴（3〜5項目）
- 料金プラン（無料/有料の構成）
- ターゲットユーザー

最後に3サービスの比較表を作成してください。

以下のフォームに情報を入力してください。
URL: [フォームのURL]

入力内容:
- お名前: [テスト用名前]
- メールアドレス: [テスト用メール]
- お問い合わせ内容: [テスト内容]

【重要】送信ボタンはクリックしないでください。
入力完了後、入力内容のスクリーンショットを撮って確認させてください。
確認後に「送信してください」と指示します。

1. Agent Manager Viewを開く
2. 新しいエージェントを起動する
3. プロンプトに録画を指示する、または録画オプションを有効にする

以下のテストシナリオを実行して、操作の様子を動画として記録してください。

テスト対象: http://localhost:5173
テストシナリオ:
1. トップページを開く
2. 「新規登録」ボタンをクリック
3. 登録フォームに以下を入力する（送信はしない）
   - ユーザー名: test_user
   - メール: test@example.com
4. 入力した状態のフォームのスクリーンショットを撮る

テスト完了後、動画Artifactとしてテスト結果を出力してください。

1. テスト実行後、エージェントのチャット欄に動画Artifactが表示される
2. 動画をクリックして再生・確認する
3. 「共有」ボタン（またはダウンロードオプション）から動画を保存または共有する

テスト動画をそのままAIへの修正依頼に使う手順です。

1. STEP 3-1・3-2でテスト動画を取得する
2. Editor Viewに切り替える（またはCursorを開く）
3. 動画または動画のスクリーンショットをチャットに添付する
4. 以下のプロンプトで修正を依頼する

添付のテスト動画/スクリーンショットで確認したバグを修正してください。

発生している問題:
[動画で確認した問題を具体的に説明]

再現手順:
1. [操作手順を記載]
2. [操作手順を記載]

期待する動作:
[こうなるべきという説明]