【設定3分】Webページ全体の長いスクリーンショットを撮る方法【1クリックでOK】

Web系の仕事をしていると、PC画面のスクリーンショットを撮る機会が何度もありますよね。

PCの現在見えている範囲なら、「Command+Shift+4」でドラッグして済むんですけど、Webページ全体のながーい写真となるとそうもいきません。

 

結論から言うと、そんな時はGoogle Crome拡張ツールの「Full Page Screen Capture」使うと良いです。

Web周りで仕事をしている人向けに、ながーいキャプチャを撮る方法をささっと解説して行きます。

スポンサーリンク

Full Page Screen Captureのダウンロード・設定方法

ひとまず有無を言わさず、Full Page Screen Captureをダウンロードしちゃってください。

僕自身、いろいろ試したんですけど、これが一番使いやすいかと思います。

 

青色の「Chromeに追加」ボタンを押したら、ダウンロードが始まって、Chrome右上にカメラのアイコンが付きますね。

スクリーンショット 2018 04 13 23 30 13

このカメラアイコンをクリックすれば、Webページ全体の写真をすぐに撮れます。

 

でももっと使いやすくするために、少し設定を変えます。

上のカメラアイコンの上で「右クリック→オプション」で設定画面に飛びます。

スクリーンショット 2018 04 13 22 54 13 1

ポイントは赤マルの3つです。

  • Image formatで画像ファイルの形式をjpgにしておくこと。pngだとだいぶ重いです。
  • Downloads directoryでスクショファイルをためておくフォルダを設定しておくこと。場所がまとまって楽です。
  • Auto-download filesにチェックを入れて、自動でファイルが保存されるように設定すること。プレビュー画面に飛ばなくて済みます。

それぞれ設定を変えると自動で保存されます。

Full Page Screen Captureの使い方

ここまで来たら、スクショを撮りたいページでカメラアイコンをクリックするだけでWebページ全体の撮影ができます。

Iiii

はい、一発!早いね!

設定で保存フォルダの設定をしていたので、finderのダウンロードディレクトリ内にスクリーンショット用のフォルダができているはずです。

スクリーンショット 2018 04 13 23 48 52

Cromeブラウザの横幅を小さくすれば、スマホ画面のような細長いスクショも撮れますよ。

▼こんな感じだーよ。

スポンサーリンク

おまけ:ポートフォリオを作ろう

Web制作系の仕事をしているなら、制作したサイトのスクショを撮って、ポートフォリオを作っておくと良いです。

過去にどんなサイトを作ったことがあるんですか?って聞かれたときに、パッと提出できるようにしておかなきゃね。

▼僕はFull Page Screen Captureで撮影したキャプチャ画像をgoogle driveにまとめて、ポートフォリオにしてます。

スクリーンショット 2018 04 13 23 53 13

 

 

初心者がプログラミングで稼ぐための5ステップ【開始3ヶ月で20万円受注!】

2018.02.22

ブログのアフィリエイトで稼ぐための9つのコツを紹介する

2017.11.13

大学生でもお金を稼げる方法10選【月15万稼ぐ北大生が教える】

2017.01.27

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

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