Improve Skill

[Google Extentions]WEBデザイナーも実用性高め!WEBサイトやスマホサイトの全画面スクショができる便利ツールGo Full Page

[Google Extentions]WEBデザイナーも実用性高め!WEBやスマホサイトの全画面スクショができる便利ツールGo Full Page_top

こんにちは、デザイナーの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]をインストールします。

 

Chrome Web Store_bn

 

[Go Full Page]の画面が表示されたら画面右側のChromeに追加ボタンをクリックします。するとポップアップで[Go Full Pageを追加しますか?]と表示されるので、拡張機能を追加ボタンをクリックします。

 

[Google Extentions]WEBデザイナーも実用性高め!WEBやスマホサイトの全画面スクショができる便利ツールGo Full Page_01

 

すると、めちゃめちゃめでたい画面が表示されます笑
すんごい歓迎されているところ大変恐縮ですが、無事インストールが完了したということなので一旦このウィンドウは閉じてしまって大丈夫です。

 

[Google Extentions]WEBデザイナーも実用性高め!WEBやスマホサイトの全画面スクショができる便利ツールGo Full Page_02

 

次に、ウィンドウ右上の拡張機能ボタンをクリックすると[Go Full Page]が追加されたことがわかります。ここでピンマークをONにすることで[Go Full Page]のカメラアイコンがツールバーに追加され、使いたい時に瞬時に利用することが可能です。

[Google Extentions]WEBデザイナーも実用性高め!WEBやスマホサイトの全画面スクショができる便利ツールGo Full Page_03

 

またこのアイコンは今回の拡張機能だけに限らず、ドラッグすることで配置したい場所を移動することが可能なので、頻繁に使うツールを画面上から埋もれてしまわないようにしておくのもいいと思います。

 

ntions]WEBデザイナーも実用性高め!WEBやスマホサイトの全画面スクショができる便利ツールGo Full Page_07

 

[PCサイト]全画面フルスクリーンスクショの方法と保存

これで環境は整いましたので早速スクショを試みたいと思います。まずはスクショを保存したいPCサイトを開きます。

そして先ほどツールバーに表示させておいた[Go Full Page]のカメラアイコンをクリックします。なんともシンプルで簡単!操作はこれだけ!

[Google Extentions]WEBデザイナーも実用性高め!WEBやスマホサイトの全画面スクショができる便利ツールGo Full Page_04

 

画面の右上にPDF形式かPNG形式での保存が選択できますので、ご希望のファイル形式をクリックします。

その際に追加の許可をリクエストしています。というポップアップが出てきますが、許可ボタンをクリックしてファイル保存を許可してください。

いやぁ〜チームワークでWEBデザインをしている時やクライアントにデータでお送りしたい時にこういう機能はすごく便利ですよね。ささっとPDFで保存して共有みたいなことが秒でできちゃいます。



[スマホサイト]全画面フルスクリーンスクショの方法と保存

次にスマホサイズで、レスポンシブ化された状態のスクリーンショット方法です。パソコンで作業をしている時にスマホの画面をわざわざスマホを使ってスクショしていると、それだけで非常に効率が悪いですよね。

まずはPCサイトの際と同様、保存したいホームページを表示させます。ここでワンポイントとしてメニューバーから

表示 › 開発 / 管理 › デベロッパーツール を選択します。

macのショートカットキーだと

⌥(option) + ⌘(command) + I ですね。

するとちょっと見慣れていない方にしてはうゎっっ!!と思う画面かもしれませんが…操作は先ほどと同様、とても簡単でシンプルです。

  • タブレット/スマホマークをクリック
  • 任意のスマホのサイズを選択
  • ツールバーのGoFullPageのカメラアイコンをクリック

 

[Google Extentions]WEBデザイナーも実用性高め!WEBやスマホサイトの全画面スクショができる便利ツールGo Full Page_05

 

するとPC版と同様、保存画面へ移動しPDFかPNGでの保存が可能です。画像は小さいですが、よく見るとちゃんとレスポンシブ化されています!めちゃくちゃ便利!

 

[Google Extentions]WEBデザイナーも実用性高め!WEBやスマホサイトの全画面スクショができる便利ツールGo Full Page_06

 

インターネットが普及されたての頃を考えると、今やとても便利なツールや拡張機能がたくさんあるものですね…

(大きな声では言えませんが10年以上前はphotoshopで切り貼りしてましたよ笑)
(´-`).。oO

仕事で使う方も、そうでない方もこれで効率よくWEBサイトの全画面スクショができますので、是非使ってみてくださいね☺︎



ノンデザイナーでも“おしゃれなデザイン”がスグに手に入るCanvaアプリ_top
ノンデザイナーでも“おしゃれなデザイン”がスグに手に入るCanvaアプリこちらのページでは私がSNS/instagramなどのビジュアルやサムネイルデザインをする際に利用するCanvaの魅力や操作方法についてご紹介をしています。...