こんにちは、ダニエルです。
今回は下記のお悩みについて取り上げます。
webページのスクリーンショットをページ全体でまるごと撮りたいな。簡単便利に撮れる方法が知りたい。
ページ全体のスクリーンショットを取得する場合、パソコンに最初から備わった機能だけで取得する方法もあります。しかし、これがなかなか分かりにくいです。
あえて難しい道を進む必要はないので、今回はGoogle Chromeと拡張機能（Awesome Screenshot）を使ったとてもシンプルで手っ取り早い方法をご紹介します。
フリーランスのWebデザイナー4年目です。大手スクールでWebトレーナーとして受講生サポートもしており、Web分野を得意としてます。
全世界で約7割くらいのシェア率を誇るウェブブラウザのこと。下記をご覧ください。
- Google Chrome → シェア率は約65%
- Microsoft Edge → シェア率は約20％
- Mozilla Firefox → シェア率は約6％
- Safari → シェア率は約6％
上記のとおりで、世界の半分以上の人はGoogle Chromeを選んでいます。それだけ優れたウェブブラウザと言えます。また、Google Chromeには便利な拡張機能がたくさんありまして、今回のスクショツール（Awesome Screenshot）もその1つです。
「まだGoogle Chromeを一度も使ったことないよ！」って方も、ぜひこの機会に導入してみてください。
ということで、この記事ではGoogle Chromeが必要になります。パソコンに入っていない方は下記記事を参考に導入してみてください。
Contents
Webページの画面全体をスクリーンショットで取得する方法
結論、Awesome Screenshotを使おう。
使う理由は、安全かつ難しくないからです。
拡張機能はセキュリティ面が心配・・・といった声が上がることもあります。しかし、私個人も4年ほど使い続けましたが何の問題も起こっていません。
また、アプリ実績は下記のとおり。
3,000,000 ユーザーが使用。
29,000件のレビューで、5点満点で4.7。
上記の理由から、セキュリティ面もユーザー満足度も問題ないと言えます。
では、具体的な手順を見ていきましょう。
- ステップ①：Awesome Screenshotをインストールする
- ステップ②：スクショを撮りたいWebページを開く
- ステップ③：Awesome Screenshotを実行する
- ステップ④：スクショを編集画面にて保存する
順番に詳しくご説明します。
ステップ①：Awesome Screenshotをインストールする
下記のリンクを開いてください。
» Awesome ScreenshotのChromeウェブストアを開く
「Chromeに追加」ボタン（青いボタン）を押します。
「次の権限にアクセス可能」画面が出てきますので、「拡張機能を追加」を押します。
これで導入完了です。簡単ですね。
導入完了と同時に別タブでSign in（サインイン）画面が開きますが、これはタブごと×で閉じてOKです。
Awesome Screenshotのクラウドサービスの案内みたいなのですが、不要ですので。
※このようなおせっかい案内をしてくるツールではあるのですが、決して悪質なツールではなく、ちゃんと良質なツールですのでご安心ください。
画面右上のパズルマークを押します。
この並びに先ほどのアイコンが表示されてれば問題なしです。
ピン留めマークを押すことで、拡張機能を常に表示することができます。
便利なので、固定しておきましょう。
ステップ②：スクショを撮りたいWebページを開く
スクリーンショットを取得したいページをChromeで表示します。
私の方では、例として下記サイトを開いてみます。
» TALENT LIFEのウェブページ
これで準備が整いました。
いよいよスクリーンショットを取得していきます。
ステップ③：Awesome Screenshotを実行する
Awesome Screenshotのアイコンをクリックします。
「レコードタブ」と「キャプチャタブ」があります。
それぞれのタブの違いをざっくり解説すると、
- レコードタブ・・・画面の動画撮影用
- キャプチャタブ・・・画面の写真撮影用
上記のとおりです。
動画撮影も便利ですが、今回はスクショを撮っていきます。
「キャプチャタブ」に切り替えます。
「フルページ」を押します。
するとスクショが自動的に開始されます。
※画面が自動で動いてる間はマウスカーソルを動かさないでください。カーソルも一緒に撮られてしまいます。
ステップ④：スクショを編集画面にて保存する
スクショの自動撮影が完了するとタブが開きます。下図のウィンドウが出てきたら「Got it」を押してください。
ちなみに、ここで出てきた英文の日本語訳は次のとおりです。
（日本語訳）拡張機能の「Options」に移動すると、スクリーンショットを自動的にパソコンに保存できます。
つまり上記は機能紹介です。
初回起動時に出てくるみたいですが、お好みで設定しても良いかと。
トリミングなどの編集がこの画面でできますが、あまり使いませんね。
そのまま画面右上の「Done」を押します。
保存ページに変わります。
「Download」ボタンを押して、画像をダウンロードしましょう。
初めてダウンロードする場合、以下のポップアップが出てくる場合がありますので、「許可」をクリックしてください。
これでWebサイトのスクリーンショットを取得することができました。お疲れ様でした。
いくつか補足がございまして、下記にて記述します。
サイトの高さが長すぎた場合、編集画面が省略されます。
2つの画像に分割されますので、「Download all 2 images」ボタンを押してダウンロードしてください。
基本無料でバシバシ使えます。レコード（動画収録）したい場合、無料版は時間制限付き＆サインインしないと使えません。
デベロッパーツール（検証機能）と一緒に使う。
理由→様々なサイズで取得可能になる。
Webページ全体のスクショをするときに知っておくべきこと
３点あります。
- スクショできない場合に考えられること
- こんなサイトはスクショが上手くできないよ
- Figmaで使う場合の注意
順番にご説明いたします。
スクショできない場合に考えられること
主にWebデザイナーさん向けの内容です。Awesome Screenshot無料版が撮影できない条件があります。それが、
Webサイトとしてサーバーアップを経て公開されていないページ（＝ローカルファイル）は、スクショはできません。
つまり、パソコンの中にあるファイルをブラウザで表示しようとしている場合には、無料版だとスクショが撮れません。
これはChromeで問題なく表示されていても、ローカルファイルとして扱われ、課金しないと撮れなくなるのでした。
ローカルファイルの見分け方は下記のとおりです。
- ブラウザ表示時に、URL欄に「ファイル」と表示されている。
- ブラウザ表示時に、URL欄に「file:///」と表示されている。
上記の状態でしたら、それはローカルファイルです。
結論、Visual Studio Codeの拡張プラグイン「Live Server」を使うことで解決できます。
Live Serverとは、パソコン内に仮想的なサーバーを用意してサイト表示の確認ができるプラグインのこと。今回はこの程度に留めておきますが、興味がある方は調べてみて下さい。
こんなサイトはスクショが上手くできないよ
- 動きの激しいアニメーション
- パララックス（視差効果）
- 動画
1つずつ解説します。
アニメーションでもフェードイン程度だったら撮れる場合も多いです。しかし、あまりにも激しいアニメーションが盛り込まれたWebサイトだと、スクリーンショットは難しくなってしまいます。
パララックスとは、画像に奥行きを持たせることができる効果の1つです。こちらもアニメーションの一種ですが、実装されている場合、スクショ取得時に表示が崩れてしまいます。
言うまでもなく、動画の埋め込まれたサイトも上手くスクショ取得できません。
Figmaで使う場合の注意
こちらはWebデザイン初心者向けの内容です。Webサイトの観察やトレースなど行う場合、Figmaを使うと非常に便利なのでオススメです。
しかし、Figmaにスクショ画像を取り込む場合には注意が必要です。
Figmaのルールとして、大きさな画像の場合自動的にリサイズされます。
リサイズされると解像度が残念なガビガビ画像になってしまいます。
リサイズを回避して貼り付ける方法
プラグイン「Insert Big Image」を使います。
アクションボタンをクリックする。
プラグインとウィジェットタブを開く。
検索バーに「Insert Big Image」と入力する。
黄色いアイコンが出てきます。
実行する。
プラグインのウィンドウに画像をドラッグするか、青いボタンからファイルを選びます。
リサイズされることなくオリジナルサイズで画像を貼り付けられます。
比率を変えよう。
今回は以上です。
ぜひ、スクリーンショットを駆使してみてください。
