Google Chromeを使って、ウェブサイト全体のスクリーンショットを撮影する方法があります。特別な拡張機能は必要ありません。
Chromeのデベロッパーツールでウェブサイト全体のスクリーンショットを撮影
Google Chromeを使ってウェブサイト全体のスクリーンショットを簡単に撮影することができます。特別な拡張機能は必要ないので、覚えておくと役立つ便利なテクニックです。
スクリーンショットを撮影したいウェブサイトで「デベロッパーツール」を開きます。
「デベロッパーツール」の開き方
- 右クリックメニューの「検証」
- メニューバーの「表示 ＞ 開発/管理 ＞ デベロッパーツール」
- Macのキーボードショートカット「Command + option + I」
- Windowsのキーボードショートカット「Control + Shift + I」
デベロッパーツールを開いた状態で「Run command」を選択します。
「Run command」の開き方
- デベロッパーツールのメニューから「Run command」を選択
- Macのキーボードショートカット「Command + Shift + P」
- Windowsのキーボードショートカット「Control + Shift + P」
コマンドに「Caputure full size screenshots」と入力します。ある程度のワードを入力すると該当するコマンドをサジェスト(予測入力)してくれるので、「full」と入力すると一発で表示できます。
「Caputure full size screenshots」を入力して、Enterキーを押すとスクリーンショット撮影が開始され、画像ファイルとして保存されます。
スマートフォン表示にした状態のウェブサイト全体のスクリーンショットも撮影可能
デベロッパーツールでiPhoneやiPadなど、スマートフォン表示をエミュレートすることで、スマートフォン表示のウェブサイト全体をスクリーンショットすることもできます。
デベロッパーツールからエミュレートしたいデバイスに変更した後、ページの更新(リロード)が必要です。レスポンシブサイトの場合も同様に表示サイズを変更することで、スクリーンショットを撮影できます。