ColorPalette Pro - 配色・カラーパレット生成ツール

## 1. アプリの目的・ターゲットユーザー
Webデザイナー・イラストレーター・学生・趣味でデザインをする人が、プロ品質の配色パレットをブラウザだけで即座に作成・探索・保存できるカラーパレット特化ツール。デザインソフト不要で、配色理論に基づいたパレット生成、画像からの色抽出、カラーコード変換など日常のデザイン作業を支援する。

## 2. 主要機能
- **パレット自動生成**: ベースカラーを1色指定すると、補色・類似色・トライアド・テトラッド・モノクロームなど6種の配色理論パターンを即時生成。スライダーで彩度・明度を微調整可能。
- **画像→パレット抽出**: ユーザーがアップロードした画像（JPG/PNG）から支配的な5色を自動抽出（Canvas APIで実装）。抽出結果をそのまま保存・コピー可能。
- **カラーコード変換**: HEX / RGB / HSL / CMYK を相互リアルタイム変換。コピーボタンでワンクリッククリップボードコピー。
- **パレット保存・公開**: 作成したパレットにタイトル・タグを付けてDBに保存し、公開/非公開を選択。公開パレットはギャラリーに掲載され、いいね数でランキング表示。
- **プリセットギャラリー**: 「和色」「パステル」「ネオン」「アースカラー」「モノクロ」など12テーマ×10セットの計120パレットをプリセット収録し、登録不要で即使用開始。
- **アクセシビリティチェック**: 選択した2色の文字/背景コンビのコントラスト比をWCAG AA/AAA基準で判定し、視認性スコアを表示。

## 3. 画面構成
### トップページ（/）
- ヒーローバナー：「カラーを選ぶだけで、プロの配色が完成」
- 3カラムCTA：「パレットを作る」「画像から抽出」「ギャラリーを見る」

### パレット生成ページ（/generator）
- 左エリア：カラーピッカー（円形HSLピッカー＋HEX入力）、配色理論セレクター（6種タブ）
- 中央エリア：生成されたパレット（5色スウォッチ）をリアルタイム表示。各色にHEX・RGB・HSLを表示し個別コピーボタン配置
- 右エリア：彩度・明度・色温度のスライダー微調整、保存ボタン（タイトル・タグ入力モーダル）
- 下部：UI上でパレットを実際のWebレイアウト（ボタン・ヘッダー・カード）にあてはめたプレビューセクション

### 画像抽出ページ（/extract）
- ドラッグ＆ドロップ or クリックでJPG/PNG（最大5MB）アップロード
- Canvas APIで5色抽出後、スウォッチ表示＋コード一覧
- 「このパレットを保存」ボタン

### ギャラリーページ（/gallery）
- 検索バー（タグ・キーワード）、テーマフィルター、並び順（新着・人気・いいね数）
- パレットカード一覧（グリッドレイアウト）：5色スウォッチ＋タイトル＋いいね数
- 各カードクリックでモーダル展開→全カラーコード表示・いいね・生成画面に読み込む

### カラーコード変換ページ（/converter）
- HEX / RGB / HSL / CMYK の4入力欄が常時同期
- アクセシビリティチェックセクション：2色選択→コントラスト比＋WCAG判定バッジ表示

## 4. データ構造（MySQLテーブル概要）
```sql
-- パレット保存テーブル
palettes (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(100),
colors JSON, -- ["#F1C40F","#E74C3C",...] 最大5色
tags VARCHAR(255), -- カンマ区切り
theory VARCHAR(30), -- 'complementary' / 'analogous' 等
is_public TINYINT(1) DEFAULT 1,
likes INT DEFAULT 0,
session_id VARCHAR(64), -- ログイン不要、セッションで本人識別
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- いいねテーブル（重複防止）
palette_likes (
id INT AUTO_INCREMENT PRIMARY KEY,
palette_id INT,
session_id VARCHAR(64),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
UNIQUE KEY uniq_like (palette_id, session_id)
);
```

## 5. デザインの方向性
- **カラー**: 背景は深めのダークグレー（#1A1A2E）または明るいホワイト（ライト/ダークモード切替）。UI自体がカラーツールなので余計な装飾を排し、色スウォッチが最大限映えるミニマルデザイン。
- **フォント**: 日本語はNoto Sans JP、コード表示はmonospace系。
- **アクセント**: グラデーションボタン（虹色のグラデーション枠線でカラーツールらしさを演出）。
- **レスポンシブ**: スマホではタブ切替で生成エリアとプレビューを分離。ギャラリーは2カラムグリッドに変更。
- **アニメーション**: パレット生成時にスウォッチがスライドインするCSSトランジション（0.3s）。
- **実装技術**: PHP（ページルーティング・CRUD API）+ MySQL + HTML/CSS/JS（Canvas API・CSS変数でテーマ切替）。外部APIキー一切不要。