弁理士として明細書を書いている立場から、業務改善とバイブコーディングの実験を兼ねて、明細書作成アプリを自作してみました。実際には、コーディングはClaude Codeに任せ、私は仕様を考えて指示を出す役となりほぼコーディングはしていません。
作ろうと思ったきっかけ
- Claude Codeでのバイブコーディングを体験してみたかった
- 最終的に明細書はhtmlを作成するのでウエブとの親和性がよいと思った
- 特許庁のテンプレートや所内ルール、出願人などのマスタデータを反映して入力ミスのない書類を作りたかった
将来的には生成AIとの連携も考えていますが、明細書の情報漏洩リスクを考えるとローカルLLMで動かす構成も面白そうだと思っています。
これは最終目標でいずれはという感じです。
仕様書づくりはclaudeと
いきなりClaude Codeに「アプリを作って」と投げてもうまくいきません。作りたいものを具体的な仕様に落とさないと、適切なモジュールは生成されないからです。
有効だったのは、コーディング前にClaudeと壁打ちして仕様書を固めるアプローチです。最初に渡したプロンプトはこんな内容でした。
私は弁理士で特許明細書を書く仕事をしています。特許明細書を作成するためのアプリをclaude codeで開発したいと考えています。まずはアプリの仕様と構成を検討したいです。webUIで、サーバはローカルでよく、出願人情報の管理と案件一覧、各案件の編集モードを備えたい。最初は1件の明細書だけ編集できる機能から始めたいです（MVP）。
これを出すと、アーキテクチャ・画面構成・データモデル・明細書の形式が提案されます。あとは「ここはこうしたい」「この場合は？」と質問と要望を重ねるだけです。
最終的に、設計の具体的な内容と開発ステップがマークダウンの仕様書として手に入ります。これをそのままClaude Codeに読ませると初期実装が始まります。仕様書が設計図と指示書を兼ねる形です。
モジュール構成
固まった構成は、フロントとバックを分けた3層構成です。
| レイヤー | 技術 |
|---|---|
| フロントエンド | React + TypeScript（Vite） |
| バックエンド | Node.js + Hono |
| ORM | Prisma |
| データベース | SQLite |
| スタイリング | Tailwind CSS |
| ドラッグ&ドロップ | dnd-kit |
編集画面は明細書・請求項・図面などをタブで切り替える構成です。左サイドバーに全セクションが常に表示され、クリックで該当箇所へジャンプします。本文は段落をクリックするとその場で編集できるインプレース方式で、段落の挿入・移動・削除はドラッグ&ドロップとボタンの両方に対応させました。
実際の画面
MVPとして、まず1件の明細書を入力・編集できるところまで実装できました。動作はこちらの動画でご覧いただけます。
動作環境は、LAN内にUbuntuサーバーを立て、Windows PCからブラウザでアクセスする形でローカルネットワーク内で完結しています。
今後の目標
今後は以下の実装を目標にしたいと考えています
- クライアント・事務所のマスタデータ管理（テンプレートや定型項目の自動記入で記載ミスを撲滅）
- 案件一覧の充実、検索機能、期限管理
- 生成AIによるレビュー機能（特許庁の記載要件や独自ルールに基づくチェック）
- ローカルLLMとの連携
Claude Codeを使ってみた所感
「プログラミング知識がなくてもコーディングできる」という触れ込みを見かけますが、正直、前提知識がないと厳しいと感じました。あると望ましい知識は次のとおりです。
- アーキテクチャの理解：設計を固める壁打ちは、知識がないと提案の意味が分からず、出すべき指示も浮かびません。今回はNode.js・フロントエンド・データベース・API構成の提案を受け、判断して指示を行って進めました
- 使用言語の最低限の知識：生成されたコードを見てなにをやっているか程度の理解は必要です
- Linux系コマンド：作業中にファイル作成やインストールなど様々な操作が走るため、まったく分からないと不安になります
- git/GitHubの知識：Claude Codeは間違った方向に進んだりバグを含んだりすることもあり、誤った状態で進むと戻せなくなる場合があるので、バージョン管理は欠かせません
とはいえ総じて非常に有用です。
この段階までコーディングはほぼ行っておらず、驚くべき速さで高度なモジュールを組み上げてくれました。
この手応えは大きく、より機能向上を目指して進めていきたいと思います。引き続き進捗を共有できればと思います。