Chromeでフルサイズのウェブページのスクロールスクリーンショットをキャプチャする
Google Chromeブラウザには、ウェブページのフルサイズのスクリーンショットをキャプチャする方法が2つあります。開発者、デザイナー、編集者、マネージャー、ライター、アナリストなど、ウェブ関連のあらゆる仕事に携わる多くのウェブワーカーにとって、これは必要不可欠、あるいは便利な機能です。
Chromeでフルサイズのウェブページのスクリーンショットをキャプチャする方法を解説しますが、Mac、Windows、Linux、Chromebookなど、デスクトップレベルのデバイスであればChromeのフルバージョンが必要です。Chromeに内蔵されている開発者ツールを使用するため、プラグインは必要ありません。
なお、ここではデスクトップ版のChromeブラウザについて説明しています。必要であれば、またはお好みであれば、Firefox、MacのSafari、iPhoneとiPadのSafariでもページ全体のスクリーンショットを撮ることができます。
Chromeでフルサイズのスクロールスクリーンショットを撮る方法
Chromeでウェブページのフルサイズのスクリーンショットを撮りたいですか？手順は次のとおりです。
- Chrome デベロッパー ツールを開きます (表示 > デベロッパー > デベロッパー ツール)
- 開発者ツールドロワーのレスポンシブデザインモードボタンをクリックします。
- すべての画像が読み込まれるように、Web ページ全体を下にスクロールします (これは、Web ページの高速化に使用される一般的な手法である遅延読み込み画像をキャプチャするために重要です)*
- レスポンシブデザインツールの右上隅にある縦に並んだ3つの点をクリックし、「フルサイズのスクリーンショットをキャプチャ」を選択します。
- フルサイズのスクリーンショットはChromeのデフォルトのダウンロードフォルダに表示されます。
Mac では、手動で変更しない限り、ユーザー ダウンロードで Web ページのフルサイズのスクリーンショットが見つかります。
キャプチャされたスクリーンショットのサイズは、レスポンシブモードで選択したデバイスによって異なります。例えば、iPad Airでosxdaily.comのホームページのスクロールスクリーンショットをフルサイズで撮影した場合、スクリーンショットのサイズは約2084 × 16439ピクセルになります。ページや
* Web ページ全体をスクロールしないと、遅延読み込みされた画像はスクリーンショットにキャプチャされず、ページ全体のスクリーンショットが不完全になり、ユーザーがページ上で見る内容を反映しなくなります。
Chromeコンソールでフルページスクリーンショットをキャプチャする
Chromeでフルページのスクリーンショットを撮るもう一つの方法は、開発者コンソールの「実行」コマンドを使い、「スクリーンショット」と入力し、表示されるオプションから「フルサイズのスクリーンショットをキャプチャ」を選択することです。この操作を行う前に、必ずウェブページ全体をスクロールしてください*。
これは一部のユーザーにとってはより良いオプションかもしれませんが、コマンドラインにあまり慣れていないユーザーにとっては少し複雑です。
Chromeでこれらの方法は、Mac版Safariのデベロッパーツールで利用できるものよりも簡単ですか？それとも、MacでFirefoxを使ってウェブページ全体のスクリーンショットを撮る超簡単な方法でしょうか？それとも、iPhoneやiPadを使ってウェブページ全体のスクリーンショットを撮る、さらに簡単な方法でしょうか？それはあなた次第です。また、あなたが最もよく使うブラウザや、それぞれのブラウザの習熟度にも左右されるでしょう。
