Screenshot Annotationスクリーンショットに注釈を
キャプチャした場所でそのまま
ページから離れることなくスクリーンショットに注釈を付けられます。キャプチャ後、矩形、円、矢印、テキスト、番号付きステップなどを画像の上に直接配置。すべての図形はホバーした実際の UI 要素にスナップするため、手描き風のガタガタにならず、ぴったりと揃った注釈が完成します。
「スクリーンショットに注釈を付ける」とは？
スクリーンショットに注釈を付けるとは、画像の上にマーキングを追加し、読者に「どこを見て、何をすればよいか」を伝えることです。クリックするボタンを矩形で囲む、エラーを矢印で指す、各ステップに番号を振る、修正方法をテキストで書く。生のスクリーンショットと、本当に伝わるスクリーンショットの違いはここにあります。
大変なのはアイデアではなく、作業そのものです。キャプチャして、エディターに貼り付け、矩形を描き、ボタンから 2 ピクセルずれていることに気づいて、やり直す。すべての図形、すべてのスクリーンショットで繰り返し。実際のページ要素にスナップする注釈は、これを完全に無くします。要素をホバーしてクリックするだけで、アノテーションがその境界にぴったりと合わせて配置されます。
なぜその場で注釈を付けるのか？
別のエディターは、コンテキストの切り替え、2 つ目のファイル、そして指し示すべきピクセルから図形がずれる問題を意味します。その場での注釈付けはページ上に留まり、ソースをフル解像度で保ち、すべてのアノテーションを整列させます。次のような場面で特に重要です：
- バグ報告 — ぐらつく楕円ではなく、境界にフィットした矩形と番号付きメモで、エンジニアを正確に壊れた要素へ誘導できます。
- チュートリアルやドキュメント — 「ここをクリック」という指示は、「ここ」が実際のコントロールを囲んだスナップ済みの矩形であれば、曖昧さがありません。
- カスタマーサポート — お客様のスクリーンショットに注釈を付け、変更が必要な設定を示せます。
- レビューとフィードバック — 別のアプリを開くことなく、デザインや下書きに矢印やテキストでマーキングできます。
12 種類のツール、すべて実際の要素にスナップ
注釈ツールセットは私自身が書いたものです。アノテーションを配置した瞬間にどのように振る舞うか、正確に解説します。
- 図形は要素にスナップします。任意のボタン、カード、画像、テキストブロックをホバーすると、拡張機能はその
getBoundingClientRectを読み取ります。クリックするだけで、その境界にぴったり合った矩形、円、矢印、下線が得られます。1 クリックでピクセル単位の正確さ。 - 1 つのツールバーに 12 種類のツール。矩形、楕円、直線、矢印、ハイライトマーカー、テキスト、番号付きステップ、スタンプ、モザイク（ピクセライト / ぼかし / 黒塗り）、そしてその場ズーム。キー 1 つで切り替えられます。
- 番号付きステップは自動で採番。ステップ 1、2、3 を順に配置すれば、追加や並べ替えを行っても自動で連番が保たれます。
- すべてフル解像度で書き出し。注釈はオリジナルのキャプチャ（高 DPI ピクセルを含む）に描画されるため、矩形やテキストはぼやけず、くっきりとしたままです。
必要なときに注釈を強力にする 2 つの機能：
- ハイライトと秘匿 — ハイライトマーカーでテキストに注目を集めつつ、モザイクツールでパスワード、API キー、顔写真をぼかしたりピクセライトできます。スクリーンショットのぼかし と スクリーンショットのハイライト もご覧ください。
- ディテールのズーム — 小さな範囲をその場で拡大し、周囲の文脈を失うことなく、小さなアイコンやラベルを読みやすくします。スクリーンショットズーム もご覧ください。
注釈はページ上のオーバーレイエディターで行われます。新しいタブもアップロードもありません。エディターを閉じれば、完成した画像はすでにクリップボードに入っています。
スクリーンショットに注釈を付ける方法
キャプチャから完全に注釈付きの画像まで、1 分未満で。
キャプチャ
Alt+A（Win）または ⌘⇧S（Mac）で可視領域を、Alt+C / ⌘⇧X でドラッグ範囲をキャプチャするか、ページを右クリックして フリー範囲 を選びます。ページ上にエディターが開きます。
注釈を追加
要素をホバーしてクリックすれば境界にフィットした図形が配置されます。またはツールキーを押してください — R 矩形、O 楕円、A 矢印、T テキスト、N 番号、H ハイライト。空きスペースには自由に描くこともできます。
書き出し
エディターを閉じるだけで、注釈付き画像が自動でクリップボードにコピーされます。または PNG / JPG / PDF としてダウンロード。
よりきれいな注釈のためのヒント
- ドラッグではなく、クリックで精度を。要素をホバーしてクリックすれば、その境界を一発で取得できます。手描きの矩形よりはるかに正確です。
- 複数ステップの流れには番号を。番号ツール（
N）を使えば、読者は ① → ② → ③ の順に追えます。並べ替えても自動で採番されます。 - 共有前に秘匿を。クレデンシャル、トークン、個人情報を含むスクリーンショットには、まずモザイクツールを。ぼかしやピクセライトを行い、単なる切り抜きにはしないでください。
- アクセントカラーは 1 色に。矩形や矢印に使う太めの色は 1 色にまとめる方が、虹色よりもすっきり見えます。ツールは最後に使った色と太さを記憶します。
スクリーンショットの注釈について、よくある質問
注釈は無料ですか？
はい。12 種類すべてのアノテーションツールが無料です。有料プラン、ウォーターマーク、登録はいずれもありません。拡張機能全体が無料です。
高 DPI 画面でも注釈は鮮明なままですか？
はい。注釈はフル解像度のキャプチャ（高 DPI ピクセルを含む）に描画されるため、矩形、矢印、テキストは Retina や 4 K ディスプレイでもくっきりとしたままです。
配置した注釈を後から編集できますか？
はい。任意のアノテーションを選択して、移動、リサイズ、色変更、削除ができます。番号付きステップは並べ替えると自動で採番されます。
オフラインで動作しますか？データは送信されますか？
完全にオフラインで動作し、ネットワークリクエストは一切発生しません。スクリーンショットがデバイスから外に出ることはありません。バックエンドは存在しません。
執筆者：Virgil
私は、このページで解説した注釈ツールセット（DOM スナップ、12 種類のツール、自動採番ステップ）を設計・実装した個人開発者です。作った理由は、これまで使ったスクリーンショットエディターがどれも、UI にぴったり合わない手描きの図形を強要してきたからです。
すべてのメールに目を通し、定期的にアップデートを公開しています。各リリースの変更点は 更新履歴をご覧ください。注釈に関するご質問は virgil1126@gmail.com まで。