ブログ

注釈付きスクリーンショットでデザインレビュー

公開 2026年10月25日 · デザインレビュー, フィードバック, 注釈, ワークフロー

キャプチャして状態を残し、正確に注釈を付け、バージョンを比較し、曖昧なやり取りではなく焦点の絞れた 1 つのフィードバックにまとめる、軽量なデザインレビューの進め方。

デザインフィードバックは、予測できる形でうまくいかなくなります。メモがすでに変わってしまった箇所を指していたり、3 人が同じ問題を 3 つのスレッドで説明していたり、どのバージョンのスクリーンショットなのか誰にも分からなかったりします。スクリーンショットを使ったレビューのループは、少しの規律でそのほとんどを解決します。

物語ではなく状態をキャプチャする

コメントしたい正確な状態のスクリーンショットから始めます。その説明から始めるのではありません。InSnap では次のようにします。

1. Mac では Command-1、Windows では Ctrl+1 を押します。
2. ブラウザのウィンドウにカーソルを合わせ、自動検出の枠が出るのを待つか、コンポーネントの周囲をドラッグして範囲を選びます。
3. 重要な周囲の文脈（ビューポートの幅、周囲のレイアウト、フォームの状態）を含め、それ以外は含めません。

レビューしているページで撮ったキャプチャは証拠です。先週の似たページのスクリーンショットは混乱の元です。

共通の語彙で注釈を付ける

レビューのメモを比較可能にする最短の方法は、各ツールの意味を決めておくことです。

チーム全体で 1 つのツールに 1 つの意味を守ります。矢印が「これを変えて」という意味なら、「これは良い」には使いません。

1 つの問題につき 1 枚のスクリーンショット

12 個の注釈が付いた 1 枚のスクリーンショットは議論しにくいものです。問題ごとに 1 枚なら、解決し、参照し、閉じるのが簡単です。

• コンポーネントの周囲をきつく切り抜きつつ、場所を特定できるだけの文脈は残します。
• 関連する問題なら番号を振ります。
• 理由はメッセージに書き、画像の上に長文を載せません。
• レイアウトが話題ならビューポートのサイズとズーム倍率を書きます。50% ズームのスクリーンショットは、報告しているオーバーフローそのものを隠してしまうことがあります。

ピン留めしたスクリーンショットでバージョンを比較する

「変わった？」に答える最短の方法は、両方のバージョンを同時に画面に出すことです。前のスクリーンショットと現在のものをピン留めします。ピン留めしたウィンドウはほかのアプリより前面に浮かぶので、ブラウザの上で横に並べてドラッグし、タブを切り替えずに比較できます。

ここではスクリーンショット履歴も役立ちます。過去のキャプチャは検索できるので、「変更前」の状態はたいていすでに残っています。

リンクかファイルで渡す

• 1 つの問題： 注釈付きの画像を添付するか、受け取る人にダウンロードさせたくないならリンクを共有します。
• 複数の問題： メッセージ内の番号付きリストにして、各番号を注釈と対応させます。
• 繰り返しのレビュー： スクリーンショットをプロジェクトやチケットのタグ付きで履歴に残し、次のラウンドを前回の状態から始めます。

InSnap Cloud を使う場合、共有リンクには有効期限とパスワードを設定できます。クライアントレビューのように、ずっとオンラインに置きたくないやり取りに便利です。Cloud は任意のサブスクリプションで、ローカルのワークフローには必要ありません。

レビューのチェックリスト

よくある質問

フィードバックはスクリーンショットに注釈を付けるべきですか、メッセージに書くべきですか？

両方です。役割が違います。注釈は「どこか」を示し、メッセージは「何を」「なぜ」を説明します。段落を画像の中に入れてはいけません。見落とされますし、検索もできません。

2 つのバージョンを並べて比較するには？

両方のスクリーンショットをピン留めします。ピン留めしたウィンドウはほかのアプリの上に残るので、ブラウザを開いたまま横に並べて比較できます。

受け取る人に InSnap をインストールしてもらわずにレビューを共有できますか？

はい。画像ファイルを送るか、通常のブラウザで開ける Cloud の共有リンクを使います。Cloud は任意のサブスクリプションです。無料のワークフローは、画像を保存して添付することです。

ブログのほかの記事