コピペ年齢計算機 AgeSnap — 生年月日を貼るだけで全部わかる多機能年齢計算ツール

## 1. アプリの目的・ターゲットユーザー

「あの人いま何歳？」「次の誕生日まであと何日？」「〇歳になるのはいつ？」など、日常・ビジネス・医療・法律・保険の場面で頻繁に発生する年齢関連の計算をすべてワンページで解決する超便利ツール。

- ターゲット：医療・介護スタッフ（患者年齢確認）、人事・総務担当（定年・入社年数管理）、保険営業（加入可能年齢確認）、一般ユーザー（芸能人・友人の年齢を調べる）
- SNS拡散ポイント：「芸能人の生年月日を入れると学年・干支・星座・元号・何歳差かぜんぶ出てくる」「自分が生まれた日の曜日と当時の出来事がわかる」という体験がシェアされやすい

---

## 2. 主要機能

- **多角的年齢表示**：満年齢・数え年・英語圏年齢（誕生日前後で変わる）・学年（日本）・干支・星座・元号（昭和/平成/令和）・生まれた曜日を一括表示
- **カウントダウン/カウントアップ**：次の誕生日まであと何日・何時間・生まれてから何日・何秒（リアルタイムカウント）
- **年齢差計算モード**：2人の生年月日を入力して年齢差を年・月・日単位で表示。「〇歳差カップル」「親子の年の差」確認に使える
- **逆算モード**：「〇年後に何歳？」「〇歳になるのはいつ？」「定年（60/65歳）はいつ？」を入力から逆算
- **在職年数・勤続計算**：入社日・退職日を入力すると勤続年数を年月日で表示、退職金計算の参考値も表示
- **SNS共有カード生成**：結果をおしゃれなカード画像（Canvas生成）にしてダウンロード・Twitter/LINE共有ボタン付き

---

## 3. 画面構成

### メイン画面（1ページ完結）

```
[ヘッダー] AgeSnap ロゴ + キャッチコピー「生年月日を入れるだけで全部わかる」

[モード切替タブ]
📅 年齢計算 👫 年齢差 ⏩ 逆算 📋 勤続計算

--- [年齢計算モード] ---
[入力エリア]
生年月日：年プルダウン / 月プルダウン / 日プルダウン
基準日：今日（自動）/ 任意の日付を指定
[計算するボタン]

[結果カード（大きくリッチに表示）]
┌─────────────────────────────┐
│ 満年齢：42歳 (数え年 43歳) │
│ 学年：中2相当 | 星座：牡牛座 │
│ 干支：寅 | 元号：昭和57年生まれ │
│ 生まれた曜日：金曜日 │
├─────────────────────────────┤
│ ⏱ 生まれてから 15,492日 │
│ 🎂 次の誕生日まで 127日 │
│ ⏰ 生まれてから [カウントアップ] │
└─────────────────────────────┘

[シェアカード生成ボタン] → Canvas でカード生成 → PNG DL / Twitter / LINE

[豆知識セクション]
その年に起きた出来事（内製の年別トリビアDB 1900〜2025年）
例：「1982年生まれ：ホテルニュージャパン火災 / 東北新幹線開業の年」
```

### レスポンシブ対応
- スマホ：縦1カラム、タブはスワイプ切り替え
- PC：左に入力、右に結果の2カラムレイアウト

---

## 4. データ構造

DBは不要。すべてフロントエンド（JS）で計算 + LocalStorageで直近5件の計算履歴を保存。

### 内製静的データ（JS定数ファイル）

```javascript
// 年別トリビア（1900〜2025年の主要出来事 各年3〜5件）
const YEAR_TRIVIA = {
1982: ["東北新幹線開業", "ホテルニュージャパン火災", "フジテレビ移転"],
1983: ["任天堂ファミコン発売", "三宅島噴火"],
// ...
};

// 元号マスタ
const GENGO = [
{ name: "令和", start: "2019-05-01" },
{ name: "平成", start: "1989-01-08" },
{ name: "昭和", start: "1926-12-25" },
{ name: "大正", start: "1912-07-30" },
{ name: "明治", start: "1868-01-25" },
];

// 星座マスタ（月日範囲）
const SEIZA = [ ... ];

// 干支
const ETO = ["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"];
```

### LocalStorage スキーマ
```json
{
"history": [
{ "name": "太郎", "birthdate": "1982-05-12", "calcAt": "2025-07-01" }
]
}
```

---

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

- **カラー**：ネイビー（#1e3a5f）× ゴールド（#f0a500）× ホワイトのプレミアム感
- **フォント**：見出しに丸ゴシック系、数字は大きく読みやすいモノスペース
- **アニメーション**：計算ボタン押下後に結果カードがフェードイン、カウントアップは毎秒リアルタイム更新
- **シェアカード**：誕生日ケーキ🎂 + 星座アイコン + 主要情報を横長カード（1200×630px）に Canvas でレンダリング。背景は星空グラデーション。SNS映えを重視
- **全体トーン**：シンプルで清潔感があり、年齢層を問わず使いやすい。絵文字を適度に使いポップさを維持

---

## 実装メモ（Atlasへ）

- PHP は最小限（index.php で HTML 出力のみ。OGP タグで SNS シェア時の見た目を整える）
- MySQL 不要（すべて JS + LocalStorage）
- Canvas API で SNS シェアカード生成（html2canvas は外部依存なので自前 Canvas 描画で実装）
- 年別トリビアは JS の定数オブジェクト（trivia.js）として分離し、1900〜2025年の全126年分を収録
- 「芸能人の名前＋生年月日」でSNS検索されたときに流入を狙うため、title タグとメタ説明を「年齢計算 無料 生年月日 干支 星座 元号 学年 勤続年数」のキーワードを含む形にする
- スマホから1タップで計算結果をLINE共有できるボタンを設置（LINE Share URL scheme）