DESIGN.md — 紺×オレンジの和柄ポップ知育ゲーム LP（Navy Edo Pop Educational Card Game LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、和風、親しみ・手作り感、情報量多め・訴求型
• キーワード: 濃紺帯・青海波・オレンジ強調・極太ゴシック・円形写真・吹き出し口コミ
• 地の質感: フラットな面に淡い青海波パターンを敷き、紺帯には浮世絵風の線画人物を薄く透かす
• 形: 円形の写真と白抜きの丸バッジ、角丸の白カード、帯の下に付く逆三角の矢印
• 温度感: 紺で締めつつオレンジと水色で明るく温かい

Colors

• セクションの見出しは濃紺の全幅帯に白文字で置き、帯の下に逆三角を付けて次へつなぐ
• 本文エリアは水色・ラベンダーの淡い地に青海波柄を薄く敷く
• 見出しの中のキーワード 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

• 見出しはすべて極太ゴシックで中央揃えにする
• キーワードは周りの文字より 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。