🗂

バグ報告を“Excel地獄”から解放する：ChatGPTと作った画像注釈HTMLツール

に公開
HTML
OSS
ChatGPT
ChatGPT で書いた
idea

ChatGPTと一緒に「脱Excel」ツールを作りました

バグ報告やUIレビューのときに、
スクリーンショットをExcelに貼って説明を入れていませんか？
気づいたら「画像がズレた」「説明セルが足りない」などで手間が増えてしまう…。
そんな日々を終わらせたくて、ChatGPTと一緒に作ったのが脱Excelツールを作ってみました。

🧩 ツールの概要

汎用注釈ドキュメントメーカー
👉 デモを開く（GitHub Pages）
💻 GitHubリポジトリ

  • ブラウザだけで動作（インストール不要）
  • 画像に番号をつけ、その番号に対応する説明を入力
  • 保存すると 単一HTMLファイル にまとめられ、配布しても再編集可能
  • オフライン利用OK、情報は外部送信されません
  • バグ報告／デザインレビュー／操作マニュアル作成などに活用できます

🤖 ChatGPTとの共作プロセス

この記事の内容も含めて、すべてChatGPTと一緒に作成しています。
（コードも、説明文も、この記事の原稿も）

  1. まず「画像に注釈を付けて説明をまとめるWebツールを作りたい」と相談
  2. ChatGPTがHTML/CSS/JSの骨格を生成
  3. 実装を微調整しながら、機能追加・UI改善を反映
  4. 完成後にGitHub Pagesでホスティング
  5. 今、この紹介記事自体もChatGPTに手伝ってもらって執筆 ✍️

AIを「コーディング補助」ではなく、「ペアエンジニア兼ライター」として使った形です。
全体を通して、AIを相棒にした開発フローの感覚が掴めました。

🧭 背景：「脱Excel」への挑戦

私自身、普段からバグ報告やレビューをExcelでまとめていました。
でもこんな悩みがありました。

  • スクショを貼るとファイルが重い
  • セルがズレて番号がわかりにくい
  • 複数人で修正すると混乱する

それをChatGPTに相談したら、
「HTMLひとつにすればいいのでは？」という発想にたどり着きました。

結果、ブラウザ上で番号付き注釈をつけて、
そのまま1ファイルで共有・再編集できる仕組みが完成。
“軽くて壊れない脱Excel” を実現できたと思います。

💡 技術的な仕組みのポイント

  • 画像データをBase64でHTMLに埋め込み、1ファイルにまとめる

  • JavaScriptでクリック位置に注釈番号を動的追加

  • ローカルストレージ経由で一時保存にも対応

コード全体はGitHubにありますが、ブラウザだけで完結させる構成がポイントです。

🎨 ユースケース例

  • 🐛 バグ報告
    再現手順・期待結果・実結果を番号付きで整理し、混乱しない報告書に。

  • 🎨 デザインレビュー
    LPやUIのスクショに番号を付け、改善点をコメントとして残す。

  • 📘 マニュアル作成／教育
    操作画面に番号を振り、手順書を簡単に共有。
    社内教育資料の作成にも応用可能。

💬 開発して感じたこと

ChatGPTを使うことで、
「何を作るか」より「どう使うか」に集中できました。

  • コードの下地をAIが生成してくれる
  • 私はUI/UXと設計の判断に集中できる
  • 途中で仕様変更しても会話で柔軟に調整できる

結果、“自分が欲しかったツールをAIと数時間で形にできた”
という体験になりました。

🚀 まとめと今後

  • 「脱Excel」で報告やレビューを軽くするツールをChatGPTと共作
  • 完全ローカル動作・OSS公開済み
  • この記事もAI（ChatGPT）と共に執筆

🌐 関連リンク

✍️ おわりに

このツールも記事も、すべてChatGPTと一緒に作っています。
AIを使うことで、開発も執筆も「思考の延長」で形にできる時代になったと感じました。

「自分もChatGPTで何か作ってみたい」と思った方、
このプロジェクトをぜひ参考にしてみてください 🚀

Discussion