Webサイトの画面全体をキャプチャしたい場面は意外と多いです。レポート作成、バグ報告、デザインの参考資料保存など、様々なシーンで役立ちます。
この記事では、Google Chromeを使ってページ全体を簡単にキャプチャする方法をご紹介します。
1. ブラウザの標準機能を使う方法
Chromeには開発者ツールを使った便利なキャプチャ機能が搭載されています。拡張機能なしで利用できるのが大きな魅力です。
手順1：デベロッパーツールを開く
キャプチャしたいWebページを表示した状態で、以下のいずれかの方法でデベロッパーツールを開きます。
- Windowsの場合
F12キー(ノートPCの場合はFn + F12) - Macの場合
Command + Option + I - 右クリックから
Webページ上で右クリックして「検証」を選択
手順2：スクリーンショットコマンドを実行する
デベロッパーツールが開いたら、以下のいずれかの方法でスクリーンショットを撮影します。
方法A：キーボードショートカット
Ctrl + Shift + P(Mac:Cmd + Shift + P)でコマンドパレットを開く- 「screenshot」または「スクリーンショット」と入力
- 以下のいずれかを選択
- Capture full size screenshot – ページ全体をキャプチャ
- Capture screenshot – 表示領域のみをキャプチャ
- Capture node screenshot – 選択した要素のみをキャプチャ
方法B：メニューから選択
- デベロッパーツールの縦三点アイコン(⋮)をクリック
- 「Run command」(コマンドを実行)をクリック
- 「Capture full size screenshot」を選択
キャプチャが完了すると、自動的にダウンロードフォルダに保存されます。
Webページによっては、一度画面を下までスクロールしないと全体が読み込まれず、キャプチャできない場合があります。その場合は、ページ下部までスクロールしてからキャプチャしてみてください。
スマホサイズでのスクリーンショットも可能
デベロッパーツールのツールバー左側にある「Toggle device toolbar」(デバイスアイコン)をクリックすることで、スマホのスクリーンサイズに切り替えることができます。
スマホでの表示確認や、モバイル版のキャプチャが必要な場合に便利です。
2. 拡張ツールを使う方法
より手軽にキャプチャしたい場合は、Chrome拡張機能の利用もおすすめです。
GoFullPage – Full Page Screen Capture
余分な権限を要求することなく、現在のページのスクリーンショットを完全に確実にキャプチャできる拡張機能です。
ワンクリックでページ全体をキャプチャできるため、頻繁に使う方には便利です。
キャプチャ時のコツと注意点
キャプチャする前に
- ページ全体をスクロール
動的に読み込まれるコンテンツを確実にキャプチャするため、一度最下部までスクロールしておきます。 - ポップアップを閉じる
不要なポップアップやクッキー同意バナーは事前に閉じておくと、きれいなキャプチャが撮れます。 - ブラウザのズームをリセット
100%表示に戻しておくと、意図した解像度でキャプチャできます。
保存後の確認事項
- 著作権
キャプチャした画像の使用目的と著作権に注意してください。 - 個人情報の保護
個人情報が写り込んでいないか必ず確認します。 - 解像度の確認
用途に応じて適切な解像度を選択してください。 - ファイルサイズ
長いページは大きなファイルサイズになる可能性があります。
まとめ
Webサイトの画面全体をキャプチャする方法は多様です。
日常的な利用であれば、Chromeの標準機能で十分対応できます。開発者ツールを使った方法は、拡張機能のインストールが不要で、すぐに使えるのが大きなメリットです。
頻繁に使う場合や、より手軽に操作したい場合は専用の拡張ツールも便利です。
