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

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

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

だから・・・、

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

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

それが出来るんです！

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

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

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

それではやってみよう。

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

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

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

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

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

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

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

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

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

コマンドを入力

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

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

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

センパイ

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

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

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

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

作業の流れの全体像

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

簡単ですね。

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

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

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

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

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

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

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

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