Vibe Codingでマーケターのための名刺文字起こしアプリを作るサカタ

下記のような要件をChatGPTと協議しながら作成しました。
Gemini APIについてもChatGPTの検索機能を使ってリサーチし、料金体系とレートリミットを事前に確認し、運用コストが膨らまないように後ほど調整しました。

# 名刺文字起こし設計書
Webアプリケーションの設計を行います。

## 要件
名刺の写真から、JSON Schemaを通じてCSV形式に落とし込んで、最終的にMA（マーケティングオートメーションツール）にインポートできる形式にしたい。
- 名刺の写真はGemini API、モデルはGemini-2.0-flashを使用します
	- 最新のドキュメントを参照すること
	- 構造化出力機能を使用し、JSON Schemaで出力し、それをCSVに落とし込みます。
	- APIキーはv0の環境変数機能で入れます。
- MAツールはHubspotを使用します

## フロー
1. 名刺画像を読み込む
2. Gemini APIを使用してOCRする
3. テーブルビューで一覧で表示する
4. 編集ボタンを押すと、各項目が編集できる
5. 保存を押すとデータが保存される
6. 次へ、戻るボタンを押すと前後の名刺にアクセスできる
7. 最後にCSVエクスポートボタンを押すとHubspotのインポート形式に適合した形のCSVファイルが出力される

## JSON Schema
```json
{
  type: "object",
  properties: {
    last_name: {
      type: "string",
      description: "名刺に記載された姓",
    },
    first_name: {
      type: "string",
      description: "名刺に記載された名",
    },
    company: {
      type: "string",
      description: "名刺に記載された会社名(株式会社など含める)",
    },
    department: {
      type: "string",
      description: "名刺に記載された部署",
    },
    job_title: {
      type: "string",
      description: "名刺に記載された役職",
    },
    postal_code: {
      type: "string",
      description: "名刺に記載された郵便番号（数字7桁）",
      pattern: "^\d{7}$",
    },

    address: {
      type: "string",
      description: "名刺に記載された住所（都道府県からビル名まで）",
    },

    email: {
      type: "string",
      format: "email",
      description: "名刺に記載されたメールアドレス",
    },
    phone_number: {
      type: "string",
      description: "名刺に記載された日本国内の電話番号（数字のみ）携帯電話を優先する",
      pattern: "^\d{10,11}$",
    },
  },
  required: ["last_name", "first_name", "company", "postal_code", "address", "email", "phone_number"],
  additionalProperties: false,
}
```


## HubspotのCSV形式
```
# HubSpot リード情報 CSV インポート仕様書（日本語環境向け）

## 1. 文書の目的
本仕様書は **日本語 UI を使用している HubSpot ポータル** でリード（コンタクト）情報を  
CSV インポートする際のファイル構造・入力ルールを定義します。  
日本語項目を含むデータでも **内部プロパティ名（英語）** を正しく使えば  
問題なく取り込めることを明示し、運用ミスを防止することを目的とします。

---

## 2. ファイル形式
| 項目 | 規定値 |
|------|--------|
| 文字コード | **UTF-8（BOM なし）** |
| 区切り文字 | **半角カンマ ,** |
| 改行コード | **LF (Unix)** |
| 1 行目 | ヘッダー行（**内部名＝英語**） |
| 拡張子 | `.csv` |

> **ポイント**  
> - ヘッダーは必ず英語の “内部名” を使用してください。  
> - データ行は **全角文字（日本語）を含んでも問題ありません**。  

---

## 3. ヘッダー定義（内部名 ↔ 画面表示名 対応）

| 内部名 (英語) | 画面表示名 (日本語 UI) | 必須 | データ型 | 備考 |
|---------------|-----------------------|------|----------|------|
| `email` | Eメール | ◎ | 文字列(email) | 主キー推奨 |
| `firstname` | 名 | ○* | 文字列 | - |
| `lastname` | 姓 | ○* | 文字列 | - |
| `company` | 会社名 | － | 文字列 | 会社オブジェクトと連携可 |
| `jobtitle` | 役職 | － | 文字列 | - |
| `phone` | 電話番号 | － | 文字列 | 国番号付き推奨 |
| `lifecycle stage` | ライフサイクルステージ | － | 選択リスト | 既定値：lead / mql / sql など |
| `lead status` | リードステータス | － | 選択リスト | 既定値：new / in progress など |
| `source` | ソース | － | 文字列 | 任意テキスト |
| `website` | ウェブサイト URL | － | URL | `https:
| `city` | 市区町村 | － | 文字列 | - |
| `state/region` | 都道府県 | － | 文字列 | - |
| `country` | 国 | － | 文字列 | 「Japan」「日本」いずれも可 |

> * `email` 列が無い場合は `firstname` と `lastname` の両方が必須。

---

いざ、Vibe Coding！

設計書をv0に読み込ませると、早速最初の画面が自動生成されます。

生成直後のUIは3つのタブに分割されていました。

名刺入力→確認→エクスポートを一画面で完結させたかったため、縦積みレイアウトへ変更を指示しました。修正は話し言葉でよろしく伝えるだけで、v0が内部コードとスタイルを再生成してくれます。

（本記事では、実際に作ったものから再生成しているため見た目が一部異なります）

開発中に複数のコンソールエラーが発生しましたが、v0 には “Fix with v0” という修正ボタンが備わっており、クリックすると原因解析と修正を自動で行います。

また、デザインをピンポイントで直したい場合は、カーソルで指定して、「実行完了したら緑にして」という風に言えば対応してくれます。

実際に動作させてみる

プレビュー画面で一通りの操作を試せます。
今回のように外部のAPIを使用する場合はマシンパワーをほぼ使わないので、余裕をもって動作しました。

もしも、高い処理能力が必要な場合は、プロジェクトをローカルに複製し、自分のPC上で実行させることも可能です。

話は戻って、このアプリケーションを公開したい場合は、右上のDeployボタンを押すだけで公開できます。ただし、外部APIとつなぎこんだアプリケーションの場合不正利用されるリスクがあるので注意が必要です。

Vibe Codingで得られるスピード感の裏側には、セキュリティ設定が甘くなるリスクが潜んでいます。
実際、外部公開状態のデータベースがインターネット上で発見された事例も報告されています。

作ってみての感想とか

今回の取り組みでは、必要充分な機能だけをもったコードを爆速で生成できました。
そのなかで、設計書を用意してからCodingに入るプロセスが生成物の品質を大きく左右することを実感しました。

また、今後は特にマーケターがエンジニア領域へ踏み込んでいくことが増えると思いました。
マーケティングに関するSaaSは様々あるものの、それらの連携がうまくいかなかったり、逆に多機能すぎて値段と釣り合わなったことが多々あります。
Vibe Codingは、そのような「需要は薄いけど実用性があるソフトウェア」を作るのにとても向いています。

今後もどんどん自作していきたいと思います。