縦長のWebページ全体をキャプチャして画像として保存する4つの方法

Webページ

Web ページ全体をキャプチャする主な方法は以下の 4 つです。

  • キャプチャ専用アプリを使う
  • オンラインサービスを使う
  • ブラウザ標準機能(デベロッパーツール)を使う
  • ブラウザ拡張機能(アドオン)を使う

いずれも操作は簡単なので、ご自分の環境に合わせて最適な方法を選択してみてください。

なかにはキャプチャ後に簡単な画像編集加工までできるツールもあるので、資料作成やデザインサンプルの紹介などで重宝すると思います。

キャプチャ専用アプリ

PriScVista

「PriScVista」はマウスカーソルも同時にキャプチャできる、Windows 専用高機能ツールです。Web ページ全体のキャプチャは、Chrome デベロッパーツールの自動操作によって行われます。

使い方

ファイルをダウンロードし、ZIP を任意の場所に展開
「PriScVista.exe」を起動(タスクトレイに常駐)
Chrome でキャプチャしたいページを開く
タスクトレイメニューから PriScVista を開き、「Web ページ全体をキャプチャ」選択
PriScVista メニュー

キャプチャした画像の編集を選択すると、デフォルトで Windows10 アプリ「切り取り & スケッチ」が開きます(設定で変更可)。

できるだけ不要なソフト・アドオンを追加せず、Windows 機能だけで処理したい場合は便利です。

Screenpresso

「Screenpresso」は Windows 専用の高機能キャプチャツールで、静止画ではなく動画の撮影も可能です。Web ページ全体のキャプチャは、Chrome 拡張機能を介して行われます。

使い方

Chrome 拡張機能インストール
キャプチャしたいページを開き、Screenpresso アイコンをクリック
Screenpresso
Screenpresso ワークスペースに送られるので任意に編集

Naifix で掲載しているキャプチャ画像の大半は、この Screenpresso を使って撮影・加工しています。

ただ、Screenpresso の拡張機能でキャプチャすると上部固定メニューなどが正常に撮影できないため、全体のキャプチャは後述する別の Chrome 拡張機能(Fireshot)を使用しています。

オンラインサービス

webtopdf

オンラインツール「webtopdf」は、URL を指定するだけで Web ページ全体をキャプチャしてくれます。

webtopdf

キャプチャは 1 枚の画像ではなく、オプションで指定したページサイズに従って分割されます。ページ番号やウォーターマークも入れられるので、印刷や PDF 化に向いていますね。

印刷向けのレイアウトにするせいか、処理に数分かかります。

Capture Full Page

「Capture Full Page」は URL 指定だけで Web ページ全体を 1 枚の画像に変換してくれます。画像は横 1280 px で固定され、JPEG 形式のみです。

また、Lazy Load を採用している Web ページを指定すると、スクロールしなければ見えない部分の画像がキャプチャできません。

Capture Full Page

PC にアプリをインストールできない・ブラウザ拡張機能も入れられない、という環境のとき臨時に使うのがよいと思います。

ブラウザ標準機能(開発ツール)

代表的なブラウザには、Web ページ全体をキャプチャする機能が標準装備されています。

ただし、Lazy Load を採用している Web ページでは、スクロールしなければ見えない部分の画像がキャプチャできません。いったんページ下部までスクロールした状態でキャプチャすれば大丈夫です。

Microsoft Edge

Chromium 版 Microsoft Edge のキャプチャ機能は、今回ご紹介するすべての方法のうち最も簡単なものです。

とくに設定等は必要なく、デフォルトで Web ページ全体をキャプチャできます。

使い方

キャプチャしたいページを開き、メニューから「Web キャプチャ」を選択
Microsoft Edge Webキャプチャ
上部メニュー「ページ全体」を選択
Edgeでページ全体をキャプチャ

キャプチャした画像は、Edge 設定内の「ダウンロード」で指定した場所に保存されます。

ふだんから Edge を使っているなら、キャプチャツールを準備する必要はないですね。

Firefox

Firefox も、一度設定してしまえば Web ページ全体をすぐにキャプチャできます。

使い方

デベロッパーツールを開く

