Chromeで拡張機能を追加せずホームページ全面のスクリーンショットを簡単にダウンロードする方法

この記事は公開から１年以上経過しています。

こんにちは、クリエイターのSHOJIです。
「ホームページ全面のスクリーンショットって出来ますか？」こんなご質問をよく頂戴します。

これまでパソコンでスクリーンショットを使われていなかった方も、近年のスマートフォンの普及に伴って当たり前のように利用されるようになってきたからだと思われます。

スクリーンショットまたはキャプチャーと呼ばれるこの機能が「画面に表示されている部分だけ」撮影して画像データとして保存するものだということはご存じだと思いますが、ご質問のように「表示中のページ全面のスクリーンショット」となると知らない方も多いのではないでしょうか。

Google Chromeだったら「FireShot」や「Awesome Screenshot」などの拡張機能を追加すれば、簡単にフルスクリーンショットが可能なんですが、一般的には「Chromeは使っているけど拡張機能なんて分からない」って方が大多数なんですよね。

そこで今回の豆知識では「Chromeで拡張機能を追加せずホームページ全面のスクリーンショットを簡単にダウンロードする方法」と題してご紹介してみたいと思います。

• \\　目 次　//
•  デベロッパーツールを利用
•  フルスクリーンショットの手順
•  スマホ表示のフルスクリーンショットの場合
•  最後に

デベロッパーツールを利用

デベロッパーツールとは、Chromeに標準で搭載されている開発者ツールのことで、WebサイトにおけるHTMLやCSS、JavaScriptなどの構成確認や検証、表示スピードや通信状況など確認できます。

特別なソフトやプログラムを使わずに、ブラウザ（Chrome）のみで手軽に利用でき、Webの開発に携わるエンジニアにとって必需品と言っても過言ではありません！

今回ご紹介のGoogle Chromeに限らず、FirefoxやMicrosoft Edge、Safariなどのモダンブラウザであれば同様の機能を持ったツールが搭載されています。

 

フルスクリーンショットの手順

※正確なスクリーンショットをダウンロードするために、デベロッパーツールを開く前、あるいはデベロッパーツールが開いた状態でコマンド実行する前に、画面をフッター最下部までスクロールしてページ内の挙動を安定させておくことをおススメします！

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

Windowsをお使いの方は、ホームページを開いている画面上で右クリックをしウィンドウの中から「検証」を選択するとデベロッパーツールが開きます。また、右クリックではなくショートカット「Ctrl＋Shift＋I」もしくは「F12」でも同様に開くことも可能です。

Macをお使いの方は、ショートカット「command＋option＋I」で開きます。

②「Run command」を選択する

デベロッパーツールを開き、右上にある「Customize and control DevTools」という名のボタンをクリックします。開いたウィンドウの中から「Run command」を選択してください。

※デベロッパーツールが開いた状態からショートカット、Windowsなら「Ctrl+Shift+P」Macなら「command+shift+P」でも同じようにウィンドウを開くことができます。

③「Run command」パネルで詳細機能を呼び出す

「Run command」パネルが開いたら、フィルター検索を利用して機能を呼び出しますので、上部の検索ボックス内に「full」と入力します。

「full」と入力すると「Screenshot：Capture full size screenshot」機能が呼び出されます。

④スクリーンショットをダウンロードする

③にて「Screenshot：Capture full size screenshot」機能が呼び出された後は、ただEnterキーをクリックするだけで自動的にスクリーンショットがダウンロードされます。

Macをお使いの方は、returnキーでスクリーンショットがダウンロードされます。

 

スマホ表示のフルスクリーンショットの場合

基本的には前項と同じ手順ですが、デベロッパーツールを開いた後で「Toggle device toolbar」という名のボタン（モバイルマーク）をクリックして、任意のデバイス（画面幅）に設定する必要があります。

また、任意のデバイス（画面幅）に設定した後で、リロード（ページの更新）を行い、さらに画面をフッター最下部まで一度スクロールしてページ内の挙動を安定させておくと、正確なスクリーンショットがダウンロードできます。

任意のデバイス設定、リロードの実行、画面をフッター最下部まで一度スクロールしてページ内の挙動を安定させた後は、前項の②以降と同じ手順で進めるとスマホ表示のフルスクリーンショットをダウンロードすることができます。

最後に

今回ご紹介したように、Chromeに標準搭載されているデベロッパーツールを利用すると、あらたに拡張機能を追加しなくても、簡単にホームページのフルスクリーンショットをダウンロードできることがお分かりいただけたこと思います。

ただし、コンテンツ内にてアニメーション効果やスクロールエフェクトなどを実装しているページについては、そのままスクリーンショットを行っても上手くいかない場合があります。

そのため、本文内でも記述しましたが、画面をフッター最下部までスクロールしてページ内の挙動を安定（すべてのコンテンツを表示）させておくことで、より正確なスクリーンショットをダウンロードができることにつながることと思います。

• 前の記事へ

  がんばれ松阪！コロナに負けるな！最大20％あげちゃうキャンペーン【松阪市キャッシュレス決済ポイント還元事業】

• 次の記事へ

  三重松阪の新しい観光スポット？コネ助の等身大パネル門松バージョン