画像作成・編集

Chromeブラウザでページ全体のキャプチャを撮る方法

google chrome page captcha

パソコンのウェブブラウザでGoogle Chromeを使っていて、ページ全体のキャプチャを撮りたいと思った時にツールを使わずに実行できる方法をご案内します。

そんなに多用するスキルではないですがまれにページ内全体のキャプチャを撮りたくなるときってあると思います。

私もむかしは画面ごとにキャプチャを撮って、フォトショでくっつけていた記憶があります。

そんな面倒なことなしに《3ステップでページのキャプチャを撮る方法》をご紹介したいと思います。

ポイント

「スクリーンショット」「キャプチャ」は同じ意味。

Chromeでページ全体のキャプチャを撮る方法

今回はこちらのYahoo!JAPANのトップ画面を使用していきたいと思います。

ページ全体のキャプチャを撮る手順

※WindowsとMacでショートカットが違うので、両方とも記載しておきます。

  • step.1 デベロッパーツールの呼び出し

    • Win:Ctrl+Shift+I
    • Mac:command+option+I
  • step.2 詳細機能の呼び出し

    • Win:Ctrl+Shift+P
    • Mac:command+shift+P
  • step.3 『full』で撮影

    検索窓に『full』と入力することで全画面のキャプチャに機能を絞り、キャプチャを実行できます。

以下で手順の詳細を書いておきます。

デベロッパーツールの呼び出し

まずはYahoo!JAPANのトップ画面で以下のショートカットを使い、デベロッパーツールを呼び出します。

  • Win:Ctrl+Shift+I
  • Mac:command+option+I
画面右がデベロッパーツール

このような状態にできたら次の機能呼び出しをします。

機能の呼び出し

  • Win:Ctrl+Shift+P
  • Mac:command+shift+P

デベロッパーツールがこのようになります。

次のステップでこの中から必要な機能を呼び出します。

『full』を入力し撮影

  • 検索窓に『full』▶『enter』

『full』と入力すると紫のタグで《Screenshot》と出てくるので、この状態で『Enter』を押すことで自動的にページ内全体のキャプチャを撮影することが出来ます。

撮影例

Yahoo!JAPANのページとahamoのページを用意しました。両方とも画像をタップで拡大できます。

《Yahoo!JAPAN》

《ahamo》

このようにページ全体をキャプチャできました。

ほんの3ステップで撮ることができるので難しいことはないと思います。

ページ全体のキャプチャ画像のサイズ

各ページの長さにもよるのですが、サイズはかなり大きめになります。私の環境がMacBookProだからでしょうか。

キャプチャ画像の容量は3MBになりやすいです。

スポンサーリンク

ページ全体のキャプチャのメリット

こういったブログに貼り付けたり、画像加工する際に画面内に収まらないような画像を一発撮りしたり、作ったLPのチェックにはもってこいです。

画像をくっつけるのに慣れていたとしてもやはり加工の工数は少ないほうがいいので、一気にページ全体のキャプチャを撮ってからいらない部分を削除したほうが早いです。

最後の確認

ポイント

  1. デベロッパーツールの呼び出し
    • win:Ctrl+Shift+I
    • Mac:command+option+I
  2. 詳細機能の呼び出し
    • win:Ctrl+Shift+P
    • Mac:command+option+P
  3. 『full』でキャプチャ
ハッタ

以上です。

もしもストレージがいっぱいになって動きが悪くなるようでしたら外付けポータブルSSDが1台あると便利なのでぜひ。

合わせて読まれる記事

-画像作成・編集