デベロッパーツールを開く方法はいくつかあります。

  • 右クリック → 要素を調査
  • F12 キー
  • Ctrl + Shift + I(Windows)
  • Cmd + Opt + I(OS X)
設定を開き、「ページ全体のスクリーンショット撮影」にチェックを入れる
Firefoxデベロッパーツール
キャプチャしたいページを開いてカメラアイコンをクリックする
Firefox キャプチャアイコン

キャプチャ画像は、ブラウザオプションの「ファイルとプログラム」で指定した場所に保存されています。

アイコンをクリックすれば一瞬でキャプチャしてくれるのでストレスはありませんが、デベロッパーツールに不慣れだと使いづらいかもしれません。

Google Chrome

Google Chrome はキャプチャに一手間かかりますが、任意のサイズ(横幅)で撮影したいときは便利です。

使い方

デベロッパーツールを開く

デベロッパーツールを開く方法はいくつかあります。

  • 右クリック → 要素を調査
  • F12 キー
  • Ctrl + Shift + I(Windows)
  • Cmd + Opt + I(OS X)
トグルアイコンをクリックする
Chrome トグルボタン
スライドバーまたは上部メニューでサイズを指定する
Chromeデベロッパーツール 領域サイズ変更
右上三点メニューから「Capture full size screenshot」を選択
Google Chrome キャプチャ

同一の Web ページを異なるサイズで数パターンキャプチャしたいときはよいですが、複数の Web ページを次々にキャプチャしていく用途には向きません。

ブラウザ拡張機能(アドオン)

アプリやオンラインツールを使わず、ブラウザのみでキャプチャを撮りたいときは拡張機能を入れたほうが便利です。

特徴的な拡張機能を 3 つご紹介します。

Fireshot|シンプルなタイプ

Web ページ全体をキャプチャするだけの目的なら、「Fireshot」がシンプルで使いやすいと思います。

キャプチャしたいページを開き、アイコンをクリックして「ページ全体をキャプチャ」を選択すれば OK です。

Fireshot Chrome版

画像(PNG / JPEG)のほか、PDF でも保存できます。

Gyazo|共有に特化したタイプ

「Gyazo」は Web ページ全体のキャプチャのほか、「部品」で特定の要素をキャプチャしたいときに便利な拡張機能です。

キャプチャした画像は無期限で Gyazo に保存しておけます(無料アカウント作成で直近 10 枚まで保存可)。

キャプチャ画像を共有することに特化しているので、チームでの使用やクライアントへの連絡に使うならイチオシです。

Awesome Screenshot|編集に特化したタイプ

「Awesome Screenshot」は、キャプチャした画像をそのまま加工編集できるブラウザ拡張機能です。

デフォルトの保存場所「クラウド」を使うなら、アカウント作成が必要です。保存場所を「ローカル」に変更するとアカウント不要で利用できます。

Awesome Screenshot

キャプチャ後、すぐに編集画面が開かれるので、必要に応じて枠線や矢印を追加しましょう。

Awesome Screenshot 編集画面
枠線と矢印を追加した例

編集完了後、右上の「Done」をクリックすると保存方法・保存場所を選択できます。PC にダウンロードするだけではなく、クラウドストレージへの直接保存も可能です。

Awesome Screenshot 保存画面

わざわざ Photoshop などを使うまでもない簡単な加工編集ならこれで十分ですね。

まとめ

以上、Web ページ全体をキャプチャする方法でした。

最も簡単なのは、Microsoft Edge 標準搭載のキャプチャ機能です。その他、すぐに共有するのが目的なのか、簡単な編集が必要なのか、などで最適な選択肢は異なります。

Web ページの特定の部分のみ切り抜いて保存・印刷したい場合は、「PrintWhatYouLike」というツールがおすすめです。使い方詳細は以下の記事でご紹介しています。

それでは、また。

Naifix Limited

無料プレゼント

有料会員向けに配信していた「ブログのアクセス数を最大限に増やす SEO 施策」を今だけ無料でプレゼントしています。

Naifix 編集部

Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。本ブログ(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。

執筆・監修 Direx Marketing, Inc.