Claude CodeのPlaywright連携でブラウザ業務を自動化！WordPress投稿・予約管理・SNS運用を丸ごと任せる中小企業ガイド

2026.04.22 ・ 読了目安 9分

「毎週WordPressにブログを投稿して、同じ内容をnoteとココナラブログにも転記。画像を差し替えてカテゴリを選び、メタ情報も埋める——これだけで1時間以上かかる」。ブラウザの中で完結する業務は、人の手で繰り返されがちですが、時間も気力も確実に削っていきます。API連携ができないSaaSや、ログインが必要な管理画面ほど、この「手作業ゾーン」が分厚くなります。

この問題を丸ごと解きほぐすのが、Claude CodeのPlaywright連携です。Anthropic公式CLIであるClaude CodeにPlaywright MCPを組み合わせると、AIがブラウザを自分で開き、ログインし、フォーム入力や投稿操作まで一貫して処理できます。RPAのような画面録画は不要で、日本語で「管理画面に入って新規記事を公開して」と指示するだけで動きます。

この記事では、Playwright連携の仕組みと中小企業での活用法、非エンジニアでも始められる4ステップを解説します。

目次

1. Playwright連携とは？ブラウザ業務がAIに任せられる理由
2. 中小企業で効果が出るPlaywright活用5選
3. 業種別 活用シーン
4. 非エンジニアでもできる導入4ステップ
5. 導入前に知っておくべき注意点
6. よくある質問
7. 導入サポートのご案内

1. Playwright連携とは？ブラウザ業務がAIに任せられる理由

Playwrightはもともとブラウザテスト用のオープンソースツールで、マイクロソフトが開発しています。Claude CodeはPlaywright MCP（Model Context Protocol）を通じてこのブラウザエンジンを呼び出し、AIが自律的にページを操作できる状態を作ります。ページを開く、要素をクリックする、文字を入力する、スクリーンショットを取る——これらをすべて自然言語の指示から実行します。

従来の自動化ツールとの違い

• API連携は提供側が対応していなければ使えないが、Playwrightは「人が見ているブラウザ画面」ごと操作できる
• RPAは画面座標や操作手順を事前録画する必要があるが、PlaywrightはAIが画面構造を読み取って動的に判断する
• 画面デザインが多少変わっても、AIが要素を探し直して処理を続けられる

MCPとHookとの相性

Playwright MCPは単体でも強力ですが、他のMCP（NotionやGoogleドライブ）と組み合わせると真価を発揮します。たとえば「Notionで承認された記事をWordPressに自動投稿」「受注メールを検知したら管理画面に在庫登録」といった部門横断の業務を、Claude Codeが一気通貫で処理できるようになります。

API連携とPlaywright連携の違い

2. 中小企業で効果が出るPlaywright活用5選

(1) WordPress・オウンドメディアの自動投稿

ブログ記事の本文・タイトル・カテゴリ・アイキャッチ画像・SEO設定を、管理画面を開いて入力するところまで自動化できます。毎週の投稿作業が1時間から数分に短縮され、しかも投稿漏れや設定ミスもなくなります。記事原稿をClaude Codeが書き、そのままPlaywrightで管理画面に流し込む一気通貫フローが実現します。

(2) SNS投稿・予約投稿の代行

note、ココナラブログ、各種SNSの投稿画面は、API提供が限定的なものが多い領域です。Playwright連携なら、ログインから本文入力、ハッシュタグ設定、公開ボタンのクリックまで任せられます。複数プラットフォームへの横展開もワンコマンドで完了し、担当者の「転記作業」がなくなります。

(3) 予約管理・顧客管理サイトへの登録

予約台帳、顧客管理システム、問い合わせフォーム、ECサイトの商品登録など、ブラウザで完結する中小企業向けSaaSはほとんどがPlaywrightで操作可能です。問い合わせ受付からCRM登録までの流れを自動化すれば、スタッフは一次対応や接客といった人にしかできない業務に集中できます。

(4) 競合調査・リサーチのスクリーンショット収集

競合サイト、検索結果、口コミサイトなどを定期巡回し、ページ内容とスクリーンショットを自動取得します。週次や月次でレポート化すれば、営業や企画部門の調査作業を大幅に削減できます。Claude Codeが取得結果を要約してくれるため、見るだけのレポートから「判断に使えるレポート」に進化します。

