DESIGN.md — 水色×金茶の六角形クイズ懸賞キャンペーンLP（Aqua Hexagon Anime Collab Quiz Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、ポップ・元気、情報量多め・訴求型
• キーワード: 水色・六角形・泡・金茶ボタン・クイズ・アニメキャラ
• 地の質感: フラットな塗りに、ドット・泡・グリッド線を薄く重ねる
• 形: 六角形バッジ、ピル型ボタン、角丸の枠線カード
• 温度感: 涼しく清潔。差し色の金茶で少しだけ温かみを足す

Colors

• 地は白と水色の帯を交互に置き、セクションを区切る
• 主なCTAはすべて金茶のピル型ボタンに統一する
• 見出しは濃い水色、本文はグレーで書く
• 水色地の上では白いカードと白文字を使う
• 期間・締切の情報は金茶の帯見出しと金茶の文字で目立たせる
• 淡い水色の泡を余白に散らして、清潔感を出す
• button-primary は文字 #FFFFFF × 背景 #C5A67B のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#927040、4.55:1）を使う。
• period-box は文字 #9C7A4E × 背景 #FDFEFE のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8E6F47、4.6:1）を使う。
• hex-badge は文字 #FFFEFE × 背景 #5CC4D4 のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#25808E、4.58:1）を使う。
• quiz-option は文字 #45BDD1 × 背景 #FDFEFE のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#23808F、4.56:1）を使う。
• step-card は文字 #45BDD1 × 背景 #FDFEFE のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#23808F、4.56:1）を使う。
• hex-heading は文字 #FFFEFE × 背景 #BDA47C のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8C7247、4.52:1）を使う。
• speech-pill は文字 #9C7A4E × 背景 #FDFEFE のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8E6F47、4.6:1）を使う。

Typography

• 見出しと日付は明朝の太字にして、懸賞らしい格を出す
• 本文と注釈はゴシックで小さめに組む
• 難しい単語にはルビを振る
• クイズの問題文は「Q.」から始め、点線の下線を引く
• 注釈はかなり小さくし、ボタンの近くにまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCでは中央に約440px幅のコラムを置き、左右は装飾に使う
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 賞品はA・B・C賞を縦に並べ、左に六角形の賞バッジ、右に写真を置く
• 応募手順は番号付きの枠線カードを縦に並べる
• クイズの選択肢は横長の白いカード3つにする
• ボタンは幅80%で中央に置く
• 賞品と賞品の間は細い水色の線で区切る

Elevation & Depth

• ほぼフラットにし、影は使わない
• カードは枠線と面の色で立体感を出す
• 選択肢カードだけ右側を矢印形にして奥行きを付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: キャラクターは六角形や円で切り抜き、商品写真は切り抜いて白地に置く
• セクション境界: 直線で色面を切り替え、境目に六角形の泡を重ねる
• 番号・賞のバッジは六角形にする
• CTAボタンはピル型にし、右端に三角の矢印を付ける
• キャラクターのアイコンは六角形の枠に入れる
• 吹き出しは角丸のピル型にする

Components

• 応募CTAボタン（button-primary）: 金茶のピル型ボタン。白い太字と右向きの三角を付け、外側に細い白線の縁取りを入れる
• 期間表示ボックス（period-box）: 上に金茶の帯見出し、下は白地に金茶の日付を大きく明朝で書く
• 六角形の賞・番号バッジ（hex-badge）: 水色または金茶の六角形の中に、賞名や手順番号を入れる
• クイズ選択肢カード（quiz-option）: 白い横長カード。左にA・B・Cの水色丸、右端は矢印形
• 応募手順カード（step-card）: 水色の枠線の角丸カード。上の辺に番号バッジを重ねる
• 六角形の見出し帯（hex-heading）: 左右が尖った横長の六角形帯の中に、白い明朝の見出しを入れる
• 吹き出し（speech-pill）: 白地に金茶の枠線のピル型吹き出しで、案内文を入れる
• 注釈ブロック（note-text）: 小さなグレー文字を「※」付きで並べる

Do's and Don'ts

Do - 六角形のモチーフをバッジ・泡・アイコン枠で何度も繰り返す - 応募への導線はすべて金茶のピル型ボタンにそろえる - 水色の帯面と白地を交互に置いてリズムを作る - 期間・締切は大きな明朝で目立たせる - 余白に淡い水色の泡を散らす

Don't - CTAに赤や原色を使わない - 影の強いカードや立体ボタンは使わない - 水色以外の寒色を主役にしない - 角の尖った四角いバッジは使わない - 本文を明朝の長文にしない

Page Structure

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

1. ファーストビュー（コラボ懸賞であることを伝える）: ロゴ風のタイトルを六角形の中に置き、周りにキャラクターと泡を配置する
2. キャンペーン概要（対象商品と応募条件を示す）: 水色の帯に白文字で書き、白カードに商品写真を載せる
3. 期間・締切（応募期間をはっきり伝える）: 金茶の帯見出しの下に、日付を明朝で大きく書く
4. CTA（応募フォームへ誘導する）: 金茶のピル型ボタンを置く
5. 賞品紹介（A〜C賞の魅力を見せる）: 六角形の賞バッジ・当選数・写真を組み、賞品の間を線で区切る
6. 注意事項（規約を伝える）: 小さなグレー文字で詰めて組む
7. 成分紹介・動画（商品の機能を理解してもらう）: キャラクターと見出しボックスの下に動画サムネを置く
8. キャラクター図鑑（成分の働きを擬人化して説明する）: 水色の地にグリッドのカードを置き、キャラクターを六角形で並べる
9. 漫画解説（仕組みを物語で伝える）: 漫画のコマ割り画像に六角形の泡を重ねる
10. クイズ（当選率アップのクイズに参加してもらう）: 水色の地に、問題文・選択肢カード・答えボタンを並べる
11. 応募方法（手順を示す）: 番号付きの枠線カードを3つ縦に並べる
12. 最終CTA・商品バナー（応募と購入を後押しする）: 金茶のボタンと横長の商品バナー、表示事項を置く

Imagery

• アニメ調のキャラクターを全身または上半身の切り抜きで配置する
• 商品ボトルを白背景で並べた切り抜き写真を使う
• 淡い水色の円や六角形の泡を、半透明で散らす
• グリッド線の背景で、図鑑や研究ノートの雰囲気を出す
• マスコットは水色の丸いフォルムにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約440px幅のSP相当のコラムを固定して置く
• PCの左右はグレーの地にし、キャラクターと泡の装飾を固定で配置する
• PCの右上に、クイズの答え・応募へのショートカットボタンを固定する
• SPではコラムを全幅にし、左右の装飾は消す

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 行書くと起動時に読み込まれる。