こんにちは。
最近、AIにブラウザを操作させる機能がどんどん出てきていますよね。
でも、実際に使ってみると、簡単な作業でもけっこう失敗します。
僕も何度も「なんでこんな簡単なことができないの?」と思いました。で、思いついたのがPlaywrightという選択肢です。その話を書いていきます。
AIのブラウザ操作が「意外と使えない」問題
AIにブラウザを操作させたことがある人なら、こんな経験があるんじゃないでしょうか。
- 「このボタンをクリックして」→ 違う場所をクリックしたり、そもそも失敗する
- 「スクリーンショットを撮って」→ 撮影範囲がおかしい。特定の部分だけ撮らせるのが難しい
- 簡単な作業なのに何度もやり直し。結局、自分でやったほうが早い
なぜこうなるのか。理由はシンプルで、AIは「画面を見て判断」してブラウザを操作しているからです。アクセシビリティツリーやスクリーンショットからページの構造を読み取って、「これがそれっぽいな」と判断してクリックしたりする。人間がブラウザを操作するのと似たやり方です。
だから人間と同じように迷うし、間違える。
一方、Playwrightは「このHTML要素」とコードで正確に指定して操作します。判断のブレが入らないので、同じ操作なら毎回同じ結果になる。ここが根本的な違いです。
Playwrightとは — 30秒で分かる説明
PlaywrightはMicrosoftが作った無料のツールで、ブラウザを「コードで」操作できます。Chrome、Firefox、Safariに対応していて、画面を表示しないで動かす(ヘッドレス)こともできます。
もともとはプログラミングのテスト用に作られたものですが、スクリーンショットの撮影やデータ収集にも使えます。世界中のWebエンジニアが日常的に使っているツールです。
非エンジニアの方にはこう伝えると分かりやすいかもしれません。
- AIのブラウザ操作 = 「画面を見ながら操作する人」。人間と同じように迷うし間違える
- Playwright = 「住所を知っている作業者」。迷わない。指定された場所を確実に操作できる
非エンジニアにとっては、「確実に動くブラウザ操作」の道具だと思ってもらえれば大丈夫です。
Playwrightの2つの使い方 — スクリプト vs CLI
Playwrightには大きく2つの使い方があります。非エンジニアはどちらもAI経由で使うことになりますが、体感が異なります。
① CLI方式(playwright-cli)— まずはこちらから
AIが1コマンドずつブラウザに指示を送って、対話的に操作する方法です。snapshotでページ構造を見て、clickで要素をクリック、のように1手ずつ進みます。
AIにブラウザを操作させる体験としては似ていますが、裏側でPlaywrightが動いているので精度が高い。認証状態をstate-save/state-loadで保存・再利用できる機能もあります。
非エンジニアの体感としては、「AIがブラウザを操っている」という感じです。基本的にはこちらから始めるのがおすすめです。
② スクリプト方式(通常のPlaywright)— 保存して繰り返す用
AIにスクリプト全体を書いてもらって、まとめて実行する方法です。一度書いたら何度でも同じ結果になるのが最大の強みです。
スクリプト方式が活きるのは、保存して繰り返し使いたい場合です。
- 毎朝、競合サイトのスクショを自動で撮って保存する(定期実行)
- ECサイトの商品ページから価格を毎日取得して記録する(定期実行 + データ収集)
- 自分のブログの全ページを一括でスクショ撮影する(リデザイン前後の比較など)
こういった「保存しておく価値のある作業」にはスクリプト方式が向いています。
使い分けの目安
| やりたいこと | おすすめ |
|---|---|
| その場で探りながら操作する | CLI方式 |
| 同じ作業を何度も繰り返す | スクリプト方式 |
| Webページのスクショ・PDF化 | どちらでもOK |
| ログインが必要な操作 | AIのブラウザ操作が楽(既にログイン済みのブラウザを使える) |
「ログインが必要な操作もPlaywrightでやるべき?」と思った方もいると思います。もちろん出来なくはないのですが、正直ログインが必要な操作はAIのブラウザ操作機能のほうが楽です。既にログイン済みのブラウザをそのまま使えるので。
Playwrightが向いているのは、認証不要で確実にやりたい作業です。
非エンジニアでもPlaywrightが使える理由
「ブラウザをコードで操作する」と聞くと、プログラミングができないと使えないように聞こえるかもしれません。でも、2026年の今は状況が違います。
AIにコードやコマンドを書いてもらえるから
「Playwrightで〇〇のスクリーンショットを撮って」とAIに頼むだけです。コードを読める必要すらありません。動けばOK。もちろん、コードの実行までAIに依頼できます。
つまり、非エンジニアがPlaywrightを使うということは、「AIにPlaywrightを使わせる」ということです。自分でコードを書くわけじゃない。AIに「もっと確実な道具を使ってくれ」とお願いするだけです。
一度動いたら何度でも確実に動く
AIのブラウザ操作との最大の違いは再現性です。
AIは毎回「判断」するので、同じ指示を出しても結果が変わることがあります。昨日はうまくいったのに今日は失敗する、ということが普通に起きる。
Playwrightは同じコードなら毎回同じ結果になります。本当に何回も同じ操作をするなら、スクリプトとして保存しておけばいい。もっと言えば、Claude CodeのSkillとして登録してしまえば、「スクショ撮って」の一言で毎回確実に動きます。
実際にやってみよう — 5分でできる最初の一歩
ここまで読んで「じゃあ試してみるか」と思った方向けに、最小限の手順を書いておきます。
Step 1: Node.jsをインストール
https://nodejs.org/ja/download からダウンロードしてください。自分の環境を選び、コマンドを1つずつ実行してください。まずWindowsかMacを選べばあとはそのままでいいでしょう。
コマンドはコマンドラインツールから行います。Macなら「ターミナル」アプリ、Windowsなら「コマンドプロンプト」か「PowerShell」開いて、コピペして実行します。

