PermCheck - 権限・アクセス管理マトリクスメーカー

## 1. アプリの目的・ターゲットユーザー
システム開発・Webサービス構築・社内ツール導入時に必要な「誰が何をできるか」の権限設計を、ブラウザだけで素早く整理・可視化できる無料ツール。エンジニア・PM・情報システム担当・チームリーダーが、仕様書や設計ドキュメントに貼り込める権限マトリクス表を数分で作成できる。

---

## 2. 主要機能
- **ロール×機能マトリクス editor**: 行に「ロール（例：管理者・一般ユーザー・ゲスト・オーナー）」、列に「機能/リソース（例：ユーザー管理・記事投稿・設定変更）」を自由に追加・削除し、セルをクリックして「○許可 / △条件付き / ✕禁止 / －対象外」の4段階で設定できるマトリクスエディタ
- **衝突・矛盾チェック**: 同一ロールに相反する権限（例：削除可＋読取不可）が設定された場合に⚠️アイコンと説明文で警告を表示
- **プリセットテンプレート**: 「ECサイト」「社内Wiki」「SaaSアプリ」「ブログCMS」「チャットツール」の5種類のプリセットから一発ロード
- **PNG / HTMLテーブル エクスポート**: 完成した表を画像(PNG)または仕様書に貼れるHTMLテーブルコードとしてコピー／ダウンロード
- **LocalStorage保存 & 複数プロジェクト管理**: 最大10プロジェクトをLocalStorageに保存・切替。保存データをJSONファイルにエクスポート・インポートも可能

---

## 3. 画面構成
### ① ダッシュボード（トップ）
- 保存済みプロジェクト一覧カード（プロジェクト名・最終更新日・ロール数・機能数）
- 「新規作成」ボタン、「テンプレートから作成」ボタン
- シンプルなヘッダー（ロゴ + ダークモード切替）

### ② エディタ画面
- 上部ツールバー：プロジェクト名入力欄 / ロール追加ボタン / 機能追加ボタン / チェックボタン / エクスポートボタン / 保存ボタン
- メインエリア：スクロール可能なマトリクステーブル
- 左端列：機能名（インライン編集可・ドラッグ並び替え）
- 上端行：ロール名（同様）
- 各セル：クリックで「○→△→✕→－→○」と循環切替、色付き（緑/黄/赤/グレー）
- 衝突検知セルはオレンジ枠＋ホバーでtoolip説明
- 右サイドパネル（折りたたみ可）：選択セルの詳細メモ入力欄
- 下部：凡例バー（4種類の意味説明）

### ③ エクスポートモーダル
- PNG プレビュー ＋ ダウンロードボタン
- HTMLコード textarea ＋ ワンクリックコピー
- JSON ダウンロードボタン

---

## 4. データ構造
DB不要。LocalStorageにJSON形式で保存。

```json
{
"projects": [
{
"id": "uuid",
"name": "プロジェクト名",
"updatedAt": "ISO8601",
"roles": ["管理者", "一般", "ゲスト"],
"features": ["ユーザー管理", "記事投稿", "設定"],
"matrix": {
"管理者:ユーザー管理": "allow",
"一般:ユーザー管理": "deny",
"ゲスト:記事投稿": "conditional"
},
"notes": {
"一般:設定": "自分のプロフィールのみ変更可"
}
}
]
}
```

---

## 5. デザインの方向性
- **配色**：ダーク/ライト対応。ライトはホワイト基調＋アクセントカラーにインディゴ（#4F46E5）。ダークは #1E1E2E 基調。
- **マトリクスセル**：○=緑(#22C55E) / △=黄(#EAB308) / ✕=赤(#EF4444) / －=グレー(#9CA3AF)で塗り分け。フォントはBoldで中央揃え。
- **フォント**：日本語 Noto Sans JP、英数 Inter
- **トーン**：技術ドキュメント寄りの「信頼感・クリーン」。アニメーションは最小限（セル切替時のフェードのみ）
- **テーブル**：sticky thead + sticky 左端列でスクロール時も行・列ヘッダーが固定
- スマホでは横スクロール対応、ツールバーはボトムナビゲーションに移動