Webの記録

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

投稿日:2012年11月14日 更新日:

この記事は約 5 分で読めます。

pc_cheack

Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。

特にWebサイト1ページ全体の時は、フリーソフトを入れたり・・・部分的にとったスクリーンショット(キャプチャー)のツギハギをしたり・・・面倒な事をしてました。

今回は、Webサイトのスクリーンショット(キャプチャー)をとる時の方法を3つメモします。
WindowsとMacのショートカット。
そしてChrome拡張「Screen Capture」を使った方法を試してみます。

特にChrome拡張「Screen Capture」がとても便利でしたので、ここは忘れないようにメモです!

【2014.9.1追記】Chrome・Firefox・Safariエクステンションの「Awesome Screenshot」が閲覧したURLをどこかに送信しているらしいので、利用を控えた方が安心かも?!

目次

  1. Windowsで画面のスクリーンショット(キャプチャー)をとる方法
  2. Macで画面のスクリーンショット(キャプチャー)をとる方法
  3. Chrome拡張「Screen Capture」でスクリーンショット(キャプチャー)をとる方法
  4. Chromeエクステンションの「Awesome Screenshot」でスクリーンショット(キャプチャー)をとる方法

1.Windowsで画面のスクリーンショット(キャプチャー)をとる方法

  • 画面全体のキャプチャーをとる・・・「PrintScreen」
  • 特定のウインドだけのキャプチャーをとる・・・「Alt」+「PrintScreen」

2.Macで画面のスクリーンショット(キャプチャー)をとる方法

  • 画面全体のキャプチャーをとる・・・「Command」+「Shift」+「3」
  • 選択範囲だけのキャプチャーをとる・・・「Command」+「Shift」+「4」

3.Chrome拡張「Screen Capture」でスクリーンショット(キャプチャー)をとる方法

Chromeウェブストア」で「Screen Capture」をダウンロードします。

ブラウザの右上に青いアイコンが1つ増えています。これをクリックすると5つのメニューが出てきます。
うち上4つで画面のスクリーンショット(キャプチャー)をとる事ができ、一番下は設定の変更ができます。

各メニューの説明
  • Capture Page Region(Ctrl + Alt + R) ・・・Webページ内の好きな部分を選択範囲のみ。
  • Capture Visible Content(Ctrl + Alt + V) ・・・Webページの表示されている範囲のみ。
  • Capture Whole Page(Ctrl + Alt + H) ・・・Webページの表示されていない部分を含めた全体。
  • Capture Screen Region(Ctrl + Alt + P) ・・・ ブラウザのタブも含めた画面の中で選択範囲のみ。
  • Options ・・・ オプションを表示。保存するフォーマット(PNG / JPG)の選択、保存フォルダの選択、ショートカットキーの変更ができます。

上記のおおまかな説明の分だけで、結構使えます!
まだ細かい設定がいろいろ出来るので、これを好みでいじってみるととても便利なツールになると思います。

4.Chromeエクステンションの「Awesome Screenshot」でスクリーンショット(キャプチャー)をとる方法【※一番下の注意箇所もご覧ください】

以前はChrome拡張「Screen Capture」を使っていましたが、時々クラッシュするようになってきたので別のものを探していました。

最近になって、かちびと.netさまの「スクリーンショットを撮るChromeエクステンションはAwesome Screenshotが一番良かった」を参考に、試してみるとホントに使いやすかったのでココにメモします。

Awesome Screenshot」をChromeウェブストアでダウンロードします。

するとブラウザ右上に以下の画像のようなアイコンが1つ増えています。

Awesome-Screenshot1
これをキャプチャーをとりたいサイトを開いた状態でクリックすると、以下の画像のようにキャプチャーの仕方を選べます。
Awesome-Screenshot

Webページ1ページまるごと全体のキャプチャーがすんなりととれるのは、ホントに有難いです!

使い方や細かい情報は、以下で確認ください。

[note]

【2014.9.1 注意】「Awesome Screenshot」が閲覧したURLをどこかに送信しているらしいという情報がありました。とても便利なツールですが、URLを他人に見られては困る方は利用を控えた方が安心です。
念のため参考ブログをリンクします!
【参考】AWESOME SCREENSHOT が閲覧したサイトのURLを収集している疑い|秋元@サイボウズラボ・プログラマー・ブログさま

[/note]

-Webの記録
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Facebookの個人プロフィールに勤務先のFacebookページをリンクさせる方法

この記事は約 1 分で読めます。 Facebookの個人プロフィールに、勤務先を入れた時に勤務先のFacebookページとうまくリンクされない事があります。 案外、ココがクリックされているようで・・・ …

no image

「Wordbooker」を使ってWordPressからFacebookへ自動表示をさせてみた。

この記事は約 1 分で読めます。最近気になっているのは、「Facebook」です。 気になる事は即実行~♪ってコトで、興味半分で早速Facebookに登録です♪ 今回は、WordPressのプラグイン …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

WordPress カテゴリごとに部分的デザインを変えたい時

この記事は約 1 分で読めます。 WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。 ページまるごとデザイン(表示)を変える場合と、 …

no image

IE6で透過pngを表示してみました♪

この記事は約 1 分で読めます。IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。 今回は、IE6ではキレイに表示されない透過pngをキレイに表 …