簡単1クリック!Webサイトのスクリーンショットを1ページ丸ごと保存する方法

今日は仕事にもブログ作成にも使える、「パソコンを使ったスクリーンショットを撮る作業」が捗るTipsを紹介したいと思います。

皆さんはスクロールのあるWebサイトのスクリーンショットを撮る場合、どのように作業をされていますか?

もし、何回もスクリーンショットを撮って繋ぎあわせている!という方がいらっしゃいましたら、是非この記事に書いてある方法を試してみてください!

実はこれを知っているのと知らないのとでは・・・生産性に非常に大きな差が出ます。

スクリーンショットとは

広義の意味ではパソコンの画面領域(モニターの範囲)全てを画像としてクリップボードに保存する事を指します。
「スクショ」と省略された言葉を耳にされた方もいらっしゃるかと思います。

「スクリーンショット」という言葉が指す意味は、広義の意味が指す通り、画面領域全てをクリップする事を指すのか、操作しているアプリやブラウザのアクティブな画面をキャプチャする事を指すのか人や場合によって様々です。

それ以外には「プリントスクリーン」「画面キャプチャ」「画面コピー」と言ったりもします。

プリントスクリーンは発音し辛いので私は殆ど使うことはありませんが、スクリーンショットを撮る時に使用するWindowsキーボードのボタンが一般的に「PrtSc(プリントスクリーン)」である事から、スクリーンショットを撮るキーボード操作をプリントスクリーンと言います。

この辺りは日本語の曖昧さ故、何が答えというのはありません・・・。

仕事においてもプライベートにおいても、スクリーンショットが何を指すのかは、極論相手に伝わりさえすれば良いと私は思います。

スクリーンショットの撮り方

Windowsでスクリーンショットを撮る場合は、前項でも少し触れましたが、「PrtSc」キーを使用します。

デスクトップだと[PrtSc]だったり、ノートPCだと[Fn]+[PrtSc]の場合もありますが、概ね同じようなキー操作をする事になります。

Macの場合、スクリーンショットを撮る場合は、[command]+[shift]+[3]キーを同時に押下する事で、デスクトップ全体(画面領域)を保存する事が出来ます。

この辺りの操作方法について詳細は触れませんが、OSや機種の違いはあれど、スクリーンショットという行為が指す内容は同じになります。

通常のスクリーンショットでは出来ないこと

パソコンに限らずスマートフォンのスクリーンショットでも言えることですが、例えばスクロールがあるWebサイトのスクリーンショットを撮りたかった場合、画面領域に表示されている範囲しかスクリーンショットとして保存する事が出来ません。

つまり、まだ表示されていないスクロールの下の方は、スクリーンショットで保存する事が出来ない訳です。

Webサイトの「スクロール含めた全てのスクリーンショットを撮り一つにする」という作業を手動でやろうとすると、複数のスクリーンショットをペイント等の画像編集ソフトに貼り付けて繋ぎ合わせたり、Excelに取込してトリムで繋ぎ合わせたり・・・

加工作業が非常に面倒で時間が掛かります。

私のブログ記事にも有りますが、サイト内の操作手順を記す際に、その都度画像を繋ぎあわせていたら、いくら時間が合っても足りなくなります。

ではどうすれば良いのかと言うと、とある便利なツールを使います。

Full Page Screen Captureを設定する

ここで登場する「とある便利なツール」というのが「Google Chrome」の拡張機能である「Full Page Screen Capture」です。

ブラウザの「Google Chrome」がインストールされていれば、拡張機能を設定するだけで直ぐにでも使えますので、Google Chromeのイントールがまだの方は先ずインストールから行いましょう。

インストールするファイルは、検索エンジンで「Google Chrome」と入れて検索をすればGoogle Chromeのサイトが出てきますのでそこから取得します。

検索が面倒な方は→公式サイトからどうぞ。

(URL:www.google.co.jp/chrome/browser/desktop/)

