長いページのスクショが面倒だったのでChrome拡張にした話
2026/8/18 ・ なおき #開発ノート
目次
DevToolsだけでフルページスクショが撮れる
長いWebページを1枚のスクショにしたいとき、ありますよね。自分はずっと「画面の下までスクロールしながら何回か撮って、後で見比べる」をやってました。地味にめんどくさいですよね。
実はChromeだけで一発で撮れます。拡張機能もアプリのインストールも要りません。
- 対象ページを開く
Cmd + Option + IでDevToolsを開くCmd + Shift + Pでコマンド入力欄を出すscreenshotと打って「フルサイズのスクリーンショットをキャプチャ」を選ぶ
これだけです。ページの一番下まで自動で拾って、1枚のPNGにしてダウンロードフォルダに落としてくれます。
これで満足できる人はここで読むのをやめて大丈夫です。この先は「それでも毎回この手順やるのがだるい」って人向けの話。
4手順ですら面倒くさかった
自分、ページ全体のスクショをけっこう頻繁に撮ります。ブログのネタとか、記事に貼る用とか。
そのたびに Cmd+Option+I → Cmd+Shift+P → screenshot と打つ。手が覚えてても、毎回これをやるのがだるいんですよね。
「これ、ボタン一個で済ませられないの？」
で、Claude Codeに「これをChrome拡張のボタン一つでできるようにして」と投げてみました。技術的なことは何も指定してません。「毎回DevToolsで手順を踏むのが面倒だから、ボタン一つでこの動きをしたい」って伝えただけです。
一回目、動いたと思ったら中身がバグってた
数分後、拡張機能ができました。普通のページで試すと、ちゃんと撮れます。
ところがPageSpeed Insightsのレポートページで試したら、こうなりました。
同じレポートカードがコピペされたみたいに延々と縦に並んでる。画像の高さは4万4千pxオーバー。本来の3倍以上の長さになってました。うわ、なんじゃこれ、って声出ましたね。
スクショを貼って「これ何？」と聞いたら直った
こういうとき、自分が原因を調べる必要はありません。壊れたスクショをそのままClaude Codeに貼って「これ何？」って聞くだけです。
そしたら「ページによっては、今のやり方だと表示範囲の外を無理やり撮ろうとして描画がおかしくなることがあるかも」という説明と一緒に、直したコードを出してきました。DevToolsの「フルサイズのスクリーンショットをキャプチャ」が内部でやってる処理に、ちゃんと寄せた形で。
もう一度PageSpeed Insightsのページで試したら、こうなりました。
DevToolsを手でポチポチ操作したときとまったく同じ、正しいレポートが最下部まで撮れてます。ちゃんとしたのが出てきたときはさすがにホッとしました。
自分がやったのは、壊れた画面のスクショを撮って貼ることだけ。コードの中身は最後まで読んでません。
できたもの
ツールバーのアイコンをクリックするだけ（キーボードなら Cmd+Shift+Y）。開いてるページ全体を1枚のPNGにしてダウンロードフォルダに保存してくれます。
一個だけ避けられない制約があります。撮影中の1〜2秒だけ「拡張機能がこのブラウザをデバッグしています」という黄色い警告バーがタブに出るんですよね。DevTools自身が持ってる仕組みを間借りしてる関係で、ここは避けようがないみたいです。撮り終わればすぐ消えるので、もう気にせず使ってます。
Chrome Web Storeには出していません。chrome://extensionsの「パッケージ化されていない拡張機能を読み込む」で入れるだけの、完全に個人用のやつです。
以前作ったZOZOのサイズ比較拡張のときと同じで、今回もコードはほとんど自分で書いていません。「動いた」「こうなった」とスクショを見せながらClaude Codeとやり取りしただけで、バグの原因調査から修正まで持っていけました。ClaudeでもCodexでも、たぶん同じノリでいけると思います。
同じことをやりたい人向けの頼み方
自分は最初この一言を省いて投げて、さっきのバグを一度踏みました。今からやるなら、最初からこう頼みます。
Chromeでスクロールが必要な長いページを開いたとき、
DevToolsの「フルサイズのスクリーンショットをキャプチャ」で
ページ全体を1枚のPNGにできる。ただし毎回コマンド入力で
呼び出す必要があり、面倒。
これをChrome拡張のボタン一つ（またはショートカットキー）で
できるようにしてほしい。DevToolsのその機能と同じ結果になる
方法で実装して。ボタンを押したら、今開いているページ全体を
1枚のPNGにしてダウンロードフォルダに保存する。
Chrome Web Storeには公開しない、自分だけで使う拡張機能でいい。「DevToolsのその機能と同じ結果になる方法で」の一言があると、既製の正解（DevTools自身の実装）に寄せて考えてくれる分、変な近道を選ばれにくくなります。
それでも動きがおかしいページに当たったら、スクショをそのまま貼って一言添えるだけです。
このページで試したらこうなった。[スクショ添付]
原因を調べて直して。この繰り返しで、コードを一行も書かずに直せました。原因の説明も毎回してくれるので、気になったら読む程度で十分です。
今のところ、自分専用でいいかなと思ってます。