フォトアノテーター

写真注釈ツールとは？

写真に注釈を付ける方法

1. 1
   写真またはスクリーンショットをドロップ

   JPG、PNG、またはWebPファイルをアップロードエリアにドラッグするか、デバイスから選択するためにクリックします。スクリーンショット、電話の写真、製品写真 — ブラウザがレンダリングできるものは何でも動作します。

2. 2
   ツールと色を選択

   矢印を使用して何かを指し、長方形で囲み、フリーハンドで円を描いたり落書きしたりし、テキストでラベルを追加します。パレットから色を選択するか、任意の16進数値のカスタムカラーピッカーを開きます。

3. 3
   画像をクリックしてドラッグ

   矢印や長方形を描くためにドラッグします。フリーハンドでドラッグして落書きします。テキストツールを使用する場合は、最初にラベルを入力し、次に写真をクリックして配置したい場所にドロップします。

4. 4
   再配置または元に戻す

   選択に切り替え、任意の注釈をドラッグして移動します。最後の注釈を削除するには元に戻すをクリックするか、注釈をクリックして削除を押します。すべてクリアは、1ステップでレイヤーを消去します。

5. 5
   注釈付きの写真をエクスポート

   PNG（ロスレス、スクリーンショットに推奨）、JPG（小型、写真）、またはWebP（サイズ対品質が最適）を選択し、ダウンロードをクリックします。注釈は、フルソース解像度でエクスポートに焼き付けられます。

ブラウザ側の注釈がどのように機能するか

1. createImageBitmap()でソース画像をデコード — ネイティブ、ライブラリなし。
2. プレビューサイズ（長辺≤900 px）で画面上のキャンバスに写真をレンダリングします。
3. 各注釈は型付きオブジェクト（種類、座標、色、ストローク）として保存されます。
4. エクスポート時に、最初に新しいキャンバスに元の解像度の画像を描画します。
5. ctx.drawImage / strokeRect / などを使用して、すべての注釈を上に再生します。
6. canvas.toBlob(format, quality)でエンコードし、ダウンロードとして提供します。

参照: MDN — CanvasRenderingContext2D

一般的な注釈作業

フォトアノテーターを使用するタイミング

• 壊れた要素を正確に指す赤いボックスと矢印を含むバグレポート。
• Figmaにログインしてコメントを残したくないステークホルダーへのデザインフィードバック。
• 単一の写真に対するステップバイステップの指示（レシピ、修理ガイド、ソフトウェアのウォークスルー）。
• 特定の特徴を写真内で強調したい不動産または製品リスティング。
• 教室のワークシートマークアップ — 正しい答えを円で囲む、矢印を描く、付箋を追加する。
• Slack、Discord、またはメールに貼り付ける前のスクリーンショットにクイックキャプション。
• スタンドアロン画像として読み取れるようにコールアウトが必要なホワイトボードやノートブックの写真。

関連ツール

よくある質問