Claude Codeでスクリーンショットを自動化する方法｜Puppeteer実践

「サイトのスクリーンショットを毎回手作業で撮っていて、地味に時間が溶ける」——記録・レポート・検証のためにキャプチャを量産する人なら、誰もが一度は感じる面倒さです。

結論から言うと、スクリーンショット撮影はClaude Codeとヘッドレスブラウザ（画面を持たずに動くブラウザ）を組み合わせれば、ほぼ全自動にできます。撮る枚数が増えるほど効果が出ます。

株式会社Fyveは、自社のSEO記事に載せる図解を毎晩まとめて画像化する工程を、この仕組みで自動化しています。本記事では、私が実際に組んで運用している手順と、途中でつまずいた具体的な対処までお伝えします。

なぜスクリーンショット撮影を自動化するのか

スクリーンショットは「1枚だけ」なら手作業で十分です。自動化が効いてくるのは、同じ作業が繰り返し発生するときです。

私たちの現場で実際に自動化しているのは、次のような場面です。

• 記事の図解を画像化する：HTMLで作った図解を、毎回同じサイズ・同じ余白でPNGに書き出す
• 競合サイトの記録：定点観測したいページを、月初にまとめてキャプチャして残す
• 制作物の証跡：納品したLPの各画面を、証拠としてまとめて保存する
• 複数端末幅の確認：PC幅とスマホ幅で同じページを撮り、崩れをチェックする

どれも「1回の手順は単純だが、枚数が多い」作業です。人がやると単調でミスも出ますが、こういう仕事こそAIとスクリプトに任せる価値があります。

スクリーンショット自動化の3つの手段

自動化といっても方法はいくつかあります。私が実際に検討・利用した3つを、向き不向きで整理します。

Puppeteer（パペティア）は、GoogleがChromeを自動操作するために公開しているツールです。ページを開く・待つ・撮る、という一連をコードで指示できます。Browserless（ブラウザレス）は、そのChrome実行環境をクラウド側で貸してくれるサービスで、自分のマシンにブラウザを用意しなくてよくなります。

Claude Codeは、このどちらの方法でも「コードを書く」「実行する」「エラーを直す」までを一括で面倒みてくれます。ここが自動化のハードルを一気に下げてくれる部分です。

読者特典・無料ダウンロードClaude Codeを「素のまま」使うな無料でダウンロード →↓

Claude CodeにPuppeteerでスクショを撮らせる

まずは自分のPCで完結する、ローカルPuppeteerの方法です。私が記事の図解を画像化するのに使っている、実際の型がこれです。

やることはシンプルで、Claude Codeに次のように頼むだけです。

• 「Puppeteerで、このHTMLファイルを開いて800px幅のPNGとして保存するスクリプトを書いて」
• 「画像が800枚あるので、フォルダ内を全部ループで処理して」

Claude Codeが生成するコードは、だいたい次のような骨格になります。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 800, height: 600 });
  await page.goto('file:///path/to/diagram.html', { waitUntil: 'networkidle0' });
  await page.screenshot({ path: 'diagram.png', fullPage: true });
  await browser.close();
})();

ポイントは waitUntil: 'networkidle0' の部分です。これは「通信が落ち着くまで待ってから撮る」という指示で、画像やフォントの読み込みが終わる前に撮ってしまう事故を防ぎます。私が最初にハマったのも、まさにこの「待たずに撮ってしまう」問題でした。

非エンジニアの方でも、この一連をClaude Codeに任せれば、コードの中身を理解しなくても動くところまで到達できます。ブラウザ自動化ツールの選び方については、こちらの記事で詳しく比較しています。

Claude Codeブラウザ自動化｜Playwrightとbrowser-use比較

サーバー管理を避けたいならBrowserless

ローカルPuppeteerの弱点は、Chromeを自分の環境に入れて動かし続ける必要があることです。定期実行や大量処理になると、この管理がだんだん重くなります。

そこで選択肢になるのが、クラウドでブラウザを貸してくれるBrowserlessです。REST API（決まったURLを叩くと結果が返る仕組み）が用意されていて、/screenshot というエンドポイントにURLかHTMLを送ると、JPEGやPNGのキャプチャが返ってきます（出典: Browserless公式ドキュメント）。

使い勝手として押さえておきたい点は次の通りです。

