更新日:
【お役立ち情報】 Full Page Screen Captureを使いこなそう！
Webデザイナーとサイトイメージを共有したり、ポートフォリオを公開する時に便利！Webページ全体のスクリーンショット画像を撮影できるGoogle Chromeアドオン「Full Page Screen Capture」をご紹介します。
Full Page Screen Captureは、上の動画のように、アイコンをクリックするだけでWebページ全体のスクリーンショット画像を簡単に撮影できる便利なツールです。
Full Page Screen Captureの特徴
スクリーンショットを撮影するツールには様々なものがありますが、Full Page Screen Captureの特徴について説明します。
操作やダウンロードが簡単
Full Page Screen Captureは、ブラウザ上のアイコンをクリックするだけでスクリーンショットを取れるので操作が簡単。また、インストールもGoogle Chromeのストアから追加するだけなので簡単です。
広告なしで利用できる
無料のスクリーンショットアプリやアドオンには、広告が表示されるものもありますが、Full Page Screen Captureは広告が表示されません。
頻繁に利用するツールで広告表示があると、けっこうなストレスになり得るので、こうした点も利用しやすいポイントです。
Full Page Screen Captureのインスートル方法
それでは、Full Page Screen Captureのインストール方法を確認していきましょう。
Googleアドオンのインストール方法
Full Page Screen CaptureはGoogle Chromeのアドオン（add-on：ソフトウェアに後から追加することができる拡張機能プログラムのこと）です。使い慣れている人にはおさらいになりますが、下記にアドオンのインストール方法を説明します。
Google ChromeでGoogleウェブストアを開く
追加したい機能拡張を検索して選択し『Chromeに追加』をクリックする
ポップアップで表示される『機能拡張に追加』をクリックする
アドオンのページの右上に表示される『Chromeから削除します』というアンインストールボタンが表示されていれば、インストール完了です。
- Google ChromeでGoogleウェブストアを開く
- 追加したい機能拡張を検索して選択し『Chromeに追加』をクリックする
- ポップアップで表示される『機能拡張に追加』をクリックする
- 『Chromeから削除します』というボタンが表示されていればインストール完了。
Full Page Screen Captureの使用方法
Full Page Screen Captureは操作方法も簡単で、アイコンをクリックするだけでスクリーンショット画像が撮影できます。
Webページ全体のキャプチャー
まず、スクリーンショットを撮影したいWebページにアクセスします。ブラウザの右上にあるFull Page Screen Captureのアイコンをクリックします。Webページ全体のキャプチャー画像が取得が終わると、メニュー画面が表示されます。
下記の動画を見てわかるように、パックマンのようなマークが「・・・・・・・」を食べ終えると、Webページ全体の撮影が完了します。
スマーフォトンでの画像をキャプチャしたい場合
Google Chromeディベロッパーツールを使えば、スマートフォンなどのモバイル端末の表示画面をスクリーンショットすることもできます。
1.ブラウザの右上にある「︙」マークから、「その他のツール」→「デベロッパーツール」を選択します。
2.デベロッパーツールのコンソール画面左上にある、端末別の表示設定を選択できるアイコンをクリックします。
3.スマーフォトンで表示されるレイアウトでページ全体をスクリーンショットすることができました。
ダウンロードする画像の形式について
Full Page Screen Captureのアイコンをクリックしてスクリーンショットが完了すると操作画面が表示されます。この画面の右上に各機能のアイコンが表示されています。左から「編集する」「問題を報告する」「イメージを削除」「PDFで保存」「画像で保存」「履歴」「オプション」のボタンになります。
スクリーンショットをPDFで保存したい場合は「PDFで保存」のアイコンを、画像のファイルでで保存したい場合は「画像で保存」のアイコンをクリックします。画像のファイル形式はpngとjpgから選択可能です。初期設定ではpngになっています。
編集方法
Full Page Screen Captureでは、撮影したスクリーンショット画像に簡単な編集を加えることもできます。「編集する」のアイコンを押すと、下の画像のような編集画面になります。
下の動画のように「丸枠や四角枠で囲む」「矢印を入れる」「テキストで説明や指示を加える」といった簡単な編集しかできませんが、編集用のツールを別途起動させなくても、Full Page Screen Capture内で編集作業が行えるのは便利ですね。
履歴の使い方
Full Page Screen Captureは、下図のようにキャプチャー画像の履歴が残ります。以前取得したキャプチャー画像を再度ダウンロードしたい場合など、非常に便利な機能になっています。
オプションの設定
「オプション」のアイコンをクリックすると、PDFのサイズ、自動ダウンロードなど細かな設定を行えます。下の動画のように「オプション」のアイコンをクリックすると設定画面に移行します。
以下がオプション設定の詳細になります。
Capture
| Image format | 画像のフォーマット形式をプルダウンメニューから選択できます。形式はpngとjpgがあります |
|---|
Download
| Directory | ディレクトリを設定することで、スクリーンショット画像の保存先を設定できます。 |
|---|---|
| PDF size | PDFのサイズを設定できます。 |
| Save as | スクリーンショットをダウンロードするときに「名前を付けて保存」に設定できます。 Macでは、自動ダウンロードの際、「名前を付けて保存」にすると問題が発生するため無効にしておきましょう。 |
| Auto-download files (beta) | アイコンをクリックしなくても自動にダウンロードするように設定できます。 |
| Fit copies to Google Docs limits | スクリーンショットをクリップボードにコピーするときに、Googleドキュメントのコピーと貼り付けの制限（25,000,000ピクセル）を超える場合は、自動にサイズ変更する設定です。 |
Permissions
| Downloads permission | ダウンロードボタンと自動ダウンロード機能に必要な権限です。 |
|---|---|
| iFrame permission | iFrameまたはフレームセットの内部コンテンツをスクロールするために必要な権限です。 |
ショートカットの使い方
Full Page Screen Captureでは、キーボードのショートカットキーを利用することもできます。スクリーンショットを撮影したいWebページを表示した上で、下記のショートカットを実行すると効率よく画像を撮ることができます。
Windowsの場合： [Alt] + [Shift] + [P]
Macの場合： [Option] + [Shift] + [P]
開発者サイト：https://gofullpage.com/
Full Page Screen Captureのgithub：https://github.com/mrcoles/full-page-screen-capture-chrome-extension
Webページ全体をキャプチャーする作業シーンとは
Full Page Screen Captureの特徴や使い方が、わかったところでWebページ全体のスクリーンショット撮影が必要な作業シーンについても、いくつか想定事例を紹介します。
Webページのサイトイメージ共有に便利！
Web制作を行う際に、チーム内で、参考にしてほしいサイトの画像イメージを共有することは多いですよね。
メールやチャットツールで、参考にしたいURLを送り合うのも共有方法の一つですが、スクリーンショット画像を添付するほうが、相手の閲覧環境に負荷をかけずにスマートです。
そんなときに、Webページ全体のスクリーンショット画像を撮影できるFull Page Screen Captureが役立ちます。
ポートフォリオを公開する時に便利！
また、プログラミング初学者が、自身の制作したサイトをポートフォリオサイトで公開するといった場合にも便利です。
プログラマー、Webデザイナーなどは就職・転職活動でポートフォリオが必須になります。紙にプリントアウトしたポートフォリオ冊子を作る場合も、Webで自身のポートフォリオサイトを公開する場合も、作品事例としてWebサイトの全体像を見せる必要があるので、Full Page Screen Captureが大変役立つのです。
上の画像のように、Webページの全体像を画像で公開するとサイトのレイアウトやUIなどを直感的に伝えることが可能になります。
その他にも、参考にしたいWebページ画像をイメージとしてストックしておく、ブログなどで、Webサイトのデザインを比較・レビューする記事を作成したいときに、引用としてキャプチャ画像を挿入するといった利用シーンにも使えそうです。
こうしたWebページ全体のイメージ画像は、Webデザイナーさんのポートフォリオサイトでは、AdobeのPhotoshopやIllustratorなどの画像編集ソフトや、Adobe XD、Figmaといったプロトタイピングツールで作成していることが多いです。しかし、こういったツールを持っている人は限られていますよね。
かつては、Webページ全体の画像を撮る際、スクロールしながら何枚もスクリーンショットを撮って貼り合わせたり、縮小表示したりといった感じで手間がかかっていました。しかし、現在はスクリーンショット画像を撮影できる無料のツールがたくさんあります。
その中でも、Full Page Screen Captureの使い勝手はトップクラス。プログラマーやWebデザイナーにも愛用している方がたくさんいます。Chromeを使うなら、入れておいて損のないアドオンですので、まだインストールしてない人は導入を検討してみましょう！
また、「他のChromeアドオンももっと知りたい！」という方はこちらの書籍も参考にしましょう！
この記事のまとめ
- Webページ全体のスクリーンショット画像を簡単に撮影できるFull Page Screen Capture
- 無料で利用できるGoogle Chromeアドオンでインストールも簡単
- 複数の保存形式や編集、履歴など様々な機能が搭載されている
