気になったWebページを保存したり、作成中のLPを共有したい時になどにスクリーンショットを活用することありませんか?僕はよく、ちょっとでも気になったWebページはスクリーンショットでポイポイ保存し、記事作成やLPの作成の参考にしています。今回は僕が普段から活用している方法+αを紹介します。自分が使いやすい方法を見つけて、活用してみてください。
目次
1.拡張機能なしでスクリーンショットを撮る方法
Google Chromeを使えば、特別なアプリや拡張機能なしでスクリーンショットを無料で撮ることができます。
1-1.部分的にスクリーンショットを撮る方法
スクリーンショットを撮りたいWebページを開きます。
①設定マーク
②その他のツール
③デベロッパーツー
【Windows】
Windowsを使っている方はスクリーンショットしたいWebページを開き、「F12」でデベロッパーツールを開くことができます。
【Mac】
Macの方は、Cmd+Opt∔jでデベロッパーツールを開くことができます。
デベロッパーツールが表示されたら下記の順番でクリックしてください。
①Toggle device toolber(スマホとタブレットマーク)
②設定
③Capture screenshot
このようにスクリーンショットがダウンロードされます。
1-2.画面全体のスクリーンショットを撮る方法
先程と同様、スクリーンショットを撮りたいWebページを開きます。
①設定マーク
②その他のツール
③デベロッパーツー
【Windows】
Windowsを使っている方はスクリーンショットしたいWebページを開き、「F12」でデベロッパーツールを開くことができます。
【Mac】
Macの方は、Cmd+Opt∔jでデベロッパーツールを開くことができます。
デベロッパーツールが表示されたら下記の順番でクリックしてください。
①Toggle device toolber(スマホとタブレットマーク)
②設定
③Capture full size screenshot
Webページの全画面がスクリーンショットされ、pngで保存されます。
2.拡張機能を使って簡単にスクリーンショットを撮る方法
先程はGoogle Chromeで拡張機能なしでスクリーンショットを撮る方法を紹介しましたが、スクリーンショットを頻繁に撮るのであれば拡張機能を使った方が早くて便利です。
2-1.Full Page Screen Capture
【Full Page Screen Captureを追加する】
Full Page Screen CaptureはGoogleChromeの拡張機能に追加することで、不必要な操作をすることなく簡単にスクリーンショットを撮ることができます。拡張機能への追加方法は下記の通りです。
①Chromeに追加
②拡張機能を追加
アドレスバーの横に「カメラマーク」が表示されていたら追加完了です。
【スクリーンショットを撮る】
スクリーンショットを撮りたいWebページを開き、先程追加した「カメラマーク」をクリック。以上です。
画像のように画面全体のスクリーンショットが保存されます。PNG、JPG、PDFで出力することが可能です。
2-2.Fire Shot
【Fire Shotを追加する】
Fire ShotからGoogleChromeへ追加してください。
①Chromeへ追加
②拡張機能を追加
アドレスバーの横に「S」マークが表示されていたら追加完了です。
【スクリーンショットを撮る】
スクリーンショットを撮りたいWebページを開き、先程追加した「S」をクリックします。スクリーンショットを撮りたい範囲を選択しクリック。
スクリーンショットを撮った画面が表示され、保存形式が表示されます。PNG、JPG、PDFで保存が可能です。
3.スクリーンショットより便利!
スクリーンショットは表示されている画面を保存しますが、HTML拡張ファイルとして保存することができる拡張機能をご存知でしょうか?スクリーンショットと違い、HTMLで保存するためWebサイトで見ているそのままで保存が可能です。画面のスクロールもWebページを見ているのと同じように利用できます。LP等を保存するときは、HTMLで保存する方が圧倒的に見やすいのでおすすめです。
3-1.Save Page WE
【Save Page WEを追加する】
Save Page WEをGoogleChromeへ追加します。
①GoogleChromeに追加
②拡張機能を追加
アドレスバーの横に上記のマークが表示されていたら追加完了です。
【ページを保存する】
保存したいページで先ほど追加したマークをクリックするだけです。するとHTMLファイルで保存されます。
4.まとめ
スクリーンショットをよく使う方は、あらかじめ拡張機能を追加しておくと便利です。英語が苦手な方は、Fire Shotであれば日本語表記なので使いやすいと思います。個人的にはSave Page WEがおすすめです。理由は、Webページで表示されていたまま保存することができるからです。用途に合わせて使い分けてもいいかもしれません。