Chromeでウェブサイト全体のスクリーンショットを撮影する方法、拡張機能は必要なし

Chromeでウェブサイト全体のスクリーンショットを撮影する方法、拡張機能は必要なし

101

Google Chromeを使って、ウェブサイト全体のスクリーンショットを撮影する方法があります。特別な拡張機能は必要ありません。

Chromeのデベロッパーツールでウェブサイト全体のスクリーンショットを撮影

mac-book

Google Chromeを使ってウェブサイト全体のスクリーンショットを簡単に撮影することができます。特別な拡張機能は必要ないので、覚えておくと役立つ便利なテクニックです。

スクリーンショットを撮影したいウェブサイトで「デベロッパーツール」を開きます。

chrome-screenshots
Chromeでデベロッパーツールを開いた状態

「デベロッパーツール」の開き方

  • 右クリックメニューの「検証」
  • メニューバーの「表示 > 開発/管理 > デベロッパーツール」
  • Macのキーボードショートカット「Command + option + I」
  • Windowsのキーボードショートカット「Control + Shift + I」

デベロッパーツールを開いた状態で「Run command」を選択します。

chrome-screenshots-1
「Run command」を選択

「Run command」の開き方

  • デベロッパーツールのメニューから「Run command」を選択
  • Macのキーボードショートカット「Command + Shift + P」
  • Windowsのキーボードショートカット「Control + Shift + P」

コマンドに「Caputure full size screenshots」と入力します。ある程度のワードを入力すると該当するコマンドをサジェスト(予測入力)してくれるので、「full」と入力すると一発で表示できます。

chrome-screenshots-2
「Capture full size screenshots」を選択

「Caputure full size screenshots」を入力して、Enterキーを押すとスクリーンショット撮影が開始され、画像ファイルとして保存されます。

スマートフォン表示にした状態のウェブサイト全体のスクリーンショットも撮影可能

デベロッパーツールでiPhoneやiPadなど、スマートフォン表示をエミュレートすることで、スマートフォン表示のウェブサイト全体をスクリーンショットすることもできます。

chrome-screenshots-3
エミュレートすればスマホサイトのスクショも可能

デベロッパーツールからエミュレートしたいデバイスに変更した後、ページの更新(リロード)が必要です。レスポンシブサイトの場合も同様に表示サイズを変更することで、スクリーンショットを撮影できます。