2015/04/1454 Shares

WEBサイト全体を丸ごとキャプチャできるブラウザアドオン4選

WEBサイトを丸ごとキャプチャ

ブログ・WEBサービス紹介やデザインサンプル紹介の記事を書くとき、スクリーンショット(画像キャプチャ)をよく使いますよね。

しかし、PCのデフォルト機能だと画面に映っている部分しか撮影することができません。ブログのように縦長のサイトをキャプチャしたいなら、一画面ずつスクロールしながら撮影し、画像編集ソフトでつなぎ合わせる必要があります。

『そんなの面倒でいちいちやってられん!』 というわけで、サイト全体を一瞬でキャプチャできるブラウザ拡張機能をご紹介。ただ画像化するだけでなく、枠線やテキスト挿入などの編集機能がついている優れモノもありますよ!

PCのスクリーンショット機能とキャプチャツールの違い

PCにはスクリーンショット機能がありますが、WEBサイトをキャプチャするとこんな感じになります。

NAIFIX スクリーンショット

ウィンドウを最大化しても、モニタ解像度以内の範囲(見えている部分)しか撮影できません。Windowsだと自動保存されないので、いったん編集ソフトに貼り付けてから保存する必要があります。

面倒ですねー。

できればこんな感じでサイト全体を丸ごとキャプチャして、

NAIFIX キャプチャ

時には選択範囲のみキャプチャして、

NAIFIX キャプチャー範囲選択

たまに簡単な編集もして、

NAIFIX キャプチャー編集

指定した場所に保存したり、時にはそのままTwitterに流したりしたいですよね。

これを簡単に実現できる方法があるんです。

スクリーンショット撮影方法

と、その前に。念のためデフォルト装備されているスクリーンショットのやり方を。

Windows

PrintScreen … 画面全体を撮影

Alt + PrintScreen … アクティヴウィンドウを撮影

Fn + PrtSc … ノートパソコン等、一部機種

いずれもクリップボードに格納されるので、キャプチャ画像は編集ソフトなどにいったん貼り付けてから保存する必要があります。

Mac

⌘ Cmd + Shift + 3 … 画面全体を撮影

⌘ Cmd + Shift + 4 … 画面上の指定範囲を撮影

キャプチャ画像はデスクトップに保存され、Control を押しながらキャプチャするとクリップボードに格納されます。

スマホ

ここでは詳しく触れませんが、スマホも専用アプリなしでスクリーンショットを撮ることができます。意外と知らない人が多いらしい。

iPhone … スリープボタン + ホームボタン
Android … 電源ボタン + 音量下ボタン

Androidは4.0以降で標準装備になっています。ちなみにXperiaは電源ボタン長押しでスクリーンショットが選択できます。

ブラウザ拡張機能(アドオン)を勧める理由

サイト全体画像を撮る方法は次の4つ。

  • 一画面ずつのスクリーンショットをつなぎ合わせる
  • 専用アプリを使う
  • オンラインサービスを使う
  • ブラウザ拡張機能を使う

スクリーンショットをつなぎ合わせるのは面倒だし、専用アプリをわざわざ立ち上げるのもまた面倒。オンラインサービスは日本語文字化け・編集機能不備・変換に時間がかかることが多いのでパス。

ということでブラウザ拡張機能をおすすめします。ブログを書きながらさくっと一発で撮れて、そのまま簡単な加工までできます!

では、各アドオンの特徴を交えながらご紹介していきます。

加工編集機能が不要ならPearl Crescent Page Saver

» Firefox版ダウンロード

最初にご紹介する「Pearl Crescent Page Saver」はFirefox版のみです。

加工編集は専用ソフトを使うから、WEBサイト全体のキャプチャ画像だけほしい!という場合におすすめ。

Pearl Crescent Page Saverの使い方

使い方は簡単で、ブラウザのツールバーにカメラアイコン「Page Saver」から撮影方法を選択するだけ。

Page saver ツールバー

オプションから保存名や形式(PNG or JPEG)を設定できます。

Page saver オプション

シンプルゆえ軽量です。

ちょっとした編集をしたいならAwesome Screenshot

» Chrome版ダウンロード
» Firefox版ダウンロード

シンプルだけど加工編集機能があるキャプチャツールが、この「Awesome Screenshot」。

下の画像はChrome版ですが、キャプチャ範囲は3種類指定できます。

Awesome キャプチャ方法選択

「local image」を選択すると、PCに保存してある画像をブラウザ上で簡易編集することができます。あまり使わないと思いますが、キャプチャ画像を再編集したい時は便利かもしれませんね。

Awesome Screenshotの使い方

今回は選択した部分をキャプチャしてみます。

キャプチャしたい範囲を選択したら、右下の「Capture」ボタンをクリック。

Awesome 指定範囲キャプチャー

続いて編集画面に移るので、上部のツールバーから加工ツールを選んで編集します。ポインタを乗せれば日本語説明が出てきますし、見ただけで何となくわかりますね。

Awesome 加工編集画面

ひととおり終わったら、右上の「完了」ボタンを押して保存方法選択画面へ。

Google Driveに保存できたり、ローカルに保存・クリップボードにコピー・そのまま印刷などが選べます。

Awesome 保存方法

オプションを開くと保存形式(JPEG or PNG)、ショートカットキー割当、保存先指定ができます。

Awesome オプション

かなりシンプルで、ブログで使うというより画像メモを残しておきたい時に使うほうが向いていると思います。

