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

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

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

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

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

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

面倒ですねー。

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

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

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

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

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

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

サイト全体画像を撮る方法は4つあります。

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

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

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

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

と、その前に、パソコンやスマホにあらかじめ搭載されている機能だけでスクリーンショットを撮る方法を整理しておきます。

Windows

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

Mac

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

スマホ

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

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

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

» Firefox版ダウンロード

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

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

Pearl Crescent Page Saverの使い方

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

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

シンプルゆえ軽量です。

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

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

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

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

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

Awesome Screenshotの使い方

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

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

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

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

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

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

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

（追記）Awesome Screenshot がデータを外部送信？

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

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

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

Evernoteに直接保存！Webpage Screenshot

» Chrome版ダウンロード

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

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

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

Webpage Screenshotの使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

FireShotの使い方

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

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

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

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

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

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

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

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

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

まとめ

本日ご紹介したキャプチャツール（アドオン）4つをまとめておきます。

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

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

それでは、また。