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

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

Overview

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

Colors

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

Typography

• ロゴ風の英数字は縦長の極太書体で詰めて組み、%などの記号は小さくする。
• 日本語の大見出しは太いゴシックで中央揃えにする。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

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

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