こんにちは、デザイナーのSaya(@sayako.ai)です。
この度は当ホームページにご訪問いただき、ありがとうございます。
こちらのページではWEBサイトやスマホサイトをフルスクリーン(全画面)をPNGやPDFの拡張子での画面スクショができるGoogleの拡張機能[Go Full Page]のインストール手順と使い方や操作方法についてお伝えしています。
WEBサイト全画面をスクショできる便利ツール[Go Full Page]
WEBデザイナーの方ならWEBサイトを構築している段階で一度確認の為に全画面を画像やPDFのファイル形式で保存したいと思うことないですか?
デザイン職の方以外でも、ショッピングサイトやレストランのWEBサイトを全画面保存したい…といったシーンが日常の中であるかもしれません。
今回はそういった時に簡単にスクショができる便利なGoogle拡張機能[Go Full Page]についてご紹介いたします☺︎
Googleアカウントの新規作成方法
インストールの前に今回ご紹介する拡張機能はGoogleのものなので、インターネットを閲覧するブラウザはsafariやfirefoxではなくGooglechromeをご利用ください。
また利用したことがないという方はGoogleChromeのアカウントが必要になりますので、そちらを完了してから手順を進めてくださいね。
› › › Google アカウントの作成
[Go Full Page]のインストール方法
それでは早速Google Web Store より[Go Full Page]をインストールします。
[Go Full Page]の画面が表示されたら画面右側のChromeに追加ボタンをクリックします。するとポップアップで[Go Full Pageを追加しますか?]と表示されるので、拡張機能を追加ボタンをクリックします。
すると、めちゃめちゃめでたい画面が表示されます笑
すんごい歓迎されているところ大変恐縮ですが、無事インストールが完了したということなので一旦このウィンドウは閉じてしまって大丈夫です。
次に、ウィンドウ右上の拡張機能ボタンをクリックすると[Go Full Page]が追加されたことがわかります。ここでピンマークをONにすることで[Go Full Page]のカメラアイコンがツールバーに追加され、使いたい時に瞬時に利用することが可能です。
またこのアイコンは今回の拡張機能だけに限らず、ドラッグすることで配置したい場所を移動することが可能なので、頻繁に使うツールを画面上から埋もれてしまわないようにしておくのもいいと思います。
[PCサイト]全画面フルスクリーンスクショの方法と保存
これで環境は整いましたので早速スクショを試みたいと思います。まずはスクショを保存したいPCサイトを開きます。
そして先ほどツールバーに表示させておいた[Go Full Page]のカメラアイコンをクリックします。なんともシンプルで簡単!操作はこれだけ!
画面の右上にPDF形式かPNG形式での保存が選択できますので、ご希望のファイル形式をクリックします。
その際に追加の許可をリクエストしています。というポップアップが出てきますが、許可ボタンをクリックしてファイル保存を許可してください。
いやぁ〜チームワークでWEBデザインをしている時やクライアントにデータでお送りしたい時にこういう機能はすごく便利ですよね。ささっとPDFで保存して共有みたいなことが秒でできちゃいます。
[スマホサイト]全画面フルスクリーンスクショの方法と保存
次にスマホサイズで、レスポンシブ化された状態のスクリーンショット方法です。パソコンで作業をしている時にスマホの画面をわざわざスマホを使ってスクショしていると、それだけで非常に効率が悪いですよね。
まずはPCサイトの際と同様、保存したいホームページを表示させます。ここでワンポイントとしてメニューバーから
表示 › 開発 / 管理 › デベロッパーツール を選択します。
macのショートカットキーだと
⌥(option) + ⌘(command) + I ですね。
するとちょっと見慣れていない方にしてはうゎっっ!!と思う画面かもしれませんが…操作は先ほどと同様、とても簡単でシンプルです。
- タブレット/スマホマークをクリック
- 任意のスマホのサイズを選択
- ツールバーのGoFullPageのカメラアイコンをクリック
するとPC版と同様、保存画面へ移動しPDFかPNGでの保存が可能です。画像は小さいですが、よく見るとちゃんとレスポンシブ化されています!めちゃくちゃ便利!
インターネットが普及されたての頃を考えると、今やとても便利なツールや拡張機能がたくさんあるものですね…
(大きな声では言えませんが10年以上前はphotoshopで切り貼りしてましたよ笑)
(´-`).。oO
仕事で使う方も、そうでない方もこれで効率よくWEBサイトの全画面スクショができますので、是非使ってみてくださいね☺︎