Web系の仕事をしていると、PC画面のスクリーンショットを撮る機会が何度もありますよね。
PCの現在見えている範囲なら、「Command+Shift+4」でドラッグして済むんですけど、Webページ全体のながーい写真となるとそうもいきません。
結論から言うと、そんな時はGoogle Crome拡張ツールの「Full Page Screen Capture」使うと良いです。
Web周りで仕事をしている人向けに、ながーいキャプチャを撮る方法をささっと解説して行きます。
Full Page Screen Captureのダウンロード・設定方法
ひとまず有無を言わさず、Full Page Screen Captureをダウンロードしちゃってください。
僕自身、いろいろ試したんですけど、これが一番使いやすいかと思います。
青色の「Chromeに追加」ボタンを押したら、ダウンロードが始まって、Chrome右上にカメラのアイコンが付きますね。
このカメラアイコンをクリックすれば、Webページ全体の写真をすぐに撮れます。
でももっと使いやすくするために、少し設定を変えます。
上のカメラアイコンの上で「右クリック→オプション」で設定画面に飛びます。
ポイントは赤マルの3つです。
- Image formatで画像ファイルの形式をjpgにしておくこと。pngだとだいぶ重いです。
- Downloads directoryでスクショファイルをためておくフォルダを設定しておくこと。場所がまとまって楽です。
- Auto-download filesにチェックを入れて、自動でファイルが保存されるように設定すること。プレビュー画面に飛ばなくて済みます。
それぞれ設定を変えると自動で保存されます。
Full Page Screen Captureの使い方
ここまで来たら、スクショを撮りたいページでカメラアイコンをクリックするだけでWebページ全体の撮影ができます。
はい、一発！早いね！
設定で保存フォルダの設定をしていたので、finderのダウンロードディレクトリ内にスクリーンショット用のフォルダができているはずです。
Cromeブラウザの横幅を小さくすれば、スマホ画面のような細長いスクショも撮れますよ。
▼こんな感じだーよ。
おまけ：ポートフォリオを作ろう
Web制作系の仕事をしているなら、制作したサイトのスクショを撮って、ポートフォリオを作っておくと良いです。
過去にどんなサイトを作ったことがあるんですか？って聞かれたときに、パッと提出できるようにしておかなきゃね。
▼僕はFull Page Screen Captureで撮影したキャプチャ画像をgoogle driveにまとめて、ポートフォリオにしてます。
- Full Page Screen Captureのダウンロードはこちら