(追記)Awesome Screenshot がデータを外部送信?

Cherome 版において、このアドオンはユーザーが見たページのURLをどこかに送信している疑いがある、という情報が出てきました。

真偽のほどは定かではありませんが、気になる方は他のアドオンに変更することをオススメします。もし本当であれば、Firefox 版も同じような仕様になっていると思われます。

参考Awesome Screenshot が閲覧したサイトのURLを収集している疑い

追記

2014 年 9 月 13 日現在 Chrome ストアから削除されたのを確認いたしました。

Chromeストア-404

Firefox 版はまだダウンロードできますが、中身が違うんでしょうか?

Evernoteに直接保存!Webpage Screenshot

» Chrome版ダウンロード

追記

Webpage Screenshot はスパムウェアとしてストアから強制削除されたようです。

参考Chrome拡張Webpage Screenshotはスパイウェア! ウェブストアから削除

「Awesome Screenshot」より機能が充実しているのは、「Webpage Screenshot」というアドオン。キャプチャ範囲は2種類指定でき、日本語なのでわかりやすいです。

WebpageScreeshot キャプチャ選択

特筆すべき点は保存方法。なんとローカルに保存するだけでなく、そのままSNSでシェアできたり、DropboxやEvernoteなどのクラウドサービス、さらにはWordPressに直接保存することができます。

いったんダウンロードして再びアップロード、という手間が省けますね。

Webpage Screenshotの使い方

「ページ全てをスクリーンショット」でブログ全体をキャプチャしてみましょう。

編集画面にはサイトが丸ごとコピーされて出てきます。左上に編集ツールがあり、ここから長方形ツールやテキストを挿入できます。スプレーや塗りつぶしなんかもあり、カラーパレットも「Awesome Screenshot」より充実しています。

Webpage Screenshot 編集画面

編集が終わったら、右上のボックスで保存先を指定。サイト全体をキャプチャすると容量がかなり大きくなるので、必要な部分だけ切り抜きしたほうが良いかも。

WebpageScreenshot 保存方法指定

こんな感じでブログ全体がキャプチャされます。

Naifixキャプチャ画面

こうして見ると、ブログって意外に長い…

テキスト挿入じゃなく、テキストそのものを変更できる

「Webpage Screenshot」には面白い機能があり、なんとWEBサイトのテキストを別のものに置換することができるのです。

いたずらしたい ページを表示して、「Edit content」を選択します。

WebpageScreeshot キャプチャ選択

すると、こんなダイアログが出てくるので「OK」をクリック。

WebpageScreenshotダイアログ

書き換えたいテキストを選択して、消しちゃいます。

WebpageScreenshot テキスト削除

で、こんな風に好きなテキストを入れられます。

WebpageScreenshot テキスト置換

テキストを入れ替えて他サイトを紹介するときは、一応許可取ったほうが良いと思います。いたずら以外に有効活用法が思い浮かばないんですが、デザイン参考メモとかにいいかも。

イチオシ!高機能ツールが揃っているFireShot

» Chrome版ダウンロード
» Firefox版ダウンロード

最後にご紹介するのは高機能キャプチャツール「FireShot」です。

ツールバーやコンテキストメニューから撮影範囲と保存方法を指定できます。

Fireshot ツールバー

「外部エディタ」にPhotoShop等を指定しておけば、キャプチャ後すぐに編集ソフトで加工することもできます。いちいち保存する必要がないので楽ちん。

「アップロード」を選択すると、TwitterやFacebookにそのまま流すことができます。

FireShotの使い方

「選択された範囲をキャプチャして…」→「編集」してみましょう。

編集画面は別ウィンドウが開き、上部にツールバーが並んでいます。

FireShot  編集画面

真ん中あたりにある「Select」は長方形 or 丸形の選択ツールになります。範囲を指定すると、右側にツールバーが表示され、「切り抜き」や「塗りつぶし」などが選べます。

「ぼかし」や「反転」もあり、必要なものは揃っている感じ。

FireShot Select

「Shape」を選択すると、長方形 or 丸形シェイプで加工できます。右側のツールバーでフォントサイズや種類、塗りつぶし色や枠色など細かい設定ができます。

右下の「Number」にチェックを入れると自動的にナンバリングされるので、WEBサービスの説明などに使えますね。

FireShot 編集作業

ローカルの画像を挿入することもでき、最終的にこんな感じで仕上がります。

FireShot 加工サンプル

「Set style」からテーマを選択すると統一感が出ますよ!

FireShot Style指定

設定画面からキャプチャする画像のサイズを予め指定しておけるので、ブログ記事で使うことが多いなら記事幅に合わせて設定しておきましょう。

FireShot 設定画面

まとめ

本日ご紹介したキャプチャツール(アドオン)は下記の4つ。

Pearl Crescent Page Saver
編集機能はなく、キャプチャ画像のみほしい時に
Firefox

Awesome Screenshot
簡単な編集機能付き。軽量でクラッシュもなし
FirefoxChrome

Webpage Screenshot
保存先が豊富でシェアも簡単。※メモリ消費量大
Chrome

FireShot
編集機能が豊富で、画像編集ソフトがない場合はおすすめ
FirefoxChrome

目的に応じて使い分け、ブログに費やす作業時間を短縮しましょう。

キャプチャアドオンは他にもたくさんあるので、もっと便利なのがあれば教えてください!

キャプチャ画像を加工したいならこちらの無料ソフトがおすすめ!

無料画像編集ツールPIXLRの使い方

それでは、また。