Webサイトのスクリーンショットに最適「Pixlr Grabber」

1年以上前の記事です。内容が古い可能性があります。

Webサイトのリニューアル等のお仕事を頂いた時などに便利なのが現サイトのスクリーンショット付きのサイトマップ。
これをベースにここを変えていくといいですよという話をしていくのだが、実はページボリュームのあるサイトなどだとスクリーンショットを撮るのが結構大変。
というのも、Webサイトの各ページは大概が縦に長く1画面に収まらないから。
で、スクリーンショットを分割してそれをPhotoshop上でつなぎ合わせる作業が必要となってくる。

Adobe Photoshop CS6 Windows版

posted with カエレバ

アドビシステムズ 2012-05-11

Amazon

楽天市場

Yahooショッピング

Yahooオークション

7net

そこで、ちょっと探してみるとそれを自動でやってくれちゃうアプリがあった。
「Pixlr Grabber」というこのアプリ。ブラウザの機能拡張として配布されていて、FirefoxとGoogleChrome用の2種類がある。
が、それぞれ、基本的な機能は変わらない模様。
■ Grabber

□ Pixlr Grabber :: Add-ons for Firefox （Firefox用アドオン）
□ Chrome ウェブストア – Pixlr Grabber – Screen capture/image grabbing （GoogleChrome用エクステンション）

で、これを使うと、ページ全体のスクリーンショットが簡単に取れる他、通常のスクリーンショット、そしてトリミングしてスクリーンショットを撮ることができるのだ。

それぞれちほちゅうのトップページでやってみるとこんな感じ。
以下、GoogleChrome版を使用。

インストールすると右上に「G」の入ったアイコンが表示される。
こちらのプルダウンメニューからそれぞれメニューを選ぶ。

まずは通常のスクリーンショット。（メニューの一番上「Grab visible part of page」を選択）

保存メニュー（共通）がでるので「SAVE」をクリック。

できたもの。

次にトリミングしてのスクリーンショット。（メニュー上から2番目「Grab a difind area」を選択）

トリミング後「Crop」をクリックで上記同様保存メニューが出るので「Save」をクリック。

できたもの。

最後にまとめて1ページのスクリーンショット。（メニュー上から3番目「Grab the entire page」を選択）

長いページだと時間がかかりますが自動でスクリーンショットをつなぎあわせてくれます。
作業後、保存メニューが出るので「Save」。

できたもの。

長くてすみません。
が、これが「Pixlr Grabber」の目玉機能。

といった具合にページ単位でスクリーンショットを撮るときに便利な「Pixlr Grabber」。
これはWebディレクターでなくブロガーとしても是非インストールしておきたいアプリですね。