【簡単】WEBサイト全体をスクリーンショットする方法【最新版】

WEB制作ツール

このブログを見ているあなたは、「WEBサイトの全体をスクリーンショット出来ない!」と悩んでいませんか?

 

「自分のブログにWEBサイトの全体をスクリーンショットした画像を貼りたいな!」

「パソコン・スマホごとのスクリーンショットの撮り方を知りたい!」

 

と考えている人に向けて、今回は【簡単】WEBサイト全体をスクリーンショットする方法【最新版】を紹介したいと思います!

 

この記事を書いている僕は、過去に書いたWEB制作の実績の紹介【CHABOTTON】で、これから紹介する方法を使って、スクリーンショットした画像を使いました。

今回のブログを見ることで、あなたはパソコン・スマホごとの全体のスクリーンショットをすることができるようになります!

 

以下の2ステップを踏めば、誰でもできるようになりますよ!

① 拡張機能「GoFullPage – Full Page Screen Capture」をインストール

② ChromeでWEBサイト全体をスクリーンショットする【最新版】

 

スクリーンショットができるようになると、あなたは友達にWEBサイトの全体図を共有できたり、自身のブログにも画像を貼ることができますよ!

3分あれば終わるので、是非お付き合いくださいませ〜!

 

① 拡張機能「GoFullPage – Full Page Screen Capture」をインストール

スクリーンショットをする前に、Google Chromeの拡張機能である「GoFullPage – Full Page Screen Capture」をインストールしましょう!

 

まずは「GoFullPage – Full Page Screen Capture」のサイトに入ります!

上記の水色のURLをクリックして、中に入ると以下のような画像になるはず。

そして、赤矢印の「Chromeに追加」をクリックしてください!

※ 先に拡張機能をインストールしているので、「Chromeから削除します」の表記になっています。インストールしていない人は、「Chromeに追加」のボタンがあります。

 

「Chromeを追加」をクリックすると、以下の画像のように、カメラのアイコンが追加されます。

 

 

 

もしカメラのアイコンが表示されなかったら、カメラアイコンの右にある「パズル」のようなアイコンをクリックしてみてください。

 

 

すると、以下の画像のように、これまでインストールしてきた拡張機能の一覧を見ることができます。

 

そして、赤矢印のピンのアイコンをクリックすると、常にパソコンの画面に「GoFullPage – Full Page Screen Capture」の拡張機能が表示されるようになります!

 

 

これで「GoFullPage – Full Page Screen Capture」の拡張機能のインストールは終了です!

 

② ChromeでWEBサイト全体をスクリーンショットする【最新版】

次は、先ほどインストールした「GoFullPage – Full Page Screen Capture」を使って、WEBサイト全体をスクリーンショットしていきましょう!

 

以下の2つのデバイスごとに、スクリーンショットをする方法を紹介していきます〜。

・デスクトップ・ラップトップ

・モバイル

 

デスクトップ・ラップトップの全体画像をスクリーンショットする方法

まずはデスクトップ・ラップトップでのスクリーンショットの撮り方を紹介します!

 

最初に、あなたがスクリーンショットしたいWEBサイトを開いてください。

今回は、僕のブログサイトを例に解説していきますね!

 

 

WEBサイトを開いた状態で、先ほどインストールした「GoFullPage – Full Page Screen Capture」のアイコンをクリック!

 

クリックすると、以下の画像のように読み込みがスタートします。

 

読み込みが完了すると、スクリーンショットした全体画像が表示されますよ!

 

そしてスクリーンショットを保存する前に、赤矢印の設定のボタンをクリック!

 

すると、このような設定画面が開きます。

色々と項目がありますが、変更する部分は「Image format」だけで大丈夫!

 

「Image format」では、「jpeg」か「png」のどちらかの拡張子を選ぶことができます。

※ 「jpeg」の方が「png」より画像ファイルが軽くなるので、基本「jpg」を選んでおけばOK!

 

そして以下の画像の赤矢印の部分をクリックしたら、スクリーンショットをした画像を保存することができますよ!

 

今回スクリーンショットをした全体画像がこちらになります。

 

これで、デスクトップ・ラップトップの全体画像をスクリーンショットする方法は完了です!

 

モバイル表示の全体画像をスクリーンショットする方法

次は、モバイル表示の全体画像をスクリーンショットする方法について紹介します!

 

まずはスクリーンショットを撮りたいWEBサイトを開きましょう。

今回も僕のブログサイトを例に解説していきます!

 

WEBサイトを開いたら、モバイル表示にする作業をします。

MacとWindowsでモバイル表示のやり方が変わってくるので、以下を参考にしてください!

【1】Win Ctrl+Shift+I / Mac command+option+I

【2】Win Ctrl+Shift+M / Mac command+shift+M

 

僕のブログサイトはモバイルだと、以下のように表示されます。

 

このページを開いた状態で、パソコン画面の右上にあるカメラのアイコンをクリック!

 

すると、モバイル表示でのスクリーンショットができました!

 

あとは、赤矢印の保存のボタンをクリックすると、モバイル表示のスクリーンショット画像が保存されますよ!

 

今回スクリーンショットした画像はこちらになります。

 

これで、モバイル表示でのスクリーンショットの撮り方も完了しました!

 

まとめ

無事スクリーンショットをすることが出来たでしょうか?

今回のブログが役に立てれば嬉しいです!

 

最後にもう一度スクリーンショットをする手順を貼っていきますね。

① 拡張機能「GoFullPage – Full Page Screen Capture」をインストール

② ChromeでWEBサイト全体をスクリーンショットする【最新版】