Webデザイナーの人がポートフォリオなどを作成するときに、制作したサイトをフルスクリーンで画像ファイルにしたいことがあると思います。
知らなければスマホみたいにぱっと撮影できないので、PCでのフルスクリーンショットの方法について紹介します。
環境について
ぼくの環境はMacですが今回紹介する方法はWindowsでも大丈夫です。
ただし、ブラウザはChromeである必要があります。
方法１：「検証」機能を使う
下記の順番で操作すると、全画面のpngファイルを吐き出します。
- 右クリックのサブメニューから「検証」を選択
- 「command（Ctrl）+shift+P」
- 「full」で検索
- 「Capture full size screenshot」を実行
基本的にはこの方法で問題ないのですが、稀に環境によっては背景のみ取り込んでコンテンツを撮影してくれなかったりすることがあるので、その場合は次の方法を使います。
方法２：Chromeの拡張機能を使う【こっちがおすすめ！】
Chromeの拡張機能を追加する方法です。拡張機能を追加するのがいやな人もいると思いますが、こっちのほうが早いし確実なのでおすすめです。
- こちらのChromeウエブストアから「Full Page Screen Capture機能」を追加
- URLバーの右側にアメーバみたいな拡張機能のマークがでるので撮りたいサイトで押下
- 「Full Page Screen Capture」を選択
- パックマンみたいなのがガブガブする
- 別タブが開くのでPDFやPNGなど好きな形式でダウンロードする
アニメーションが走ってうまく撮影できなかったときは、一度ページ最下部までスクロールして完璧にコンテンツを表示しきってから再び撮影してみてください。
一度拡張機能を追加しておくとショートカットコマンドすら覚える必要がないのでこっちの方が楽ですね。資料にするときにPDFにできるのもいいです。