ImageTextExtractor - 画像から文字をコピー！OCRテキスト抽出ツール

## 1. アプリの目的・ターゲットユーザー
スマホで撮った書類・レシート・名刺・スクリーンショット・PDFのキャプチャなど、画像に写っているテキストをブラウザだけで抽出・コピーできる無料OCRツール。「画像のテキストを手入力するのが面倒」「PDFを画像で受け取ったが編集したい」という場面に対応する。外部APIキーは不要でTesseract.js（ブラウザ内完結のOCRライブラリ）を使用し、画像はサーバーに送信されないため個人情報の漏洩リスクなし。SNSで「これ知らなかった！」とシェアされやすいシンプルさが肝。

**ターゲット:** 学生・ビジネスパーソン・主婦・フリーランサー・中小企業の事務担当者など幅広い層

---

## 2. 主要機能
- **画像OCRテキスト抽出:** JPG・PNG・WebP・BMP・GIF をドラッグ&ドロップまたはファイル選択でアップロードし、Tesseract.js で日本語・英語・日英混合の文字を抽出。言語モードは日本語 / 英語 / 日英混合 の3択で切り替え可能。
- **リアルタイム進捗表示:** 抽出中はプログレスバーとステータステキスト（「読み込み中…」「解析中…」「完了！」）を表示し、体感待ち時間を軽減。
- **結果テキストの編集・コピー:** 抽出結果をそのまま編集できるテキストエリアを表示。「全選択してコピー」「改行を除去してコピー」「空白整理してコピー」の3ボタンで用途別に即コピー可能。
- **複数画像の連続処理:** 最大10枚の画像をまとめてアップロードし、ページ順に結果をまとめて出力（書類・請求書の複数ページ対応）。各ページ結果を個別表示 or 全結合テキストに切り替え可能。
- **結果のダウンロード:** 抽出テキストを .txt ファイルとしてワンクリックでダウンロード。ファイル名は元画像名ベースで自動生成。
- **スマホカメラ直接入力:** スマホ向けに「カメラで撮影してOCR」ボタンを用意し、`<input accept='image/*' capture='environment'>` でカメラを直接起動。

---

## 3. 画面構成

### トップページ（1ページ完結）
```
[ヘッダー] アプリ名ロゴ + キャッチコピー「画像の文字を一瞬でコピー」

[アップロードゾーン]
・大きなドロップエリア（点線枠、ドラッグ&ドロップ or クリックで選択）
・📷 カメラで撮影ボタン（スマホのみ表示）
・対応形式の表示 (JPG / PNG / WebP / BMP / GIF)
・最大10枚・各10MBまでの注意書き

[言語選択タブ]
🇯🇵 日本語 | 🇺🇸 英語 | 🌐 日英混合

[進捗エリア] （ファイル選択後に表示）
・ファイルサムネイル一覧
・ページ別プログレスバー

[結果エリア] （抽出完了後にスライドイン表示）
・ページ切り替えタブ（複数画像の場合）or 全結合切り替えボタン
・編集可能テキストエリア（最大高さスクロール）
・ [全選択コピー] [改行除去コピー] [空白整理コピー] [.txtダウンロード] ボタン
・文字数カウント表示

[リセットボタン] 別の画像を試すためにクリアできる

[使い方ガイド] 折りたたみアコーディオン
ステップ1〜3の簡単説明＋活用シーン（レシート・名刺・スクリーンショット等）のアイコン表示

[フッター] プライバシーポリシー（画像はサーバー送信なし明記）・著作権表示
```

---

## 4. データ構造
**DBなし・サーバー送信なし**でブラウザ内完結。

PHPはページ配信のみ担当。全OCR処理は JavaScript (Tesseract.js) がクライアント側で実行。

| 処理 | 担当 |
|------|------|
| ページHTMLの配信 | PHP（index.php 1ファイル）|
| OCR処理 | Tesseract.js（CDN読み込み） |
| 状態管理（ファイルリスト・結果テキスト） | JS変数（ページ揮発性、LocalStorageは不使用）|
| 画像保持 | FileReader API + Canvas（ブラウザ内メモリのみ）|

**Tesseract.jsの言語データ:**
- `jpn.traineddata`（日本語用）
- `eng.traineddata`（英語用）
- `jpn_vert.traineddata`（縦書き対応オプション）
- CDNからオンデマンドロード（初回のみ）

---

## 5. デザインの方向性
- **カラー:** 白ベース＋メインカラーはビビッドブルー（#2563EB）をアクセント。清潔感・信頼感を優先。
- **フォント:** システムフォント（Noto Sans JP）で軽量化。結果テキストエリアはモノスペースフォントで視認性UP。
- **アニメーション:** ドロップゾーンへのホバー時の枠色変化、プログレスバーのスムーズアニメ、結果エリアのフェードイン。余計なアニメはなし。
- **スマホファースト:** ドロップゾーンはタップ領域を大きく確保（min-height: 200px）。ボタンは44px以上のタップエリア。フォントサイズはベース16px以上。
- **コンパクト1ページ設計:** 余分なページ遷移なし。上から下に流れる自然なUXフロー（アップロード→解析→コピー）で、初見ユーザーが迷わず使えることを最優先。
- **SNSシェア誘導:** 結果表示後の下部に「このツールをシェアする」ボタン（X・LINE）を配置し、口コミ拡散を狙う。