---
version: alpha
name: Outdoor Camp Card Game Bold Red LP
description: 真紅・クリーム・森の緑の3色を大きな面で切り替えるキャンプ風LP。フラットなアウトドアのイラストと、太い縦長の英字ロゴ、筆文字の見出しで遊び心と力強さを出している。カード一覧や手順、仕様表を1カラムで順に見せ、最後に白いボタン1つで購入へ誘導する。
colors:
  primary: '#CE000D'
  background: '#F6EFDC'
  secondary: '#458258'
  text: '#3E3731'
  dark-section: '#000000'
  on-dark: '#FBF8EF'
  on-primary: '#FBF2E1'
  cta: '#FDFEFD'
  on-cta: '#363536'
  accent-1: '#F6B13E'
  accent-2: '#1F5C7A'
  accent-3: '#468359'
  secondary-accessible: '#427D55'
typography:
  display:
    fontFamily: Bebas Neue
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.95
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.04em
  accent:
    fontFamily: Kaushan Script
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
  headline-md:
    fontFamily: Yusei Magic
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 44px
  signpost-nav:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 20px
  stat-band:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 180px
  step-list:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 24px
  note-box:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 60px
  card-feature:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 320px
  script-heading:
    textColor: '{colors.accent-2}'
    typography: '{typography.accent}'
    height: 60px
  spec-table:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 140px
---

# DESIGN.md — 真紅と森緑のキャンプ風カードゲーム LP（Outdoor Camp Card Game Bold Red LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、ナチュラル、親しみ・手作り感
- **キーワード**: キャンプ・フラットイラスト・真紅×森緑・コンデンス英字・筆文字見出し・カードゲーム
- **地の質感**: ほぼフラットな単色の面。ファーストビューの空だけ、放射状の光とやわらかいグラデーションを入れる
- **形**: セクション境界は波形や山・丘の輪郭で区切る。カードは小さな角丸で、ボタンは角丸が小さい長方形
- **温度感**: 暖色の赤とクリームが主役。緑で自然の涼しさを足した、明るく暖かい印象

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#CE000D` | メインの赤い地とロゴの赤 | 26% | 画素の実測 |
| `background` | `#F6EFDC` | カード紹介エリアのクリーム色の地 | 28% | 画素の実測 |
| `secondary` | `#458258` | 森をイメージした緑の地（使用シーン・仕様） | 18% | 画素の実測 |
| `text` | `#3E3731` | クリーム地の見出しと本文の濃い茶色 | 2% | 画素の主要色に補正 |
| `dark-section` | `#000000` | 実績を見せる黒い帯 | 3% | 画素の実測 |
| `on-dark` | `#FBF8EF` | 赤や緑の地に乗せる白い文字 | 1% | 画素の主要色に補正 |
| `on-primary` | `#FBF2E1` | 赤い地に乗せるクリーム色の大きなロゴ文字 | 2% | 画素の実測 |
| `cta` | `#FDFEFD` | 購入ボタンの白い面 | 0% | 画素の実測 |
| `on-cta` | `#363536` | 購入ボタンの文字色 | 0% | 画素の実測 |
| `accent-1` | `#F6B13E` | テントや数字に使う山吹色 | 2% | 画素の実測 |
| `accent-2` | `#1F5C7A` | 筆文字見出しの紺青 | 0% | 推定 |
| `accent-3` | `#468359` | 筆文字見出しの若草色 | 0% | 画素の主要色に補正 |
| `secondary-accessible` | `#427D55` | AA を満たす補正値（計算） |  | 計算 |

