デザイン レビューでは、ページ全体でページ全体をキャプチャし、フィードバックがほしい箇所に印を付けて、レビュアーがページごとに読める PDF を共有します。OpenScreenShot では、Spotlight で話題の範囲の外側をすべて暗くし、テキストと矢印で吹き出しを追加します。カード、グラフ、表など 1 つのコンポーネントのレビューには、要素をキャプチャを使います。
レビュー用にページを準備する手順
- レビューしたいウィンドウ幅でページを開きます。キャプチャには現在の幅でのレイアウトが写るため、別のブレークポイントをレビューする場合は先にウィンドウのサイズを変えます。
- 遅延読み込みの画像が読み込まれるようにページを一度最後までスクロールし、先頭に戻ります。レビューの対象ではない Cookie バナーやチャット ウィジェットは閉じます。
- OpenScreenShot のアイコンをクリックします。初期設定では、これでページ全体のキャプチャが始まります。エディタが開くまでタブはそのままにしておきます。
- 最初と最後のセクション、ヘッダー、カルーセルなど動きのある範囲を確認します。
- Spotlight（
O）を選び、レビュアーに見てほしい各範囲をドラッグします。複数の切り抜きは 1 つの暗いレイヤーにまとまります。 - 各範囲の横にテキスト（
T）のメモを、メモで小さな箇所を指す必要がある場所に矢印（A）を追加します。 - 画像を保存をクリックして書き出しダイアログを開きます。PDF を選び、以下の書き出し手順に従います。
1 つのコンポーネントをキャプチャする
ページを右クリックし、OpenScreenShot サブメニューを開いて、要素をキャプチャを選びます。コンポーネントが枠で囲まれるまでポインターを合わせ、クリックするか Enter を押して、その範囲をキャプチャします。↑ を押すと親要素（たとえばカードを含むセクション）を選択でき、← または → で隣の要素に移動できます。
要素のキャプチャでは、手作業で切り抜かずに余白のない画像が得られます。同じコンポーネントの 2 つのバージョンを比べるときに便利です。要素の全体が画面に表示されていない場合、ピッカーは代わりにページ全体のキャプチャを提案します。
レビュアーが追えるようにフィードバックの印を付ける
Spotlight の切り抜きは、矩形、角丸矩形、楕円のいずれかにできます。Spotlight の画像は 1 つの話題に 1 枚にします。明るい範囲が多い画像では、どのメモがどの範囲に対応するのかをレビュアーが推測することになります。番号付きのフィードバックでは、各箇所に手順番号（S）を追加し、レビューのスレッドでその番号を参照します。番号は自動で増え、1 つを削除すると振り直されます。
図形ツール（R）は、ページのほかの部分を暗くせずに範囲の周りに枠線を描きます。矢印ツールには塗りつぶし、線のみ、両端、点の先端があり、中央のハンドルをドラッグするとほかの内容を避けるように曲げられます。
レビューを PDF で共有する
書き出しダイアログで PDF を選び、ページ サイズで A4 または Letter を選んで、複数ページに分割をオンにします。連続するページは 5 mm ずつ重なるため、ページの区切りにある文字の行は両方のページに表示されます。画面上で読む場合は、ページ サイズで全体を選ぶと、ページを縦に長い 1 枚の PDF ページにまとめられます。
PDF には、スクリーンショットが注釈付きの画像として入ります。選択できるテキストはありません。レイアウトの比較はスクリーンショットを PDF にするガイドで、ほかの形式は書き出しのリファレンスで確認できます。
ページ全体のキャプチャの制限事項
ページ全体のキャプチャは、拡張機能がスクロールする間に描画されたとおりにページを記録します。スクロール中に変わる内容もあります。
- 固定ヘッダーは最初のタイルでキャプチャされ、最上部に 1 回だけ追加されます。サイドバーや下部のバーなど、ほかの固定要素が想定どおりの位置にあるか確認してください。
- 画面に入ったときにだけ読み込まれる画像は、キャプチャが先にそこへ届くと空の枠として写ることがあります。キャプチャする前にページをスクロールしてください。
- カルーセル、アニメーション、ライブのカウンター、無限フィードは、タイルごとに変わることがあります。一時停止するか、代わりに重要な範囲をキャプチャしてください。
高さが 32,000 デバイス ピクセルを超えるページは、最大 6 枚の画像として保存され、それぞれが別のエディタ タブで開きます。そのほかのトラブルシューティングはページ全体のスクリーンショットのガイドで説明しています。ヘルプ記事に使うスクリーンショットについては、ドキュメント用のスクリーンショットを参照してください。