縦長のWebページ全体をスクロールしてキャプチャーする方法

スクリーンショット

WindowsでもmacOSでも、OSに組み込まれているツール或いはキーボードショートカットを利用すれば、スクリーンショットをキャプチャーできます。

ただし、これらの方法はすべて、画面或いはブラウザーの表示領域の範囲内にあるコンテンツのみをキャプチャーできます。役立つ情報を記載しているWebページ或いはドキュメントはよく縦に長いです。または表示可能領域を超えているその他のコンテンツをキャプチャーしたい場合もあります。これらの場合、OSに組み込まれているツール或いはキーボードショートカットは足りなくて、スクロールウィンドウのキャプチャーが必要です。スクロールウィンドウのスクリーンショットをキャプチャーするに、サードパーティーのソフトを利用しなければならないわけではありません。ブラウザー本体、ブラウザーの拡張機能を利用しても達成できます。

ただし、キャプチャー後のスクリーンショットを編集したい場合、Snagit或いはApowersoft画面キャプチャープロなどのサードパーティーのソフトのほうが便利です。

この記事では様々な方法を通じて、縦長のWebページを画像としてキャプチャーする方法を紹介します。


目次


Webページ全体をPDFとして保存してから画像に変換

Chrome、Firefox、Microsoft Edge、Safariなどの殆どのブラウザーはWebページ全体をPDFとして保存する機能を搭載しています。無料のPDF変換ソフト或いはオンラインのPDF変換サイトを利用すれば、PDFファイルは簡単にJPG、PNGなどの画像形式に変換できます。

Chrome、Firefox、Microsoft Edge、SafariなどのブラウザーでWebページ全体をPDFとして保存する方法は殆ど同じです。どのブラウザーを利用しても、プリンターをインストールする必要がありません。各ブラウザーでの手順はほぼ同じです。

ステップ1:お気に入りのブラウザーを起動して、保存したいWebページを開きます。

ステップ2:WindowsでもmacOSでもブラウザーの右上の縦三点(Chrome)、「≡」(Firefox)或いは「…」(Microsoft Edge)をクリックして、「印刷」をクリックします。ただし、macOSでSafariを利用している場合、メニューバーの「ファイル」>「プリント」をクリックする必要があります。

ステップ3:表示された保存画面で、送信先(Chrome)或いはプリンター(FirefoxとMicrosoft Edge)のリストで「PDFに保存」を選択します。Safariの場合、「PDFとして保存」を選択します。ブラウザーによって、ページ、レイアウトまたは異なる設定項目が用意されています。

Chromeで縦長のWebページをPDFに保存
Chromeで縦長のWebページをPDFに保存

ステップ4:保存(ChromeとSafari)或いは印刷(FirefoxとMicrosoft Edge)ボタンをクリックして、出力先を選択して、PDFファイルの名前を設定して、保存ボタンをクリックすると、Webページ全体をPDFに保存できます。

ブラウザーを利用して、Webページ全体をPDFファイルに保存するのは素早くて、簡単です。後必要に応じ、PDFファイルをJPG・PNG画像に変換すればいいです。


Firefoxのツールバーでのスクリーンショット機能

FirefoxはWebページ全体をスクリーンショットとして保存する機能を搭載しています。ただし、古いバージョンのFirefoxはこの機能を搭載していない可能性がありますので、利用する前に、Firefoxを最新版にアップグレードしたほうがいいです。詳しい手順は下記をご覧ください。

ステップ1:Firefoxを起動して、キャプチャーしたいWebページをアクセスします。

ステップ2:Firefoxのアドレス欄の右の空白のところを右クリックして、「ツールバーをカスタマイズ」をクリックします。或いは右上にある「≡」ボタンをクリックして、「その他のツール」から「ツールバーをカスタマイズ」をクリックします。

Firefoxのツールバーをカスタマイズ
Firefoxのツールバーをカスタマイズ

ステップ3:様々なアイテムが表示されます。「スクリーンショット」というアイテムを見つけて、「ブックマークツールバーの項目」の右側にドラッグします。

スクリーンショットツールをFirefoxのツールバーに追加
スクリーンショットツールをFirefoxのツールバーに追加

ステップ4:「スクリーンショット」アイコンをクリックすると、「ページ全体を保存」または「表示範囲を保存」の二つのボタンが表示されます。「ページ全体を保存」をクリックすると、ページ全体はキャプチャーされます。

Firefoxでページ全体を保存
Firefoxでページ全体を保存

ステップ5:キャプチャー後、スクリーンショットのプレビュー画面の右上に、「コピー」と「ダウンロード」ボタンが表示されます。「ダウンロード」ボタンをクリックすると、スクリーンショットはPNG形式として、Firefoxのダウンロード先に保存されます。

FirefoxでキャプチャーしたWebページをダウンロード
FirefoxでキャプチャーしたWebページをダウンロード

Chromeのデペロッパーツールのコマンド

