スクリーンショット注釈
スクリーンショットに矢印・番号・テキストボックスを重ね、説明画像を作ります。アップロード不要、ブラウザ内で処理します。
ツールを準備しています。
ユーザーの評価
まだレビューはありません。このツールを使ったことがあれば、最初のレビューを書いてください。
スクリーンショット注釈の詳しい使い方ガイド
使い方と例を確認し、知りたいことはトピックから探せます。
はじめに確認すること
- 対応形式
- ブラウザで開ける画像1枚、25MB・1辺6000pxまで。
- 書き込みの種類
- 矢印・四角・番号・テキストボックスの4つ、最大60個。
- 元に戻す
- 40段階まで元に戻し、やり直すことができます。
- 書き込みの削除
- 書き込みを右クリックすると、そのものだけが削除されます。
- 座標の基準
- 画面サイズではなく元の画像のピクセル基準なので、保存結果が同じになります。
- サイズの調整
- 大きな画像では、線と文字が自動で一緒に大きくなります。
- 保存形式
- 元のサイズのままPNG。
- 処理する場所
- 画像はサーバーに送らず、このブラウザの中だけで扱います。
スクリーンショット注釈の使い方
スクリーンショットを入れてください
ドラッグして置くか、クリックして選びます。1辺が6000pxを超える場合は、先にサイズを小さくするようお知らせします。非常に大きな画像は、ブラウザには負担が大きいためです。
ツールと色を選んでください
矢印と四角はドラッグして、番号とテキストボックスは置きたい場所をクリックして作ります。色は6色から選び、太さも調整できます。テキストボックスは、先に内容を入力してから、画像上の置きたい場所をクリックしてください。
間違えて置いたら元に戻してください
「元に戻す」と「やり直す」のどちらも使えます。特定の書き込みだけを消すには、その書き込みを右クリックしてください。元に戻したあとに新しく描くと、やり直しの履歴は消えます。
書き込んだ画像を保存してください
「書き込んだ画像を作成」を押すと、元のサイズのPNGを作ります。画面で小さく見ながら描いた場合でも、保存したファイルでは同じ位置に同じ比率で書き込まれます。
こんな作業に使えます
説明に必要な書き込みだけを集めました
矢印で指し示す、四角で範囲を囲む、番号で順序を付ける、テキストボックスで一言書く。この4つで、ほとんどの案内画像が作れます。番号はクリックするたびに自動でつながり、途中のものを削除しても、次の番号が重なりません。文字には縁取りが付くので、明るい背景でも暗い背景でも読めます。
元に戻せるから、気軽に描けます
書き込みを間違えて置いても、「元に戻す」で最大40段階までさかのぼれ、戻したあとにやり直すこともできます。書き込みを右クリックすると、そのものだけが削除されます。座標は画面サイズではなく元の画像のピクセル基準で扱うため、画面で小さく見ながら描いても、保存したファイルでは同じ位置に同じ比率で書き込まれます。
例で結果を確かめる
ボタンの位置を教える
画面キャプチャ · 矢印1個 + テキストボックス「ここを押してください」指し示す位置に矢印と説明が載ったPNG順番に説明する
設定画面 · 番号 1・2・3丸い番号が順番に3つ載ったPNG書き込むことと隠すことは違います
表を左右にスクロールすると続きが見られます。
| ツール | すること | 元のピクセル |
|---|---|---|
| スクリーンショットに説明を追加 | 上に矢印・番号・文字を描きます | そのまま残ります |
| 画像モザイク・ぼかし | その部分をぼかして、見分けられなくします | 消えます |
| ウォーターマーク挿入 | 複数の画像に同じマークを繰り返し刻みます | そのまま残ります |
結果が思ったとおりにならないとき
短くドラッグしたら何もできません
誤ってクリックしたものと区別するため、ごく短いドラッグは無視します。もう少し長くドラッグしてください。
線が細すぎるように見えます
大きな画像では自動的に太くなりますが、さらに必要なら太さを上げてください。画面で縮小して見ているために細く見える場合もあるので、保存したファイルでも確認してみてください。
テキストボックスが置けません
内容を入力しないまま画像をクリックした場合です。先に上の欄に内容を入力してください。
書き込みは60個までしか入れられません
1枚にそれ以上あると、読む人がかえって分かりにくくなります。画像を分けて複数枚にするほうがよいです。
知っておきたい用語
- 元のピクセル基準
- 画面に表示されるサイズに関係なく、実際の画像の座標で位置を扱う方式です。
- 元に戻す段階
- さかのぼれる過去の状態の数です。ここでは40段階です。
- 文字の縁取り
- 文字の周囲に別の色の線を付けて、どんな背景でも読めるようにする方法です。
- PNG
- 再圧縮しない画像形式です。文字や線がぼやけません。
スクリーンショット注釈のよくある質問
隠した部分は見えなくなりますか？
なりません。書き込みは元の画像の上に新しく描くものなので、元のピクセルはそのまま残ります。個人情報のように隠すべき部分には、「画像モザイク・ぼかし」を使ってください。
書き込みはいくつまで入れられますか？
60個まで入れられます。上限に達したときは、それ以上入れる前にお知らせします。
どの形式で保存されますか？
元のサイズのままPNGで保存します。文字や線がぼやけないよう、再圧縮しない形式を使います。
置いた書き込みをあとで移動できますか？
いまは移動できません。元に戻すか、その書き込みを右クリックして削除してから、置き直してください。
保存すると画質が落ちますか？
落ちません。元のサイズのPNGで保存するので、元がJPGだった場合は、むしろよりくっきり残ります。
スマートフォンでも使えますか？
使えます。指でドラッグして、矢印や四角を描けます。ただし、狭い画面では、画像を大きく見られる端末で作業するほうが楽です。