なにかしらの検索時にスクリーンショットを撮りたい場合、必要な情報が複数個所で画面表示外になるから１回のスクリーンショットで撮影できない…。で、必要なところまでスクロールしてスクリーンショットを撮影、を繰り返していませんか？

これ、GoogleChromeの標準機能でまるっと１ページ分をスクリーンショット可能な方法があるので紹介します。なお、以前MicrosoftEdgeでのやり方を紹介していますのでMicrosoftEdgeを普段使いの方はこちらをご参照ください。

【手順】

MicrosoftEdgeはだいぶ簡単なのですが、GoogleChromeはちょっと手順が必要です。後半で簡略化する設定も紹介しますので一旦初回としての手順を紹介します。

①スクリーンショットで画像を作成したいページでキーボードの「F12」（ノートPCの場合は「fn」+「F12」）、またはページ内で右クリック→メニューから「検証」を選択

②ページ右側にDevToolsという表示が追加されます。まずは右上の「︙」から一番上の「Dock side」の左端のアイコンをクリックします。こうすることでページからこの部分を分離できます。分離しなくても長いスクリーンショットは可能ですがその場合スクリーンショットで撮影時に細長くなってしまうので分離推奨です。

③分離したウィンドウの右上「︙」から今度は「Run command」をクリックします。※日本語で表示されている場合は「コマンドを実行」となっています。

④ウィンドウ上部に入力が欄が表示されるので英語で表示されている場合は「Cap」日本語の場合は「スクリーンショット」と入力すると候補一覧に英語：「Capture full size screenshot」日本語：「フルサイズのスクリーンショットをキャプチャ」が表示されるのでクリックします。

これで丸っと１ページの画像が作成できます。画像はダウンロードフォルダに保存されるのでそこから必要な加工（必要部分だけトリミング）などを行ってください。なお、スクリーンショット時に範囲指定はGoogleChromeの場合対応していません。

なお、このDevToolsは分離した状態ではほかのウィンドウと同じで右上の×で閉じられます。分離していない状態では「︙」の右隣りにある「×」で閉じられます。

このようにちょっと手間がかかります…。なのでもうちょっと楽にできるよう設定の変更をします。

【簡略化の設定】

やること自体は単純です。③と④をショートカットキーで対応できるようにします。そうするとキーボードの「F12」（ノートPCの場合は「fn」+「F12」）→スクリーンショットのショートカットキーで2回に短縮できます。

（1）③で選択した「Run command」のさらに下にある「Show Shortcuts」（日本語：「ショートカットを表示」）を選択します。

（2）表示された一覧から「Capture full size secreenshot」（日本語「フルサイズのスクリーンショットをキャプチャ」）を探して、マウスカーソルを合わせたときに表示される右端のペンアイコンをクリックします。

（3）「Add a shortcut」をクリックして表示された入力欄をクリックしてからお好みでショートカットに登録したいキーを押してください。画像では「Ctrl」+「Q」で登録しています。
登録が完了したら右の「✓」ボタンをクリックして確定します。

これでショートカットキーの登録は完了です。あとは実際にスクリーンショットで画像を作成してたいページで「F12」から設定したショートカットキーで1ページ分の画像が作成できるかご確認ください。

【おまけ：日本語化】

DevToolsの表記を英語から日本語にする場合はDevTools画面の「︙」左の歯車アイコンをクリックし、Languageを「Browser UI language」変更してブラウザを全て閉じてもう一度開くと日本語化されています。

【まとめ】

MicrosoftEdgeにくらべるとちょっと手間はかかりますがGoogleChromeでもまるっと1ページ分のスクリーンショットは可能です。よろしければご活用ください。