【個人開発】画像やPDFを即テキスト化するAI-OCR「文字よみ名人」を作った話（Vue 3 × PHP）

Posted at 2026-07-30

※この記事は Zenn に投稿した記事のマルチポスト（転載）です

画像やPDFから手書き文字まで高精度にテキスト化するAI-OCR Webサービス 「文字よみ名人」 を個人開発・公開しました。

サービスURL: https://mojiyomi.jp/

この記事では、サービスの概要や開発背景に加えて、個人開発でこだわったアーキテクチャ・セキュリティ・SEO・パフォーマンス最適化のノウハウについてまとめてみます。

1. 作ったもの概要

「文字よみ名人」は、画像やPDFをドラッグ＆ドロップするだけで、瞬時にテキスト抽出し・コピー・CSVダウンロードができるAI-OCRツールです。

主な特長

データ完全不保持で安心: アップロードされた画像や抽出されたテキストはサーバーのディスクに一切保存されず、AIの学習利用もされません（機密書類も安心）。
幅広くサポートするファイル形式: JPEG / PNG / WebP に加え、iPhoneで撮影した HEIC や複数ページの PDF にも対応。
手書き文字も高精度に認識: 崩れた筆跡や手書きメモも高い精度で読み取り可能。
会員登録後すぐ試せる: サイトを開いてすぐに無料枠（月3枚）でお試し可能。

2. なぜ作ったのか？（開発背景）

業務や日常で「画像や手書きメモの文字を起こしたい」場面は頻繁にあります。しかし、既存の無料OCRツールやWebサービスには以下の課題がありました。

プライバシー・セキュリティの懸念
「アップロードした画像がサーバーに残るのではないか」「AIの学習データに使われるのではないか」という不安があり、機密文書や個人情報を含む書類を投げづらい。
iPhoneの写真（HEIC形式）やPDFがそのまま通らない
スマホで撮った書類写真をPCに送ってそのまま読み込ませたいのに、フォーマット変換の手間が発生する。

そこで、「徹底的にデータを残さない設計」 と 「ビジネス現場での使いやすさ」 を追求したツールを自作することにしました。

3. 技術スタック

シンプルかつ軽量で、メンテナンスしやすい構成を採用しています。

フロントエンド: Vue 3, Tailwind CSS
バックエンド: PHP
決済連携: Stripe Customer Portal / Checkout API
インフラ/配信: Nginx, CSP (Content Security Policy) 最適化

4. 開発でこだわった技術ポイント＆ノウハウ

単に動くものを作るだけでなく、プロダクトとしての信頼性と堅牢性を高めるために以下の点に拘りました。

① サーバーディスクへの非保存（メモリ上のみでの処理）

アップロードされた画像データはバックエンドの OcrAction 内でメモリ上のストリームとして扱うだけで、ディスク（/tmp等）へ一切書き出しません。DBに残るのはテンプレートキーと処理日時のログのみ。AIモデル側（Google Vertex AI/Gemini等）のAPI規約でも学習非利用が保証されているため、「データ非保存」を自信を持ってFAQやプライバシーポリシーに明記できました。

② 未ログイン状態の応答を「200 OK (`authenticated: false`)」にする設計

SPA起動時に現在のログイン状態を確認する /api/auth/me というAPIがあります。
当初は未ログイン時に 401 Unauthorized を返していましたが、JavaScriptの try-catch で捕捉しても、ブラウザのネットワークログ（コンソール）には赤文字で 401 エラーが記録されてしまいます。

/api/auth/me は保護リソースへのアクセス拒否ではなく「現在の状態を問い合わせる公開エンドポイント」です。「未ログインである」という状態も正常な結果（200 OK）として返すべきと判断し、以下のように改修しました。

// 200 OK
{
  "authenticated": false,
  "user": null
}

保護された領域（$protected）は従来通り 401 を返しつつ、状態問い合わせは 200 OK で返すことで、ブラウザコンソールの不要な赤字エラーを完全にゼロにし、クリーンな開発環境と堅牢な設計を両立しました。

③ FAQPage 構造化データ（JSON-LD）のあえての見送り判断

SEO対策として JSON-LD の導入を進めましたが、FAQPage 構造化データについては最新のGoogle検索仕様を調査した上で見送る判断をしました。
Googleは2023年8月以降、FAQリッチリザルトの表示対象を政府・医療機関等に限定しています。一般サイトで導入してもリッチ表示されない一方、「HTML上の可視FAQとJSON-LDの修正漏れによる食い違い事故」のリスクだけが残るためです。最新仕様に基づいた費用対効果の判断を行いました。

④ Tailwind Play CDN から CLI ビルドへの完全移行

開発初期に使われがちな <script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>（Play CDN）は、ブラウザ上で毎回JavaScriptがCSSを生成するため、数MBの遅延やコンソール警告が発生します。

本番運用に向けて Tailwind CLI (v3.4) + PostCSS による事前ビルド構成へ移行。

HTML内の全クラス名（280トークン以上）とコンパイル済みCSSの網羅性を検証。
ファイルサイズを数MBからわずか 28KB (minify済み) へ軽量化し、表示速度（SEO/Core Web Vitals）を劇的に向上させました。

5. おわりに

個人開発において「機能を増やすこと」と同じくらい、「データの扱いに対する信頼性」「パフォーマンス最適化」 が大切だと実感しました。

「文字よみ名人」は会員登録なしで月3枚まで完全無料でお試しいただけます。手元の手書きメモやPDF、iPhoneの写真のテキスト化にぜひ使ってみてください！

👉 「文字よみ名人」を試してみる: https://mojiyomi.jp/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up