• ブラウザの起動から後片付けまでを1リクエストで完結：Browserless側がChromeを立ち上げ、ページを開き、撮って、閉じるまでを引き受けます
• 無料枠がある：公式によると1,000ユニットが無料で、1ユニット＝ブラウザ利用時間30秒までがカウント単位です（出典: Browserless Pricing）
• 自前サーバーでも動かせる：オープンソースのDockerイメージが公開されており、自社インフラ内で同じREST APIを動かせます（非商用は無料・出典: browserless/browserless（GitHub））

「まずは試したいが、Node.js環境を整えるのが面倒」という段階なら、Browserlessの無料枠から入るのが一番手数が少ないです。Claude Codeには「BrowserlessのスクリーンショットAPIを叩くスクリプトを書いて」と頼めば、APIキーを差し込むだけの状態まで用意してくれます。

実際につまずいたポイントと対策

自動化は「動けば終わり」ではありません。私が運用の中で実際に踏んだ落とし穴と、その対処を共有します。ここは体験しないと分からない部分です。

1. 撮るのが早すぎて中身が空になる

前述の通り、読み込みを待たずに撮ると、フォントや画像が反映されないまま撮れてしまいます。networkidle0 での待機に加えて、Webフォントを使う場合は「フォントの読み込み完了を待つ」一手間を入れると安定します。私はここを入れてから、失敗キャプチャがほぼゼロになりました。

2. 日本語フォントが細く化ける

ヘッドレスのChromeは、環境によって日本語フォントを持っておらず、文字が別のフォントに置き換わって細く見えることがあります。対策は、撮影対象のHTML側でフォントを明示的に指定するか、実行環境に日本語フォントを入れておくことです。見た目の品質に直結するので、最初に潰しておくべき箇所です。

3. 余白やサイズが毎回ずれる

撮ったあとに画像の縦横比を揃えたい場面はよくあります。私はキャプチャ後に画像を決まったサイズに切り抜く処理を足して、全画像のサイズを統一しています。「撮る」と「整える」を分けて考えると、後から仕様変更が入っても壊れにくくなります。

4. 一度作れば「定期実行」で放置できる

スクリプトが安定して動くようになったら、あとは決まった時刻に自動で走らせるだけです。私は記事図解の画像化を毎晩まとめて回しており、朝には全部の画像ができあがっています。手作業なら数時間かかる単調作業が、寝ている間に片づく状態になります。

ここまで来ると、スクリーンショット撮影は「作業」ではなく「勝手に回る仕組み」に変わります。最初にスクリプトを整える一度きりの手間を、その後ずっと回収し続けられるのが自動化の本質です。

こうした細かい調整も、エラーメッセージをそのままClaude Codeに渡せば、原因の切り分けと修正案まで返してくれます。試行錯誤の速度が段違いに上がります。

どう使い分けるか

最後に、どの方法を選ぶかの判断基準を整理します。

• 月に数枚なら手動のまま：自動化のコストが撮る手間を上回るので、無理に仕組み化しない
• 自分のPCで数十〜数百枚を回すならローカルPuppeteer：環境を一度作れば追加コストなしで回せる
• 定期実行・大量処理・サーバー任せにしたいならBrowserless：管理を外に出せる分、運用が軽い

私たちの場合は、記事図解の日次生成はローカルPuppeteerで回し、単発の重い処理はBrowserlessという住み分けにしています。スクリーンショットに限らず、定型作業をClaude Codeに任せる考え方は、こちらの記事でも扱っています。

Claude CodeClaude Codeで定常業務を自動化する方法｜実践ガイド

投稿やブラウザ操作まで含めた自動化に踏み込みたい場合は、次の記事も参考になります。

Claude CodeClaude CodeでSNS投稿まで完全自動化する方法｜Browser Use CLI実践

まとめ

スクリーンショット撮影は、Claude Codeとヘッドレスブラウザの組み合わせで実務的に自動化できます。撮る枚数が多いほど、手作業からの解放は大きくなります。

ローカルで完結させたいならPuppeteer、サーバー管理を避けたいならBrowserless。どちらもコードの部分はClaude Codeが引き受けてくれるので、非エンジニアでも十分に手が届きます。

株式会社Fyveは、こうした「地味だが繰り返す作業」をAIに寄せることで、人が判断や制作に集中できる状態を作っています。まずは自分が毎月撮っているスクリーンショットの枚数を数えるところから始めてみてください。