DESIGN.md — 若草緑×深緑の交通系アプリ特典キャンペーン LP（Fresh Green Mobile Payment Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型、かわいい
• キーワード: 若草緑・深緑の枠線・金色コイン・斜線テクスチャ・ミントのドット地・ステップ説明
• 地の質感: 緑地に細い斜線ストライプ、後半はミント地に細かいドット。カード内は白のフラット面。
• 形: 四角いカードを深緑の太線で囲む。見出しは枠線上に乗せるタイトル帯。ボタンはピル型。後半は手描き風に少し歪んだ角丸枠。
• 温度感: 明るく爽快で親しみやすい。公共交通らしい誠実さも残す。

Colors

• 前半は若草緑の斜線地、後半はミントのドット地にして2つの企画を色で分ける。
• 情報カードは白地と深緑の太枠で統一する。
• 小見出し帯は深緑ベタに白文字で入れる。
• 金色は大見出しと金額の強調だけに使う。
• タブは選択中が鮮やかな緑、非選択は黄緑。
• 第1弾は金色、第2弾はティールで識別する。
• button-primary は文字 #FFFFFF × 背景 #24AC39 のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1C882D、4.56:1）を使う。
• phase-banner は文字 #F9FEFC × 背景 #C49601 のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#916F01、4.6:1）を使う。
• tab-switch は文字 #FFFFFF × 背景 #24AC39 のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1C882D、4.56:1）を使う。

Typography

• 大見出しは極太のレトロなディスプレイ書体で、金色に深緑の縁取りを付ける。
• 本文は丸みのあるゴシックで中央揃えが基本、注釈は左揃え。
• 日付や数字は欧文の太字で大きく、曜日は小さく添える。
• 重要な期間・数字は太字と下線で強調する。
• 注釈は※を先頭に置き10px程度に下げる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内も縦積み、手順は画像左・文章右の2列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 40px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは深緑の太枠で囲んだ白カードにする。
• カード上辺の中央に見出しを乗せて枠線を途切れさせる。
• カード内の小見出しは幅いっぱいの深緑帯。
• ステップは深緑の横線で区切る。
• アプリストアのボタンは2つ横並びにする。

Elevation & Depth

• 影はほぼ使わずフラット。
• 後半の見出しやバッジにはずらした深緑のベタ影を付ける。
• 立体感は枠線の太さで出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: アプリ画面は端末フレームか角丸の四角。キャラクターは切り抜きにする
• セクション境界: 背景色をまっすぐ切り替える。カードの枠線と見出し帯で区切る
• 前半のカードは角丸なしの四角。
• 後半の枠は少し歪んだ手描き風の角丸。
• タブは上の角だけを丸める。
• 告知バッジは吹き出し型のピル。

Components

• 詳細ピルボタン（button-primary）: 緑のピル型に白文字。右端に白い三角を付ける
• 企画フェーズ帯（phase-banner）: 上部に白抜きピルで弾数と開始日、下に2行の説明を置く色帯
• 枠線カード（section-card）: 白地に深緑の3px枠。上辺の中央に金色の見出しを乗せる
• 深緑見出し帯（subhead-bar）: カードの幅いっぱいに敷く深緑ベタの帯。白文字は中央揃え
• OS切替タブ（tab-switch）: 左が選択中で緑、右が黄緑。下の緑枠パネルとつなげる
• 手順ステップ（step-item）: 端末型の図版とSTEP番号、説明文。各ステップを深緑線で区切る
• FAQ開閉ボタン（faq-toggle）: 淡色地に深緑の太枠、右端に＋
• 吹き出しバッジ（speech-badge）: 深緑のピルに白文字。下に三角のしっぽを付けてボタンを指す
• アプリストアボタン（store-buttons）: 黒い角丸のストアボタンを2つ並べる

Do's and Don'ts

Do - 地色を緑系で統一し、企画ごとに若草緑とミントで切り替える。 - 情報は深緑枠のカードにまとめ、見出しは枠の上に乗せる。 - 期間と金額は大きな太い数字で目立たせる。 - 注釈は省かず小さな文字で丁寧に載せる。 - ダウンロード導線をページ中盤と末尾に繰り返し置く。

Don't - 赤や紫を強調色に使わない。 - カードに大きなぼかし影を付けない。 - 細い明朝体を使わない。 - 金色を本文や面全体に広げない。 - 地をテクスチャのない真っ白な面にしない。

Page Structure

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

1. 告知ラベル（シリーズ企画であることを示す）: 左上にピンクのピルで企画名と弾数を置く
2. ファーストビュー（還元総額のインパクトを伝える）: 緑地に金コインを散らし、放射線の上に金の極太数字を置く。右下にスマホを持つ手、下部に期間
3. 企画切替（第1弾・第2弾を案内する）: スライダーのドットの下に金色とティールのピル帯を並べる
4. 特典概要帯（対象と特典を一文で示す）: 深緑の全幅帯。下線付きの期間と白文字、金額は金色の大文字
5. キャンペーン内容（期間・条件・注意事項）: 枠線カードの中に深緑の見出し帯と本文を交互に置く
6. 登録方法（OS別の手順を示す）: タブ切替パネルの中にアプリ画面と説明、緑のピルボタンを置く
7. 受取ステップ（特典の受け取り手順）: STEP1〜4を端末イラスト付きで並べ、深緑線で区切る
8. よくある質問（疑問を解消する）: アコーディオンを開くボタンを1つ置く
9. ダウンロードCTA（アプリ取得を促す）: 緑の全幅帯に白見出し、ストアボタン2つ
10. コラボ企画FV（第2弾キャラクター特典を訴求する）: ミントのドット地にコマ割り枠を組み、キャラクターとカード券面を入れる
11. 券面紹介（特典デザインを見せる）: 手描き風の見出し枠とタブで、券面画像・名前・外部リンクボタンを縦に並べる
12. 第2弾内容とCTA（条件の説明と関連手順への誘導）: 水色のカードに角丸枠の見出しを置き、吹き出しバッジ付きの緑ボタンにつなげる。最後はFAQとストアボタン

Imagery

• 金色のコインを大小に散らし、遠近感を出す。
• スマホを持つ手はフラットなイラストで描き、深緑の輪郭線を付ける。
• アプリ画面は簡略化したモック図を黒い端末枠に収める。
• キャラクターは白フチの切り抜きにして、コマ割り枠からはみ出させる。
• 背景に細い斜線やドットのパターンを敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約900px幅でまとめ、外側は同じテクスチャ地を広げる。
• FV は横長にして、メインコピーを中央、スマホの手を右、期間を右上に置く。
• 企画切替の帯やカード内の期間・条件は2列に並べる。
• STEP は4列、または2×2の横並びにする。
• 券面画像は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 行書くと起動時に読み込まれる。