VSCodeで画像に簡単に赤マーク！手順書が爆速に。AI×人間で半日開発した「ImageMarkPengent」

tags:

はじめに

みなさん、画像に「ちょっと赤マーク」つけたい時、どうしてますか？

毎回めんどくさいですよね 🫠。
私自身も 手順書や社内QA用に大量に画像マーク作業 があり、すごく非効率でした。

そこで → 作りました 🚀

👉 VSCode で画像に簡単に赤丸マークや注釈ができる拡張機能です。

特徴：

✅ PNG / JPG を VSCode で開いてそのままマーク
✅ 赤丸マーク追加、色・太さ変更、移動・拡大縮小・削除
✅ Undo / Redo
✅ 元画像は変更せず、新規保存
✅ 超軽快！

VSCode(Marketplace):

仕事や開発の中で、手順書やマニュアル、社内ドキュメントを作成する機会が多くあります。

その際に画像に「ここをクリック」など 赤丸や注釈マーク をつける作業が意外と手間です。

「Markdownベースで完結できたら一番効率的」と考え、今回この拡張機能を作成しました。

今回は AIエージェントと共同開発 という形で試してみました。
使ったのは：

結果として：

AI × 人間の組み合わせは非常に効果的でした。

Q. 元画像は上書きされますか？
A. いいえ、新しいファイル名で保存できます。元画像は無変更です。(元の画像に上書きも可能です)

Q. 複数マーク選択は？
A. 現在は未対応、今後対応予定です。

Markdownで完結する手順書作成を効率化したい方におすすめです！
AIエージェントとの協力開発事例としてもぜひ参考にしてみてください 🚀。