https://nkjzm.github.io/MaternityLeaveCalculator/
⏺ ## タスク
「育休もらえる？」という日本語Webアプリのための OGP
画像（1200×630px）をデザイン・実装してください。
最終成果物は SVG（またはそのまま sharp で PNG 変換できる形式）です。
---
## アプリの概要
**サービス名：** 育休もらえる？
**URL：** <https://nkjzm.github.io/MaternityLeaveCalculator/>
**ターゲット：** 妊娠中の日本人女性。転職・休職・シフト制など、育休給付金を受け取れるか「ぎ
りぎり微妙」な状況にいる人
**価値提案：**
出産予定日の前後±N日を1日ずつ判定し、「どの日に生まれたら受け取れるか」を色で可視化する
---
## 既存デザインシステム（一致させること）
### カラーパレット
--bg: #fff7f3 （ページ背景・暖かみのあるオフホワイト）
--bg-2: #fde6df （薄いピンク）
--bg-3: #cee9d6 （薄いミント）
--pink: #ec8aa3
--pink-deep: #c45c7a
--mint: #6cbe9a
--mint-deep: #3f8e6c
--gold: #f3cf76
--gold-deep: #8a6a1a
--plum: #3a2e4f （メインダーク。見出し・ボタン・ロゴ）
--plum-deep: #1c1428
--white: #ffffff
### フォント
- **見出し（和文）：** Zen Maru Gothic（丸ゴシック体、weight 900）
- **本文：** Plus Jakarta Sans / Noto Sans JP
- **モノスペース：** DM Mono
### アプリのビジュアルアイデンティティ
- 背景：暖かみのあるオフホワイト＋ピンク・ミントのぼんやりしたブロブ（blur:
70px、radial-gradient）
- カード：白、border-radius 28px、大きめドロップシャドウ
- ロゴマーク：plum色の丸の中に白の「？」
### ヒートマップセル（アプリのコアUI要素）
判定結果を日付ごとの正方形セルで表示。3種類のステータス：
- **pass（受け取れる）：** bg `#cee9d6 → #6cbe9a`、文字 `#1f3a2c`
- **near（あと少し届かない）：** bg `#fff5d4 → #f3cf76`、文字 `#8a6a1a`
- **fail（受け取れない）：** bg `#fde6df → #ec8aa3`、文字 `#4a1924`
- セルには「日付ラベル（小）」「か月数（大・太字）」が縦に並ぶ
- 出産予定日のセルには右上に plum 丸バッジ「予」が付く
---
## OGP 画像に必要な要素
1. **ロゴマーク**：左上に「？」マーク丸＋「育休もらえる？」テキスト
2. **メインコピー**：「育休給付金、」→ 改行 →
「もらえる？」（アクセントカラーのグラデーション）
3. **サブコピー**：「出産日のぶれや産休・転職・シフトを全部考慮して、あなたの場合に受け取れ
るかを 1 日ずつ判定します。」
4. **ヒートマップのサンプルグリッド**（アプリの中身を見せる）：6列×2行、pass/near/failが混
在した自然なグラデーション配列
5. **凡例**：「受け取れる」「あと少し届かない」「受け取れない」の3種
---
## デザイン上の要件
-
左：コピー・ロゴ、右：ヒートマップカード、の2カラムレイアウト（既存Landing.tsxと同じ構造）
- SNSでサムネイル表示された時に「何のアプリか」が一目で伝わること
- 背景のブロブ（グラデーション光の玉）で奥行き感を出す
- 「もらえる？」の文字が最も目立つように（グラデーション or 大きいウェイト）
- テキストは日本語フォントがレンダリングされない環境でも骨格が読めるように配慮（SVGテキスト
の場合、フォールバックに `sans-serif` を含める）