画像モザイク・黒塗り・注釈ツール
スクショを Ctrl+V で貼り付けて、黒塗り・モザイク・矢印・連番を書き込み、そのままコピー。
画像はブラウザの外に出ません。登録不要・完全無料。
ヒント：Ctrl+Z 元に戻す／Delete 選択した図形を削除／ Esc 選択を解除／描いた図形は「🖐 選択・移動」であとから動かせます。 保存すると EXIF（撮影日時やGPS）は自動的に消えます。
別の画像に差し替えるときは、そのまま Ctrl+V で貼り付けるか
🎯 活用シーン
エラー画面を撮って、矢印と連番で「どこを押したらこうなった」を1枚で伝える。
①②③の連番で操作順を示す。途中の工程が減っても番号は自動で詰まります。
口座番号・住所・取引先名を墨消ししてから送る。塗った範囲は単一色になります。
チャット画面の相手の名前・アイコン・IDを隠してからスクショを投稿。
顧客名や金額を伏せて、実画面のままサンプルとして使い回す。
スポットライトで周囲を暗くし、見てほしい一点に視線を集める。
表札・宛名ラベル・映り込んだ書類を消す。保存時にGPSのEXIFも一緒に消えます。
🙋 作った人のひとりごと
「モザイクは危ない」と聞いたことはあったので注意書きだけ出すつもりだったのですが、念のため自分のツールがかけたモザイクの画素を数えてみました。1万2600個のうち1万1338個が、まだ色を持っていました。当たり前です、モザイクとは元の色の平均で塗り直す処理なのだから。頭では分かっていたはずのことを、目の前で数字にされると背筋が伸びます。そこで、見た目はモザイクのまま元の色を一切使わない「安全モード」を足して、既定で入にしました。同じ範囲を数え直したら、色を持つ画素は0個になりました。
周囲を暗くして一点を目立たせる機能を、最初は「暗い幕を全面に敷いて、見せたい部分だけ穴を開ける」という素直なやり方で書きました。ところが試すと、先に描いてあった矢印や文字まで穴と一緒に消える。穴を開ける命令は「そこにある絵を消す」命令なので、幕だけでなく下の絵も道連れにしていたわけです。直し方は、幕と穴を1つの図形として一筆で描くこと。外枠と内枠を続けて指定すると、重なった内側が自動的に抜けるという塗り方の決まりがあり、これなら下の絵に指一本ふれません。
①②③の連番は、最初こそ図形に番号を書き込んでいました。すると②を消したときに①③が残り、あとの番号を全部書き換える処理が要る。飛ばした番号があると手順書として成立しないので、削除・並べ替え・元に戻す、それぞれに番号の直し方を書く羽目になりました。あるとき「番号を保存しなければいい」と気づいて、画面を描き直すたびに連番だけ先頭から数え直す方式にしたら、その処理が全部消えました。持たないデータは、壊れません。
— MyTool Studio 中の人
🛠️ このツール、作り方を全部公開しています
このページの注釈ツールは、ライブラリを一切使わずHTMLファイル1個で作っています。その完成ファイルと全コード＋作り方の解説を、note『まるっとアプリ #10』で公開中。ダウンロードしてダブルクリックすれば、そのまま自分のツールになります。
- モザイクを実測したら、12,600画素中11,338画素に元の色が残っていた話
- 10種類の道具を「4つの形」に畳んで、判定も移動も1回だけ書く設計
- EXIFを消すコードを1行も書いていないのにEXIFが消える理由（バイト検証つき）
- 全コードにコメント付き・自由に改造OK
※フロントのコードはF12でも見えますが、整理済みの全ソース＋コメント＋作り方解説をまとめた教材です。
📚 スクショ・画面共有まわりのアイテム
画面を撮る・書き込む・安全に渡すのに役立つもの
画像モザイク・注釈ツールの使い方
スクリーンショットを撮って Ctrl+V で貼り付け、道具を選んで画像の上をドラッグするだけです。書き終えたら「📋 コピー」でそのまま貼り付け先へ、または「⬇ 画像を保存」でファイルにできます。ファイルのドラッグ＆ドロップ、クリックしてファイルを選ぶ操作にも対応しています。
氏名・住所・口座番号・IDなど文字や数字を隠すときは墨消し（黒塗り）を使ってください。モザイクは元の色の平均を残すため、文字のように形の候補が限られるものは読み取られる可能性があります。見た目をモザイクにしたい場合は「安全モード」を有効にすると、元の色を使わずに塗りつぶします。
「① 連番」を選んで画像をクリックするたびに番号が1つずつ増えます。途中の番号を削除しても残りが自動で振り直されるため、手順書を作り直すときに番号のつけ直しが要りません。矢印や文字と組み合わせると、1枚で手順を説明できます。
描いた図形は「🖐 選択・移動」で選ぶと移動・拡大縮小ができます。モザイクの範囲を動かしても、元の画像から色を読み直すので正しく描き直されます。Ctrl+Z で元に戻す、Delete で選択した図形を削除、Esc で選択解除です。
スマートフォンで撮った写真には、撮影日時やGPSの位置情報が埋め込まれていることがあります。本ツールは画像を描き直してから書き出すため、これらの情報は保存した画像には残りません。注釈をひとつも描かず、読み込んで保存するだけでも同じです。
指やスタイラスでそのまま描けます。写真アプリから画像を選んで、注釈を付けてそのまま共有できます。長辺2000pxを超える画像は動作を軽くするため自動で縮小されます。
📋 隠し方と「残る情報」の早見表
同じ「隠す」でも、何が消えて何が残るかは道具によって違います
| 隠し方 | 見た目 | 元の情報 | 向いている対象 |
|---|---|---|---|
| ⬛ 墨消し（黒塗り） | 単色で塗りつぶし | 残らない（塗った範囲は1色） | 氏名・住所・電話番号・口座番号・ID など文字と数字すべて |
| 🔲 モザイク（安全モード） | モザイク風 | 色は残らない（乱数のグレー） | 墨消しだと硬い印象になるが、確実に消したいとき |
| 🔲 モザイク（通常） | モザイク | マスごとの平均色が残る | 読まれても困らない背景・遠景・雰囲気を保ちたい部分 |
| 🌫 ぼかし（他ツール） | ぼやける | 周辺の色と輪郭が残る | 同上。文字には使わない |
| 🔦 スポットライト | 周囲だけ暗くなる | すべて残る（隠す機能ではない） | 見てほしい場所を目立たせたいとき |
| ▭ 枠・矢印を重ねる | 線が乗るだけ | すべて残る | 指し示す・囲む用途のみ |
※ 文字や数字は「ありうる形」が少ないため、同じ条件でモザイクをかけた候補と照合して読み取る手法が知られています。迷ったら墨消しを選んでください。
※ 画像ではなく PDF や Word 上に黒い図形を「重ねただけ」のファイルは、図形をどけると下の文字が読めてしまいます。画像として書き出してから共有するのが安全です。