はじめに
画面設計書を作るとき、デザイン画像に番号を振って「1番がこのボタン、2番がこのラベル」と説明する資料を作ることが多いです。ずっとExcelでやっていたのですが、ある日限界を感じてツールを自作しました。コードはすべてAIに書いてもらった話です。
Excelで番号を振り続けてきた
自分がよくやっていた方法はこんな感じです。
- スクリーンショットやデザイン画像をExcelに貼り付ける
- テキストボックスで丸数字（①②③）を作り、矢印や吹き出しを利用し手動で配置する
- 別のセルに番号と対応するUI要素の説明を書く
一応機能はします。
ただ、何度やっても「またか」と思う工程がいくつかありました。
何が面倒だったか
番号の再配置
- デザインが変わって要素が増減すると番号を振り直す必要があります。Excelのテキストボックスはグループ化してもズレることがあり、1つ削除したら後ろを全部手動で直す作業が地味につらいです
画像の解像度
- ExcelやPowerPointに貼り付けた画像はエクスポート時に圧縮されることが多いです。番号の文字が潰れたり、細かいUIが判別できない画質で書き出されることがありました
範囲を示すのが難しい
- 「この3つのボタンをまとめて説明したい」というケースで、矢印1本では伝わらないことがあります。括弧のような範囲線を引こうとすると、Excelの図形操作が面倒で時間がかかりました
こういうことが積み重なって「専用ツールを作った方が早い」と思い始めました。
自作することにした
自分はWebフロントが専門ではありません。ReactもVueも日常的には使っていないし、ビルド環境を整えるところからやる気力もありませんでした。
条件として決めたのは次の1点です。
- HTMLの1ファイルで完結すること
ブラウザさえあればどこでも動いて、インストール不要。ファイルをダブルクリックして開くだけです。こういうシンプルなツールは意外と長く使い続けられます。
実装はClaude（AIアシスタント）に丸投げしました。
AIだけで作ってみた
自分が書いたのは要件だけです。
画面設計書用のアノテーションツールをHTMLの1ファイルで作りたい。
- 画像を読み込んで表示する
- Markdownのテーブルを貼り付けると番号リストが生成される
- 番号バルーンを画像上にドラッグで配置できる
- バルーンから対象箇所へ矢印を引く
- 番号を削除したとき振り直しオプションが欲しい
- PNGで書き出せる（元画像の解像度を維持）
- 書き出したものを再度、修正できるようにしたい
これを伝えたら500行超のHTMLが返ってきました。動かしてみて「ここが使いにくい」「この機能も欲しい」を繰り返し伝えて、最終的に2000行超になりました。
自分でコードを書いた行はゼロです。
使うだけなので、特にコードの内容や保守性など何も気にしませんでした。
AIに全てなければ、どうにかなると思っているので！！
ただ、何でもAIを信じればいいかというと、そうとも言えません。今回は「自分だけが使うローカルツール」だったので全部丸投げできましたが、たとえば本番のプロダクトに組み込むコードや、セキュリティが絡む処理をAIに任せる場合は話が違います。
ツールの紹介
| 1. ツール | 2. マークダウン反映 |
|---|---|
 |
 |
| 3. 番号割り振り | 4. png出力 |
 |
 |
基本的な使い方
- 画像ファイルを選択して読み込む
- サイドバーにMarkdownテーブルを貼り付ける
| No | 項目名 | UI種別 |
|----|----------------|-----------|
| 1 | 検索バー | TextField |
| 2 | 検索ボタン | Button |
| 3 | 結果リスト | ListView |
- 「解析して反映」を押すと番号バルーンが自動配置される
- バルーンと指示先のターゲット丸をドラッグで位置調整する
- 「PNG出力 & 保存」で書き出す
主な機能
| 機能 | 内容 |
|---|---|
| 点モード | バルーンから1点への矢印。特定のボタンやアイコンを指すときに使う |
| 範囲モード | 2点間に括弧のような線を引く。複数要素をまとめて指すときに切り替える |
| フリー矩形 | 自由な位置に矩形を配置。斜線ハッチングのON/OFFも可能 |
| コメント | 自由な位置にテキストを配置。フォントサイズ調整あり |
| 状態保存 | PNG出力と同時にJSONでも保存。次回読み込めばそのまま再編集できる |
| 画像差し替え | デザイン変更時に画像だけ差し替え。バルーン位置の保持 or リセットを選択できる |
| 番号削除 | 削除後の番号を「振り直す」「そのまま維持」から選べる |
| 保存先の指定 | PNGとJSONの出力先を個別で設定できる |
Excelと比較してよくなったこと
- 番号バルーンがドラッグで自由に動かせる
- 番号を削除して振り直す操作が1クリックで完結する
- PNG書き出しが元画像の解像度を維持する
- JSONで状態を保存・再開できるので、デザイン変更にも対応しやすい
最後に
AIを利用すれば自由にカスタマイズして、自作のツールを作成できました。
ぜひ、皆さんも利用してみてください。