Google chromeがインストール出来ましたら拡張機能を設定します。

  1. ブラウザのアドレスバーの右側にある3本線をクリックすると、メニューリストが表示されます。
  2. その中の「設定」を押下します。
    tips-fullpagescreencapture-chrometop
  3. 新しいタブで拡張機能画面が表示されます。
    画面右側には現在設定されている拡張機能が表示されていますので、そのまま画面の一番下にある「他の拡張機能を見る」を押下します。
    tips-fullpagescreencapture-option
  4. 新しいタブでChromeウェブストアが表示されます。
    画面左上に検索ウインドウがありますので、そこに「Full page screen capture」と入力したら、Enterキーを押下します。
  5. 右側に検索結果が表示されます。
    「mrcoles.com提供」のFull Page Screen Captureが一番上に表示されて出てきます(2015/9/15現在)
    ※同じ名称の他の拡張機能もありますが、私はコレが一番シンプルで使いやすいと思います。
    tips-fullpagescreencapture-search
  6. 検索結果が表示されましたら、該当の拡張機能の右側にある「+ CHROMEに追加」を押下します。
  7. 「Full Page Screen Captureを追加しますか?」とダイアログが表示されますので、「拡張機能を追加」を押下します。
    tips-fullpagescreencapture-add
  8. 正常に拡張機能の追加が完了しましたら、「Full Page Screen Capture が Chrome に追加されました。」というポップアップが表示され、ブラウザのアドレスバーの右側にカメラのアイコンが表示されます。
    tips-fullpagescreencapture-addon
  9. また、拡張機能の検索結果で「Full Page Screen Capture」の所に緑色の帯で「追加済み」と表示されており、「+ CHROMEに追加」のボタンは「★ 評価する」に変わっています。
  10. これでインストールは完了です!お疲れ様でした。

では早速追加したFull Page Screen Captureを使ってみましょう。

Full page screen captureを使う

使い方は至ってシンプルです。

使い方の手順として記すまでもなく・・・スクリーンショットを撮りたいWebサイトを表示しましたら、カメラアイコンを押下するだけ。

するとパックマンのようなシルエットが左から右へパクパク動き、キャプチャが完了すると新しいタブでページ全体のキャプチャ画像が表示されます。

そこそこ長いスクロールでも保存出来ますが、ふるさとチョイスのような長いスクロールを持つWebサイトの場合、スクリーンショットが撮れない事もありました。

てすが、通常のサイトではそこまで長いスクロールは無い筈なので問題は無いかと思います。

あとはタブの画像を右クリックして、名前を付けて保存で保存します。

画像の保存形式はPNGですので、JPGに変更したい場合は、ペイントなどで開き、保存する時にJPGで保存しなおせばOKです。

非常に使い勝手の良いFull Page Screen Captureですが、出来ないことが一つあります。

Full Page Screen Captureで出来ないこと(2015/9/15時点)

フレームページでのスクロール対応が出来ていない事です。

分かりやすい例では、Gmailです。
(ヤマダ電機のメルマガが表示されているのはご愛嬌ですw)

Gmailは下記の通り3分割のページ構成になっていますが、③のエリアのスクロールをキャプチャしたい場合にスクロールをうまく判別できず、通常通りキーボード操作でスクリーンショットを撮った時と変わらない物しか保存出来ませんでした。

tips-fullpagescreencapture-nocap

 

とは言いながらも、面倒なキーボード操作をしなくてもスクリーンショットが撮れると前向に考えれば便利である事に変わりありません。

今後のバージョンアップ対応される事を願いましょう。

まとめ

この拡張機能はあくまでもWebブラウザのスクロール(フレームは除く)に限定されると言う事です。

WEBサイトに限らずエクスプローラーやゲーム画面などのスクロール全体を撮るためのフリーソフトもありますが、多機能な物を使うとどうしても操作が複雑になったり、別アプリケーションとして起動させる為、無駄にメモリを消費して動きが遅くなったりと一長一短あります。

しかしこの拡張機能はあくまでもブラウザの一機能であるためWEBサイトのスクリーンショットを撮る事に特化しています。

そのため動作も軽く、操作も非常にシンプルです。

実際、私がブログ内で使っているWebサイトのスクリーンショットの殆どは、Full Page Screen CaptureとWindows標準のペイントを使って加工した物です。

この機能を使えば、今まで面倒だったブログへの画像差し込みが身近に感じられるのでは無いでしょうか。

今回も最後までお読みいただき有難うございました。

もし宜しければ、Twitterのフォロー/facebookページのいいねを宜しくお願い致します。

ABOUTこの記事をかいた人

当ブログでは、私自身が困って調べたこと、試した事を中心に記事を書いています。何か少しでもお役に立てれば幸いです。 最近では、企業様からのレビュー記事のご依頼を頂くことも出てきました。 お気軽にお問合わせよりご連絡下さい。