はじめに
みなさんは、日常的に使うWebサイトで「なんでこんなに手順が多いの？」「毎回同じ操作するの面倒...」と感じたことはありませんか？
私は某メガバンクのインターネットバンキング（緑色のあの銀行です）を使うたびに、そう思っていました。ログインするだけで何度もクリックが必要で、本人確認のたびに同じボタンを押さなければならない...
そこで今回は、TamperMonkey、Claude Desktop、Playwright MCPを組み合わせて、使いにくいWebサイトを自動化し、劇的に使いやすくする開発手法を紹介します。
必要なツール
- TamperMonkey - ブラウザ拡張機能（ユーザースクリプトを実行）
- Claude Desktop - Anthropic社のAIアシスタント
- Playwright MCP - Claude DesktopでWebサイトを操作するためのプラグイン
開発プロセスの全体像
この手法の最大の特徴は、AIと対話しながら実際のWebサイトを操作して開発を進められることです。
1. 対話で問題を説明
↓
2. Playwrightで実際のサイトを開いて確認
↓
3. 問題点を一緒に分析
↓
4. スクリプトを生成
↓
5. 実際に動作確認
↓
6. 調整・改善
↓
7. 完成！
実際の開発の流れ
ステップ1：対話で問題を説明
まず、Claude Desktopに現在困っていることを具体的に説明します：
私：「SMBCのサイトのユーザー体験が悪すぎるので、ある程度勝手に自動操作する
TamperMonkeyScriptを組みたいと思っています」
Claude：「どのような問題点を感じていますか？」
私：「ログインボタンを押すと1手かかってWebでログインとアプリでログインが出るのだけど
アプリでログインが全く役に立たなくて不要なので、ログインボタンで
もうログインページに行くようにしたい」
ステップ2：Playwrightで実証確認
Claude DesktopがPlaywright MCPを使って実際のサイトを開きます：
Claude：「三井住友銀行のウェブサイトを開きますね」
[Playwrightでサイトを開く]
[現在のページ構造を分析]
実際のDOM構造やボタンの動作を確認しながら、問題点を共有できます。
ステップ3：スクリプト生成と動作確認
Claudeが問題を理解したら、解決策を提案してくれます：
Claude：「技術的には十分可能です！現在のHTML構造を見ると...」
[実際にJavaScriptコードを実行して動作を確認]
ステップ4：段階的な改善
一度にすべてを実装するのではなく、機能ごとに確認しながら進めます：
-
最初の問題を解決
- 「ログインボタンの動作を変更してみます」
- 実際に動作確認
- 「うまく動いています！」
-
次の問題へ
- 「次にログインページです」
- 「契約者番号でログインしたい。ID保存が効かないです」
- 実装と確認
-
さらなる改善
- 「本人確認ページでもボタンを自動で押してほしい」
- 「セーフティーパスの案内を自動でスキップしたい」
ステップ5：細かい調整
動作はするけど、もっと快適にしたい場合：
私：「うまく動いています！ただ、動き出すまでにタイムラグがあるけど、
今はどんな条件で発動していますか？」
Claude：「現在は各処理に固定の待ち時間を設定しています。
より高速に動作するように改善しましょう」
この開発手法のメリット
1. リアルタイムフィードバック
- 実際のサイトで即座に動作確認
- うまくいかない場合はその場で修正
2. 対話的な問題解決
- 技術的な詳細を知らなくても、やりたいことを説明すれば実現方法を提案
- 段階的に機能を追加できる
3. 確実な動作保証
- Playwrightで実際に操作しながら開発
- スクリーンショットで視覚的に確認
4. 学習効果
- AIとの対話を通じて、Web自動化の仕組みを理解
- 次回は自分でも応用できる
実際に完成したもの
某緑色の銀行のサイトで、以下の自動化を実現：
- ログイン時の無駄なポップアップをスキップ
- ログイン情報の自動入力
- 本人確認の複数ステップを自動化
- 不要な案内画面の自動スキップ
体感的には、クリック数が70%削減され、ログインまでの時間が大幅に短縮されました。
まとめ
TamperMonkey + Claude Desktop + Playwright MCPの組み合わせは、Web自動化の民主化とも言える手法です。
プログラミングの深い知識がなくても：
- 「こうしたい」を伝えるだけで実現
- 実際の画面を見ながら開発
- その場で動作確認と調整
日常的に使う「ちょっと使いにくいサイト」があれば、ぜひこの手法で改善してみてください。きっと、インターネットライフがもっと快適になるはずです。
注意事項
- 自動入力する情報の管理には十分注意してください
- サイトの利用規約に違反しないよう注意してください
- 個人利用の範囲で活用しましょう
参考リンク
Tags: #TamperMonkey #Claude #Playwright #自動化 #UX改善 #MCP