ブログ ブログツール

WEBページ画面全体をキャプチャする方法【Awesome Screenshotの使い方】

困ってる人
●WEBページ全体の画像をキャプチャして貼り付けたいけどやり方がわからない。

●画面枠内に入りきらないページのスクリーンショットをする方法があるなら教えてほしいな。

 

今回はこのようなお悩みにお答えします。

 

こんな方におすすめ

  • WEBページ全体のスクリーンショットをする方法が知りたい方
  • ブログ・サイト運営初心者
  • 5分程度でささっと手順を知りたい方

 

本記事の信頼性

当サイトでも本記事で紹介する方法を用いて、簡単に画面キャプチャしています。画像を使って丁寧に解説できます。

 

ブログやサイト運営をしていて、画像を貼り付けたい。

 

でもプリントスクリーンだと画面全体が入りきらずほしい部分の画像がキャプチャできない。。ブログを始めた当初僕自身こんな状態でした。

 

今回は、簡単にWEBページ全体の画面キャプチャをする方法について紹介します。

 

本記事を読めば5分程度で簡単に画面全体をキャプチャする方法がわかるので、ぜひ最後までご覧ください

 

WEBページ全体のキャプチャ画像

 

上記画像のようにページ全体を簡単にスクリーンショットできるので、参考にしてみて下さい。

 

それではさっそく始めていきます。

 

 

まずはGoogle chrome拡張機能を使用する【Awesome Screenshotを追加する】

まずはGoogle chrome拡張機能を使用する【Awesome Screenshotを追加する】

 

それでは早速、WEBページ画面全体をキャプチャする方法について解説していきます。

 

まず始めに画面全体のキャプチャ、スクリーンショットをするためにはGoogle chromeの拡張機能が必要です。

 

『Awesome Screenshot』というGoogleクロームの無料拡張機能をまずは追加しましょう。

 

こちらから公式ページに移れます。

>>Awesome Screenshot公式ページにアクセス

 

Awesome Screenshotの追加画面

 

リンクから上記画像のようなページに移ります。

 

まだAwesome Screenshotを追加してない方は、赤枠部分が『chromeを追加する』になっているので、クリックして拡張機能に追加しましょう。

 

Google chrome拡張機能はAwesome Screenshot以外にも便利なものはたくさんあります。

 

chromeの追加方法や他の便利な拡張機能について知りたいという方は、ブログ運営・競合分析に便利なGoogle chrome拡張機能6選【無料】を参考にしてみて下さい。

 

WEBページ画面全体をキャプチャする方法【Awesome Screenshotの使い方を解説】

WEBページ画面全体をキャプチャする方法【Awesome Screenshotの使い方を解説】

 

Google クロームにAwesome Screenshotを追加できれば、後は簡単に画面キャプチャすることができます。

 

下記4つの手順でご説明します。

 

画面全体をスクリーンショットする手順4つ

  • ①Google chromeを開いてAwesome Screenshotのアイコンをクリックする
  • ②画面キャプチャの『フルページ』を選択する
  • ③キャプチャ画面を編集する
  • ④画像をダウンロードして保存する

 

1つずつ見ていきましょう。

 

①Google chromeを開いてAwesome Screenshotのアイコンをクリックする

 

まずはGoogleクロームで画面全体をスクリーンショットしたいサイトを表示させます。

 

その画面上でAwesome Screenshotのアイコンをクリックしましょう。

 

Googleクローム Awesome Screenshotのアイコン

 

画面右上の赤枠部分ですね。クリックすれば次に進みます。

 

②画面キャプチャの『フルページ』を選択する

 

アイコンをクリックすると下記画像のようにレコードとキャプチャがそれぞれ表示されます。

 

レコード、キャプチャ選択画面

 

レコードは画面録画の際に使える項目になります。手順などを動画で残したいときはレコードを使えばOKです。

 

今回は『キャプチャ』を選択して、フルページをクリックします。

 

③キャプチャ画面を編集する

 

フルページをクリックすると表示している画面全体のスクリーンショットが始まります。

 

完了すると下記画面のように表示されます。

 

Awesome Screenshotフルページスクリーンショットの画面

 

このページ上で画像のトリミングや文字を追加したりなど編集を行えます。

お好みで画像の編集を行いましょう。

 

編集が完了すれば、画面右上の『完了』をクリックしましょう。

 

④画像をダウンロードして保存する

 

完了をクリックすると下記画面に移ります。

 

Awesome Screenshot:スクリーンショット画面編集後

 

後は赤枠内をクリックし『画像としてダウンロード』をして、画像を保存すれば完了です。

 

フルページのスクリーンショットが保存できたので、WordPressを使ってる方は、画像をアップロードすれば簡単に挿入できます。

 

例:WEBページ全体の画面キャプチャ

 

こんな感じですね。5分程度あれば、完了できるので実践してみて下さい。

 

 

まとめ:WEBページ全体をスクリーンショットして見やすい記事作成をしよう

まとめ:WEBページ全体をスクリーンショットして見やすい記事作成をしよう

今回はWEBページ全体の画面キャプチャをする方法について紹介しました。

 

手順紹介の記事や、縦長の画像を使う際に画面全体をキャプチャできるのは非常に便利です。

 

まだ使ってない方は、無料で使えるので導入して損はありません。

 

この機会に導入しておきましょう。

 

本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。

 

それでは本日はこの辺りで。

 

 

-ブログ, ブログツール