AI を活用して大量のウェブサイトのキャプチャー作業を自動化する
はじめに — WCAN mini 2026 Vol.1 懇親会での話
先日、WCAN mini 2026 Vol.1 に参加してきました。今回のテーマは AI。セッションでもさまざまな AI 活用の話題が上がっていましたが、懇親会でも引き続き「最近こんなふうに AI を使っている」という話で盛り上がりました。
その中で出てきたのが、サイトリニューアル前のキャプチャ作業 の話です。
サイトをリニューアルするとき、まず現状のサイトがどんな状態になっているかを把握する作業が発生します。ページ数が多いサイトだと、トップページ・下層ページ・カテゴリページ……と、確認すべき URL が数十〜数百になることも珍しくありません。それを一枚一枚、手作業でブラウザからスクリーンショットを撮っていくのは、地味に時間がかかる作業です。
そこで紹介したのが、Playwright を使ったキャプチャの一括取得です。
Playwright とは
Playwright は、Microsoft が開発したオープンソースのブラウザ自動操作フレームワークです。
「ブラウザ自動操作」というと難しそうに聞こえますが、要するに 人間がブラウザでやっている操作を、プログラムで自動的に実行できるようにするもの です。「ページを開く」「スクリーンショットを撮る」「ボタンをクリックする」「フォームに入力して送信する」といった操作を、コードで記述して自動化できます。
ヘッドレスブラウザとして動作する
Playwright が操作するブラウザは、通常の Chrome や Edge のように画面（ウィンドウ）を表示しません。画面を持たずにバックグラウンドで動作するブラウザのことを ヘッドレスブラウザ と呼びます。
画面を表示しない分、処理が高速で、サーバー上でも動作させることができます。
3つのブラウザエンジンに対応している
Playwright の大きな特徴のひとつが、主要な3つのブラウザエンジンを切り替えて使える点です。
指定名 | 対応するブラウザ |
|---|---|
chromium | Chrome / Edge 相当 |
firefox | Firefox 相当 |
webkit | Safari 相当 |
コードの中でエンジンを切り替えるだけで、それぞれのブラウザでレンダリングした結果を取得できます。
キャプチャ取得の用途であれば Chromium（Chrome / Edge 相当） を使うのが一般的です。一方、E2E テスト（システム全体の動作確認テスト）の現場では「Safari でも崩れていないか確認したい」という場面で WebKit エンジンが活躍します。Mac を持っていない Windows 環境でも Safari 相当の表示確認ができるのは、現場では重宝されています。
なお、WebKit については Apple が公式配布している Safari そのものではなく、WebKit エンジンをベースにした Playwright 独自ビルドです。完全な Safari の再現ではありませんが、「Safari 系エンジンで大きく崩れていないか」の確認用途としては十分に機能します。
対応言語
JavaScript（Node.js）、Python、Java、.NET（C#）など複数の言語から利用できます。今回紹介するキャプチャ取得のスクリプトは Node.js で作成します。
主な用途
Playwright はさまざまな用途で活用されています。
E2E テスト — ユーザー操作を再現してアプリケーション全体の動作を自動検証する
スクリーンショットの一括取得 — 複数ページのキャプチャをまとめて生成する（今回の用途）
スクレイピング — JavaScript でレンダリングされる動的なページからデータを取得する
PDF 生成 — ページを PDF として自動出力する
Playwright のインストール
事前準備：Node.js のインストール
Playwright を Node.js で使うには、あらかじめ Node.js がインストールされている必要があります。まだインストールしていない場合は、Node.js 公式サイトから LTS 版をダウンロードしてインストールしてください。
インストールできたか確認するには、ターミナル（Mac の場合はターミナル.app、Windows の場合はコマンドプロンプトや PowerShell）で次のコマンドを実行します。
node -vバージョン番号が表示されれば OK です。
プロジェクトフォルダの作成と初期化
作業用のフォルダを作り、その中で以下のコマンドを順番に実行します。
npm init -y
npm install playwright
npx playwright installnpx playwright install は、Chromium・Firefox・WebKit の各ブラウザを Playwright 用にダウンロードするコマンドです。少し時間がかかりますが、これで準備完了です。
キャプチャ取得スクリプトを用意する
AI にコードを作ってもらう
スクリプトは自分で書かなくても大丈夫です。Claude や ChatGPT などの AI チャットに、次のようなプロンプトを投げてみてください。
URL のリストが書かれたテキストファイル（urls.txt）を読み込んで、各ページのスクリーンショットをフルページで PNG として保存する。Node.js のスクリプトを Playwright で作ってください。ファイル名は連番にしてください。これだけで、動作するコードを生成してくれます。「PC とスマホの両方のサイズで撮りたい」「ファイル名をページタイトルにしたい」など、追加の要望も自然な言葉で伝えるだけで調整してもらえます。
AI が生成するコードの例
上記のプロンプトで生成されるコードは、おおむね次のような内容になります。
const { chromium } = require('playwright');
const fs = require('fs');
(async () => {
const urls = fs.readFileSync('urls.txt', 'utf-8')
.split('\n')
.map(url => url.trim())
.filter(url => url.length > 0);
const browser = await chromium.launch();
const page = await browser.newPage();
for (let i = 0; i < urls.length; i++) {
await page.goto(urls[i]);
await page.screenshot({
path: `screenshot-${String(i + 1).padStart(3, '0')}.png`,
fullPage: true
});
console.log(`撮影完了: ${urls[i]}`);
}
await browser.close();
})();実行してみる
URL リストのファイルを用意する
同じフォルダに urls.txt というファイルを作成し、キャプチャしたい URL を1行に1つずつ書いていきます。
https://example.com/
https://example.com/about/
https://example.com/service/
https://example.com/contact/スクリプトを実行する
スクリプトファイル（例：capture.js）を同じフォルダに保存し、次のコマンドで実行します。
node capture.js実行が完了すると、フォルダの中に各ページのスクリーンショットが PNG ファイルとして保存されます。数十ページであっても、数分で完了します。
まとめ
Playwright は、ブラウザ操作を自動化するための強力なツールです。ヘッドレスブラウザとして動作し、Chromium・Firefox・WebKit の3つのエンジンを切り替えて使える柔軟性が特徴です。
今回紹介したキャプチャの一括取得は、Playwright の機能のほんの一部に過ぎません。E2E テストやスクレイピング、PDF 生成など、Web 制作の現場でさまざまな自動化に応用できます。
「こういうことができるツールがある」と知っておくだけで、日々の作業の中で「これも自動化できるかもしれない」という発想が生まれます。まずは今回のキャプチャ取得から、Playwright を試してみてください。
実際の私が使ってる batch.js は以下のリンクで公開しています。自分で作ってみるのがオススメですが、参考にご覧ください。
