DESIGN.md — チョコ茶×山吹色のポップな検定キャンペーンLP（Chocolate Brown and Mustard Yellow Quiz Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい
• キーワード: 板チョコ柄・こげ茶の太縁・山吹色・丸いアイコンカード・番号付き特典・温かいベージュ
• 地の質感: ファーストビューは板チョコを敷き詰めたリアルな写真パターン。それ以外は単色のベタ面で、フラットに仕上げる。
• 形: 角丸カードに 2〜3px のこげ茶の線を付ける。円形の情報カード、ピル型の見出しラベルとボタン。溶けたチョコのような波形の境界も使う。
• 温度感: 暖色だけでまとめた甘く温かい印象

Colors

• 地色は セクション単位で切り替える。順番は チョコ茶 → ベージュ → 山吹色 → クリーム → グレージュ → こげ茶フッター。
• カードは必ず白地にこげ茶の線で縁取り、どの地色の上でもくっきり浮かせる。
• 黄色は数字・番号丸・見出しラベルなど、目を引く点だけに使う。
• ボタンはチョコ赤の面に白文字だけで作る。
• 本文の強調は淡い黄色マーカーを敷き、太字にする。
• 使う色は暖色系だけに限り、寒色は入れない。

Typography

• 大見出しは白または茶の文字に太い縁取りを付け、ステッカーのように見せる。
• 本文は行間を 2.0 前後と広めにし、字間も少し空ける。
• 概要の説明文は中央揃え、カード内の本文は左揃えにする。
• 数字は大きな黄色で打ち出し、ラベルは数字の下に置く。
• 欧文の帯見出しは、白の線だけで描いたアウトライン文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは幅いっぱいの色帯で区切る。
• 円形カードの直径は画面幅の約 70% とし、中央に縦に並べる。
• 特典カードは左右 16px の余白を取り、間隔 20px で積む。
• セクション見出しは上に 64px ほどの余白を取る。
• 番号丸はカード上部の中央に置く。

Elevation & Depth

• 影は基本的に使わず、こげ茶の太い縁線で立体感を出す。
• ファーストビューのカードは白いベタ面にし、チョコ柄の上に載せる。
• レポートの枠は板チョコの縁取りで囲み、額縁のように見せる。

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 漫画やイラストは傾けて重ね、紙片のように見せる。サムネイルは細枠付きの長方形にする。
• セクション境界: チョコ柄から茶の地へは、溶けたチョコのような波形でつなぐ。それ以外の境界は直線の色帯。
• カードの縁線は 2〜3px のこげ茶にする。
• 見出しラベルは黄色のピル型にこげ茶の縁を付ける。
• 情報カードは真円にする。
• ボタンは完全なピル型にする。

Components

• ピル型見出しラベル（label-pill-heading）: 黄色い面にこげ茶の縁と文字。白カードの上辺にまたがるように置く。
• 導入カード（intro-card）: チョコ柄の上に置く白い角丸カード。本文の一部に黄色マーカーを敷く。
• 円形情報カード（circle-info-card）: 白い円にこげ茶の縁。中に黄色の大きな数字かアイコン、太字のラベル、補足を入れる。
• 番号付き特典カード（benefit-card）: 白い角丸カードにこげ茶の縁。上に黄色の番号丸、続いてタイトルと説明を置く。
• 番号丸（number-badge）: 黄色の円の中にこげ茶の数字を入れる。
• 主ボタン（button-primary）: チョコ赤のピル型ボタンに白文字。右端に矢印を付ける。
• 板チョコ枠バナー（chocolate-frame-banner）: 板チョコ柄の縁で囲む。上段は黄色地に縁取り大見出しと漫画画像、下段は白地に本文とボタン。
• 欧文アウトライン帯（outline-band-title）: セクションの境目に、白い線だけで描いた欧文を横幅いっぱいに置く。

Do's and Don'ts

Do - 見出しには必ず縁取りを付け、ポップな立体感を出す。 - 白カードは必ずこげ茶の線で縁取る。 - 数字やメリットは大きく、短い言葉で見せる。 - セクションごとに暖色の地色を切り替える。 - アイコンはこげ茶の線に黄色を差したシンプルな線画にする。

Don't - 寒色や原色の青・緑を使わない。 - 細い明朝体や繊細な書体を使わない。 - 影やグラデーションを多用しない。 - 縁線のない白カードを置かない。 - 長文を詰め込まない。

Page Structure

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

1. ファーストビュー（企画名とテーマを印象づける）: 板チョコ柄の背景に、縁取りロゴ風の大見出しとメダル風エンブレムを置く。
2. 導入説明（企画の主旨と参加しやすさを伝える）: 白カードの上辺にピル型ラベルを載せる。下は溶けたチョコのような波形でこげ茶の地へつなぐ。
3. 概要（無料・オンライン・問題数を示す）: ベージュ地に中央揃えのリード文を置き、円形カードを 3 つ並べる。
4. 特典（合格者のメリットを示す）: 山吹色の地に、番号付きの白カードを 3 枚縦に積む。
5. 体験レポート誘導（体験談で参加意欲を高める）: クリーム地に板チョコ枠のバナーを置き、漫画画像とチョコ赤のボタンを入れる。
6. CTA（本番ページへ誘導する）: チョコ赤のピル型ボタンを 1 つ、矢印付きで置く。
7. シェア・関連コンテンツ（拡散と回遊を促す）: グレージュ地に SNS アイコンを並べ、上下線で挟んだ見出しとバナーを 2 列で置く。
8. フッター（関連サイトとブランドを示す）: こげ茶地に白カードのバナーを 3 つ並べ、下に白ロゴを置く。

Imagery

• 板チョコを真上から撮り、敷き詰めた写真を柄として使う。
• アイコンは太めのこげ茶線に黄色を差したフラットな線画にする。
• 漫画風の手描きイラストを紙片のように傾けて重ねる。
• 認定証などの紙もののモックを、少し傾けて添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 800px に絞り、中央に寄せる。
• 円形カードは PC では横 3 列に並べる。
• 特典カードは PC では番号丸を左、テキストを右に置いた横長カードにする。
• 体験レポートのバナーは PC では横長にし、画像を右に置く。
• 関連バナーは 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 行書くと起動時に読み込まれる。