Claude in Chrome に オンラインショッピングをさせてみた

はじめに

※ この記事のドラフト執筆には Claude を使用しています。検証は筆者が実施し、記載内容は筆者が確認・編集しています。

Chromeの拡張機能として claude を利用できる、 Claude in Chrome がGAとなりました。
Claudeの公式Chrome拡張機能「Claude in Chrome」が一般提供開始

今回は、ネットショップでカートを組ませて注文直前まで進める、という作業をやらせてみました。
(注文までやらせることもできるようなのですが、動画にすると個人情報のマスキングが難しそうなのでとりあえずカート入れまで）

Claude in Chrome とは

Claude in Chrome はChromeの拡張機能としてインストールができます。
タブ操作、ページの要素読み込み、リンクへの遷移、フォームに入力など、ブラウザ上の操作を自然言語で行うことができます。

Puppeteer や Playwright で書いていたブラウザ操作を、コードではなく自然言語で実行させるイメージに近いですが、当然得手不得手があります。

手順を書くか、目的を書くか

• Playwright：「このセレクタをクリックして、この入力欄に値を入れて、遷移を待つ」と手順を自分で書く
• Claude in Chrome：「〇〇の一覧を集めてMarkdownにして」と目的だけ渡す。手順はClaudeがページを見ながら決める

何を見て動くか

• Playwright：DOM。class名やセレクタが変わると壊れる
• Claude in Chrome：画面の意味。「これは警告の一覧だな」と読んで動くので、UIが変わっても動くことがある。逆に、毎回同じ手順を踏むとは限らない

元が取れるのはいつか

• Playwright：同じ操作を何十回も繰り返すとき
• Claude in Chrome：一回だけの作業。「今日この一覧だけ欲しい」「そもそもUIがない」ときは、スクリプトを書くより1行投げたほうが速い

実践

指示

楽器・音響機器のオンラインストア「サウンドハウス」のトップページを開いた状態で、次の一文だけを投げました。

ギターピックの INIFIX U (1.0mm) を、
合計金額が2,000円以下となる最大個数までカートに入れてください

商品種別・商品名・スペック・金額制約の4つだけです。検索キーワードも、何個買えばいいかも、どのボタンを押すかも書いていません。

事前に決めた安全策は2つです。

• 未ログインで実行する。 ログイン状態だと氏名・住所・ポイント残高がスクリーンショットに写り込むので、そもそも撮れない状態にしておく
• 購入の最終確定はしない。 未ログインなのでレジで構造的に止まる

環境は Chrome ＋ Claude in Chrome 拡張（サイドパネル）、モデルは Claude Opus 5 です。

操作GIF

要所要所の操作をGIFにしました。
このGIFも、Claudeに「体験レポートとして証跡を撮りたいので、要所要所の操作をGIF化してほしい」という一文の指示のみでアウトプットしてくれました。

実行ログ

1. https://www.soundhouse.co.jp/                       トップページ（開始地点）
2. https://www.soundhouse.co.jp/search/not_found       「INIFIX」で検索 → 0件
3. （検索）「ピック」で1,411件 → メーカー名を突き合わせ
4. （検索）「INFINIX U」で26件ヒット
5. https://www.soundhouse.co.jp/products/detail/item/277560/   指定品の商品ページ → 入荷未定
6. https://www.soundhouse.co.jp/products/detail/item/381196/   代替品の商品ページ → 在庫あり
7. https://www.soundhouse.co.jp/cart/index                     カート投入（12個 → 10個に修正）
8. https://www.soundhouse.co.jp/customers/auth/login           レジ → ログイン要求で停止

所要は数分でしたが、ログの通り一直線には終わりませんでした。途中で3回止まって、こちらに確認してきました。面白かったのは、3回とも「操作で詰まった」のではなく「指示の解釈で詰まった」ことです。

指示要求その1：商品名の表記ゆれ

「INIFIX」で検索すると0件でした。実は自分が商品名を打ち間違えていて、正しくは MASTER 8 JAPAN の「INFINIX」です。

Claudeはここで諦めず、「ピック」でカテゴリ全体（1,411件）を検索し、その中からブランド名を突き合わせて INFINIX を特定しました。文字列一致では拾えない差分を、人間と同じ流れで拾っています。

「INFINIX U」で検索し直すと26件。ところが 1.0mm だけで6商品ありました。

INFINIX-U TRIANGLE  with Hard Grip - 1.00mm            item/277557
INFINIX-U TEARDROP  with Hard Grip - 1.00mm            item/277560
INFINIX-U JAZZ TYPE with Hard Grip - 1.00mm            item/277562
INFINIX-U Hard Polish + Hard Grip 三角        - 1.0mm   item/381193
INFINIX-U Hard Polish + Hard Grip ティアドロップ - 1.0mm   item/381196
INFINIX-U Hard Polish + Hard Grip ジャズ      - 1.0mm   item/381198

形状（三角／ティアドロップ／ジャズ）とシリーズ（無印／Hard Polish）を指定していなかったので、買う物が確定しません。

ここで、Claudeは勝手に選ばず、チャット欄で選択肢を並べて確認してきました。

選択肢からティアドロップ (INFINIX-U TEARDROP with Hard Grip - 1.00mm item/277560) のボタンを選ぶと、処理が続行しました。

指示要求その2：在庫切れ

選んだ INFINIX-U TEARDROP with Hard Grip (item/277560) は、 在庫状況が 入荷未定 となっています。

Claudeは在庫切れの状況でカートに入れた場合の処理について知らないので、ここで「在庫が切れているがどのようの対処するか」を指示として仰いできました。

ここでは、この商品ページの関連商品を参照し、 それらのどれを代替案として選ぶか、チャット欄で選択する形の指示要求が来ました。

私は同じ形状・同じ厚み・同じグリップ仕様で在庫のある item/381196（Hard Polish + Hard Grip ティアドロップ 1.0mm）を選択、処理が続行しました。

ちなみにこの過程で、Claudeは自分の判定ミスを自分で直しているようです。

最初に6商品の在庫を一括判定したとき、全部「入荷未定」と出ました。

原因は、商品詳細パネルの中に在庫ステータスの凡例（「在庫あり：〜」「入荷未定：〜」という説明文）が非表示要素として埋め込まれていたこと。「入荷未定」で文字列検索すると全商品が引っかかります。

画面表示と食い違うことに気づいて、画面表示を読み込み、表示バッジを見る方式に切り替えて再判定しました。

指示要求その3：「合計金額」に送料は入るのか

12個入れてカートを見ると、こうなっていました。

商品合計   ¥1,980
配送料     ¥220     （3,000円未満のため）
─────────────────
総額       ¥2,200

floor(2000 / 165) = 12 は商品小計としては正しいのですが、送料を含めると2,000円を超えます。「合計金額が2,000円以下」の解釈が2通りあるわけです。

ここでもClaudeは勝手に決めず、両方の数字を出して確認してきました。送料込みを選ぶと、カート内で数量を10に変更して再計算。境界値も検算していました。

q=9   商品1,485 + 送料220 = 1,705  OK
q=10  商品1,650 + 送料220 = 1,870  OK   ← 採用
q=11  商品1,815 + 送料220 = 2,035  NG
q=12  商品1,980 + 送料220 = 2,200  NG

結果

項目	値
商品	MASTER 8 JAPAN / INFINIX-U Hard Polish + Hard Grip ティアドロップ - 1.0mm
商品ID	381196
単価	¥165（税込）
数量	10
商品合計	¥1,650
配送料	¥220
総額	¥1,870

「ご注文手続きへ」を押すとログイン画面に遷移しました。
今回は会計部分までは実践しないとClaudeに指示していたため、ここでClaudeは停止しました。

ログイン・決済など重要な操作について

今回は未ログインだったのでレジで止まりましたが、ログイン済みであっても Claude in Chrome が一人で最後まで進めることはないようです。

以下の操作は人間に残される仕様になっています。

• ID／パスワードの入力（ログインは人間がやる）
• クレジットカード番号などの決済情報の入力
• 注文確定のような取り消せない操作。チャットで明示的に承認しないと実行しない

なので現実的な使い方は「人間がログインした状態を渡す → Claude がカート投入から注文確認画面まで組む → 最終確定だけ人間が押す」になります。面倒な部分を全部やらせて、責任の伴う一押しだけ人間が持つ、という切り分けです。

分かったこと

向いている作業

• スクリプトを書くほどではないけれど、手でやるのは面倒なブラウザ作業
• 検索・絞り込み・数量変更・再計算のような、ページを行ったり来たりする作業。ここは淡々と通ります

気づいたこと

• 短い指示でも、必要そうなら詳細ページまで自分で取りに行く。頼もしい反面、どこまでやるかは予測しづらい
• 止まるのは操作で詰まったときではなく、指示が曖昧だったとき。表記ゆれ、形状未指定、在庫切れ、「合計」の定義。全部こちらの指示の穴でした
• 「ピックを2,000円分くらい」と店員に言えば、店員は在庫を見て形状を訊いて送料の話を出す。その暗黙の往復が、Claude相手だと画面上の確認として全部見える

安全面

• 読むだけの操作では確認は挟まらない
• 認証情報・決済情報の入力と注文確定は人間側に残る。勝手に別形状のピックを12個買われるより、3回止まって聞かれる方が実務では信頼できます

まとめ

正直、一番驚いたのは操作の部分です。

「INIFIX」という打ち間違いから正しい商品を見つけ、カテゴリ検索に切り替え、在庫バッジの判定を自分で直して、数量を変えて再計算する。
自分はセレクタもDOMも一切書いていないのに、自然言語の一文だけで、ページを見て次の操作を判断し、欲しい情報に正しくたどり着いていました。

それでいて、形状・在庫切れの代替・送料の解釈といった「買う物と金額」に関わる判断は、勝手に決めずに毎回こちらに確認してきました。

作業はAIがやり、判断と承認は人間がやる。この分担がブラウザ上でそのまま成立していたのが、Claude in Chrome の一番良いところだと思います。