- 地の色は赤（導入・ルール・最後のCTA）→クリーム（カード一覧）→緑（使用シーン・仕様）→赤の順に、大きな面で切り替える。
- 赤い地の文字は白かクリーム色にする。クリーム地の文字は濃い茶色にし、真っ黒は使わない。
- 実績の数字だけは黒い帯に置き、金色のグラデーションで目立たせる。
- カードの種類ごとの見出しは、赤・紺青・若草色・山吹色で色分けする。
- フッターは濃い紺の帯にし、テントのシルエットを添える。
- 購入ボタンは白にし、赤い地から浮かせる。
- `spec-table` は文字 `#FBF8EF` × 背景 `#458258` のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#427D55`、4.6:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 商品ロゴ風の巨大な英数字 | 装飾・ディスプレイ | Bebas Neue | 700 | 72px | 0.95 | 0em |
| `headline-lg` | セクションの日本語大見出し | ゴシック | Dela Gothic One | 400 | 26px | 1.4 | 0.04em |
| `accent` | カード分類名の英字の筆文字見出し | 欧文スクリプト | Kaushan Script | 400 | 40px | 1.1 | 0em |
| `headline-md` | 各カード名など、日本語の筆文字風の小見出し | 手書き・筆 | Yusei Magic | 400 | 22px | 1.3 | 0.05em |
| `headline-sm` | シーン説明やリード文の太字 | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.04em |
| `body-md` | 本文・ルール説明 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.04em |
| `note` | 注意書き・仕様表・送料表 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em |
| `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em |

- ロゴ風の英数字は縦長の極太書体で詰めて組み、%などの記号は小さくする。
- 日本語の大見出しは太いゴシックで中央揃えにする。2行に分けるときは2行目を強めにする。
- カードの種類名は筆記体の英字にし、種類ごとに色を変える。
- 本文は13px前後で、行間を広めにとる。
- 注意書きは「※」で始め、細い線で囲んだ枠に入れる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カード一覧は3〜5列のグリッド、カード紹介はSPで1〜2列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算）
- 見出しとリード文は中央揃えにし、本文は左揃えの短い段落にする。
- イラストとテキストは左右に並べ、SPでは縦に積む。
- カードの表と裏を比べる一覧は、表形式のグリッドで並べる。
- 遊び方の手順は丸数字付きの縦のリストにする。
- 仕様と送料は細い罫線の表で見せる。

## Elevation & Depth

- 基本はフラットで、影は使わない。
- カードの画像だけ、ごく薄い影で紙らしさを出す。
- 立体感は、イラストの重なりと地の色の切り替えで出す。

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
- **写真の切り抜き**: カードは縦長の角丸長方形。商品写真は背景を切り抜き、動画のサムネイルは緑の枠で囲んだ長方形にする
- **セクション境界**: 赤と緑の境目は波形、緑の手前は山と針葉樹のシルエット、クリームとの境目は丘のカーブで区切る
- セクションの境目は、まっすぐな線より自然の地形をかたどった曲線にする。
- ボタンは角丸が小さい長方形にし、右に二重の矢印を付ける。
- ナビゲーションは木の道しるべ風の札にする。

## Components

- **購入ボタン**（`button-primary`）: 赤い地に置く白い長方形のボタン。文字は中央、右に二重の矢印を付ける
- **道しるべ型のナビ**（`signpost-nav`）: 木の札を縦に重ねた、英単語のページ内リンク
- **実績の帯**（`stat-band`）: 黒い帯に、達成率を金色の巨大な数字で置く
- **番号付きの手順**（`step-list`）: 白い丸に赤い数字を入れ、手順を縦に並べる
- **注意書きの枠**（`note-box`）: 白い細線で囲み、※付きの小さな文字を並べる
- **特殊カードの紹介**（`card-feature`）: カードの画像、筆文字のカード名、説明文、動画サムネイルを縦に積む
- **筆記体の分類見出し**（`script-heading`）: 英字の筆記体の見出しを大きく置き、その下に中央揃えの説明を2行入れる
- **仕様表・送料表**（`spec-table`）: 緑の地に白い罫線の表。項目名と値を左右に並べる

## Do's and Don'ts

**Do**
- 赤・クリーム・緑の3色を、セクションごとの大きな面として使い切る。
- 人物・テント・山などは、輪郭線のないフラットなイラストで描く。
- セクションの境目には、波・山・丘の形を入れる。
- 商品の要素（カードなど）は、実物の写真を並べて具体的に見せる。
- ロゴ風の英数字は、縦長の極太書体で画面いっぱいに置く。

**Don't**
- 淡いパステルや、くすんだ中間色を主役にしない。
- セクションの境目を、すべて直線で区切らない。
- 本文を長い段落にせず、短く区切る。
- 購入ボタンを赤い色で作らない（赤い地に埋もれてしまうため）。
- 写真風の背景や、リアルな風景写真をメインビジュアルにしない。

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（世界観と商品名を一目で伝える）: 山・テント・森を描いたフラットイラストの上に、赤い巨大ロゴを置く。左側に道しるべ型のナビを置く
2. **コンセプト導入**（遊ぶシーンへの共感を呼ぶ）: 赤い地に、クリーム色のロゴと一言のコピーを置く。その下に人物イラスト2点と短い説明文
3. **実績**（人気と信頼性を示す）: 黒い帯に、金色の巨大な達成率の数字を置く
4. **ルール概要**（簡単に遊べることを伝える）: 赤い地に太字の見出しを置き、カードを扇形に広げた写真と説明文を左右に並べる
5. **遊び方**（手順を具体的に理解させる）: 動画の埋め込み、番号付きの手順、注意書きの枠の順に並べる。下端は丘のカーブとイラストでつなぐ
6. **カードの種類**（カードの構成を一覧で見せる）: クリームの地に、表と裏を比べるカード画像のグリッドを置く
7. **特殊カード紹介**（ゲームの面白さの核を説明する）: 分類ごとに筆記体の見出しを置き、カードを3列で並べる。各カードに筆文字の名前、説明、動画サムネイルを付ける
8. **使用シーン**（屋外でも屋内でも使えることを伝える）: 山のシルエットから緑の地に切り替え、イラストと見出し・本文を左右に並べた段を2つ重ねる
9. **商品仕様・送料**（購入前の情報を示す）: 緑の地に商品写真と仕様表を並べ、その下に送料表を置く
10. **クロージングCTA**（購入へ誘導する）: 波形の境目から赤い地にし、3行のコピー、商品写真、白い購入ボタンを中央にまとめる
11. **フッター**（運営者情報を示す）: 紺の帯に社名ロゴと連絡先を横一列に並べる

## Imagery

- 人物・自然・道具は、輪郭線のないフラットなベクターイラストにする。
- 人物は等身を低めにし、楽しそうな表情や仕草で描く。
- 風景は、山・針葉樹・テント・焚き火・鳥で、キャンプの空気を作る。
- 商品写真は白い背景で切り抜き、少し斜めに置いて動きを出す。
- 食材などのカード写真は、彩度の高いアップで見せる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでも中央に約900pxのカラムを置き、SPと同じく縦1列の流れにする。
- SPでは、イラストとテキストを左右に並べた段を、上下に積む。
- カード一覧のグリッドは、SPでは列数を減らすか横スクロールにする。
- 特殊カードの3列はSPで1列にし、動画サムネイルは横幅いっぱいに広げる。
- ロゴ風の英数字は、画面幅に合わせて縮小する。

## 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-6f3d4c6a`（元 LP の URL から採番）
- **元 LP**: https://www.wakakusa.ne.jp/TheGrill33/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。