【Google Chrome】縦長のWebページをスクロール分も含めて画面キャプチャ取得する方法

Google Chrome で縦長なWebページを開くと、画面から見切れてしまいスクロールが必要になります。そのような画面で、スクロール分も含めてWebページ全体を画面キャプチャ（スクリーンショット）する方法を解説します。

今回は、Google Chrome の「デベロッパーツール」を使って取得します。

環境／バージョン

Windowsでの一般的なキャプチャ取得は、2種類あります。

試しに、Alt+PrintScreenでSpringフレームワークの画面キャプチャを取得します。（クリップボードに保存されるので、Excel等に貼り付けてみてください。）

このように途中までしか取れません。

では、全て取得する方法を以下で解説します。

以下のいずれかの方法で、デベロッパーツールを開きます。

初期状態であれば、下記の様にブラウザの右側にソースコードのような画面が開きます。（一度デベロッパーツールを開いて何かしらの処理をした場合、表示が異なることがあります。）

では、キャプチャを取得しましょう。

Webページ全体の画面キャプチャは、下記の方法で取得できます。

以降で、それぞれ解説します。（以下は、対象画面でデベロッパーツールを開いた状態から解説を続けます。）

マウス操作での取得方法を解説します。

表示されたデベロッパーツールの左上部にある、左から２つめのアイコンをクリックすると、左側のサイトの表示が少し変わり、上段にいくつかの情報とアイコンが表示されます。

左側に表示された部分の右端のアイコン（三点リーダー）をクリックしメニュー>「Capture full size screenshot」をクリックすると、画面キャプチャが実行されます。

画面キャプチャが完了すると、ブラウザ下部に下記が表示されます。これはPCのダウンロードフォルダにファイルが保存されたことを伝える通知です。

ショートカットキーとコマンド発行での取得方法を解説します。

Ctrl+Shift+pを押下すると、下記の様に、画面右のデベロッパーツール側のコマンド画面が表示されます。

コマンド入力欄にカーソルがあるので、そのまま “capture” と入力すると、いくつかコマンドが表示されるので、「Capture full size screenshot」を選択（マウスクリックでもキー操作のいずれでも可）すると、画面キャプチャが実行されます。

画面キャプチャが完了すると、マウスで取得した場合と同様、ブラウザ下部に下記が表示されます。

お疲れさまでした！

以上で、解説は終了です。取得した画面キャプチャは、ダウンロードフォルダに保存されており、ツールの「フォト」や「ペイント3D」での編集も可能なので、是非試してみてください。

記事内の分かりにくい部分や誤り等は、コメントでご連絡ください。また、別記事のご要望や質問、Web制作のご依頼も大歓迎ですので、お問い合わせフォームまたはTwitterのダイレクトメッセージでご連絡ください。