[活用例](https://openscreenshot.app/ja/use-cases/)

# デザイン レビュー用にウェブページをキャプチャする方法

ページ全体または 1 つのコンポーネントをキャプチャし、Spotlight とテキストで注目点を示して、複数ページの PDF で共有します。

執筆: [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

デザイン レビューでは、**ページ全体**でページ全体をキャプチャし、フィードバックがほしい箇所に印を付けて、レビュアーがページごとに読める PDF を共有します。OpenScreenShot では、**Spotlight** で話題の範囲の外側をすべて暗くし、**テキスト**と**矢印**で吹き出しを追加します。カード、グラフ、表など 1 つのコンポーネントのレビューには、**要素をキャプチャ**を使います。

## レビュー用にページを準備する手順

1. レビューしたいウィンドウ幅でページを開きます。キャプチャには現在の幅でのレイアウトが写るため、別のブレークポイントをレビューする場合は先にウィンドウのサイズを変えます。
2. 遅延読み込みの画像が読み込まれるようにページを一度最後までスクロールし、先頭に戻ります。レビューの対象ではない Cookie バナーやチャット ウィジェットは閉じます。
3. OpenScreenShot のアイコンをクリックします。初期設定では、これで**ページ全体**のキャプチャが始まります。エディタが開くまでタブはそのままにしておきます。
4. 最初と最後のセクション、ヘッダー、カルーセルなど動きのある範囲を確認します。
5. **Spotlight**（`O`）を選び、レビュアーに見てほしい各範囲をドラッグします。複数の切り抜きは 1 つの暗いレイヤーにまとまります。
6. 各範囲の横に**テキスト**（`T`）のメモを、メモで小さな箇所を指す必要がある場所に**矢印**（`A`）を追加します。
7. **画像を保存**をクリックして**書き出し**ダイアログを開きます。**PDF** を選び、以下の書き出し手順に従います。

## 1 つのコンポーネントをキャプチャする

ページを右クリックし、**OpenScreenShot** サブメニューを開いて、**要素をキャプチャ**を選びます。コンポーネントが枠で囲まれるまでポインターを合わせ、クリックするか `Enter` を押して、その範囲をキャプチャします。`↑` を押すと親要素（たとえばカードを含むセクション）を選択でき、`←` または `→` で隣の要素に移動できます。

要素のキャプチャでは、手作業で切り抜かずに余白のない画像が得られます。同じコンポーネントの 2 つのバージョンを比べるときに便利です。要素の全体が画面に表示されていない場合、ピッカーは代わりにページ全体のキャプチャを提案します。

## レビュアーが追えるようにフィードバックの印を付ける

Spotlight の切り抜きは、矩形、角丸矩形、楕円のいずれかにできます。Spotlight の画像は 1 つの話題に 1 枚にします。明るい範囲が多い画像では、どのメモがどの範囲に対応するのかをレビュアーが推測することになります。番号付きのフィードバックでは、各箇所に**手順番号**（`S`）を追加し、レビューのスレッドでその番号を参照します。番号は自動で増え、1 つを削除すると振り直されます。

**図形**ツール（`R`）は、ページのほかの部分を暗くせずに範囲の周りに枠線を描きます。**矢印**ツールには塗りつぶし、線のみ、両端、点の先端があり、中央のハンドルをドラッグするとほかの内容を避けるように曲げられます。

## レビューを PDF で共有する

**書き出し**ダイアログで **PDF** を選び、**ページ サイズ**で **A4** または **Letter** を選んで、**複数ページに分割**をオンにします。連続するページは 5 mm ずつ重なるため、ページの区切りにある文字の行は両方のページに表示されます。画面上で読む場合は、**ページ サイズ**で**全体**を選ぶと、ページを縦に長い 1 枚の PDF ページにまとめられます。

PDF には、スクリーンショットが注釈付きの画像として入ります。選択できるテキストはありません。レイアウトの比較は[スクリーンショットを PDF にするガイド](https://openscreenshot.app/ja/blog/save-screenshot-as-pdf/)で、ほかの形式は[書き出しのリファレンス](https://openscreenshot.app/ja/docs/#export)で確認できます。

## ページ全体のキャプチャの制限事項

ページ全体のキャプチャは、拡張機能がスクロールする間に描画されたとおりにページを記録します。スクロール中に変わる内容もあります。

- 固定ヘッダーは最初のタイルでキャプチャされ、最上部に 1 回だけ追加されます。サイドバーや下部のバーなど、ほかの固定要素が想定どおりの位置にあるか確認してください。
- 画面に入ったときにだけ読み込まれる画像は、キャプチャが先にそこへ届くと空の枠として写ることがあります。キャプチャする前にページをスクロールしてください。
- カルーセル、アニメーション、ライブのカウンター、無限フィードは、タイルごとに変わることがあります。一時停止するか、代わりに重要な範囲をキャプチャしてください。

高さが 32,000 デバイス ピクセルを超えるページは、最大 6 枚の画像として保存され、それぞれが別のエディタ タブで開きます。そのほかのトラブルシューティングは[ページ全体のスクリーンショットのガイド](https://openscreenshot.app/ja/blog/full-page-screenshot-chrome/)で説明しています。ヘルプ記事に使うスクリーンショットについては、[ドキュメント用のスクリーンショット](https://openscreenshot.app/ja/use-cases/documentation/)を参照してください。

## さらに読む

[ドキュメントを読む](https://openscreenshot.app/ja/docs/)、[すべてのガイドを見る](https://openscreenshot.app/ja/blog/)、または[キャプチャについてサポートを受ける](https://openscreenshot.app/ja/support/)。

---

Canonical page: https://openscreenshot.app/ja/use-cases/design-review/