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

縦長の Web ページ全体をキャプチャ(スクリーンショット)する主な方法は以下の 4 つです。

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

いずれも操作は簡単なので、自分の環境に合わせた方法を選択しましょう。

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

Note

とりあえず今すぐキャプチャを撮りたいなら、以下の拡張機能がおすすめです。

キャプチャ専用アプリ

PriScVista

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

使い方

STEP 1
ファイルをダウンロードし、ZIP を任意の場所に展開

STEP 2
「PriScVista.exe」を起動(タスクトレイに常駐)

STEP 3
Chrome でキャプチャしたいページを開く

STEP 4
タスクトレイメニューから PriScVista を開き、「Web ページ全体をキャプチャ」選択
PriScVista メニュー

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

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

Screenpresso

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

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

使い方

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

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

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

オンラインサービス

webtopdf

webtopdf

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

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

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

Capture Full Page

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 ページ全体をキャプチャできます。動作もかなり軽い印象です。

使い方

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

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

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

Firefox

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

使い方

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

Firefox デベロッパーツールは、以下のいずれかで開けます。

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

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

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

Google Chrome

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

使い方

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

Chrome デベロッパーツールは、以下のいずれかで開けます。

  • 右クリック → 要素を調査
  • F12 キー
  • Ctrl + Shift + I(Windows)
  • Cmd + Opt + I(OS X)
STEP 2
トグルアイコンをクリック
Chrome デベロッパーツール トグルアイコン
STEP 3
スライドバーまたは上部メニューでサイズを指定する
Chrome デベロッパーツール ウィンドウサイズ変更
STEP 4
右上三点メニューから「フルサイズのスクリーンショットをキャプチャ」を選択
Chrome フルサイズのスクリーンショットをキャプチャ

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

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

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

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

Fireshot|シンプルなタイプ

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

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

Fireshot Chrome版

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

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

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

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

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

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

デフォルトの保存場所「クラウド」を使う場合は、アカウント作成が必要です。アカウントを作りたくないなら、保存場所を「ローカル」に変更しておきましょう。

Awesome Screenshot

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

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

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

Awesome Screenshot 保存画面

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

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

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

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

環境に合わせて、いろいろ試してみてください。

ブログ運営におすすめの便利ツール・Webサービス

Author

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