個人開発 / AI図面解析・レビュー支援MVP
Drawing AI
建築図面の文字・記号・寸法などをAIで抽出し、図面上の位置と照らし合わせて人が確認・修正する個人開発のMVP。PDF・画像の取り込みから、レビューとJSON出力までをつなぎます。
この制作物は個人開発です。クライアント案件や実業務での改善実績ではありません。
課題・制作の目的
建築図面から情報を読み取る際、抽出された文字や寸法が図面のどの位置に対応するかを確認する必要があります。AIの読み取りをそのまま確定せず、位置・抽出項目・要確認理由を一緒に見ながら人が判断できる仕組みを目指しました。
担当範囲
個人開発（図面表示・解析フロー・レビューUI・API連携の設計と実装）
技術スタック
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
- PDF.js
- OpenAI SDK / Responses API
- Structured Outputs
- Zod
- Vitest
- Playwright
実装内容
PDFはPDF.jsで表示中のページを画像に変換し、PNG・JPEGと共通の解析フローへ接続します。ページ全体の画像と重なり付きの拡大タイルをサーバーの解析APIへ送り、OpenAIの画像入力とStructured Outputsで得た結果をZodで検証。タイルの座標を図面全体へ変換して重複候補を統合し、図面上の検出枠と一覧を連動させています。人が抽出項目を修正した結果をJSONで出力できます。AI処理はProviderとして分離し、APIキーなしでUIを確認するTest Providerも備えています。
- PDF・PNG・JPEGの取り込み、PDFのページ切替と表示中ページの解析
- 全体画像と拡大タイルの解析、進捗・中止・部分失敗の表示、座標変換と重複候補の統合
- 検出枠と結果一覧の相互選択、種類・要確認・AI confidenceによる表示フィルター
- ラベル・材料・厚さ・寸法・室名などの抽出項目を人が修正し、修正済み結果をJSON出力
- Next.js Route HandlerとOpenAI APIの連携、Zodによる入出力検証、Test Providerとの切替
確認できる成果
図面の入力、解析結果の位置表示、人による確認・修正、JSON出力を一つのMVPとして実装。公開リポジトリとTest Providerの画面で設計・実装内容を紹介しています。
確認対象は以下の公開サイト・デモ・ソースコードと記載した実装範囲です。売上・問い合わせ数・工数削減率の測定値は掲載していません。外部デモは公開状況によって利用できない場合があります。
開発の設計ノート
機能を動かすだけでなく、AIの結果・画面の操作・アプリのルールをどうつなぐかを考えました。以下は公開ソースで確認できる設計・実装の紹介です。
PDFと画像を共通の解析フローへ
PDFは表示中のページをPDF.jsで画像化し、PNG・JPEGと同じ処理につなぎます。入力形式ごとにレビュー画面を作り分けず、図面を取り込むところから結果の確認までを一つの操作フローにしています。
全体の文脈と拡大画像を組み合わせる
ページ全体の画像を先に解析し、重なりを持つ拡大タイルの解析を続けます。結果の座標を図面全体へ戻し、同じ種類・文字と重なりを使って重複候補を統合します。これは読み取りを検証するための実装で、認識精度の改善率は未測定です。
AIの出力を画面で扱える形式にする
サーバー側でOpenAIのResponses APIとStructured Outputsを使い、Zodで結果の形式を検証します。形式を満たしても内容が正しいとは限らないため、検出位置と抽出項目を画面に並べ、人が確認・修正する工程を残しています。
進捗・中止・部分失敗を操作に組み込む
領域ごとの進捗と失敗を表示し、解析を中止できます。一部だけ取得できた結果は不完全であることを警告します。AI APIを呼ぶだけでなく、待ち時間や失敗を含むWebアプリの操作を設計した例です。
外部APIの検証とUIの確認を分ける
AI処理をProviderとして分離し、固定結果を返すTest Providerでレビュー画面を確認できます。掲載画面はこの固定サンプルです。実AIへの接続や出力品質の評価と、画面・操作の確認を混同しない構成にしています。
現在の検証範囲・制約
- 個人開発のローカルPoC向けMVPです。実業務での利用実績、認識精度、工数削減効果は未検証です。
- 解析は表示中のページのみ。PDF全ページの一括解析、CAD形式への対応、法規適合判定は実装していません。
- 結果の永続保存・認証・利用者別レート制限は未実装です。抽出項目は修正できますが、検出枠のドラッグ・追加・削除はできません。
- OpenAI連携はソースコードで確認しています。今回の紹介作成では実APIへの疎通・精度検証を行っていません。
関連サービス
同様の開発を相談する
必要な機能や現在の課題をお知らせください。