こんにちは。
最近、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本体:
1npm install -g playwright@latestCLI版:
1npm install -g @playwright/cliこれで準備完了です。
Step 3: 試してみる
Claudeに「Playwright経由でGoogleのトップページのスクリーンショットを撮って」と頼んでみてください。AIがPlaywrightを使ってスクリーンショットを撮影し、画像ファイルが保存されます。
応用の使い方：Webサイトの特定の部分だけスクショする
Webサイトをスクショするとき、全体ではなく部分的に撮影したい場合がありますよね。今までは手動で範囲選択して行っていたと思いますが、playwright + AIなら「〇〇の部分をスクショして」と言えば簡単に行えます。
例えば本ブログのトップページは以下のようなページです。
これの記事カード1つだけを撮影したいと仮定しましょう。そんな時は以下のようなプロンプトになります。
1playwrightを使って、https://ai.itokoba.com/ の最新記事カードを1つだけスクショしてください。これだけで、以下の通り部分的なスクショができます。
注意点
playwrightのCLIは比較的新しいツールのためAIが認識していない場合があります。CLAUDE.mdやskillに
playwright-cliコマンドの存在を明示した方が今は良さそうです。playwright-cli -hコマンドで使い方一覧が表示されますのでこれをAIに伝えておくと安全です。
playwright-cli -h の出力（クリック/タップで展開）
1$ playwright-cli --h
2
3playwright-cli - run playwright mcp commands from terminal
4
5Usage: playwright-cli <command> [args] [options]
6Usage: playwright-cli -s=<session> <command> [args] [options]
7
8Core:
9 open [url] open the browser
10 close close the browser
11 goto <url> navigate to a url
12 type <text> type text into editable element
13 click <ref> [button] perform click on a web page
14 dblclick <ref> [button] perform double click on a web page
15 fill <ref> <text> fill text into editable element
16 drag <startRef> <endRef> perform drag and drop between two elements
17 hover <ref> hover over element on page
18 select <ref> <val> select an option in a dropdown
19 upload <file> upload one or multiple files
20 check <ref> check a checkbox or radio button
21 uncheck <ref> uncheck a checkbox or radio button
22 snapshot capture page snapshot to obtain element ref
23 eval <func> [ref] evaluate javascript expression on page or element
24 dialog-accept [prompt] accept a dialog
25 dialog-dismiss dismiss a dialog
26 resize <w> <h> resize the browser window
27 delete-data delete session data
28
29Navigation:
30 go-back go back to the previous page
31 go-forward go forward to the next page
32 reload reload the current page
33
34Keyboard:
35 press <key> press a key on the keyboard, `a`, `arrowleft`
36 keydown <key> press a key down on the keyboard
37 keyup <key> press a key up on the keyboard
38
39Mouse:
40 mousemove <x> <y> move mouse to a given position
41 mousedown [button] press mouse down
42 mouseup [button] press mouse up
43 mousewheel <dx> <dy> scroll mouse wheel
44
45Save as:
46 screenshot [ref] screenshot of the current page or element
47 pdf save page as pdf
48
49Tabs:
50 tab-list list all tabs
51 tab-new [url] create a new tab
52 tab-close [index] close a browser tab
53 tab-select <index> select a browser tab
54
55Storage:
56 state-load <filename> loads browser storage (authentication) state from a file
57 state-save [filename] saves the current storage (authentication) state to a file
58 cookie-list list all cookies (optionally filtered by domain/path)
59 cookie-get <name> get a specific cookie by name
60 cookie-set <name> <value> set a cookie with optional flags
61 cookie-delete <name> delete a specific cookie
62 cookie-clear clear all cookies
63 localstorage-list list all localstorage key-value pairs
64 localstorage-get <key> get a localstorage item by key
65 localstorage-set <key> <value> set a localstorage item
66 localstorage-delete <key> delete a localstorage item
67 localstorage-clear clear all localstorage
68 sessionstorage-list list all sessionstorage key-value pairs
69 sessionstorage-get <key> get a sessionstorage item by key
70 sessionstorage-set <key> <value> set a sessionstorage item
71 sessionstorage-delete <key> delete a sessionstorage item
72 sessionstorage-clear clear all sessionstorage
73
74Network:
75 route <pattern> mock network requests matching a url pattern
76 route-list list all active network routes
77 unroute [pattern] remove routes matching a pattern (or all routes)
78
79DevTools:
80 console [min-level] list console messages
81 run-code <code> run playwright code snippet
82 network list all network requests since loading the page
83 tracing-start start trace recording
84 tracing-stop stop trace recording
85 video-start start video recording
86 video-stop stop video recording
87 show show browser devtools
88 devtools-start show browser devtools
89
90Install:
91 install initialize workspace
92 install-browser install browser
93
94Browser sessions:
95 list list browser sessions
96 close-all close all browser sessions
97 kill-all forcefully kill all browser sessions (for stale/zombie processes)
98
99Global options:
100 --help [command] print help
101 --version print version
102まとめ
というわけで、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