🎴 名刺OCR + 手動補正ツール
AI自動認識 → 手動で簡単補正 → データ出力
🚧 デモシステム
⚙️ 認識設定
画像をクリックまたはドラッグ&ドロップ
名刺を解析中です…
💡 このツールについて
• 完全ブラウザ内処理: 画像はサーバーに送信されず、ブラウザ内でOCR処理
• Tesseract.js使用: オープンソースのOCRエンジンで日本語・英語を認識
• 手動補正機能: AI認識後、簡単に情報を編集・修正可能
• CSV出力対応: Excel等で管理しやすいフォーマットで保存
• Tesseract.js使用: オープンソースのOCRエンジンで日本語・英語を認識
• 手動補正機能: AI認識後、簡単に情報を編集・修正可能
• CSV出力対応: Excel等で管理しやすいフォーマットで保存
🚧 これはデモシステムです
本格的な名刺管理システム実装までのステップ
業務で使える名刺管理システムを構築するための詳細ガイド
1
開発環境とアーキテクチャの選定
推奨する構成:
- フロントエンド: React / Vue.js / Next.js(SPA構成)
- バックエンド: Node.js + Express / Python + Flask / Ruby on Rails
- データベース: PostgreSQL(リレーショナル) + S3(画像保存)
- OCRエンジン: Google Cloud Vision API / AWS Textract / Azure Computer Vision
- ホスティング: Vercel / AWS / Heroku
🛠️ 推奨技術スタック
React
TypeScript
Node.js
PostgreSQL
Google Cloud Vision
AWS S3
Docker
⚠️ このデモはTesseract.js(無料)を使用していますが、本番環境ではGoogle Cloud Vision API等の有料サービスを推奨(精度が圧倒的に高い)
2
OCR APIの選定と設定
主要OCRサービスの比較:
- Google Cloud Vision API: 精度◎、日本語対応◎、料金:1000リクエストで1.5ドル
- AWS Textract: 精度◎、表形式に強い、料金:1000ページで1.5ドル
- Azure Computer Vision: 精度◎、Microsoft製品と連携、料金:1000リクエストで1ドル
- Tesseract(オープンソース): 無料だが精度は低め
🔧 Google Cloud Vision API設定手順
1. Google Cloud Consoleでプロジェクト作成
2. Cloud Vision APIを有効化
3. サービスアカウントキー(JSON)を作成
4. 環境変数にAPIキーを設定
5. クライアントライブラリをインストール
2. Cloud Vision APIを有効化
3. サービスアカウントキー(JSON)を作成
4. 環境変数にAPIキーを設定
5. クライアントライブラリをインストール
💫 OCR処理フロー
①
ユーザーが名刺画像をアップロード
②
画像をS3にアップロード(永続保存)
③
S3のURLをOCR APIに送信
④
OCR APIがテキストを抽出して返却
⑤
正規表現で名前・電話番号等をパース
⑥
データベースに保存
3
データベース設計
必要なテーブル構成:
- users: ユーザーアカウント情報(id, email, password_hash, created_at)
- business_cards: 名刺データ(id, user_id, company, name, position, phone, email, address, image_url, created_at)
- tags: タグ管理(id, name)
- card_tags: 名刺とタグの中間テーブル(card_id, tag_id)
- ocr_logs: OCR処理ログ(id, card_id, raw_text, processing_time, accuracy)
💾 テーブル設計例(PostgreSQL)
CREATE TABLE business_cards (
id SERIAL PRIMARY KEY,
user_id INTEGER REFERENCES users(id),
company VARCHAR(255),
name VARCHAR(100),
position VARCHAR(100),
phone VARCHAR(50),
mobile VARCHAR(50),
email VARCHAR(255),
postal_code VARCHAR(20),
address TEXT,
url VARCHAR(255),
image_url TEXT,
notes TEXT,
created_at TIMESTAMP DEFAULT NOW(),
updated_at TIMESTAMP DEFAULT NOW()
);
id SERIAL PRIMARY KEY,
user_id INTEGER REFERENCES users(id),
company VARCHAR(255),
name VARCHAR(100),
position VARCHAR(100),
phone VARCHAR(50),
mobile VARCHAR(50),
email VARCHAR(255),
postal_code VARCHAR(20),
address TEXT,
url VARCHAR(255),
image_url TEXT,
notes TEXT,
created_at TIMESTAMP DEFAULT NOW(),
updated_at TIMESTAMP DEFAULT NOW()
);
4
フロントエンド開発
実装する画面・機能:
- ログイン/会員登録: JWT認証またはOAuth(Google/Microsoft連携)
- 名刺アップロード: ドラッグ&ドロップ対応、複数枚一括アップロード
- OCR結果表示: 自動抽出された情報の確認・編集画面
- 名刺一覧: グリッド表示、検索・フィルター機能
- 名刺詳細: 個別情報の表示・編集・削除
- タグ管理: 名刺にタグ付け、タグでの絞り込み
- CSV/Excel出力: 選択した名刺をまとめてエクスポート
📦 使用ライブラリ(React例)
React Dropzone
Axios
React Query
Tailwind CSS
React Hook Form
date-fns
react-csv
5
バックエンドAPI開発
実装するAPIエンドポイント:
POST /api/auth/register– ユーザー登録POST /api/auth/login– ログインPOST /api/cards/upload– 名刺画像アップロード + OCR実行GET /api/cards– 名刺一覧取得(ページネーション対応)GET /api/cards/:id– 名刺詳細取得PUT /api/cards/:id– 名刺情報更新DELETE /api/cards/:id– 名刺削除GET /api/cards/search– 名刺検索(名前・会社名等)POST /api/cards/export– CSV/Excel出力GET /api/tags– タグ一覧POST /api/tags– タグ作成
🔐 セキュリティ対策
JWT認証
bcrypt(パスワード暗号化)
CORS設定
レート制限
SQLインジェクション対策
XSS対策
⚠️ 個人情報を扱うため、HTTPS必須・GDPR/個人情報保護法準拠・アクセスログ記録が必要です
6
画像保存とストレージ設定
AWS S3での実装例:
- バケット作成: 名刺画像専用のS3バケットを作成
- アクセス制御: プライベート設定、署名付きURL発行
- 画像最適化: アップロード時にリサイズ(Lambda使用)
- バックアップ: S3バージョニング有効化
- コスト削減: 古い画像はGlacierに自動移行
☁️ ストレージ設定例
フォルダ構造:
s3://my-business-cards/
├── users/
│ ├── user_123/
│ │ ├── original/card_001.jpg
│ │ ├── thumbnail/card_001_thumb.jpg
│ │ └── processed/card_001_processed.jpg
│ └── user_456/
└── temp/(一時ファイル、24時間後削除)
s3://my-business-cards/
├── users/
│ ├── user_123/
│ │ ├── original/card_001.jpg
│ │ ├── thumbnail/card_001_thumb.jpg
│ │ └── processed/card_001_processed.jpg
│ └── user_456/
└── temp/(一時ファイル、24時間後削除)
7
高度な機能の実装
差別化機能:
- AI名寄せ: 同じ人物の名刺を自動検出・統合
- 名刺交換履歴: いつ・どこで交換したかを記録
- リマインダー: 定期的に連絡を取るべき相手を通知
- LinkedIn連携: 名刺情報からLinkedInプロフィール自動検索
- メール統合: Gmail/Outlookと連携、メール送信履歴表示
- モバイルアプリ: React Native / Flutter でスマホ版
- 名刺スキャン専用カメラ: エッジ検出・自動トリミング
🤖 AI機能実装例
OpenAI GPT-4(名寄せ)
顔認識API
自然言語処理
画像類似度判定
8
テスト・デプロイ・運用
デプロイ前のチェックリスト:
- ユニットテスト: Jest / Pytest等でテストカバレッジ80%以上
- E2Eテスト: Cypress / Playwrightで主要フロー確認
- 負荷テスト: 同時100人アクセスでもサクサク動作するか
- セキュリティ診断: 脆弱性スキャンツールで診断
- HTTPS化: Let’s Encryptで無料SSL証明書取得
- 監視設定: Datadog / Sentry等でエラー監視
🚀 デプロイフロー(CI/CD)
①
GitHub / GitLabにコードpush
②
CI(GitHub Actions等)で自動テスト実行
③
Dockerイメージをビルド
④
ステージング環境にデプロイ
⑤
動作確認OK → 本番環境へデプロイ
⚠️ 名刺データは個人情報なので、バックアップは必須。毎日自動バックアップ + 30日間保持を推奨
💰 開発・運用コスト見積もり
初期開発費用
50万〜150万円
サーバー(AWS EC2等)
2,000円〜10,000円/月
データベース(RDS)
1,500円〜5,000円/月
画像ストレージ(S3)
500円〜3,000円/月
OCR API(Google Cloud Vision)
1000枚で1,500円
ドメイン + SSL
100円/月(SSL無料)
監視ツール(Datadog等)
無料〜5,000円/月
月額運用費(目安)
5,000円〜20,000円
💡 コスト削減のポイント:
• 無料枠活用: AWS / GCPは初年度無料枠あり
• OCRはバッチ処理で効率化(夜間に一括処理)
• 画像はWebP形式で圧縮してストレージ費用削減
• 小規模ならVercel + Supabase(PostgreSQL)で月0円〜も可能
• 無料枠活用: AWS / GCPは初年度無料枠あり
• OCRはバッチ処理で効率化(夜間に一括処理)
• 画像はWebP形式で圧縮してストレージ費用削減
• 小規模ならVercel + Supabase(PostgreSQL)で月0円〜も可能
💡
SaaS化(サブスクリプションビジネス化)
このシステムを商用サービスとして展開する場合:
- 料金プラン例:
- 無料プラン: 月10枚まで、基本機能のみ
- スタンダード: 月980円、100枚まで、タグ機能
- プロ: 月2,980円、無制限、AI名寄せ・API連携
- エンタープライズ: 要相談、専用サーバー・カスタマイズ
- 決済システム: Stripe / PayPal連携で月額課金
- マーケティング: SEO対策、Google広告、SNS運用
- カスタマーサポート: チャットボット + メールサポート
- 法的対応: 利用規約・プライバシーポリシー作成、特定商取引法表示
📈 収益シミュレーション
100人の有料ユーザー獲得時:
• スタンダード 70人 × 980円 = 68,600円/月
• プロ 30人 × 2,980円 = 89,400円/月
→ 合計: 158,000円/月の売上
運用コスト約2万円を引いて、純利益: 約13.8万円/月
• スタンダード 70人 × 980円 = 68,600円/月
• プロ 30人 × 2,980円 = 89,400円/月
→ 合計: 158,000円/月の売上
運用コスト約2万円を引いて、純利益: 約13.8万円/月