VSCodeで画像に簡単に赤マーク！手順書が爆速に。AI×人間で半日開発した「ImageMarkPengent」
tags:
- VSCode
- 手順書作成
- 画像加工
- 開発ツール
- AI活用事例
- OSS
はじめに
みなさん、画像に「ちょっと赤マーク」つけたい時、どうしてますか？
- スクショ → PowerPoint → 赤丸 → 再保存
- スクショ → ペイント → 赤線 → 保存
- スクショ → Photoshop → 重い …
毎回めんどくさいですよね 🫠。
私自身も 手順書や社内QA用に大量に画像マーク作業 があり、すごく非効率でした。
そこで → 作りました 🚀
ImageMarkPengent とは？
👉 VSCode で画像に簡単に赤丸マークや注釈ができる拡張機能です。
特徴：
✅ PNG / JPG を VSCode で開いてそのままマーク
✅ 赤丸マーク追加、色・太さ変更、移動・拡大縮小・削除
✅ Undo / Redo
✅ 元画像は変更せず、新規保存
✅ 超軽快！
VSCode(Marketplace):
開発の背景 〜 Markdown時代の手順書作成をもっとラクに 〜
仕事や開発の中で、手順書やマニュアル、社内ドキュメントを作成する機会が多くあります。
その際に画像に「ここをクリック」など 赤丸や注釈マーク をつける作業が意外と手間です。
- Word / Excel / PowerPoint でマークをつけて再保存
- ファイルが複雑化して更新しづらい
- Markdown＋画像で完結したいのに別ツールに行き来する手間
→ 非効率…
「Markdownベースで完結できたら一番効率的」と考え、今回この拡張機能を作成しました。
AIと協力した開発フロー
今回は AIエージェントと共同開発 という形で試してみました。
使ったのは：
-
Cursor
→ 実装（コード生成、リファクタリング）を担当 -
Pengent AI
→ 設計とPR文案（README、Qiita記事草案など）を担当 -
私（人間）
→ 2つのエージェントがハマりかけた時に補助、手動で解決
結果として：
- 私1人だと 3〜5日 かかる規模感のものが
- 半日 で完成 ✨
AI × 人間の組み合わせは非常に効果的でした。
使い方
1️⃣ 画像を開く
- PNG / JPG をエクスプローラーで右クリック →
Open in ImageMarkPengent - または コマンドパレットで
ImageMarkPengent: Open in ImageMarkPengent
2️⃣ 赤丸マーク追加
- 「マーク追加」ボタン または
Ctrl + ドラッグ
3️⃣ 編集
- 移動・拡大縮小・削除（Delete）・色や太さ変更
- Undo / Redo にも対応
4️⃣ 保存
- 「保存」ボタンからPNG出力
- 元画像はそのまま、別ファイルとして保存
よくある質問
Q. 元画像は上書きされますか？
A. いいえ、新しいファイル名で保存できます。元画像は無変更です。(元の画像に上書きも可能です)
Q. 複数マーク選択は？
A. 現在は未対応、今後対応予定です。
まとめ
| 機能 | 説明 |
|---|---|
| 赤丸マーク | 追加・移動・拡大縮小・削除 |
| Undo / Redo | あり |
| 保存 | 元画像とは別に保存 |
| ショートカット | Ctrl+ドラッグ、Ctrl+Z/Y、Delete |
Markdownで完結する手順書作成を効率化したい方におすすめです！
AIエージェントとの協力開発事例としてもぜひ参考にしてみてください 🚀。