クートンブログ

日常のヒントをあなたに - 株式会社クートン

用途別に3つのツールを使い分け!Webページを画像で保存する(スクリーンショットを撮る)方法

※記事内に広告を含む場合があります

f:id:qooton:20141126140525j:plain

Webページや製品を紹介したり、手順を説明したりする時に「Webページの画面があれば、より分かりやすいのにな」と思うことは無いでしょうか。

ウインドウやWebページの画面を画像として保存する方法は色々とありますが、私が普段使っている「キーボード機能、ブラウザの拡張機能、ソフトウェアのキャプチャー機能」を利用した画面キャプチャ(スクリーンショットを撮る)方法をまとめてみました。

Print screen

f:id:qooton:20141126140853j:plain

モニタやウインドウの画面をそのままを保存する時は、キーボードにある「Print screen」を使います。

【使い方】
1.PrintScreen キーを押す。
2.ペイントを開いて、ホーム→クリップボード→貼り付けをクリックする。
3.名前を付けて保存。
4.画像編集ソフトで画像を加工する。

Dropbox(ドロップボックス)を使っている人は、Print screenを押した時に「スクリーンショットを瞬時に共有」という説明が出るので「スクリーンショットをDropboxに保存」を選ぶと、毎回ペイントを開いて画像を保存する手間が無くなります。

【使い方2】
1.PrintScreen キーを押す。
2.画像がDropboxに保存される。
3.画像編集ソフトで画像を加工する。

モニタを2~4台と複数使っていると、Print screenだけだと全てのモニタがキャプチャーされてしまうので、特定のウインドウだけ保存したい場合は、保存したいウインドウをクリックしてアクティブ状態にした後「Alt+Print screen」(ノートパソコンなど一部の機種の場合は「Fnキー+Alt+Print screen」)を押します。

Webpage Screenshot

f:id:qooton:20141126140618p:plain

Webpage Screenshotは、Google Chromeの拡張機能です。
WebページをJPEGやPNGファイルで保存できます。

表示中のWebページを1枚の画像で保存できるのがメリットで「SAVE TO URL」を使えば発行されたURLから誰でもキャプチャー画面を見られるなど、保存方法も様々に選べます。

f:id:qooton:20141126141803p:plain

  • 見たままをスクリーンショット……モニタで見えているWebページ部分だけを保存する。
  • ページすべてをスクリーンショット……Webページ全部を保存する。
  • Capture region of the screen……Webページ画面の一部分だけ保存する。

f:id:qooton:20141126141755p:plain

▲保存前にテキストや線、矢印などの追加や画面の切り取りも行なえます。

画像をそのまま保存したり、後で紹介するエバーノートの「スクリーンショットのクリップ」を使ったりするよりも、画像が粗くなるのが多少気になる所ですが「画像として保存できるだけで良い」という場合は問題なく使えると思います。

【インストール方法】
Chromeウェブストア - Webpage Screenshotにアクセスして「Chromeに追加」をクリック。確認画面に従って、インストールを行ないます。

【使い方】
1.キャプチャーしたいWebページを開く。
2.URLバーの右にあるカメラアイコン(Webpage Screenshot)を押す。
3.「見たままをスクリーンショット」「ページすべてをスクリーンショット」「Capture region of the screen」から選ぶ。
4.保存方法に合わせて「SAVE TO URL(キャプチャー画面のURLが発行)」「SAVE LOCAL(Desktopやクラウドに保存)」「PDF(PDFファイルで保存)」「Copy(右クリックでコピー内容を選ぶ)」「thumbnail(固定幅や高さを選んで保存)」「印刷」をクリックする。

Evernote Web クリッパー

f:id:qooton:20141126140607j:plain

Evernote(エバーノート)の「スクリーンショットのクリップ」。
Webpage Screenshotより画像の文字が鮮明だったり、クリップ時に画像の大きさが分かったりするので「数字や文字を見せたいけど、画像が荒くて読みにくい」「キャプチャーする画面の大きさを知りたい」と思う時に便利に使っています。

f:id:qooton:20141126141839p:plain
▲右下に切り取り画像の大きさが出てくる。

またエバーノートはキャプチャーした画像に含まれるテキストも検索できるので、膨大にある画像の中から自分が探しているものが簡単に見付かるのも大きなメリットです。

他にもブログやニュース記事を読む時に要らない部分を省いて読みやすくしたり、一度エバーノートに保存して後で読む時に使ったりという方法もできます。

【使い方】
f:id:qooton:20141126141821p:plain
1.タスクアイコンの場合、エバーノートのアイコンを右クリックして「スクリーンショットをクリップ」をクリック。
または「Win + PrintScreen(デフォルト設定。ツールから変更可能)」でも同じく対応可能。
2.画面のクリップしたい部分をクリックとドラッグで指定。指定したウィンドウをクリックするとクリップされる。範囲変更はCtrlまたはShiftキーを押す。
3.エバーノートに自動的にノートが作成。

保存した画像を加工する時は「画像をクリック→Photoshopにドラッグ&ドロップ」で対応しています。

画像タイトルが全て"ScreenClip"になるので、一つの画像加工ソフトで複数のスクリーンショットが開きにくいのと、画像を保存する場所がTemp(一時的ファイルを保存するのに使用されるフォルダ)になる為、別の保存先(Dropboxなど)に保存する時に一手間かかる所が難点でしょうか(何か良い対処法があれば教えて欲しいです)。

いかがでしたか?

画面キャプチャに関するソフトは非常に多くあるのですが、とりあえず私は上記で紹介した3つを用途ごとに使い分けています。

  • 普段の画面キャプチャ……Webpage Screenshot
  • 文字を綺麗に保存したい……Evernote Web クリッパー
  • その他……Print screen

今使っているキャプチャー方法が「物足りない」と思った時は、色々なツールを試してみて、自分の要望に合った方法を見付けてみて下さい。

(書いた人:昼時かをる)

▼ 他にもこんな記事書いています ▼