このブログを見ているあなたは、「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を追加」をクリックすると、以下の画像のように、カメラのアイコンが追加されます。
もしカメラのアイコンが表示されなかったら、カメラアイコンの右にある「パズル」のようなアイコンをクリックしてみてください。
すると、以下の画像のように、これまでインストールしてきた拡張機能の一覧を見ることができます。
そして、赤矢印のピンのアイコンをクリックすると、常にパソコンの画面に「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サイト全体をスクリーンショットする【最新版】