Google Chromeには、開発者ツール内に隠された機能を利用したら、任意のWebページのフルサイズのスクリーンショットをキャプチャーできます。この機能は、サードパーティの拡張機能を使用せずに、スクロールスクリーンショットのようにページ全体をキャプチャできます。ChromeでキャプチャーしたいWebページを開いてから、下記の手順を従ってください。

ステップ1:Chromeの右上の縦三点ボタンをクリックして、「その他のツール」から「デベロッパーツール」をクリックします。キーボードショートカットを使って、WindowsでCtrl + Shift + I、macOSでOption + Command + Iを押してもOKです。

Chromeのデベロッパーツールをクリック
Chromeのデベロッパーツールをクリック

ステップ2:要素タブの右側の縦三点ボタンをクリックして、「コマンドを実行」をクリックします。

Chromeでコマンドを実行
Chromeでコマンドを実行

ステップ3:「実行>」の後ろに「screenshot」を入力します。すると、幾つかのスクリーンショットのキャプチャーの選択肢が表示されます。「フルサイズのスクリーンショットをキャプチャー」をクリックします。

Chromeのscreenshotコマンド
Chromeのscreenshotコマンド

すると、Webページ全体はPNG画像としてキャプチャーされて、Chromeのダウンロード先に保存されます。


Awesome Screenshot拡張機能(Chrome、FirefoxとSafariに適用)

Awesome Screenshot(フルネーム:Awesome Screenshot スクリーンショットと画面録画)はChromeとSafariに適用できる拡張機能です。Awesome Screenshotは、任意のWebページの全部または一部をキャプチャーできます。また、スクリーンショットの編集機能を用意して、コメント、注釈の追加、機密情報のぼかし、録画などが可能です。スクリーンショットのキャプチャーまたは5分・720Pまでの録画は無料ですが、スクリーンショットの編集機能の一部またはより強力な録画の機能を利用するに、プレミアム会員に登録する必要があります。

下記は各ブラウザーでAwesome Screenshotのダウンロードリンクです。まずお気に入りのブラウザーで、拡張機能をインストールしてください。

ここではChrome版の拡張機能を例として、Webページ全体をキャプチャーする方法を説明します。FirefoxやSafariでのステップもほぼ同じです。

ステップ1:ChromeでキャプチャーしたいWebページを開きます。

ステップ2:Chromeブラウザーの右上にある拡張機能欄でAwesome Screenshotのアイコンをクリックして、表示されたメニューの下部で、「スクリーンショットの保存場所」をクラウド或いはローカルに設定します。クラウドの場合、この拡張機能の作成者からのクラウドサービスのアカウントを作成する必要があります。ローカルの場合、後で保存先を自由に選択できます。

Awesome Screenshotのキャプチャー設定
Awesome Screenshotのキャプチャー設定

ステップ3:「フルページ」をクリックすると、Webページ全体のキャプチャーが始まります。ブラウザーの右上にも「画面キャプチャー処理中です」のメッセージが表示されます。

Awesome Screenshotで画面をキャプチャー中
Awesome Screenshotで画面をキャプチャー中

ステップ4:キャプチャー完了後、Awesome Screenshotの編集ツールはブラウザーの中部のトップに表示されます。一部の機能はPro版に登録する必要があります。

また、画像を右クリックして、「名前をつけて保存」をクリックして、画像を保存できます。

Awesome Screenshotの編集ツール

或いは編集後、右上の「Done」ボタンをクリックしてから、表示された画面で、必要に応じて、Download as image(画像としてダウンロード)、Download as PDF(PDFとしてダウンロード)、Print(印刷)、Copy(コピー)などのアクションを取ります。

Awesome Screenshotの保存設定
Awesome Screenshotの保存設定

Chromeの拡張機能:GoFullPage – Full Page Screen Capture

GoFullPage – Full Page Screen CaptureはChrome向けの拡張機能です。ChromeのWebStoreから無料でChromeに追加できます。GoFullPageもスクリーンショットのキャプチャーと編集を統合しています。スクリーンショットキャプチャーは無料で利用できます。キャプチャーしたものPNG、JPGまたはPDFとして保存できます。ただし、編集機能はプレミアムユーザー向けです。編集したスクリーンショットをダウンロードするに、GoFullPageの会員にサインアップする必要があります。

GoFullPage拡張機能をインストールしてから、Webページ全体をキャプチャーする手順は非常に簡単です。

ステップ1:ChromeでキャプチャーしたいWebページを開きます。

ステップ2:Chromeブラウザーの右上にある拡張機能欄でGoFullPageのアイコンをクリックすると、Webページ全体はキャプチャーされます。

GoFullPageでWebページ全体をキャプチャー
GoFullPageでWebページ全体をキャプチャー

ステップ3:キャプチャー完了後、Chromeブラウザーの右上に幾つかのボタンが表示されます。プレミアムユーザーが編集したい場合、Editアイコンをクリックすれば、形状や絵文字の追加などが可能です。Download PDFボタン或いはDownload PNGボタンをクリックすると、スクリーンショットをPDFファイル或いはPNG画像としてダウンロードできます。

