【PC版】縦に長いウェブページ全体のスクリーンショットの撮り方「フルサイズスクリーンショット」

ウェブページ全体のスクリーンショットを撮りたい場面ってよくあると思います。

そんな時に困るのが、ウェブページってだいたい縦にものすごく長い!ってことですよね。

 

だから・・・、

  1. まずブラウザに表示されている範囲をキャプチャして、
  2. スクロールしてまたキャプチャして、

という作業を繰り返して、それらを後からPhotoshopなどで合体させたりしていませんか。

でもこれって面倒で、出来ることなら一発でページ全体のスクリーンショットをキャプチャ出来ないかなぁって思いますよね。

 

それが出来るんです!

以前にスマートフォンでのやり方は解説したけれど、パソコン版のChromeでもウェブページ全体をスクリーンショットを簡単に撮ることが出来るんです。

このやり方を覚えれば、何度もスクリーンショットを撮って合体する作業は必要なくなります。

今回はそんな超便利な技の紹介をしていきます。

それではやってみよう。

 

▼スマートフォン版Chromeでの縦に長いページのスクリーンショットの撮り方

【PC版】縦に長いウェブページ全体のスクリーンショットの撮り方

今回はGoogleChromeを使ったスクリーンショットの撮り方を紹介します。

まず、スクリーンショットを撮りたいページをGoogleChromeで開きましょう。

デベロッパーツールを開く

その状態で「デベロッパーツール」を開きます。

 

デベロッパーツールの開き方は以下のようにいろいろありますが、どの方法でもいいので、デベロッパーツールを開きましょう。

  • F12キー
  • Ctrl +Shift+I
  • 右上の3点メニューその他のツールデベロッパーツール

すると、このような感じで、ページの右側に何やらいろいろと出てきます。

デベロッパーツールを開く

これがデベロッパーツールの画面です。

コマンドを入力

次に、デベロッパーツールが開いた状態で、キーボードで「Ctrl +Shift+P」を押します。

Ctrl +Shift+P

デベロッパーツールのコマンド

 

コマンド画面が開くので「フル」と入力します。

デベロッパーツールのコマンド

一番上に「フルサイズのスクリーンショットをキャプチャ」という項目が出ているので、それを選択します。

センパイセンパイ

この瞬間に、ページ全体のスクリーンショットが自動的にキャプチャされます。

ポイント僕の環境では日本語で「フル」と入力することで「フルサイズのスクリーンショットをキャプチャ」という項目が表示されますが、環境によっては日本語ではなくて「Full」と入力しなければならない場合もあります。
「フル」と入力しても何も変化が起きない場合は「Full」と入力してみてください。

 

ファイルの保存場所を決める

ファイル保存画面が開くのでファイルの保存場所を決めます。

ファイルの保存場所

これでページ全体のフルサイズスクリーンショットのキャプチャが完了です。

 

作業の流れの全体像

まとめると、フルサイズのスクリーンショットをキャプチャする手順は以下の流れになります。

  1. Ctrl +Shift+I(あるいはF12キーかメニューからデベロッパーツールを開く)
  2. Ctrl +Shift+P
  3. 「フル」と入力
  4. 「フルサイズのスクリーンショットをキャプチャ」を選択
  5. ファイルの保存場所を決める

簡単ですね。

 

2点だけ気をつけたいポイント

すごく便利なのですが、2点だけ気をつけておきたいポイントがあります。

  • デベロッパーツールで開いている状態の幅でキャプチャされる
  • 画像の読み込みがされないままキャプチャされる

デベロッパーツールで開いている状態の幅でキャプチャされる

フルサイズスクリーンショットは、デベロッパーツール上のプレビューのページ幅でキャプチャされるので、スクリーンショットを撮る時にはあらかじめブラウザの幅などを調整しておくと良いと思います。

画像の読み込みがされないままキャプチャされる

デベロッパーツールの左側にプレビューされたページは画像が読み込まれていない場合が多々あるので、キャプチャをする前に一度ページの一番下までスクロールして画像が読み込まれているのを確認してからキャプチャするとよいと思います。

この2点を気をつけておけば、失敗なくキャプチャできると思います。

 

という事で、ブロガーの皆さんもテキスト作成の教職員の皆さんも、今日からフルサイズのスクリーンショット作業から解放されましょう!