Awesome Screenshotの使い方　Webページ全体のキャプチャを撮れるChrome拡張

Webページ全体のキャプチャを撮ったり、キャプチャ画像に注釈やメモを書き加えたいときに使える便利なツールがAwesome Screenshotです。

わたしはWeb制作を仕事にしているのですが、Awesome Screenshotほど手軽で便利に利用できるツールはないのではないかと思います。

単にキャプチャが撮れるだけではなく、便利な機能が満載です。

今日はそんな便利なAwesome Screenshotの使い方をご紹介します。

Awesome Screenshotの使い方

まずはChromeの拡張機能に追加しましょう。
以下のページから追加してダウンロードしてください。
https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja

Awesome Screenshotを追加すると、画面のようにアイコンが表示されます。
これをクリックすると、様々なキャプチャを簡単に撮影することができます。

表示部分
表示されているブラウザの画面を撮影します。一番よく使うかも。

フルページ
Webページ全体のスクリーンショットを撮影します。遅延読み込みに対応しているので、スクロールから時間差で表示されるコンテンツもしっかり撮れます。

選択範囲
自分で撮影箇所を選択して撮影できます。パーツを保存するのに便利です。

遅延後の表示箇所
例えばマウスを乗せた状態で色が変わる状態を撮りたい、なんて時に便利です。
遅延する秒数は設定で変更できます。

画面全体またはアプリウィンドウ
ブラウザ内だけでなく、画面全体を撮影することまでできちゃいます。

ローカル画像に注釈を加える
これもとても便利な機能。キャプチャに限らずローカル画像に文字や図形を加えられます。

実際に撮影した後は、このように様々なツールを使って加工できます。
メモを書き込んだり、人に渡すために修正指示を書き込んだりすることができます。

有料版機能では更に「吹き出し」「番号」「顔文字」「画像追加」などの便利な機能も利用することができます。

このキャプチャも、AwesomeScreenshotで書いているんですよ。
もちろん、注釈が不要な場合は何もしなくてもOKです。

保存や出力方法では、画像・PDF・プリント・コピーなどから選択できます。
基本的にはこの利用で全然不便しませんが、無料でもアカウントを作ってサインインしておくと、以下のような機能を利用できます。

Save to Aesome Screenshot
クラウドに画像を保存して、URLで共有できるサービスです。
無料でも最新50個まで保存しておくことができます。
いちいち画像を保存して送らなくていいので便利です。

Collaborate with Teammates
他のツールと連携できる機能です。
Slack、Asana、Trello、GitHub、JiraSoftwareに対応しています。

Save to Cloud
クラウドに保存できるサービスです。
GoogleDrive、Dropbox、boxに対応しています。

Awesome Screenshotでは様々な設定も変更することができます。

キャプチャ設定
ショートカット、遅延時間の設定、注釈のスキップなどが設定できます。

レコード設定
こちらは、動画を録画する際に利用する設定です
Awesome Screenshotでは、動画も撮影することができます。
ただし、利用にはアカウント登録が必要で、無料版では5分しか撮影できません。
あまり利用する機会がないので今回は割愛させていただきます。

保存の設定
ファイル形式や保存場所などを設定することができます。

Awesome Screenshotアイコンなどがわかりやすく直感的に利用することができるので、あまり説明がなくて利用には不便しないと思います。

無料版でこれだけ利便性が優れているのは本当に助かっています。
このブログのキャプチャを撮ったりするのも、ほとんどAwesome Screenshotを利用しているんですよ。

無料版のアカウント登録も、Googleアカウントなどで3秒あればできるので、もし興味がある方はぜひ利用してみてください。

ちなみに有料版では、利用できる注釈が増えて、動画も無制限に撮影できたりします。
わたしは利用したことがないのですが、よかったら下記の公式サイトを見てみてください。