DESIGN.md — 黄緑×金のお祝いポイントキャンペーン LP（Celebratory Lime Gold Points Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感
• キーワード: 周年祝い・紙吹雪・金グラデ・黄緑地・白カード・倍率図解
• 地の質感: 地はフラットな単色。金ボタンと帯だけにグラデーションと光沢を付け、バナーは紙吹雪付きのリッチな塗り。
• 形: 角丸カード、ピル型ボタン、ギザギザ縁のメダル型バッジ、斜めに貼った終了ラベル
• 温度感: 暖かく明るい。祝祭的でにぎやか

Colors

• 地は黄緑とクリーム黄をセクションごとに交互に使う。
• キャンペーン本体は白カードに載せる。各カードの上部バナーは濃緑・紺・えんじと色を変えて見分けやすくする。
• CTA は金グラデのピル型にする。詳細リンクは深緑の小ピルにする。
• 赤ピンクは条件や倍率の強調テキストだけに使う。
• グラフの棒はバナーと同じ色にそろえ、ラベルは金タグにする。
• 最下部の登録ボタンは緑とオレンジの 2 色で役割を分ける。
• ranking-card は文字 #018A04 × 背景 #FEFEFE のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#018704、4.66:1）を使う。

Typography

• 本文も太字寄りにして、全体を元気な印象にする。
• 大見出しは白フチと黒影付きの極太ゴシックにする。
• 数字（倍率・％）は周りの文字の 2〜3 倍の大きさにし、金グラデで塗る。
• 前置きの短いコピーは『＼ ／』で挟み、赤ピンクで中央揃えにする。
• 本文は短い行で中央揃えにする。
• ランキング見出しは深緑の丸ゴシックにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビボタンのみ 2 列。ニュースカードは画像を左、文章を右に置く
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に 4% の余白を取って配置する。
• キャンペーンカードは『バナー→期間帯→本文→図解→CTA』の順に並べる。
• カード同士は 24px 空ける。
• セクション見出しは中央揃えにし、上に 40px の余白を取る。
• グラフは横幅いっぱいに描き、ラベルは棒の上に置く。
• フッターはグレー帯にし、2 ボタンを横に並べる。

Elevation & Depth

• 金ボタンとナビボタンには、下方向に弱い影と上部のハイライトを付ける。
• 白カードは影なしで、黒か緑の 1.5px 枠で区切る。
• ニュースカードは枠なしの白角丸にし、黄緑地から浮かせる。
• 大見出しの文字には黒のドロップシャドウを付ける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: バナー画像は角丸カードの上部いっぱいに入れる。ニュース画像は正方形で角丸なし
• セクション境界: 直線で切り替える。FV 下だけは街並みと電車のイラスト帯で区切る
• CTA と詳細ボタンはピル型にする。
• アコーディオンは左端に円形アイコン、右端に＋を置いた緑のピル帯にする。
• メダルや『必須』のバッジはギザギザ縁の円にする。
• vol 番号はオレンジの吹き出し型の円にする。
• 終了済みのラベルは灰色の帯を斜めに貼る。
• 期間帯は金の見出しと白い枠の 2 段で作る。

Components

• 金グラデのエントリーボタン（button-primary）: 幅いっぱいのピル型。右端に白い丸の再生アイコンを置く。
• 金のページ内ナビ（nav-tile）: 2×2 で並べる金グラデの角丸タイル。2 行の文字と▼を置く。
• キャンペーンカード（campaign-card）: 上部に色付きバナー、左上にメダル、右上に赤い必須バッジ。黒枠の白カードにする。
• 期間表示帯（period-band）: 金の見出し帯の下に、日付を書いた白い枠を付ける。
• 緑のアコーディオン帯（accordion-pill）: 左に白い円アイコン、右に＋。文字は白抜きで 2 行まで。
• ニュースカード（news-card）: NEWS の金タグと黄色の見出し線。画像と文章を横に並べ、右下に緑の詳細ボタンを置く。
• ランキングカード（ranking-card）: オレンジの vol 吹き出し、緑の見出し、薄緑の枠のピル型タグ、右に＋。
• 終了済みバナー（ended-banner）: グラデ背景のバナーに、灰色の斜め『終了』ラベルを重ねる。
• 特典の段階グラフ（bar-chart）: 右肩上がりの赤い矢印と、段々に高くなる棒。棒の上に金の数値タグを置く。

Do's and Don'ts

Do - 倍率や数字は巨大な金グラデ文字で見せる。 - キャンペーンごとにバナーの色を変える。 - エントリーが必要なことは、ボタン直上の赤ピンクの＼／コピーで知らせる。 - 地色は黄緑とクリーム黄を交互にしてセクションを区切る。 - 図解は『通常→期間中』の比較と矢印で直感的に見せる。 - セクション末尾には必ず CTA を置く。

Don't - 地色に暗い色や寒色を使わない。 - 金グラデをボタン以外の広い面に使わない。 - 本文を左揃えの長文にしない。 - 細い明朝体を使わない。 - 角のとがった四角ボタンを使わない。 - 1 枚のカードに複数のキャンペーンを混ぜない。

Page Structure

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

1. ファーストビュー（周年のお祝い感を一目で伝える）: 黄緑地に集中線、紙吹雪、リボンを散らし、中央に立体的な数字ロゴと短いお礼の言葉を置く。
2. 挨拶と導入（サービスの歩みと感謝を伝える）: クリーム黄地に、中央揃えの短い文を数段並べる。
3. ページ内ナビ（4 つのコンテンツに誘導する）: 2×2 の金タイルを置き、下端に街並みと電車のイラスト帯を入れる。
4. メインキャンペーン（開催中の特典を詳しく説明する）: リボン見出しの下に白カードを 3 枚縦に並べる。各カードはバナー、期間、図解、金 CTA の順。
5. 終了済みキャンペーン（これまでの実績を見せる）: グラデバナーを縦に並べ、斜めの終了ラベルを重ねる。
6. 各施設のキャンペーン（関連特典を分類して見せる）: クリーム黄地に緑ピルのアコーディオンを 3 本並べる。
7. スペシャルニュース（関連トピックを一覧で見せる）: 白カードに NEWS タグ、正方形画像、短文、詳細ボタンを入れて縦に並べる。
8. ランキング（お得な使い方を紹介する）: 最新号は 3 枚の画像と案内役キャラの吹き出しで見せる。過去号はアコーディオンカードにする。
9. フッター CTA（サイト訪問と新規登録へ誘導する）: グレー帯に緑とオレンジの角丸ボタンを横に並べる。

Imagery

• フラットな線画で描いた紙吹雪、リボン、集中線でお祝い感を出す。
• 街並み・電車・買い物アイテムを横長の帯イラストにする。
• バナーは濃色地に金の紙吹雪と光の粒を散らし、立体的な文字を載せる。
• コインや矢印はツヤのある 3D 風にする。
• 案内役は制服姿の人物を線画で描き、吹き出しを添える。
• ニュースのサムネイルは告知画像をそのまま正方形で載せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 75% 幅にして、両側を地色で埋める。
• PC のキャンペーンカードはバナーを横長 1 行にし、本文の横にマークを置く。
• PC のナビタイルは 4 列 1 行にする。
• PC の終了済みバナーは横長で細くする。
• PC のニュースカードは 2 列グリッドにし、画像を上、文章を下に置く。
• PC のアコーディオン帯は 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 行書くと起動時に読み込まれる。