GoFullPageの編集・ダウンロードボタン
GoFullPageの編集・ダウンロードボタン

また、OptionsボタンでJPG形式に変更したり、PDFの出力を設定したりすることができます。ただし、設定項目の説明は全部英語です。英語に苦手なユーザーは少しアンフレンドリーかもしれません。

上記のブラウザーに内蔵されている機能或いはブラウザーの拡張機能を利用して、Webページ全体(フルページ)を簡単にキャプチャーできますが、編集機能は基本的に利用できません。たとえプレミアム版に登録しても、編集機能は非常に少ないです。そのため、Webページの一部或いは全体のキャプチャーまたは充実した画像の編集機能を搭載しているプロの画面キャプチャーソフトであるSnagitまたはApowersoft画面キャプチャープロを紹介します。


プロの画面キャプチャーソフト:Snagit

SnagitはTechSmith社が開発・販売しているスクリーンショットキャプチャーソフトであり、範囲、ウィンドウ、全画面、スクロールウィンドウ、パノラマ、メニューなど多くの方式でスクリーンショットをキャプチャーできます。

Webページ全体をキャプチャーするに、お気に入りのブラウザーでキャプチャーしたいWebページをアクセスしてから、Snagitを起動して、Snagitの画像タブで、選択リストから「スクロールウィンドウ」を選択して、キャプチャーボタン或いはキーボードショートカットを押したら、Webページでスクロールの方向のボタンが表示されます。一般に、下或いは右下ボタンをクリックすればいいです。

Snagitのスクリーンショットキャプチャーモード
Snagitのスクリーンショットキャプチャーモード

Snagitに内蔵の画像編集ツールのSnagit Editorは矢印、テキスト、吹き出し、図形、スタンプ、塗りつぶし、移動、選択、ほかし、シンプル化、クイック選択、切り抜き、除去、ペン、ライン、蛍光ペン、ステップ、消しゴムと拡大など多くの編集ツールを搭載しています。これでキャプチャーした縦長のスクリーンショットも簡単に編集できます。また、スクリーンショットはSNAGX、SNAG、BMP、CUR、EMF、EPS、GIF、ICO、JPG、JPEG、JPE、MHT、PDF、PNG、PSD、RAS、TGA、TIF、WFX、WMF、WPGなど多くの形式として保存できます。

Snagit Editorのインターフェース
Snagit Editorのインターフェース

Snagitのスクリーンショットキャプチャー機能および画像編集の詳しい情報について、Snagitレビューをご覧ください。


プロの画面キャプチャーソフト:Apowersoft画面キャプチャープロ

Apowersoft画面キャプチャープロは矩形領域、フルスクリーン、ウィンドウ、スクロールウィンドウ、メニュー、指定のエリア、任意のエリア、多角形エリアなど多くの方法でスクリーンショットをキャプチャーできます。また、カラーピッカー、カラーパレット、座標軸、ホワイトボード、画像エディタ、カメラで写真を撮る、スケジューラなどのツールを用意しています。

Apowersoft画面キャプチャープロ
Apowersoft画面キャプチャープロ

Apowersoft画面キャプチャープロでスクロールウィンドウを選択して、ブラウザーでキャプチャーしたいWebページを表示させて、キーボードショートカット或いはキャプチャーを押したら、Webページ全体はキャプチャーされます。キャプチャーされたスクリーンショットはすぐに簡単なツールバーで編集できます。或いは内蔵の画像エディタに送って、より複雑な編集ができます。

画像エディタにはクロップ、サイズ変更、回転・反転、テキスト・線・形状・矢印の追加、番号付け、異なる効果の適用など多くの実用的な編集機能を搭載して、塗りつぶし、消去、スムーズぼかし、ハイライト、フリーハンド、テキストの追加、ピクセル化、ハイライトペンなどのツールを用意しています。編集後のスクリーンショットはPNG、JPG、BMP、GIF、TIFF、PDFなどの形式として保存できます。

Apowersoft画面キャプチャープロの画像エディタ
Apowersoft画面キャプチャープロの画像エディタ

Apowersoft画面キャプチャープロのキャプチャー機能、内蔵のツールまたは画像エディタの詳しい情報について、Apowersoft画面キャプチャープロのレビューをご覧ください。


結論

これらは、Webページ全体、フルページもしくはスクロールするWebページのスクリーンショットを撮るさまざまな方法です。もちろん、上記の紹介も一部の方法に過ぎません。

ブラウザーに内蔵の機能を利用するのは一番簡単かもしれません。拡張機能も便利ですが、異なる拡張機能にも異なる機能を搭載しています。一部の機能は会員料を支払う必要があります。スクリーンショットのキャプチャー後、編集する必要があったら、Snagit或いはApowersoft画面キャプチャープロなどのソフトの利用をおすすめします。ブラウザーの拡張機能より強力で便利です。

もちろん、さまざまな方法にはそれぞれ長所と短所があるため、ニーズに最適な方法を選択しましょう。