旅する起業家2

縦長の全画面スクリーンショット(スクロール範囲も)を簡単に取得する方法【Google Chrome・Microsoft Edge】

Kanako
こんにちは!Kanako(@KanakoOnishiです^^

今表示されている画面のキャプチャの撮り方は知ってるけども、スクロール範囲込みの全画面のスクリーンショットの撮り方を知らない方も多いのではないでしょうか?

それでは、今回は画像付きでGoogle Chorome・Microsoft Edgeでの縦長の全画面キャプチャ(スクロール範囲も)を撮る方法をご紹介していきますね。

Google Chromeで全画面スクリーンショット(スクロール範囲も)を簡単に取得する方法

Google Chromeでは、下記の2つの方法により、全画面スクリーンショットを撮ることができます。

  1. デベロッパーツールを使用する方法
  2. 拡張機能を使用する方法

それでは、それぞれのスクリーンショットの撮り方や使い方を画像付きで詳しく紹介していきますね。

Google Chromeのデベロッパーツールを使用する方法

①スクリーンショットを撮りたい画面でキーボードの下記を同時に押します。

Windowsの場合:「Ctrl + Shift + I

Macの場合:「command + option + I

下記のような画面になるので、赤枠のボタンをクリックします。

スクリーンショット,Google,やり方

②下記の赤枠でスクリーンショットする画面のサイズを変更できます。(任意でOK)

スクリーンショット,Google,やり方

③赤枠の3点箇所をクリックして、「フルサイズのスクリーンショットをキャプチャ」をクリックすると、全画面のスクリーンショットがダウンロード直下にPNG形式で保存されます。

長過ぎるスクリーンショットの場合は、途中までしかキャプチャが取れないケースがあります。

また、全てが上手く表示されてない状態でキャプチャを撮ってしまうと失敗するので、更新ボタンを押してから撮り直すと上手くいくこともあります。

なので、デベロッパーツールでスクリーンショットを撮るよりも、後ほど紹介する拡張機能の方が私はおすすめです。

デベロッパーツールを日本語にする方法

通常ですと、デベロッパーツールは下記のように英語表記です。

スクリーンショット,Google,やり方

①下記の赤枠の設定をクリックします。

スクリーンショット,Google,やり方

②下記の赤枠の「Language:」のプルダウンメニューをクリックします。

スクリーンショット,Google,やり方

③たくさんある言語の中から「Japanese – 日本語」をクリックします。

スクリーンショット,Google,やり方

④赤矢印の×ボタン(closeボタン)をクリックします。

スクリーンショット,Google,やり方

⑤変更した設定を反映するために、「Reload DevTools」をクリックします。

スクリーンショット,Google,やり方

上記をすると、デベロッパーツールが日本語表記になります。

もしも、英語表記に戻したい場合は、同じ手順で変更することができます。

Google Chromeの一般的なおすすめの拡張機能

Google Chromeでは、色々な拡張機能を提供していますが、全画面のスクリーンショットを撮るための拡張機能としては、下記の4つがおすすめです。

  1. Fire Shot
    スクリーンショット,Google,やり方
  2. GoFullPage – Full Page Screen Capture
    スクリーンショット,Google,やり方
  3. Gyazo
    スクリーンショット,Google,やり方
  4. Awesome Screenshot
    スクリーンショット,Google,やり方

上記の4つ以外にも便利な拡張機能がありますが、その中でも私が使用している「Fire Shot」のダウンロード方法を画像付きで詳しく紹介していきます。

【Fire Shot】拡張機能をダウンロードする方法

①下記のようの手順で「拡張機能を管理」をクリックします。

スクリーンショット,Google,やり方

②左下の「Chromeウェブストアを開きます」をクリックします。

スクリーンショット,Google,やり方

③下記の画面のように検索窓に「Fire Shot」を入力して、検索結果の赤枠をクリックします。

スクリーンショット,Google,やり方

④下記のような画面になるので、「Chromeに追加」をクリックします。

スクリーンショット,Google,やり方

⑤下記のような画面になるので、「拡張機能を追加」をクリックします。

スクリーンショット,Google,やり方

⑥下記の画面になったら、無事にインストールは完了です。

スクリーンショット,Google,やり方

⑦アドレスバーの右側にアイコンを表示させて、すぐに拡張機能を使えるようにするために、下記のように、ピン留めをしましょう。

スクリーンショット,Google,やり方

⑧⑦でピン留めをしておけば、アドレスバーの右側からアイコンをクリックするだけで拡張機能が使えるようになります。

スクリーンショット,Google,やり方

【Fire Shot】拡張機能を使用する方法

①アドレスバーの右側にある赤枠の「Fire Shot」の「S」というアイコンをクリックします。

スクリーンショット,Google,やり方

②下記のような画面になるので、「ページ全体をキャプチャ」をクリックすると、全画面スクリーンショットを撮ることができます。

スクリーンショット,Google,やり方

③下記のように、保存後のプレビュー画面が表示されるので、「PDFとして保存」をクリックします。

ちなみに、保存方法は、下記のように色々と選択肢があるので、任意の方法を選んでください。

スクリーンショット,Google,やり方

④下記のような画面になるので、「名前」に任意のファイル名を入力、「場所」に任意のフォルダ先を選択して、「保存」ボタンをクリックします。

スクリーンショット,Google,やり方

Microsoft Edgeで全画面スクリーンショット(スクロール範囲も)を簡単に取得する方法

①全画面スクリーンショットを撮りたいページにて、下記のように赤枠の3点箇所をクリックし、「Webキャプチャ」をクリックします。

スクリーンショット,Windows,やり方

②赤枠のように「ページ全体をキャプチャ」をクリックします。

スクリーンショット,Windows,やり方

③「保存」ボタンを押すとダウンロードされます。

スクリーンショット,Windows,やり方

画面右上にダウンロードの通知が表示されたら、「名前をつけて保存」ボタンをクリックします。

名前をつけて保存」のウインドウが表示されたら、任意の保存場所任意のファイル名を指定して、「保存」ボタンをクリックします。

アドレスバーにショートカットボタンを設置する方法

下記の赤枠のようなショートカットボタンをアドレスバーの右側に表示させておくと、より簡単にMicrosoft Edgeで全画面スクリーンショットを撮ることができるようになります。

スクリーンショット,Windows,やり方

①右上の3点箇所をクリックし、赤枠の「設定」をクリックします。

スクリーンショット,Windows,やり方

②「外観」をクリックし、「[Webキャプチャ]ボタン」を有効化します。

スクリーンショット,Windows,やり方

③上記の赤枠のように、アドレスバーの右側にカメラマークが表示されればOKです。

スクリーンショット,Windows,やり方

まとめ

Google Chorome・Microsoft Edgeでの縦長の全画面キャプチャ(スクロール範囲も)を撮る方法は、参考になりましたでしょうか?

今回紹介した方法以外にも色々な方法はありますが、Google Chromeで拡張機能の「Fire Shot」を使用するのが、私は一番簡単だと思います。

旅×ブログ起業家のKanako
私、Kanakoは今現在、一か所に定住することなく、本当の意味での自由な暮らしをしています。

シゴト道具はPC一つだけです。

しかし、

最初はこんな暮らしができるなんて、これっぽっちも思っていませんでした。

私がこの方法に出会えたのは「他人と比較される人生をやめた」からです。

好きなものは好き!嫌いなものは嫌い!と本音をハッキリ言えたり、好きな人と好きなだけ好きなことをするために「自分軸の生き方」を選びました

そうやって今は常に本来の姿(素の自分)で、場所に縛られないシゴトを楽しみながら、自由な旅人人生を送ることができています。

どうしてKanakoが世界中をシゴト場にして自由気ままに暮らすことができるようになったのか?

ご興味のある方はプロフィールをご覧になってみてくださいね!!

こちらです。

メルマガバナー新

 

私が”ブログ”で月収100万円を得ている方法とは?
詳しくはこちら
私が”ブログ”で月収100万円を得ている方法とは!
詳しくはこちらから