← 機能一覧に戻る
Free

スクリーンショット

スクリーンショットツールは、2 つのモードで任意のウェブページを高品質な画像として保存します。表示エリアモード(ブラウザウィンドウに表示されている内容をそのまま)と、フルページモード(折り返し以下のコンテンツを含む、ページ全体を上から下まで)です。スクリーンショットは高解像度の PNG ファイルとして即座にデバイスへダウンロードされます。クラウドへのアップロードなし、アカウント不要、待ち時間なし。

OS 標準のスクリーンショット機能(Cmd+Shift+4 やスニッピングツールなど)はブラウザの UI やツールバー、他のウィンドウまで一緒にキャプチャしてしまい、スクロール先のコンテンツは撮れません。DevSuite Pro のスクリーンショットツールはその両方の問題を解決します。ウェブページのコンテンツだけをキャプチャし(ブラウザ UI を含まない)、ページ全体を自動スクロールしてシームレスなフルページ画像を生成できます。表示エリアモードは Chrome のネイティブキャプチャ API を使用してピクセル単位の精度を実現します。フルページモードは自動スクロールしながら各ビューポートタイルをキャプチャし、1 枚の連続した画像に合成します。出力はディスプレイのデバイスピクセル比に合わせたフル解像度の PNG なので、Retina や HiDPI ディスプレイでも鮮明に表示されます。

ライブプレビュー
example.com/landing-page
Visible Area
Full Page
PNG · Full Resolution
Capture Area
Capture Info
Width1440px
Height900px
FormatPNG
Scale2x
Download
主な機能

表示エリアキャプチャ

ブラウザのビューポートに表示されている内容をそのままキャプチャします。ブラウザの UI、ツールバー、スクロールバーは含まれません。画面に映っているウェブページのコンテンツだけを 1 クリックで即座に取得できます。

フルページスクリーンショット

折り返し以下のすべてのコンテンツを含む、ページの最上部から最下部までをキャプチャします。ツールが自動的にページをスクロールし、各セクションをキャプチャしてタイルを 1 枚のシームレスな連続画像に合成します。長さを問わずあらゆるページに対応しています。

Retina / HiDPI 品質

ディスプレイのネイティブピクセル比(Retina では 2x、一部の Windows ディスプレイでは 1.5x)でキャプチャします。OS スクリーンショットで起こるぼやけたアップスケールとは異なり、ズームインしても鮮明な高解像度画像が得られます。

PNG への即時ダウンロード

キャプチャした画像はロスレスの PNG ファイルとしてすぐにデバイスへ直接ダウンロードされます。クラウドへのアップロード、処理待ち、アカウントは不要です。数秒以内にダウンロードフォルダにファイルが保存されます。

コンテンツのみのクリーンな出力

キャプチャにはウェブページのコンテンツのみが含まれます。ブラウザのタブ、アドレスバー、ブックマークバー、拡張機能ツールバーは含まれません。ブラウザ UI が存在しないかのように、ページがそのまま出力されます。

あらゆるページに対応

静的 HTML、SPA(React、Vue)、遅延読み込み画像があるページ、無限スクロール、固定ヘッダー、固定配置要素など、構築方法を問わずあらゆるウェブページをキャプチャできます。フルページモードはすべてに対応しています。

主な活用例

ポートフォリオとケーススタディの記録

デザインや開発を担当したウェブサイトのフルページスクリーンショットをポートフォリオ用に撮影できます。フルページモードでページデザイン全体をシームレスな 1 枚の画像として取得できます。Behance や Dribbble、ポートフォリオのケーススタディに最適です。

視覚的なコンテキストを伴うバグレポート

バグを報告する際、スクリーンショットは千の言葉に勝ります。問題が発生している正確なビューポートをキャプチャするか、バグがレイアウト全体にどう影響しているかを示すフルページスクリーンショットを使えます。GitHub の Issue や Jira チケットに添付できます。

デザインレビューと承認

ステークホルダーレビュー用にステージングサイトの現状をキャプチャします。フルページスクリーンショットにより、クライアントはサイトにアクセスしなくてもデザイン全体を確認できます。技術に詳しくないステークホルダーとのレビューに役立ちます。

変更前後の比較

変更を加える前にスクリーンショットを撮り、変更後にもう一枚撮ります。2 枚の画像を並べて比較することで、CSS やレイアウトの変更が、作業していたセクションだけでなくページ全体で正しく反映されているか確認できます。

SNS とブログコンテンツ

ブログ記事、ツイート、プレゼンテーション用にウェブページのクリーンでプロフェッショナルな画像を作成します。ツールバーやブラウザ UI のないすっきりとした出力は洗練されたプロの仕上がりで、ブラウザ UI をトリミングする必要がありません。

使い方
1

スクリーンショットツールを起動する

DevSuite Pro のドックまたはポップアップを開き、スクリーンショットアイコンをクリックします。「表示エリア」と「フルページ」の 2 つのオプションを持つモード選択画面が表示されます。

2

キャプチャモードを選択する

「表示エリア」をクリックすると現在のビューポート(今見えている内容)をキャプチャし、「フルページ」をクリックするとページの上から下まで全体をキャプチャします。

3

キャプチャを待つ

表示エリアのキャプチャは即座に完了します(1 秒未満)。フルページのキャプチャはツールがスクロールしてタイルを合成するため数秒かかります。進捗インジケーターでキャプチャの状態を確認できます。

4

PNG をダウンロードする

キャプチャした画像は PNG ファイルとして自動的にダウンロードされます。ページタイトルとタイムスタンプで命名されたファイルをブラウザのダウンロードフォルダで確認してください。

5

続けてスクリーンショットを撮る

キャプチャ後もツールはアクティブのままです。再起動することなく同じページや別のページのスクリーンショットを続けて撮れます。スクロールしたり変更を加えたりして再度キャプチャできます。

試してみませんか? スクリーンショット?

DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。

Chrome に追加 Edgeに追加 Firefox に追加