趣味を仕事にしていくためのメルマガを配信中!

      2017/07/05

縦長のサイトやページを一枚の画像でキャプチャするツールと使用方法

 

この記事を書いている人 - WRITER -

趣味や好きなことのブログで生計を立て、その手法を少数名の方にお伝えしています。現在は千葉県で梨を作りながら、個人コンサルに尽力中!

詳しいプロフィールはこちら

しょーりん

LPと言われるランディングページやセールスレターなどは縦に長いのでトリミングするタイプの画像キャプチャソフトだとうまくキャプチャできないですよね。

けれどそんな縦長のページを簡単にキャプチャすることのできる無料のツールがあります。

今回はそのツールの使い方について解説していきたいと思います。

縦長のページをキャプチャする動画講義

ページ全体をキャプチャする方法

縦長のページをキャプチャするツールですが、ブラウザによって異なります。
今回はGoogle ChromeとFirefoxの2つのブラウザでそれぞれ使える拡張機能ツールを紹介していきます。

Google Chromeでのキャプチャツールインストールと使用方法

Google Chromeでは『Awesome screenshot』という拡張機能を使います。
拡張機能というのはスマホでいうアプリのようなものですね!

早速『Awesome screenshot』をインストールしていきましょう。

1.『Awesome screenshot』のインストール画面を開きます。
画面右上にある『+ CHROMEに追加』をクリックします。
awe

2.『拡張機能を追加』をクリックします。
awe4

3.するとChromeのウィンドウ右上にAwesome screenshotのアイコンが表示されます。
アイコンをクリックするとメニューが表示されます。
awe3

上から順に解説すると
・Capture visible part of page→ブラウザに表示されているページ部分をキャプチャ。
・Delayed capture→3秒の時間差でブラウザの画面をキャプチャ。
・Capture selected Area→自分で範囲を決めてキャプチャ。
・Capture entire Page→ページ全体を上から下まですべてキャプチャ。
・Select a local image→PC内にある画像を選択する。

縦長のページをキャプチャしたい場合は『Capture entire Page』をクリックすればOKです。

4.キャプチャが完了した後、画面上にこのようなメニューが表示されるので『Done』をクリックします。
awe7

5.最後に切り替わった画面のメニューで下記のマークをクリックすれば画像を保存することができます。
awe8

以上がGoogle Chromeでの縦長のページキャプチャツールのインストール方法と使い方になります。

続いてはFirefoxでのキャプチャ方法について解説していきます。

Firefoxでのキャプチャツールインストールと使用方法

Firefoxでも同様にブラウザの拡張機能を使用します。
今回使用するのは『Pearl Crescent Page Saver screenshot tool』というツールです。

1.ツール開発者のこちらページから『Pearl Crescent Page Saver screenshot tool』をインストールします。ページの『+Firefoxへ追加』をクリックします。
pcp1

2.インストール後はウィンドウの右上にカメラのアイコンが表示されます。アイコンの右の『▼』をクリックするとメニューが表示されるので『ページ全体を画像として保存』をクリックするとキャプチャすることができます。
awe10

これでFirefoxでも縦長のページも全体キャプチャすることが可能になります!

僕はこの機能を知らないときはちょっとずつスクロールしながら少しずつキャプチャしていたのでものすごく時間が掛かっていました…。笑

縦長のページをキャプチャしたいときはせひ活用してみてくださいね!

スクリーン上のものを切り出してキャプチャする方法についてはこちらを御覧ください。
関連記事:PCの画面を簡単にキャプチャして切り出せるSnipping Toolの使い方

 

Message

メールアドレスが公開されることはありません。