PrintReady - 印刷物レイアウトチェッカー

## 1. アプリの目的・ターゲットユーザー
ブラウザ上で印刷物（A4チラシ・名刺・ハガキ・封筒・CD/DVDジャケット・ポスター等）の「裁ち落とし・余白・安全圏・センタリング・文字サイズ適切性」をチェックし、印刷前に問題点を視覚的に発見・修正できる無料ツール。
- ターゲット：同人誌・ZINEを作る学生・クリエイター、チラシを自作する個人店主、会社でWordやCanva等で作ったPDF/画像を印刷に出す前に確認したいビジネスパーソン
- デザインソフトを持っていない人でも印刷ルール（ブリード・トンボ等）を理解・確認できる点が差別化ポイント

## 2. 主要機能
- **用紙サイズ選択＆キャンバス表示**：A4・A5・B5・B6・ハガキ・名刺・CD/DVDジャケット・封筒（長3/角2）・ポスター（B2/A1）など18種から選択。縦横切替対応。
- **画像アップロード＆オーバーレイ表示**：PNG/JPG/PDFを読み込み、用紙テンプレートに重ねてキャンバス表示。スケールを自動フィットまたは手動調整。
- **ガイドライン自動描画**：「裁ち落とし（塗り足し）3mm」「安全圏（文字・重要要素）5mm内側」「中央線・三分割ガイド」をカラーオーバーレイで表示・非表示切替。
- **自動チェック診断**：① 塗り足し不足検出（端3mm以内に白背景があれば警告）② 安全圏内の空白過多チェック ③ 推定文字サイズが6pt未満の領域ハイライト（Canvas解析） ④ 縦横比ズレ検出。結果を「OK / 警告 / エラー」3段階で一覧表示。
- **印刷用チェックリスト生成**：診断結果をもとに「入稿前確認チェックリスト」をHTML/テキストで出力。印刷会社への確認ポイントを初心者向けに解説付きで提示。
- **ルール解説ポップアップ**：「塗り足しとは？」「安全圏とは？」などの用語をクリックするとミニ解説が表示される学習機能付き。

## 3. 画面構成
### ① トップページ（index.php）
- ヒーロー：「印刷ミスを防ごう」キャッチコピー＋使い方3ステップアイコン
- 「今すぐチェックする」ボタンでチェッカー画面へ
- 対応用紙サイズ一覧グリッド（アイコン＋サイズ名）

### ② チェッカーメイン画面（checker.php または SPA）
- 左パネル：用紙サイズ選択セレクトボックス、縦横ラジオ、解像度（72/150/300dpi）、ガイド表示トグル群
- 中央：Canvasエリア（アップロード画像＋ガイドオーバーレイ）、ズームスライダー、ドラッグでの位置調整
- 右パネル：診断結果ボード（項目別OK/警告/エラーバッジ）、チェックリスト出力ボタン
- 上部：画像アップロードボタン（ドラッグ＆ドロップ対応）

### ③ チェックリスト出力モーダル
- 用紙種別・診断日時・各項目の結果を整形表示
- 「テキストでコピー」「印刷」ボタン

### ④ 印刷ガイド解説ページ（guide.php）
- 塗り足し・安全圏・解像度・カラーモード（CMYK/RGB）・フォントのアウトライン化など印刷基礎知識をアコーディオンで解説
- 初心者向け図解イラスト（CSS/SVGで実装）

## 4. データ構造
DB不要（サーバーサイド保存なし）。
- 画像はクライアントのFileReader APIでブラウザ内処理、サーバーへのアップロードなし
- 用紙サイズ定義は JS定数ファイル（paper_sizes.js）で管理
```
PAPER_SIZES = [
{ id:'a4', name:'A4', w_mm:210, h_mm:297 },
{ id:'a5', name:'A5', w_mm:148, h_mm:210 },
{ id:'meishi', name:'名刺', w_mm:91, h_mm:55 },
... 計18種
]
```
- チェック診断ロジックはすべてJS（checker.js）内で完結
- オプション：よく使う用紙設定をlocalStorageに保存する「お気に入り」機能

## 5. デザインの方向性
- カラー：ホワイト＋ダークネイビー（#1a2744）をベースに、OK=緑（#22c55e）・警告=オレンジ（#f59e0b）・エラー=赤（#ef4444）の診断カラーを活用
- フォント：清潔感のあるNoto Sans JP
- ガイドラインオーバーレイ：塗り足し=赤破線、安全圏=青破線、中央線=グレー点線で視認性重視
- キャンバスエリアは市松模様（チェッカーボード）背景で透過部分がわかりやすく
- スマホでは左パネル→アコーディオン折りたたみ、キャンバスをメインに配置するレスポンシブ設計
- 全体的にプロ感と親しみやすさを両立した「クリーン＆わかりやすい」デザイン