PasswordShield — 使い回しパスワード危険度チェッカー＆管理メモ帳

## 1. アプリの目的・ターゲットユーザー
「パスワードを使い回していて不安」「自分のパスワードがどれだけ危ないか知りたい」という20〜50代のネットユーザー全般を対象にした、完全ブラウザ完結型のパスワード安全診断＆簡易メモ帳アプリ。
診断ロジックはすべてクライアントサイドJSで完結し、サーバーへは一切送信しない設計を前面に打ち出すことで「安心感」と「拡散力」を両立する。SNSで「自分のパスワードが何点だったか」をシェアしたくなる診断カード機能も搭載する。

---

## 2. 主要機能

- **危険度スコア診断**: 入力したパスワードを文字種類数・長さ・辞書語・連番・日付パターン・よく使われるパスワードリスト（内蔵500件）などで多角的に採点し、0〜100点のスコアと「極めて危険 / 危険 / 普通 / 安全 / 超安全」の5段階ラベルを表示。改善ヒントも最大3件表示する。
- **使い回し検出メモ機能**: サービス名とパスワードをLocalStorageに保存し、同一または酷似パスワードを複数サービスで使い回している場合に「⚠ 使い回し検出」バッジを自動表示。パスワード本体はページ表示時に伏字で表示し、目のアイコンで一時表示切替できる。
- **強いパスワード生成**: 長さ（8〜32文字）・使用文字種（大文字/小文字/数字/記号を個別ON/OFF）を指定してランダムな強パスワードをその場で生成。ワンクリックコピー対応。
- **診断結果シェアカード**: 点数・ラベル・改善ヒントをOGP風の画像カードとしてCanvas描画し、PNG保存またはTwitter/X・LINEへシェアできるボタンを設置。「私のパスワードは○○点でした」という自然なバイラル導線を作る。
- **リスト一括チェック**: 登録済みのすべてのパスワードを一括スキャンし、スコア順のリスクランキングを表示。最も危険なパスワードを使っているサービスを優先的に交換するよう促す。

---

## 3. 画面構成

### トップページ（single page / SPA風）
- **ヘッダー**: アプリ名 + 「全データはブラウザ内にのみ保存。サーバー送信ゼロ」の安心バナー
- **タブナビゲーション（4タブ）**
1. **診断タブ**: パスワード入力欄（ショー/ハイドトグル付き）→ リアルタイムでスコアメーター（円形ゲージ）・強度バー・文字種ビジュアル・改善ヒントが更新される。「シェアカードを作る」ボタン。
2. **管理メモタブ**: サービス名・ID（任意）・パスワードのカード一覧。使い回しバッジ・スコアバッジを各カードに表示。新規追加フォーム、編集・削除機能。「一括チェック」ボタンでスコア順ソート。
3. **生成タブ**: 生成条件スライダー＋チェックボックス → 生成ボタン → 結果表示 + コピーボタン。生成したパスワードをそのまま管理メモに保存するボタンも設置。
4. **ヒント&豆知識タブ**: 「良いパスワードの5原則」「フィッシング詐欺の見分け方」「二段階認証の設定方法」など静的コンテンツ10記事。SEO集客にも寄与する。
- **フッター**: 免責文 + SNSシェアボタン

---

## 4. データ構造

**DBは不使用。LocalStorageのみ。**

```json
// localStorage key: "passwordshield_entries"
[
{
"id": "uuid",
"service": "Google",
"loginId": "user@example.com",
"password": "encrypted_string", // XOR + Base64で難読化（軽量）
"score": 72,
"createdAt": "2025-01-01T00:00:00Z",
"updatedAt": "2025-01-01T00:00:00Z"
}
]
```

- パスワードはサーバーに送らず、LocalStorage保存時はXOR+Base64で難読化（完全な暗号化ではないことをUIに注記）
- スコアはエントリ保存時に計算してキャッシュ
- 内蔵よく使うパスワードリスト500件はJSファイルに静的埋め込み（PHP/DB不要）

---

## 5. デザインの方向性

- **カラー**: ダークネイビー（#0f172a）背景 + シアン（#06b6d4）アクセント。セキュリティ感・信頼感を演出。
- **スコアメーター**: 円形ゲージをCSS/SVGアニメーションで実装。赤（0〜40）→ オレンジ（41〜60）→ 黄緑（61〜80）→ 緑（81〜100）でグラデーション変化。
- **カード一覧**: サービスアイコン（ファビコン取得失敗時は頭文字アイコン自動生成）＋ 使い回しバッジ（赤）・スコアバッジ（色分け）で一目でリスクが分かるデザイン。
- **シェアカード**: 黒背景にスコア数字を大きく表示し「#パスワード診断」タグ入り。視覚的にSNSで映えるよう設計。
- **フォント**: 英数字はmonospace系、日本語はシステムフォント。
- **モバイルファースト**: 縦スクロール1カラム、タブは下部固定ナビゲーション形式でスマホ操作に最適化。