--- version: alpha name: Celebratory Lime Gold Points Campaign LP description: 明るい黄緑とクリーム黄の地に、深緑と金グラデのボタンを合わせた周年記念ポイントキャンペーン LP。紙吹雪とリボンのイラストでお祝い感を出している。白カードにキャンペーンを 1 つずつ入れ、棒グラフや倍率図解で特典をわかりやすく見せる、情報量の多い作り。 colors: primary: '#018A04' background: '#CEEE65' background-alt: '#FDFE9A' surface: '#FEFEFE' cta: '#E3B866' on-cta: '#222222' text: '#1A1A1A' accent-1: '#E0204F' dark-section: '#013D24' accent-2: '#192D63' accent-3: '#A21E24' secondary: '#FC823C' line: '#146042' text-muted: '#7F7F7F' primary-accessible: '#018704' typography: display: fontFamily: Dela Gothic One fontSize: 22px fontWeight: 400 lineHeight: 1.3 headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.35 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px nav-tile: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px campaign-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 700px period-band: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px accordion-pill: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 46px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px ranking-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 90px ended-banner: typography: '{typography.display}' rounded: '{rounded.md}' height: 120px bar-chart: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px --- # DESIGN.md — 黄緑×金のお祝いポイントキャンペーン LP（Celebratory Lime Gold Points Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 周年祝い・紙吹雪・金グラデ・黄緑地・白カード・倍率図解 - **地の質感**: 地はフラットな単色。金ボタンと帯だけにグラデーションと光沢を付け、バナーは紙吹雪付きのリッチな塗り。 - **形**: 角丸カード、ピル型ボタン、ギザギザ縁のメダル型バッジ、斜めに貼った終了ラベル - **温度感**: 暖かく明るい。祝祭的でにぎやか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#018A04` | ブランド深緑（見出し文字・アコーディオン帯） | 5% | 画素の実測 | | `background` | `#CEEE65` | メインの黄緑地 | 30% | 画素の実測 | | `background-alt` | `#FDFE9A` | 導入・ナビ・ランキング用のクリーム黄地 | 15% | 画素の実測 | | `surface` | `#FEFEFE` | キャンペーンカード・ニュースカードの白 | 28% | 画素の実測 | | `cta` | `#E3B866` | 金グラデのエントリーボタン | 3% | 画素の主要色に補正 | | `on-cta` | `#222222` | 金ボタン上の文字 | 0% | 推定 | | `text` | `#1A1A1A` | 本文・見出しの黒 | 2% | 推定 | | `accent-1` | `#E0204F` | 強調文字・注意書きの赤ピンク | 0% | 推定 | | `dark-section` | `#013D24` | キャンペーンバナーの濃緑 | 4% | 画素の実測 | | `accent-2` | `#192D63` | バナー・グラフの紺 | 3% | 画素の実測 | | `accent-3` | `#A21E24` | バナー・グラフのえんじ | 3% | 画素の実測 | | `secondary` | `#FC823C` | vol 番号吹き出しのオレンジ | 1% | 画素の実測 | | `line` | `#146042` | カードの黒枠・緑枠 | 0% | 画素の主要色に補正 | | `text-muted` | `#7F7F7F` | フッター帯のグレー | 1% | 画素の実測 | | `primary-accessible` | `#018704` | AA を満たす補正値（計算） | | 計算 | - 地は黄緑とクリーム黄をセクションごとに交互に使う。 - キャンペーン本体は白カードに載せる。各カードの上部バナーは濃緑・紺・えんじと色を変えて見分けやすくする。 - CTA は金グラデのピル型にする。詳細リンクは深緑の小ピルにする。 - 赤ピンクは条件や倍率の強調テキストだけに使う。 - グラフの棒はバナーと同じ色にそろえ、ラベルは金タグにする。 - 最下部の登録ボタンは緑とオレンジの 2 色で役割を分ける。 - `ranking-card` は文字 `#018A04` × 背景 `#FEFEFE` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#018704`、4.66:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し（白フチ＋影付き） | 装飾・ディスプレイ | Dela Gothic One | 400 | 22px | 1.3 | 0.0em | | `headline-lg` | バナー内の倍率コピー | ゴシック | Noto Sans JP | 900 | 30px | 1.2 | 0.0em | | `headline-md` | ランキング・アコーディオン見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.35 | 0.0em | | `headline-sm` | 図解見出し・ナビボタン | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.02em | | `body-md` | 本文（中央揃え） | ゴシック | Noto Sans JP | 700 | 11px | 1.7 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.3 | 0.02em | | `accent` | NEWS タグなどの欧文 | 欧文サンセリフ | Montserrat | 800 | 10px | 1.0 | 0.02em | - 本文も太字寄りにして、全体を元気な印象にする。 - 大見出しは白フチと黒影付きの極太ゴシックにする。 - 数字（倍率・％）は周りの文字の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-f9fa9eff`（元 LP の URL から採番） - **元 LP**: https://www.jrepoint.jp/10th-anniversary/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。