複数URLからスマホサイズのスクリーンショットを一括で撮る方法

PCでブログを作成していてスクリーンショットが欲しくなることがあるかと思います。

スクショを取る方法はいくつかありますが、今回はその中でも

複数のURLのスクショ
スマホで見た時のWeb画面
簡単に撮る

に特化した方法を書いていきます。

URLからスマホサイズのスクリーンショットを一括で撮る方法
1. スクショ実行例
2. 簡単な解説
まとめ

URLからスマホサイズのスクリーンショットを一括で撮る方法

まずはGoogle chromeの最新版をインストールしておきます（最新版じゃなくてもスクショ機能があれば可）。

コマンドプロンプトで下記コードを実行。

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –headless –disable-gpu –hide-scrollbars –window-size=■■サイズ■■ –user-agent=”Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.109 Mobile/15E148 Safari/604.1″ –screenshot=●●保存先＋ファイル名●● ★★URL★★

▼コピペ用

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --hide-scrollbars --window-size=■■サイズ■■ --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.109 Mobile/15E148 Safari/604.1" --screenshot=●●保存先＋ファイル名●● ★★URL★★

これで★★URL★★のスクショが●●保存先＋ファイル名●●で指定したフォルダに、■■サイズ■■の大きさで保存されます。

スクショ実行例

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –headless –disable-gpu –hide-scrollbars –window-size=400,400 –user-agent=”Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.109 Mobile/15E148 Safari/604.1″ –screenshot=%USERPROFILE%\capture_wadanatu.png http://wadanatu.com
“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –headless –disable-gpu –hide-scrollbars –window-size=400,400 –user-agent=”Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.109 Mobile/15E148 Safari/604.1″ –screenshot=%USERPROFILE%\capture_msn.png https://www.msn.com/ja-jp
“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –headless –disable-gpu –hide-scrollbars –window-size=400,400 –user-agent=”Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.109 Mobile/15E148 Safari/604.1″ –screenshot=%USERPROFILE%\capture_yahoo.png https://yahoo.co.jp

▼コピペ用（上記はダブルクォーテーションが全角になってしまうため）

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --hide-scrollbars --window-size=400,400 --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.109 Mobile/15E148 Safari/604.1" --screenshot=%USERPROFILE%\capture_wadanatu.png http://wadanatu.com
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --hide-scrollbars --window-size=400,400 --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.109 Mobile/15E148 Safari/604.1" --screenshot=%USERPROFILE%\capture_msn.png https://www.msn.com/ja-jp
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --hide-scrollbars --window-size=400,400 --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.109 Mobile/15E148 Safari/604.1" --screenshot=%USERPROFILE%\capture_yahoo.png https://yahoo.co.jp

Windows左下のスタートメニューからcmdと入力しコマンドプロンプト（黒い画面）を実行。

上記のサンプルコードを貼り付けてエンターキー。

ユーザーフォルダに３つのキャプチャ（capture_wadanatu.png / capture_msn.png / capture_yahoo.png）が保存されます。

簡単な解説

コマンドの簡単な解説。

別に読まなくても問題はありません。

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”

Chromeがインストールされているパス。

Windows10ならだいたいこのままで問題なし。

–headless –disable-gpu –hide-scrollbars

実行時にchromeを表示しないようにする。

たぶん。

–window-size

chromeのウインドウサイズ（縦 / 横）。

つまりスクリーンショットの画像サイズ。

–user-agent

なんの端末からアクセスしているのかを偽装できる。

スマホで見た時のスクショが欲しい場合は、iPhoneやAndroidのユーザーエージェントを入れておけばＯＫ。

サンプルではiPhoneを指定しています。

単純なレスポンシブサイトなら–window-sizeで横幅が小さくするだけでもスマホ用の画面に切り替わる。

が、そうではないサイト（Yahoo）とかは–user-agentでスマホを明示的に指定してあげないと、PC表示し貸してくれない。

–screenshot

保存先と対象のURLを指定。

Cドライブ直下などはアクセス拒否される可能性が高いので、ユーザープロファイル内やデスクトップ上がおすすめ。

デスクトップの場合⇒　 –screenshot=%USERPROFILE%\Desktop\ファイル名.png

保存できなかった場合にエラーメッセージが出ることはないので注意。

まとめ

スクリーンショットはchromeを使うとかなり便利。

wpのスクリーンショット用プラグインで「Browser Shots」がよく紹介されているが、スマホ用の画面は取れないし何より動作が不安である。

紹介しているブログ記事に参考キャプチャが表示されていないケースが多いｗ

比べるとchromeのほうがかゆいところに手が届く。

「複数のURLからスマホサイズのスクリーンショットを一括で撮る』というのが必要になるのは非常にレアなケースですが、カタログ（データベース）サイトのようなものを作っている方には参考になるかもしれません！