WEBサイトの制作や、保守業務などをしているとサイトのスクリーンショットを必要とする機会がよくあります。

MacやWindowsのキーボードからスクリーンショットを保存することが可能ですが、
そちらでスクリーンショットを撮ると見えている画面分しか保存することができません。

たまにサイト全体のヘッダー部分からフッター部分までの全てをスクリーンショットしたいなとい思うことがあると思います。
実際私もお客様からサイト全体をスクリーンショットで保存できないのか聞かれたことがあります。

今回は、Google Chromeを使用して、簡単に拡張機能などを使用せずにサイト全体のスクリーンショットを保存する方法をお教えいたします。

Windowsの場合

お使いのパソコンがWindowsの場合は、

1. スクリーンショットを撮りたいサイトの上でCtrlキー+Shiftキー+Iキーを押します。
2. デベロッパーツールが開きます。
3. デベロッパーツールが開いた状態でCtrlキー+Shiftキー+Pキーを押します。
4. 入力欄が出てくるので、「full」と入力します。
5. スクリーンショットの機能が表示されるのでそのままEnterキーを押します。
6. しばらく待つと保存できます。

Macの場合

お使いのパソコンがMacの場合は、

1. スクリーンショットを撮りたいサイトの上でcommandキー+optionキー+Iキーを押します。
2. デベロッパーツールが開きます。
3. デベロッパーツールが開いた状態でcommandキー+Shiftキー+Pキーを押します。
4. 入力欄が出てくるので、「full」と入力します。
5. スクリーンショットの機能が表示されるのでそのままreturnキーを押します。
6. しばらく待つと保存できます。

文字だけでは分かりにくい部分もあるかと思いますので、弊社のサイトで実際にスクリーンショットをしてみます。

下の画像のようにサイト全体をスクリーンショットすることができます。

結構必要な場面が出てくると思うので、ぜひ活用してみてください。