(5) 勤怠・経費申請などの社内業務自動化

勤怠システムの打刻、経費精算の申請、交通費計算、出張予約など、定型化された社内業務を丸ごと代行できます。社員が開いて打つのをやめれば、月単位で数十時間の可処分時間が生まれます。Hookと組み合わせれば、出社検知や業務開始の合図で自動的に打刻する流れも作れます。

3. 業種別 活用シーン

4. 非エンジニアでもできる導入4ステップ

ステップ1：自動化したいブラウザ業務を洗い出す

毎週・毎日繰り返しているブラウザ作業を紙に書き出します。最初は「WordPressの投稿」「予約サイトの更新」「SNSの定期投稿」など、月10時間以上かかっている業務に絞ると費用対効果が出やすくなります。業務フローを図にすると、Claude Codeへの指示も作りやすくなります。

ステップ2：Claude CodeにPlaywright MCPを追加する

Claude CodeにPlaywright MCPをインストールします。コマンド一行で完了し、インストール後は「ブラウザを開いて」「ログインして」といった日本語指示がそのまま動くようになります。必要に応じてログイン情報は安全な設定ファイルに格納し、AIから直接見えないように管理します。

ステップ3：1業務ずつ手順書をAIに読ませる

自動化したい業務の操作手順を日本語で書きます。「管理画面にログイン」「新規作成ボタンを押す」「タイトルに〇〇を入力」といった粒度で十分です。この手順書をClaude Codeに渡し、実際にPlaywrightで動かしてみて、うまくいかない箇所を修正していきます。2〜3回の往復で安定稼働に入るケースが多いです。

ステップ4：スラッシュコマンドやHookに組み込む

動くようになった自動化フローを、スラッシュコマンド化して「一行呼び出し」にします。さらにHookと組み合わせれば、メール受信や業務開始のタイミングで勝手に走らせることもできます。ここまで組み込めば、ブラウザ業務は「やる」から「動いている」状態に変わります。

5. 導入前に知っておくべき注意点

• 利用規約の確認：対象サービスが自動操作を明示的に禁止していないか、事前に規約を確認する
• ログイン情報の管理：共有PCに直接パスワードを書かず、環境変数や専用の鍵管理ツールに格納する
• 二段階認証の設計：認証コードが必要なサービスは、運用設計段階で扱い方を決めておく
• 例外時の人の確認：重要操作（削除・決済など）は、実行前に人が確認するステップを残す
• 画面変更時の再テスト：対象SaaSが大幅リニューアルしたら、手順書を見直す

6. よくある質問

Q1. プログラミング経験がなくても使えますか？

使えます。日本語の手順書さえ書ければ、Claude Codeが内部のコードを自動生成します。手順書は「操作の流れを言葉で並べたメモ」でよく、エンジニア的な記述は不要です。

Q2. ログイン情報をAIに渡すのは安全ですか？

環境変数や設定ファイルに保管し、AIが直接読み書きできない形にするのが基本です。Claude Codeはログイン処理の際に必要な値だけを参照する構成にできるため、設計次第で安全性を確保できます。

Q3. どのブラウザで動きますか？

Playwrightはchromium、firefox、webkitの3系統に対応しており、macOSでもWindowsでも動作します。ほとんどの業務はchromiumで十分ですが、Safariでしか動かない画面はwebkitを選ぶとよいです。

Q4. 他の自動化ツールと併用できますか？

併用できます。MakeやZapierなどで起動トリガーを作り、最終的な画面操作をPlaywrightに任せる構成も有効です。既存の自動化資産を捨てずに拡張できます。

Q5. 導入にどれくらい時間がかかりますか？

1業務であれば、打ち合わせから初回稼働まで2〜3時間程度が目安です。複数業務を横展開する場合は、1業務追加ごとに1時間前後で済むことが多いです。

7. 導入サポートのご案内

ブラウザの中で終わる業務は、裏を返せばAIに代わってもらいやすい業務でもあります。月100時間の手作業が、半日のセットアップでゼロに近づく——Playwright連携は、その現実的な一歩を用意してくれます。まずは一番気になっているブラウザ業務を書き出すところから始めてみてください。