--- version: alpha name: Bright Yellow Lottery Campaign LP description: 鮮やかな黄色の地に、焼き色の立体文字と赤帯を重ねた抽選キャンペーンLP。白いカードの中に、等級別の賞品リストとグレー地の細かな規約を縦に並べる。 colors: primary: '#FFE71C' secondary: '#E8394A' accent-1: '#E2022C' cta: '#F7B23A' on-cta: '#FFFFFF' background: '#FDFDFD' background-alt: '#FAFAFA' tint-1: '#FCF4B4' accent-2: '#DCBC0D' accent-3: '#D97E6B' tint-2: '#C1C1C1' text: '#341E20' text-body: '#333333' marker: '#FCEA23' cta-accessible: '#A36A07' secondary-accessible: '#E52235' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.2em headline-md: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 4px card: 12px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-badge-title: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.display}' height: 260px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px heading-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 36px prize-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 90px count-badge: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 24px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 30px terms-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 1600px share-icons: rounded: '{rounded.full}' height: 24px --- # DESIGN.md — 黄色×赤の抽選キャンペーンLP（Bright Yellow Lottery Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 黄色背景・立体見出し・等級カード・赤帯ラベル・規約テキスト - **地の質感**: 平塗りの黄色に、ドット柄の円・紙吹雪・ショッピングアイコンを薄く散らす - **形**: 角丸カード・角丸ボタン・リボン状の赤帯 - **温度感**: 暖色寄りで明るく、お祭り感がある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFE71C` | ページ全体の黄色地・枠 | 10% | 画素の主要色に補正 | | `secondary` | `#E8394A` | 見出しの赤帯・リボン | 3% | 推定 | | `accent-1` | `#E2022C` | 賞品金額の強調文字 | 1% | 画素の実測 | | `cta` | `#F7B23A` | ログインボタン | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FDFDFD` | メインカードの白地 | 22% | 画素の実測 | | `background-alt` | `#FAFAFA` | 規約エリアのグレー地 | 27% | 画素の実測 | | `tint-1` | `#FCF4B4` | 賞品リスト枠内の淡い黄 | 5% | 画素の実測 | | `accent-2` | `#DCBC0D` | 1等の金色ラベル | 0% | 画素の実測 | | `accent-3` | `#D97E6B` | 3等の銅色ラベル | 0% | 画素の実測 | | `tint-2` | `#C1C1C1` | 2等の銀色ラベル | 1% | 画素の実測 | | `text` | `#341E20` | 見出し・賞品名の濃い茶色 | 1% | 画素の実測 | | `text-body` | `#333333` | 規約本文 | 3% | 推定 | | `marker` | `#FCEA23` | 本数のバッジ | 0% | 画素の実測 | | `cta-accessible` | `#A36A07` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#E52235` | AA を満たす補正値（計算） | | 計算 | - ページの外枠と賞品エリアは黄色にし、中身は白カードにする - 見出し帯と金額の強調には赤だけを使う - 等級は金・銀・銅、特別賞は淡ピンクのラベル色で見分ける - 規約エリアは薄いグレー地に濃いグレーの文字を置き、リンクだけ青にする - 大きな見出し文字は焦げ茶にし、金色のグラデと白縁で立体感を出す - `button-primary` は文字 `#FFFFFF` × 背景 `#F7B23A` のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A36A07`、4.54:1）を使う。 - `heading-ribbon` は文字 `#FFFFFF` × 背景 `#E8394A` のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E52235`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの賞金額 | 装飾・ディスプレイ | Dela Gothic One | 900 | 64px | 1.1 | 0.0em | | `headline-lg` | 赤帯の見出し | ゴシック | Noto Sans JP | 900 | 22px | 1.3 | 0.2em | | `headline-md` | カード内の賞品金額 | ゴシック | Noto Sans JP | 900 | 28px | 1.2 | 0.0em | | `headline-sm` | 賞品名・等級ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | | `body-md` | 規約の小見出し・本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 700 | 10px | 1.5 | 0.0em | | `label-button` | ログインボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - 賞金の数字は極太にし、単位の文字は小さくする - 等級の数字と賞品名は焦げ茶、金額は赤にする - 規約は小さな文字にして、小見出しの前に丸い点を付ける - 注釈は※から始め、太字で短く書く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、黄色の枠の中に白カードを置く - **本文ブロックの幅**: 画面幅の約 96% - **余白**: セクション間 24px、基本単位 4px、カード内 12px（375px 幅換算） - 黄色地の左右に約6pxの余白を残し、白カードを敷く - 賞品エリアは黄色の太枠と淡い黄色の地で、白カードを縦に積む - 等級カードは左にラベル列、右に賞品情報を置く - 規約は全幅のグレー地に箇条書きで詰めて並べる ## Elevation & Depth - 影はほぼ使わず、平面にする - ログインボタンだけに軽いグラデと下側の影を付ける - FVの文字に白縁とドロップシャドウを付けて立体に見せる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は使わず、イラストとアイコンで構成する - **セクション境界**: 境界は直線にし、色の面とカード枠で区切る - 賞品カードは角丸約6px - 赤帯の見出しは両端を少し欠いたリボン風にする - 本数のバッジは黄色の角丸長方形にする ## Components - **立体文字のFV**（`hero-badge-title`）: 雲形の白い吹き出しに金額の立体文字を置き、左右に円形のバッジを付ける - **参加ボタン**（`button-primary`）: オレンジ寄りの黄色いグラデのボタン。白文字 - **赤帯見出し**（`heading-ribbon`）: 白抜き太字の赤いリボン帯 - **等級別賞品カード**（`prize-card`）: 左に金・銀・銅の等級ラベル、右に賞品名・赤い金額・本数バッジを置く - **本数バッジ**（`count-badge`）: 黄色地に焦げ茶の太字で当選本数を書く - **注意書きボックス**（`notice-box`）: 点線枠の中に一行の補足を入れる。年齢制限などの注意は赤文字にする - **規約リスト**（`terms-list`）: グレー地に、丸い点付きの小見出しと箇条書きを並べる - **シェアボタン**（`share-icons`）: 中央揃えの丸いSNSアイコンを3つ並べる ## Do's and Don'ts **Do** - 黄色を外枠として常に見せる - 賞品は等級ごとに色を変えたラベルで区別する - 金額の数字は赤の極太にする - 注釈には※を付け、カード直下に置く **Don't** - 寒色系の面を大きく使わない - 規約エリアに装飾や色を足さない - 賞品カードに写真を入れない - 細い明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー・期間表示**（サービスへの導線と開催期間を示す）: 白いヘッダーの下に、灰色地で期間を中央揃えの小さな文字で書く 2. **ファーストビュー**（賞金額と当たりやすさを一目で伝える）: 黄色地にアイコンを散らし、白い雲の上に立体の金額、赤帯のサブコピーを置く 3. **参加CTA**（ログインして参加させる）: 白カードの中に、淡い黄色の案内帯・ボタン・点線の補足・赤い注意書きを並べる 4. **特典内容**（賞品と当選数を見せる）: 赤帯の見出しの下に黄色の枠を置き、等級カードを4段に積む 5. **キャンペーン詳細**（規約・条件を示す）: 中央の見出しと罫線の下に、グレー地で項目ごとの箇条書きを並べる 6. **シェア・フッター**（拡散とサイト内の回遊）: SNSアイコンを3つ並べ、ページトップリンク・広告枠・灰色のフッターを置く ## Imagery - 写真は使わず、フラットなアイコンとイラストで作る - 背景には、ドット網の黄色い円・ギフト・カートのアイコンを薄く散らす - 緑・ピンク・水色の小さな四角い紙吹雪を添える - 金額の文字は金のグラデに焦げ茶の縁を付けて、メダル風の立体にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも1カラムで、コンテンツ幅を約800pxに固定し、左右に黄色を見せる - PCではFVを横長にし、左右の装飾を増やす - PCの規約は1行を長くし、行数を減らす - 賞品カードの構成は、SP・PC共通のまま横に広げる ## 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-e71ae7b5`（元 LP の URL から採番） - **元 LP**: https://toku.yahoo.co.jp/shptoku202505/lot - **解析に使った画像**: 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/）からご連絡ください。