Google Chromeの拡張機能を使わず、スクリーンショットでWebサイト全体を写す方法をご紹介します。
この方法はMac、Windowsのどちらでも対応可能で、デスクトップ表示とモバイル表示のどちらもWebサイト全体をスクリーンショットができるため、あらゆる場面で役に立ちます。
Google Chromeさえあればソフトのインストールや拡張機能も不要で無料でWebサイト全体のスクリーンショットが取れるため、是非覚えて欲しいおすすめの方法です。
Chromeでうまくスクリーンショットができない方は、気をつけるポイントやコツなどもを解説していますので、参考にしてみてください。
chromeのスクリーンショットでWebサイト全体を写す方法
まずは、スクリーンショットを取りたいWebサイトをGoogle Chromeで開きます。
今回使うのは「デベロッパーツール」です。Google Chromeには拡張しなくても無料で誰でも使えるツールです。まずは、「デベロッパーツール」を開きます。
- 【Macの場合】Webサイト上でCommandキー＋optionキー＋“ i ”を押す
- 【Windowsの場合】Webサイト上でControlキー＋Shiftキー＋“ i ”を押す
すると、先ほどまで開いていたwebサイトがこのような形になります。これが「デベロッパーツール」が開かれた状態です。
ここから先の操作でデスクトップ表示形式かモバイル表示形式かで方法が別れます。
デスクトップ表示形式をスクリーンショットする場合
先ほどの「デベロッパーツール」が開かれた状態でさらにコマンドを入力します。
- 【Macの場合】Webサイト上でCommandキー＋Shiftキー＋“ P ”を押す
- 【Windowsの場合】Webサイト上でControlキー＋Shiftキー＋“ P ”を押す
このコマンドはデベロッパーツールの詳細機能を呼び出すショートカットです。
検索窓のようなところに自動でカーソルが移動していると思います。
そこに「full」と打ち込みます。すると候補が絞られて「Screenshot Capture full size screenshot」という項目だけになります。
「Screenshot Capture full size screenshot」をクリックor「Enterキー」を押すことでデスクトップ表示形式のスクリーンショットが保存されます。
保存されるまで数秒かかりますので焦らず待ちましょう。スクリーンショットはping形式で保存されます。
モバイル表示形式をスクリーンショットする場合
「デベロッパーツール」が開かれた状態で「Toggle device toolbar」というアイコン(スマホとタブレットが重なったマーク)をクリックします。
するとWebサイトの表示形式がモバイル表示に変わります。このときToggle device toolbarのアイコンが青くなって有効になっているはずです。
この状態までくればあとは先ほどと同じ方法でWebサイト全体のスクリーンショットを取ることができますがもう１つ簡単な方法がモバイル表示の場合のみ使用できます。
「More options」というアイコン(縦に３個の丸が並んだマーク)をクリックします。
すると詳細オプションが表示されます。この中の「Capture full size screenshot」をクリックするとモバイル表示形式のスクリーンショットが保存されます。
こちらも保存されるまで数秒かかりますので焦らず待ちましょう。スクリーンショットは同じくping形式で保存されます。
モバイル表示の場合は、デバイスごとサイズが微妙に違うため、デバイスごとの見え方を変えることができます。ここではモバイルだけでなく、iPadの表示形式も選べます。
「Responsive」という項目をクリックすると、各デバイスが選択できるようになるので、お好みのデバイスをクリックすると表示が変わります。
chromeのスクリーンショットをうまく写すコツと注意点
chromeのWebサイト全体をスクリーンショットする際に、うまくできない方の多くは「画像が全て表示されない」という問題だと思います。
最近のWebサイトではスクロールするにつれて画像などのコンテンツが表示されるような仕組み(スクロールエフェクト)などが使われることが多くなり、うまくスクリーンショットが取れない場合があります。
このような場合には「一度サイト全体をスクロールして画像を表示させる」ことが有効です。
スクロールエフェクトが原因の場合は、スクロールして画像を表示させた状態であればスクリーンショットを取った時に画像も表示された状態になります。
確実に全てのWebサイトがこの方法で問題を解決できるわけではありませんが、1度試してみる価値はあると思います。
【Webサイト全体のスクリーンショットを取る流れ】
- chromeでWebサイトを開く
- 一度フッダーまでスクロールする(画像が表示されるようなスピードで)
- フッダーまでスクロールしたらデベロッパーを使ってスクリーンショット
まとめ
いかがでしたか？Google Chromeの拡張機能を使わず、スクリーンショットでWebサイト全体を写す方法をご紹介しました。
Chromeを使えばWebサイト全体のスクリーンショットは１度覚えてしまえばとても簡単です。
デバイス形式の見え方もそれぞれ選択できるのもポイントです。Google Chromeの拡張機能を使わず無料ですぐスクリーンショットが必要という方は是非覚えておいて欲しいです。
スクリーンショットの保存場所の変更設定はこちらの記事で詳しく解説していますので、参考にしてください。
この記事のまとめ・ChromeのスクリーンショットでWebサイト全体を写すためには「デベロッパーツール」を使う
・デバイスを選んで、デバイスごとのサイズでスクリーンショットも取れる
・一度サイト全体をスクロールして画像を表示させてからスクリーンショットを取る