e-performance 公式ブログ

サイトのスクリーンショットに超便利「Awesome Screenshot」

Awesome Screenshot|Chromeウェブストア

ブラウザのスクリーンショットを撮ってくれる拡張機能をご紹介します。ページ全体はもちろん、範囲指定も可能です。撮ったスクリーンショットは、画像ファイルに保存、クリップボードにコピー、印刷が可能です。ウェブ制作をする際は作業が効率的になり、とても便利です。

Awesome Screenshotの使い方

1. ダウンロード&インストール

拡張機能のインストールは、Google Chromeであれば「chromeウェブストア」Firefoxであれば「アドオン」よりダウンロードとインストールができます。図のようなアイコンがブラウザ右上にインストール成功です。


Google Chrome

Awesome Screenshot: キャプチャーと注釈

Firefox

Awesome Screenshot Plus - Capture, Annotate & More

2. 使ってみよう

インストールした「Awesome Screenshot」をクリックして起動すると、上図のようなメニューが出てきます。主な用途は以下のとおりです。

メニュー

Capture Visible Part of Page  見えている部分をキャプチャする
Capture Selected Area  範囲を選択してキャプチャする
Capture Entire Page  ページの全体をキャプチャする
Select a local image  画像を自分で選択してキャプチャする
Capture Desktop デスクトップをキャプチャする

私がよく使うのは、「Capture Selected Area 」と「Capture Entire Page 」ですね。

キャプチャの範囲を指定した場合のイメージ
captureを押して選択範囲確定

3. キャプチャダウンロード、印刷

画像を出力する画面

キャプチャを確定し、「Done」を押すと上図のように出力形式を選択する画面が表示されます。
左からjpgなどの画像データ、クリップボードに貼り付け(コピー)、プリンタに印刷です。出力形式を選択してください。

以上でキャプチャ完了です。簡単で便利ではありませんか?

終わりに

拡張機能を上手に利用すれば、ウェブ制作にかぎらずインターネットの閲覧も快適なものになります。他にも便利な拡張機能はたくさんありますので、それはまたの機会に掲載しますね。