ImageShrink - ブラウザだけで完結する画像圧縮・リサイズ一括ツール

## 1. アプリの目的・ターゲットユーザー
ブログ運営者・EC出店者・フリーランスデザイナー・SNS担当者が、「画像を軽くしたい・サイズを揃えたい」という日常的なニーズを、ソフトのインストールや会員登録なしで即座に解決できる無料ツール。画像はすべてブラウザ内（Canvas API）で処理し、サーバーに送信しない安心設計を前面に打ち出す。

## 2. 主要機能
- **一括ドラッグ＆ドロップ読み込み**: JPEG / PNG / WebP / GIF（静止画）を最大20枚まで同時にドロップして即プレビュー
- **圧縮率スライダー**: 品質0〜100%をスライダーで調整し、元サイズ→圧縮後サイズと削減率（例: 1.4MB → 312KB ▼78%）をリアルタイム表示
- **リサイズ設定**: 幅・高さをpx指定（縦横比ロックON/OFF）、またはプリセット（SNS正方形1080×1080 / Twitter横長1200×675 / ブログ横幅800px / 名刺91×55mm 等）から選択
- **出力形式変換**: JPEG / PNG / WebP から選択し、透過PNGはWebP/PNGで保持
- **一括ダウンロード**: 処理済み画像をZIPファイルにまとめて1クリックでダウンロード（JSZip.js使用）
- **Before/After比較ビュー**: サムネイル一覧で元画像と圧縮後を並べて確認し、個別に元に戻す操作が可能

## 3. 画面構成
### メイン画面（1ページ完結）
```
┌──────────────────────────────────┐
│ ヘッダー: ロゴ + 「ファイルはサーバーに送信されません🔒」バッジ │
├──────────────────────────────────┤
│ ドロップゾーン（大きめ・点線枠） │
│ 「ここに画像をドラッグ or クリックで選択」 │
├────────────┬─────────────────────┤
│ 設定パネル │ 画像一覧プレビュー │
│・圧縮品質スライダー│ 各カードに: │
│・リサイズ設定 │ - サムネイル(元/圧縮後) │
│・出力形式 │ - ファイル名・元サイズ・圧縮後サイズ・削減率│
│・プリセット選択│ - 個別DLボタン / 除外ボタン │
├────────────┴─────────────────────┤
│ [すべて処理する] [ZIPで一括ダウンロード] ボタン │
└──────────────────────────────────┘
```
- 設定変更のたびにプレビューが即時更新（debounce 300ms）
- 処理中はプログレスバー表示
- モバイルでは設定パネルがアコーディオンで折りたたみ

## 4. データ構造
**DBなし・サーバー処理なし**。すべてブラウザ内で完結。
- JavaScript側で画像データをFileオブジェクトのまま保持
- Canvas API で圧縮・リサイズ処理 → Blob生成
- JSZip.js で複数Blobを1つのZIPにまとめてダウンロード
- 設定値（品質・サイズ・形式）はsessionStorageに保持（タブを閉じるとリセット）

```
[状態管理オブジェクト (JS)]
images[]
- id: string
- original: File
- originalSize: number (bytes)
- previewBlob: Blob (Canvas出力)
- compressedSize: number
- reductionRate: number (%)

settings
- quality: 0~100
- width: number | null
- height: number | null
- lockAspect: boolean
- outputFormat: 'jpeg' | 'png' | 'webp'
- preset: string | null
```

## 5. デザインの方向性
- **カラー**: ホワイト基調 + アクセントカラーにエメラルドグリーン（#10B981）。清潔感と「軽量化」のイメージを統一
- **フォント**: Noto Sans JP（日本語）/ Inter（英数字）
- **アイコン**: Font Awesome or SVGインライン（外部依存最小化）
- 圧縮率の削減パーセントを大きく緑色で表示し「効果が出た！」という達成感を演出
- セキュリティバッジ（🔒 ローカル処理）をヘッダーと説明文の両方に配置し、SNSシェア時に「安全で便利」という印象を強化
- ダークモード対応（prefers-color-scheme）
- OGP画像・メタ説明を整備し、「画像圧縮 無料」「画像 軽くする」「WebP変換」などのキーワードで自然流入を狙う

## 6. SNS拡散・アクセス増加の仕掛け
- 処理完了後に「1.4MB → 312KB まで圧縮しました！ #ImageShrink」のシェアボタンを表示（Twitter/X・LINE）
- TOPページに使い方GIFアニメを1枚埋め込み（スクロールせずに使い方が伝わる）
- 「完全無料・登録不要・ファイルはサーバーに送らない」3点を大見出しで訴求
- 「実は画像のファイルサイズ、こんなに小さくなります」系の紹介記事が書きやすい体験設計