--- version: alpha name: Navy Edo Pop Educational Card Game LP description: 濃紺の帯と青海波柄の淡い水色の地に、オレンジの強調文字を合わせた子ども向け知育カードゲームの LP。極太ゴシックのロゴ風見出し、白抜きの丸バッジ、円形に切り抜いた家族写真、吹き出しで並べた口コミが特徴で、和風（浮世絵・青海波）と明るいポップさを組み合わせている。 colors: primary: '#033363' on-primary: '#FBFEFE' accent-1: '#F26A1B' cta: '#FF6E1C' on-cta: '#FBFCFB' background: '#FFFFFF' background-alt: '#DEF1F5' tint-1: '#E5E7F3' tint-2: '#FFF6CC' accent-2: '#6BC3E4' accent-3: '#F5D84A' text: '#1E3A57' surface: '#FDFEFE' text-muted: '#537080' accent-2-accessible: '#1E7EA3' cta-accessible: '#C94900' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 400 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 accent: fontFamily: Yomogi fontSize: 13px fontWeight: 400 lineHeight: 1.5 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 rounded: sm: 6px md: 12px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 130px circle-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 100px keyword-underline: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 36px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 130px step-number: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px voice-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 110px info-pill: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 150px achievement-banner: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 50px orange-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 60px --- # DESIGN.md — 紺×オレンジの和柄ポップ知育ゲーム LP（Navy Edo Pop Educational Card Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、和風、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 濃紺帯・青海波・オレンジ強調・極太ゴシック・円形写真・吹き出し口コミ - **地の質感**: フラットな面に淡い青海波パターンを敷き、紺帯には浮世絵風の線画人物を薄く透かす - **形**: 円形の写真と白抜きの丸バッジ、角丸の白カード、帯の下に付く逆三角の矢印 - **温度感**: 紺で締めつつオレンジと水色で明るく温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#033363` | 濃紺の見出し帯・ロゴ文字 | 15% | 画素の実測 | | `on-primary` | `#FBFEFE` | 紺帯上の白文字 | 2% | 画素の実測 | | `accent-1` | `#F26A1B` | 強調語・キャッチのオレンジ | 3% | 推定 | | `cta` | `#FF6E1C` | オレンジの横帯（見出し帯） | 2% | 画素の実測 | | `on-cta` | `#FBFCFB` | オレンジ帯上の白文字 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 14% | 画素の実測 | | `background-alt` | `#DEF1F5` | 淡い水色の地（青海波の下地） | 20% | 画素の実測 | | `tint-1` | `#E5E7F3` | 淡いラベンダーグレーの地 | 10% | 画素の実測 | | `tint-2` | `#FFF6CC` | 解説セクションのクリーム地 | 4% | 推定 | | `accent-2` | `#6BC3E4` | 紺帯内の水色強調文字・ピル枠 | 2% | 画素の実測 | | `accent-3` | `#F5D84A` | 紺帯サブ見出しの黄色文字 | 0% | 推定 | | `text` | `#1E3A57` | 本文・見出しの紺黒 | 3% | 画素の主要色に補正 | | `surface` | `#FDFEFE` | 説明カードの白面 | 5% | 画素の実測 | | `text-muted` | `#537080` | 注釈のグレー文字 | 0% | 画素の実測 | | `accent-2-accessible` | `#1E7EA3` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#C94900` | AA を満たす補正値（計算） | | 計算 | - セクションの見出しは濃紺の全幅帯に白文字で置き、帯の下に逆三角を付けて次へつなぐ - 本文エリアは水色・ラベンダーの淡い地に青海波柄を薄く敷く - 見出しの中のキーワード 1〜2 語だけをオレンジにし、オレンジの手書き風下線を添える - 紺帯の中の強調語は水色または黄色にする - オレンジの全幅帯はページで 1 回だけの転換点に使う - 白カードは淡い地の上に置いて、本文の読みやすさを確保する - `info-pill` は文字 `#FBFEFE` × 背景 `#6BC3E4` のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#1E7EA3`、4.53:1）を使う。 - `orange-band` は文字 `#FBFCFB` × 背景 `#FF6E1C` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C94900`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の超極太タイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 72px | 1.0 | -0.02em | | `headline-lg` | FV キャッチ・帯の大見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-md` | 紺帯の見出し・セクション見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.4 | 0.02em | | `headline-sm` | カード見出し・グラフ導入文 | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.0em | | `body-md` | 説明本文（中央揃え） | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.0em | | `accent` | 吹き出しの口コミ（手書き風） | 手書き・筆 | Yomogi | 400 | 13px | 1.5 | 0.0em | | `note` | 調査の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | 丸バッジ内の短文 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.0em | - 見出しはすべて極太ゴシックで中央揃えにする - キーワードは周りの文字より 1.3〜1.5 倍大きくし、オレンジにする - 数字（%・番号）は特大の太字にして目立たせる - 口コミだけ手書き風の書体を使い、少し傾けて温かみを出す - 本文は 2〜4 行の短文で中央揃えにする - 見出しの文末に「！」「？」を付けて、勢いのある口調にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、バッジは 3 つの丸を横並び - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 紺帯（高さ約 100〜150px）でセクションを区切る - 特長は「大きな番号 → 円形写真 → 白カード（見出しと本文）」を縦に繰り返す - 円形写真は幅 85% ほどで中央に置き、カードの上端が写真に少し重なるようにする - 口コミの吹き出しは左右交互に散らし、下に写真を置く - 要素はすべて中央揃えを基本にする ## Elevation & Depth - 影はほぼ使わず、フラットな面で構成する - 白カードには影をつけず、淡い地との色の差で浮かせる - 商品パッケージ写真だけは自然な落ち影で立体感を出す ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 写真は円形または大きな楕円に切り抜き、一部の小物（カード・サイコロ）を枠の外へはみ出させる - **セクション境界**: 紺帯の下辺中央に逆三角の矢印を付け、それ以外は直線で区切る - バッジは白い細線の正円で、中は白抜き文字にする - 説明カードは角丸 12px の白い四角形にする - 補足案内は水色のピル型の大きな枠に入れる - 吹き出しは雲形で、しっぽを付ける ## Components - **紺の見出し帯**（`section-band`）: 全幅の紺帯に、白文字の見出しと水色の強調語を置く。左右に浮世絵風の線画を薄く入れ、下辺に逆三角を付ける - **白線の丸バッジ**（`circle-badge`）: 紺地の上に白い細線の円を 3 つ並べ、中に 2 行の短い特長を書く - **オレンジ強調と筆の下線**（`keyword-underline`）: 見出し内のキーワードをオレンジにし、筆で引いたような下線を付ける - **特長説明カード**（`feature-card`）: 見出しの両端に麻の葉風の紺い記号を置き、下に中央揃えの本文 3 行を入れた白カード - **大きな番号と其の一表記**（`step-number`）: 筆文字のような紺の特大数字の下に小さく和風の序数を添え、円形写真の上端に重ねる - **口コミの雲形吹き出し**（`voice-bubble`）: 白い雲形の吹き出しに、手書き風の文字で短い感想を入れる。5〜6 個を散らして配置する - **水色のピル型案内**（`info-pill`）: アイコン、小見出し、大見出しを細線で区切り、補足を 1 行添えた水色の大きなピル型の枠 - **実績の斜線見出し**（`achievement-banner`）: 左右を斜線で挟み、数字を特大のオレンジで見せる実績表示 - **オレンジの転換帯**（`orange-band`）: 全幅のオレンジ帯に白い極太文字の見出しを置き、口コミへ流れをつなぐ ## Do's and Don'ts **Do** - 紺帯と淡い地を交互に置き、メリハリのあるリズムを作る - 青海波などの和柄を、淡い地の上にごく薄く敷く - キーワードはオレンジに下線を付けて、1 見出しにつき 1〜2 語だけ強調する - 円形写真には、カードやサイコロなどの小物をはみ出させて動きを出す - グラフや数字は大きく見せ、注釈は小さなグレー文字で添える **Don't** - 紺とオレンジ以外の濃い色を主役にしない - 細い明朝体や繊細な書体を見出しに使わない - 写真を四角いまま並べただけにしない - 本文を左揃えの長文にしない - 強い影やグラデーションのボタンで、フラットな質感を崩さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象・効果・商品を一目で伝える）: 子どもの笑顔の写真に商品パッケージを重ね、オレンジと紺の極太キャッチを置く。下部の紺地に特大ロゴ文字と 3 つの丸バッジを並べる 2. **商品紹介**（どんな商品かを要約する）: 下線付きの見出しと電球アイコンを置き、オレンジと紺の 3 行コピーを机・子どもの写真に重ねる 3. **課題の提起（データ）**（つまずきの多い分野を数字で示す）: 紺帯の見出しの下、水色の地に大きな円グラフを置き、最大の値を特大のオレンジで示す。下に注釈を添える 4. **解決の説明**（その分野を克服すると他の分野にも効くことを伝える）: 紺帯に白と黄色の見出しを置き、クリーム地に白い吹き出しの本文と、喜ぶ子どものイラストを配置する 5. **お客様の声**（保護者の満足を伝える）: オレンジ帯の見出しの下に雲形吹き出しを 6 個散らし、家族の写真で締める 6. **遊び方**（ゲームの流れを 3 段階で見せる）: 青海波の地に、大きな番号、円形写真、白カードの組み合わせを 3 回繰り返す 7. **特長・ベネフィット**（学習効果と家族で遊べる点を訴える）: ラベンダーの地に楕円写真を置き、極太コピーをオレンジの下線付きで重ね、短い本文を添える 8. **補足案内**（ルールが簡単で、説明が付いていることを伝える）: 水色のピル型の枠にアイコンと 3 段の文字を入れる 9. **実績**（社会的な証明を示す）: 紺帯の下にロゴ文字を置き、斜線で挟んだオレンジの達成数値と、支援状況のパネルを横に並べる 10. **商品案内**（商品の内容を見せる）: 紺帯の見出しの下に、パッケージとカードを広げた写真を置き、FV と同じロゴ文字と丸バッジ 3 つ（対象年齢・人数・時間）で締める ## Imagery - 明るい室内で、家族や子どもが笑顔でカードゲームを遊ぶ写真を使う - テーブルを真上や斜め上から撮り、カードとサイコロを散らした写真を入れる - 紺帯の背景に、浮世絵風の人物の線画を薄く透かす - 笑顔の子どものイラストや、四則演算の記号をポップな丸アイコンにした素材を添える - 背景に青海波のパターンを淡い白線で入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像はないため、以下は推奨です - PC では本文の幅を 750px 前後で中央に固定し、紺帯と和柄の背景だけを全幅に伸ばす - 遊び方の 3 段階は、PC では写真とカードを左右交互の 2 カラムにしてもよい - 丸バッジは PC でも 3 つ横並びのまま、直径を 140px 程度に広げる - 口コミの吹き出しは PC では 3 列のグリッドに整える ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-1b4317a6`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/joy-store0316/joy_001/?s-id=sd_browsehist_search/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。