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

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

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

いずれも操作は簡単なので、一通り試してみて自分の環境に合わせた方法を選択しよう。

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

キャプチャ専用アプリ

PriScVista

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

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

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

Screenpresso

「Screenpresso」は Windows 専用の高機能キャプチャツールで、静止画だけではなく動画撮影までできるおすすめのツール。画像のトリミングやサイズ変更のほか、簡単な編集加工もできる。

Web ページ全体のキャプチャは、Chrome 拡張機能を使う。

当サイトで掲載しているキャプチャ画像の大半は、Screenpresso で撮影・加工している。

Screenpresso の拡張機能でキャプチャすると上部固定メニューなどが正常に撮影できないため、全体のキャプチャは後述する別の Chrome 拡張機能（Fireshot）を使うほうがよい。

オンラインサービス

webtopdf

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

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

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

Capture Full Page

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

Lazy Load を採用している Web ページを指定すると、スクロールしなければ見えない部分の画像がキャプチャできない。WordPress はデフォルトで Lazy Load が有効になっているので、ブログの撮影には向かないと思う。

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

ブラウザ標準機能（開発ツール）

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

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

Microsoft Edge

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

とくに設定等は必要なく、2 ステップで Web ページ全体をキャプチャできる。動作もかなり軽い。

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

ふだんから Edge を使っているなら、キャプチャツールを準備しなくてもよさそうだ。

Firefox

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

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

アイコンをクリックすれば一瞬でキャプチャしてくれるが、デベロッパーツールをあまり使ったことがないなら操作しづらいかもしれない。

Google Chrome

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

同一の Web ページを異なるサイズで数パターンキャプチャしたい、というときに向いている。

ブラウザ拡張機能（アドオン）

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

代表的な拡張機能を 3 つ紹介する。

Fireshot｜シンプルなタイプ

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

キャプチャしたいページを開き、アイコンをクリックして「ページ全体をキャプチャ」を選択すれば OK。画像（PNG / JPEG）のほか、PDF でも保存できる。

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

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

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

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

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

「Awesome Screenshot」は、キャプチャした画像をそのまま加工編集できる。

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

キャプチャ後すぐに編集画面が開くので、枠線や矢印を追加して加工しよう。編集後、右上の「Done」をクリックすると保存方法・保存場所を選択できる。

Google Drive や Dropbox などに直接保存したいときは、「Save to Cloud」で指定しよう。外出先でキャプチャを残しておきたいときに便利だ。

Photoshop や他の画像編集ツールを使うほどでもない、簡単な加工編集ならこれだけで事足りる。

Web ページキャプチャ方法まとめ

Web ページ全体をキャプチャする方法はいくつかあるが、最も簡単なのは Microsoft Edge のキャプチャ機能だ。

ブログで使うなど、頻繁にキャプチャするのであればブラウザ拡張機能を利用するのがおすすめ。当サイトでは「Fireshot」をメインで使っており、部分的なキャプチャと簡単な加工編集は「Screenpresso」で行っている。

環境に合わせて、いろいろ試してみてほしい。