スクリーンショットツールは、2 つのモードで任意のウェブページを高品質な画像として保存します。表示エリアモード（ブラウザウィンドウに表示されている内容をそのまま）と、フルページモード（折り返し以下のコンテンツを含む、ページ全体を上から下まで）です。スクリーンショットは高解像度の PNG ファイルとして即座にデバイスへダウンロードされます。クラウドへのアップロードなし、アカウント不要、待ち時間なし。
OS 標準のスクリーンショット機能(Cmd+Shift+4 や Snipping Tool など)は、ブラウザの UI やツールバー、他のウィンドウまで含めた画面全体をキャプチャしてしまい、さらにファーストビュー以下のコンテンツは撮影できません。DevSuite の Screenshot ツールはこの両方の問題を解決します。ブラウザの UI を含まずウェブページのコンテンツだけをキャプチャし、ページ全体をスクロールしながら継ぎ目のない1枚のフルページ画像を生成できます。
表示領域モードは Chrome のネイティブキャプチャ API を使用し、ピクセル単位で正確な結果を得られます。全ページモードではページを自動的にスクロールしながらビューポートごとにタイルとしてキャプチャし、それらを1枚の連続した画像へと合成します。出力はディスプレイのデバイスピクセル比に合わせたフル解像度の PNG のため、Retina や高 DPI ディスプレイでも鮮明なスクリーンショットになります。
固定表示(fixed)やスティッキー要素(ヘッダー、Cookie バナー、チャットウィジェットなど)は、全ページキャプチャ中に自動的に処理されます。ヘッドレスレンダラーでタイルを合成するのではなく実際のページをスクロールする仕組みのため、ビューポートに固定された要素はタイルごとに繰り返し写り込むことなく、正しい位置で一度だけキャプチャされます。遅延読み込み(lazy-load)される画像や、スクロールして表示された時点で初めてレンダリングされるコンテンツも、キャプチャがその位置を通過する際に自然に読み込みがトリガーされるため、最終的な画像は空のプレースホルダーの羅列ではなく実際の訪問者が目にする内容を反映します。これは画像の多いランディングページや長文記事において特に重要なポイントです。
ブラウザのビューポートに表示されている内容をそのままキャプチャします。ブラウザの UI、ツールバー、スクロールバーは含まれません。画面に映っているウェブページのコンテンツだけを 1 クリックで即座に取得できます。
折り返し以下のすべてのコンテンツを含む、ページの最上部から最下部までをキャプチャします。ツールが自動的にページをスクロールし、各セクションをキャプチャしてタイルを 1 枚のシームレスな連続画像に合成します。長さを問わずあらゆるページに対応しています。
ディスプレイのネイティブピクセル比（Retina では 2x、一部の Windows ディスプレイでは 1.5x）でキャプチャします。OS スクリーンショットで起こるぼやけたアップスケールとは異なり、ズームインしても鮮明な高解像度画像が得られます。
キャプチャした画像はロスレスの PNG ファイルとしてすぐにデバイスへ直接ダウンロードされます。クラウドへのアップロード、処理待ち、アカウントは不要です。数秒以内にダウンロードフォルダにファイルが保存されます。
キャプチャにはウェブページのコンテンツのみが含まれます。ブラウザのタブ、アドレスバー、ブックマークバー、拡張機能ツールバーは含まれません。ブラウザ UI が存在しないかのように、ページがそのまま出力されます。
静的 HTML、SPA（React、Vue）、遅延読み込み画像があるページ、無限スクロール、固定ヘッダー、固定配置要素など、構築方法を問わずあらゆるウェブページをキャプチャできます。フルページモードはすべてに対応しています。
デザインや開発を担当したウェブサイトのフルページスクリーンショットをポートフォリオ用に撮影できます。フルページモードでページデザイン全体をシームレスな 1 枚の画像として取得できます。Behance や Dribbble、ポートフォリオのケーススタディに最適です。
バグを報告する際、スクリーンショットは千の言葉に勝ります。問題が発生している正確なビューポートをキャプチャするか、バグがレイアウト全体にどう影響しているかを示すフルページスクリーンショットを使えます。GitHub の Issue や Jira チケットに添付できます。
ステークホルダーレビュー用にステージングサイトの現状をキャプチャします。フルページスクリーンショットにより、クライアントはサイトにアクセスしなくてもデザイン全体を確認できます。技術に詳しくないステークホルダーとのレビューに役立ちます。
変更を加える前にスクリーンショットを撮り、変更後にもう一枚撮ります。2 枚の画像を並べて比較することで、CSS やレイアウトの変更が、作業していたセクションだけでなくページ全体で正しく反映されているか確認できます。
ブログ記事、ツイート、プレゼンテーション用にウェブページのクリーンでプロフェッショナルな画像を作成します。ツールバーやブラウザ UI のないすっきりとした出力は洗練されたプロの仕上がりで、ブラウザ UI をトリミングする必要がありません。
DevSuite Pro のドックまたはポップアップを開き、スクリーンショットアイコンをクリックします。「表示エリア」と「フルページ」の 2 つのオプションを持つモード選択画面が表示されます。
「表示エリア」をクリックすると現在のビューポート（今見えている内容）をキャプチャし、「フルページ」をクリックするとページの上から下まで全体をキャプチャします。
表示エリアのキャプチャは即座に完了します（1 秒未満）。フルページのキャプチャはツールがスクロールしてタイルを合成するため数秒かかります。進捗インジケーターでキャプチャの状態を確認できます。
キャプチャした画像は PNG ファイルとして自動的にダウンロードされます。ページタイトルとタイムスタンプで命名されたファイルをブラウザのダウンロードフォルダで確認してください。
キャプチャ後もツールはアクティブのままです。再起動することなく同じページや別のページのスクリーンショットを続けて撮れます。スクロールしたり変更を加えたりして再度キャプチャできます。
