GoogleChromeを使用して特定のサイズのウェブサイトのスクリーンショットを撮る方法

オンラインで共有したいサイトやページのポートフォリオを持っている代理店や会社の場合、各サイトの統一されたスクリーンショットをキャプチャしようとする苦労を経験したことがあるでしょう。

私たちが協力しているクライアントの XNUMX つは、会社の範囲内で内部的にホストできる、ホストされたイントラネット ソリューションを構築しています。 イントラネットは、企業が会社のニュースを伝えたり、マーケティング情報を配信したり、福利厚生情報を提供したりするのに非常に役立ちます.

私たちは、このクライアントが親会社の Web サイトからイントラネット ソリューション製品を移行するのを支援しました。 これは、新しいソーシャル プロファイルの作成、Marketo の更新、サイトを統合するために行ったカスタム開発の一部の分解など、すべてを組み込んだ大規模なプロジェクトでした。

重要なステップの XNUMX つは、新しい Web サイトで目立つ顧客のイントラネット サイトの優れた製品ショットを確保することでした。 各スクリーンショットがサイト全体で一貫して同じ幅と高さになるようにしたかったのです。 Google Chrome を使用していない限り、これは難しい場合があります。

GoogleChromeを使用したクライアントのスクリーンショット

気付いていないかもしれませんが、Google Chrome に組み込まれている一連の堅牢な開発者ツールを使用して、完璧なスクリーンショットをキャプチャできます。 興味深いことに、その驚くべき柔軟性にもかかわらず、あまり知られていない機能です。 この機能を使用すると、特定のサイズと画面サイズでレスポンシブ サイトのショットを撮ることもできます。

以下は、Google Chrome を使用してウェブページの完全な特定サイズのスクリーンショットを撮る方法に関する簡単なビデオ チュートリアルです。

GoogleChromeでスクリーンショットを撮る手順

Google Chrome の開発者ツールは、デバイスのツールバーを使用してサイトをプレビューできます。 このツールは、開発者がさまざまなデバイスのさまざまなビューポート サイズでサイトがどのように見えるかを確認できるように構築されていますが、Web ページの完全なサイズのスクリーンショットを取得するための完璧な方法でもあります.

この場合、美しいイントラネット サイトを構築したさまざまな業界の主要クライアントのそれぞれにスクリーンショットを撮ってもらい、ウェブサイトのポートフォリオ内にそれらすべてを表示できるようにします。 ページは正確に幅 1200 ピクセル、高さ 800 ピクセルにする必要があります。 これを行うには:

1. 右端のナビゲーションボタン（縦に3つ並んだ点）で、 メニューのカスタマイズと制御.

2. 次の項目を選択します。： その他のツール>開発者ツール

3. トグル デバイスツールバー デバイスのオプションと寸法を表示します。

4. 最初のオプションをに設定します 敏感な、次にサイズを1200 x 800に設定し、Enterキーを押します。 これで、ページがそれらのサイズで表示されます。

4. デバイスツールバーの右側にあるナビゲーションボタン（縦に3つ並んだ点）をクリックして、 スクリーンショットのキャプチャ.

4. Google Chromeは完璧なスクリーンショットを撮り、それをあなたの 資料をダウンロードする メールに添付して送信できるフォルダ。 フルサイズのスクリーンショットを選択すると、ページ全体の長さが使用され、高さの制限が無視されるため、選択しないでください。

スクリーンショット用のGoogleChromeキーボードショートカット

キーボード ショートカットの達人なら、これらのショートカットを使ってページ全体のスクリーンショットを撮ることができます。 ビューポートの最大高さを設定できないので、このアプローチは好きではありませんが、ページ全体のスクリーンショットが必要な場合には便利です。

1. Alt + Command + I 
2. Command + Shift + P

1. Ctrl + Shift + I 
2. Ctrl + Shift + P