ImageMeta Cleaner — 画像メタデータ確認・消去ツール

## 1. アプリの目的・ターゲットユーザー
スマートフォンやデジカメで撮影した写真には、撮影日時・GPS位置情報・端末機種名・作者名などのExif/IPTCメタデータが埋め込まれている。SNSやフリマアプリへの投稿前にこれを確認・削除しないと、自宅住所や行動パターンが特定されるリスクがある。本ツールは「画像をアップロードするだけでメタデータを一覧表示し、ワンクリックで完全削除してダウンロードできる」プライバシー保護ツール。ターゲットは個人のSNSユーザー・フリマ利用者・写真を公開するすべての人。「SNSに上げる前に必ずここを通す」という習慣化を狙う。処理はすべてブラウザ内（Canvas API + JavaScript）で完結し、画像はサーバーへ一切送信しない点を大きく訴求してプライバシー意識の高いユーザーにも刺さる設計とする。

## 2. 主要機能
- **Exifビューア**: JPEG/PNG/WebPをドラッグ&ドロップまたはファイル選択で読み込み、撮影日時・GPS座標・カメラメーカー/モデル・ISO/F値/シャッタースピード・ソフトウェア名・作者・著作権情報などを日本語ラベル付きで一覧表示する
- **GPS地図プレビュー**: 緯度経度が存在する場合、OpenStreetMapの静的地図タイル（外部API不要）または簡易テキスト表示で「どこで撮ったか」を視覚的に警告表示する
- **メタデータ一括削除 & クリーンダウンロード**: Canvasに再描画してメタデータを除去したJPEG/PNGを即時ダウンロード。ファイル名は「元のファイル名_cleaned.jpg」形式
- **複数枚バッチ処理**: 最大20枚を同時にドラッグ&ドロップし、一括確認・一括クリーニング・ZIPダウンロード（JSZipライブラリ使用）に対応
- **削除前後の比較表示**: 「残っているメタデータ」「削除されたメタデータ」を色分けしたビフォーアフターパネルで表示し、安心感を演出する
- **SNS共有テキスト生成**: 「○○件の位置情報を削除して安全にしました！」という定型テキストをワンクリックコピーし、SNS投稿を促してバイラル拡散を狙う

## 3. 画面構成
### トップページ（index.php / シングルページ）
- **ヒーローエリア**: キャッチコピー「あなたの写真、住所がバレてるかも」＋大きなドロップゾーン（破線枠）
- **アップロードエリア**: ドラッグ&ドロップまたは「ファイルを選ぶ」ボタン。JPEG/PNG/WebP対応。最大20枚・各10MB
- **メタデータパネル（画像ごとに生成）**:
- サムネイル / ファイル名 / ファイルサイズ
- 危険度バッジ（🔴GPS有り / 🟡個人情報有り / 🟢安全）
- Exif項目一覧テーブル（項目名・値・リスク種別アイコン）
- GPS座標がある場合は赤背景で強調＋「この場所を確認」リンク（OpenStreetMapへ）
- 「このファイルをクリーニング」ボタン → 即ダウンロード
- **バッチ操作バー**: 「すべてクリーニングしてZIPダウンロード」ボタン
- **ビフォーアフター比較**: 各ファイルの削除済み項目を打ち消し線付きで表示
- **SNSシェアボタンエリア**: コピーテキスト生成＋Twitter/Xシェアリンク
- **フッター**: プライバシーポリシー（画像はサーバーへ送信しない旨）・使い方説明

## 4. データ構造
- **DBなし**: すべてブラウザ内処理で完結。LocalStorageも使用しない（画像データをローカルに保存しないことをセキュリティ訴求点にする）
- **使用ライブラリ（CDN読み込み）**:
- `exifr.js`（MIT）: JPEG/PNG/WebPのExif/IPTC/XMPパース（外部通信なし）
- `JSZip.js`（MIT）: 複数ファイルのZIPパック
- `FileSaver.js`（MIT）: ブラウザダウンロードトリガー
- **Exif削除の仕組み**: Canvas要素に`drawImage()`で再描画し`toBlob('image/jpeg', 0.92)`でExifなしのバイナリを生成。PNGはtEXtチャンク除去のため同様にCanvas再描画で対応
- **PHP側の役割**: index.phpはHTMLのエントリポイントを返すだけ。処理はすべてJavaScriptで行い、PHPへの画像送信はゼロ

## 5. デザインの方向性
- **カラーパレット**: 深めのネイビー（#0d1b2a）を背景基調に、アクセントはシアン（#00c8ff）とオレンジ（#ff6b35）。セキュリティ・信頼感と視認性を両立
- **タイポグラフィ**: 見出しはNoto Sans JP Bold、本文・テーブルはRegularで可読性重視
- **アイコン**: Font Awesome（CDN）で🔒🛡️🗺️などセキュリティ系アイコンを多用
- **アニメーション**: ドロップゾーンへのホバーでボーダーがグロー発光。処理中はスピナー表示。完了時はチェックマークのポップイン
- **レスポンシブ**: スマホ（375px〜）ではメタデータパネルが縦積みに切り替わる。ドラッグ&ドロップはスマホではタップ選択にフォールバック
- **危険度の色分け**: GPS有りは赤背景・震えるアイコンで感情的インパクトを最大化し「今すぐ消さなきゃ」という動機付けを行う
- **SNSシェア訴求**: 結果画面の下部に「友だちに教える」セクションを置き、「あなたの写真も危ないかも→このツールで確認」というコピーでバイラル設計