Step 2: Playwrightをインストール
インストール時と同様にコマンドラインツールを開いて、以下をコピペして実行します。両方インストールしておいてください。
Playwright本体:
npm install -g playwright@latestCLI版:
npm install -g @playwright/cliこれで準備完了です。
Step 3: 試してみる
Claudeに「Playwright経由でGoogleのトップページのスクリーンショットを撮って」と頼んでみてください。AIがPlaywrightを使ってスクリーンショットを撮影し、画像ファイルが保存されます。
応用の使い方:Webサイトの特定の部分だけスクショする
Webサイトをスクショするとき、全体ではなく部分的に撮影したい場合がありますよね。今までは手動で範囲選択して行っていたと思いますが、playwright + AIなら「〇〇の部分をスクショして」と言えば簡単に行えます。
例えば本ブログのトップページは以下のようなページです。

これの記事カード1つだけを撮影したいと仮定しましょう。そんな時は以下のようなプロンプトになります。
playwrightを使って、https://ai.itokoba.com/ の最新記事カードを1つだけスクショしてください。これだけで、以下の通り部分的なスクショができます。

注意点
playwrightのCLIは比較的新しいツールのためAIが認識していない場合があります。CLAUDE.mdやskillに
playwright-cliコマンドの存在を明示した方が今は良さそうです。playwright-cli -hコマンドで使い方一覧が表示されますのでこれをAIに伝えておくと安全です。
playwright-cli -h の出力(クリック/タップで展開)
$ playwright-cli --h
playwright-cli - run playwright mcp commands from terminal
Usage: playwright-cli <command> [args] [options]
Usage: playwright-cli -s=<session> <command> [args] [options]
Core:
open [url] open the browser
close close the browser
goto <url> navigate to a url
type <text> type text into editable element
click <ref> [button] perform click on a web page
dblclick <ref> [button] perform double click on a web page
fill <ref> <text> fill text into editable element
drag <startRef> <endRef> perform drag and drop between two elements
hover <ref> hover over element on page
select <ref> <val> select an option in a dropdown
upload <file> upload one or multiple files
check <ref> check a checkbox or radio button
uncheck <ref> uncheck a checkbox or radio button
snapshot capture page snapshot to obtain element ref
eval <func> [ref] evaluate javascript expression on page or element
dialog-accept [prompt] accept a dialog
dialog-dismiss dismiss a dialog
resize <w> <h> resize the browser window
delete-data delete session data
Navigation:
go-back go back to the previous page
go-forward go forward to the next page
reload reload the current page
Keyboard:
press <key> press a key on the keyboard, `a`, `arrowleft`
keydown <key> press a key down on the keyboard
keyup <key> press a key up on the keyboard
Mouse:
mousemove <x> <y> move mouse to a given position
mousedown [button] press mouse down
mouseup [button] press mouse up
mousewheel <dx> <dy> scroll mouse wheel
Save as:
screenshot [ref] screenshot of the current page or element
pdf save page as pdf
Tabs:
tab-list list all tabs
tab-new [url] create a new tab
tab-close [index] close a browser tab
tab-select <index> select a browser tab
Storage:
state-load <filename> loads browser storage (authentication) state from a file
state-save [filename] saves the current storage (authentication) state to a file
cookie-list list all cookies (optionally filtered by domain/path)
cookie-get <name> get a specific cookie by name
cookie-set <name> <value> set a cookie with optional flags
cookie-delete <name> delete a specific cookie
cookie-clear clear all cookies
localstorage-list list all localstorage key-value pairs
localstorage-get <key> get a localstorage item by key
localstorage-set <key> <value> set a localstorage item
localstorage-delete <key> delete a localstorage item
localstorage-clear clear all localstorage
sessionstorage-list list all sessionstorage key-value pairs
sessionstorage-get <key> get a sessionstorage item by key
sessionstorage-set <key> <value> set a sessionstorage item
sessionstorage-delete <key> delete a sessionstorage item
sessionstorage-clear clear all sessionstorage
Network:
route <pattern> mock network requests matching a url pattern
route-list list all active network routes
unroute [pattern] remove routes matching a pattern (or all routes)
DevTools:
console [min-level] list console messages
run-code <code> run playwright code snippet
network list all network requests since loading the page
tracing-start start trace recording
tracing-stop stop trace recording
video-start start video recording
video-stop stop video recording
show show browser devtools
devtools-start show browser devtools
Install:
install initialize workspace
install-browser install browser
Browser sessions:
list list browser sessions
close-all close all browser sessions
kill-all forcefully kill all browser sessions (for stale/zombie processes)
Global options:
--help [command] print help
--version print version
まとめ
というわけで、AIにブラウザ操作を任せてみたら失敗だらけだったので、Playwrightという道具を使うことにした、という話でした。
- AIのブラウザ操作は便利だけど、万能じゃない
- Playwrightなら「確実に動く」自動化ができる
- 非エンジニアでも、AIにコードを書いてもらえば使える
- 基本はCLI方式から。スクリプトは「保存して繰り返したい作業」に
「全部AIにやらせる」ではなく、「AIに正しい道具を選ばせる」。それが今のところ一番賢い使い方だと思います。
次回は、Claude in Chrome・Claude Preview・Playwrightの3つを「どの作業にどれを使うべきか」で比較する記事を書く予定です。
参考
playwright公式:https://playwright.dev/
playwright公式Githubリポジトリ:https://github.com/microsoft/playwright
playwright CLI公式Githubリポジトリ:https://github.com/microsoft/playwright-cli
