この記事は、Claude Code × Playwright を段階的に理解していくシリーズの第2弾です。
第1弾では、Playwright プラグインの導入手順を扱いました。
第2弾では、Claude Code × Playwright を使って、Webサイトの点検や改善をどのように進めるのかを実践ベースで整理します。
前回は、Claude Code に Playwright プラグインを導入する方法をまとめました。
今回はその続編として、実際に Playwright をどう使えばWebサイトの改善や最適化に役立つのかを、初心者向けにわかりやすく整理します。
Playwright プラグインを使うと、Claude に対して自然文で次のような操作を依頼できます。
- URL移動
- クリック
- フォーム入力
- スクリーンショット取得
- PDF生成
- ネットワークリクエスト確認
- コンソール確認
- E2Eテスト的な動作確認
つまり、人がブラウザで確認していた作業を、Claude Code にかなり手伝ってもらえるようになります。
この記事でわかること
- Playwright を実務でどう使えばよいか
- Webサイト改善のために最初に試すべきプロンプト
- 本番環境で安全に使うときの考え方
- 問題が見つかった後の深掘り方法
まず大事な考え方
最初に意識しておきたいのは、いきなり本番に強い操作をしないことです。
特に、ECサイトや会員系サイトでは次のような操作は慎重に扱う必要があります。
- 購入完了
- 会員登録完了
- 情報更新の確定
- 削除操作
そのため、最初は read-only に近い確認作業 から始めるのが安全です。
例えば、次のような使い方です。
- トップページの表示確認
- コンソールエラー確認
- ネットワークエラー確認
- 主要導線の遷移確認
- URL正規化確認
- レイアウト崩れ確認
購入や登録導線を確認する場合も、最初は 確認画面の直前まで に止める前提で使うのがおすすめです。
Claude Code × Playwrightでまずできること
Playwright プラグインの強みは、自然な日本語で依頼できることです。
例えば、こんな依頼ができます。
トップページを開いて、表示崩れ、コンソールエラー、失敗しているネットワークリクエストを整理して
検索して詳細ページまで進んで、表示崩れや詰まる箇所がないか確認して
このページの表示速度を悪化させている重いリソースを順位付きで出して
スクリプトを書かなくても、自然文ベースでブラウザ確認を進められるのはかなり便利です。
まず試したい 10 個のプロンプト
ここからは、Webサイト改善に役立つ実践プロンプトを紹介します。
最初はこのままコピペして試すだけでも十分です。
1. 入口の健全性確認
まず最初にやるべきなのは、サイトの入口が正常かどうかを見ることです。
自社Webサイトのトップページを開いて、表示崩れ、コンソールエラー、失敗しているネットワークリクエスト、遅いリソースを整理して
これで見たいこと
- 画面が崩れていないか
- JavaScriptエラーが出ていないか
- 読み込みに失敗している通信がないか
- 極端に重い画像やJSがないか
最初の1本としてかなりおすすめです。
2. 主要導線の通し点検
次に、ユーザーがよく使う流れを一通り確認します。
自社Webサイトで、トップ → 検索 → 詳細ページ → コンテンツ閲覧 → 購入導線の直前まで遷移して、詰まる箇所、不要な遷移、表示崩れを一覧化して
これで見たいこと
- 途中で変な画面遷移がないか
- ボタンやリンクが機能しているか
- 閲覧導線や購入導線で止まる箇所がないか
- UI崩れがないか
これは ユーザー体験の基本チェック として重要です。
3. URL正規化の確認
SEOや重複URLの観点では、URLの扱いも大事です。
自社Webサイトの主要ページで、http/https、wwwなし/あり、末尾スラッシュあり/なし、パラメータ付きURLの挙動を確認して、重複到達できるURLや正規化されていないURLがあれば整理して
これで見たいこと
- 同じページに複数URLで到達できないか
- リダイレクトの設計が適切か
- canonical の考え方とズレがないか
これは SEO改善の入口 にもなります。
4. LP・特集ページのリダイレクト確認
キャンペーンや特集ページを運用しているサイトでは、LP周りの確認も重要です。
自社WebサイトのLPや特集ページ候補URLを順番に開いて、最終到達URL、リダイレクト回数、ステータスコード、canonical の有無を整理して
これで見たいこと
- 無駄なリダイレクトがないか
- 想定外のURLに飛んでいないか
- ステータスコードが正常か
- canonical が適切か
LP運用やSEOの観点でかなり役立ちます。
5. 検索体験の点検
検索はユーザー体験に直結します。
自社Webサイトで複数の検索語を試して、検索結果0件、極端に遅い検索、意図とずれる上位表示、フィルタの不具合がないか確認して
これで見たいこと
- 0件が出やすくないか
- 検索が極端に遅くないか
- ユーザー意図と違う結果が上位に出ていないか
- 絞り込みUIが正常に動くか
検索体験の改善ヒントが見つけやすいです。
6. 詳細ページのCVR観点チェック
詳細ページは、CVR改善の重要ポイントです。
詳細ページを複数開いて、タイトル、価格、無料表示、閲覧ボタン、購入ボタン、クーポンやキャンペーン訴求、レビュー導線の見え方を比較し、CVRを落としそうな点を挙げて
これで見たいこと
- CTAが目立っているか
- 無料訴求が十分か
- クーポンやキャンペーンが伝わっているか
- レビュー導線が弱くないか
これは CVR改善の観点 でかなり使いやすいです。
7. バナーとファーストビューの確認
ファーストビューの見え方も重要です。
トップページと特集ページを開いて、ファーストビュー内の主要バナー、固定表示要素、スライドバナーの見え方を確認し、視認性が低い箇所やCTAが弱い箇所を指摘して
これで見たいこと
- バナーが目立っているか
- 伝えたいことが一目で分かるか
- CTAが弱くないか
- ファーストビューで離脱しそうな要素がないか
8. モバイル表示の確認
スマホ表示の確認も外せません。
自社Webサイトをスマホ相当の表示幅で確認して、ヘッダー、検索、バナー、一覧、詳細ページ、閲覧導線でレイアウト崩れやタップしづらい要素がないか調べて
これで見たいこと
- モバイルで崩れていないか
- ボタンが押しづらくないか
- 重要情報が埋もれていないか
- スクロールや操作がしにくくないか
9. ステージングとの差分確認
本番とステージングの差分確認にも使えます。
本番とステージングの同じページを開いて、HTML表示、CSS読み込み、主要API、画像読み込み、コンソールエラーを比較し、差分を一覧化して
これで見たいこと
- 本番だけ壊れていないか
- ステージングだけ崩れていないか
- CSSやAPIの差分がないか
- 環境差による不具合が出ていないか
10. 改善提案まで一気に出す
最後は、確認だけでなく改善提案までつなげます。
自社Webサイトの主要導線を一通り確認したうえで、SEO、表示速度、導線改善、UI、エラー監視の5観点で、優先度付きの改善案を10件出して
これで見たいこと
- どこから直すべきか
- 何がユーザー体験を落としているか
- 何がSEOや速度に悪影響を与えているか
- どこが改善余地として大きいか
使い方のコツ
Playwright を使うときは、最初は広く点検して、その後に深掘りする流れがやりやすいです。
おすすめの流れはこうです。
- 入口の健全性確認
- 主要導線の確認
- 問題が出たページだけ深掘り
例えば、問題が出たページに対しては次のように絞れます。
さっき問題が出たこのページについて、失敗しているリクエストだけ抜き出して、原因候補を3つに絞って
このページの表示速度を悪化させている重い画像、JS、API を順位付きで出して
この導線でユーザーが離脱しそうなポイントを、UI・文言・読み込み待ちの3観点で整理して
この流れにすると、ただの点検で終わらず、改善アクションまでつなげやすいです。
最初に試すならこの3本
全部試すのが大変なら、まずはこの3本がおすすめです。
1本目
自社Webサイトのトップページを開いて、表示崩れ、コンソールエラー、失敗しているネットワークリクエスト、遅いリソースを整理して
2本目
自社Webサイトで、トップ → 検索 → 詳細ページ → コンテンツ閲覧 → 購入導線の直前まで遷移して、詰まる箇所、不要な遷移、表示崩れを一覧化して
3本目
自社Webサイトの主要ページで、http/https、wwwなし/あり、末尾スラッシュあり/なし、パラメータ付きURLの挙動を確認して、重複到達できるURLや正規化されていないURLがあれば整理して
この3本だけでも、かなり実務に近い確認ができます。
まとめ
Playwright プラグインは、Claude Code に対して 自然文でブラウザ確認を依頼できるのが大きな強みです。
特に、次のような場面で役立ちます。
- 表示崩れ確認
- コンソールエラー確認
- 通信エラー確認
- 主要導線確認
- SEO観点のURL確認
- CVR改善の観点整理
- ステージングとの差分確認
最初は難しく考えず、トップページを見る、導線を見る、URLの挙動を見るあたりから始めると使いやすいです。
導入編の次に、実務で使い始める記事としてちょうどよいテーマだと思います。
おわりに
前回は「導入編」、今回は「実践編」としてまとめました。
関連記事
本記事は、Claude Code × Playwright を段階的に理解していくシリーズの一部です。