--- version: alpha name: Pastel Sticker Ranking Campaign LP description: 方眼紙の背景に、商品写真をシールのように散らしたポップな投票結果発表 LP。ピンクを主役にミントと金色の王冠で順位を飾る。白いメモ帳風カードに情報をまとめ、後半は紺色の見出しで応募要項を整理する。 colors: primary: '#F14D82' on-primary: '#FFF4FC' secondary: '#4AC3A4' cta: '#F14C81' on-cta: '#FFFFFF' background: '#FBF5F2' surface: '#FEFEFE' text: '#2A2A6A' dark-section: '#25296B' accent-1: '#F2CE5A' tint-1: '#FEDAFB' tint-2: '#D3EEFC' marker: '#FFE14D' background-alt: '#F9C6CD' primary-accessible: '#DE1153' secondary-accessible: '#2B836D' cta-accessible: '#E61256' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 50px fontWeight: 900 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 52px crown-plate: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 64px pledge-balloon: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 170px vote-count: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 44px rank-row: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 60px rank-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px more-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px condition-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px memo-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' --- # DESIGN.md — ピンク×ミントのシール風ランキング発表 LP（Pastel Sticker Ranking Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: 方眼紙・シール風切り抜き・王冠と順位・パステル・メモ帳カード・推し活 - **地の質感**: 薄い方眼の背景に、白フチ付きのシール風写真を重ねたコラージュ質感 - **形**: 角丸カード、ピル型見出し、波形フチのシール、上端にリング穴のあるメモ帳 - **温度感**: 甘く明るい暖色寄り。ミントと水色で冷たさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F14D82` | ピル見出し・公約吹き出し・偶数順位 | 6% | 画素の実測 | | `on-primary` | `#FFF4FC` | ピンク面上の白文字 | 1% | 画素の実測 | | `secondary` | `#4AC3A4` | 奇数順位のミント帯 | 2% | 画素の実測 | | `cta` | `#F14C81` | もっと見るボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FBF5F2` | 方眼紙の地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | メモ帳カード | 38% | 画素の実測 | | `text` | `#2A2A6A` | 見出し・本文の紺 | 3% | 推定 | | `dark-section` | `#25296B` | 応募条件の紺ピル帯 | 2% | 画素の実測 | | `accent-1` | `#F2CE5A` | 王冠・順位バッジの金 | 2% | 推定 | | `tint-1` | `#FEDAFB` | 写真フチのパステルピンク | 5% | 画素の実測 | | `tint-2` | `#D3EEFC` | 写真フチの水色 | 3% | 画素の実測 | | `marker` | `#FFE14D` | 強調語の黄マーカー | 0% | 推定 | | `background-alt` | `#F9C6CD` | フッターのピンク | 4% | 画素の実測 | | `primary-accessible` | `#DE1153` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#2B836D` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E61256` | AA を満たす補正値（計算） | | 計算 | - 地は薄い方眼、情報は白いカードに載せる - ピンクは見出しピルと公約吹き出しなど主張点に使う - ランキングはピンクとミントを交互に使う - 金色は王冠と順位バッジだけに使う - 吹き出しの中の強調語は黄色文字か黄マーカーにする - 応募要項は紺の帯と紺の文字で落ち着かせる - `heading-pill` は文字 `#FFF4FC` × 背景 `#F14D82` のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE1153`、4.55:1）を使う。 - `crown-plate` は文字 `#F14D82` × 背景 `#F2CE5A` のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE1153`、4.57:1）を使う。 - `pledge-balloon` は文字 `#FFF4FC` × 背景 `#F14D82` のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE1153`、4.55:1）を使う。 - `vote-count` は文字 `#F14D82` × 背景 `#FEFEFE` のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE1153`、4.51:1）を使う。 - `rank-row` は文字 `#4AC3A4` × 背景 `#FEFEFE` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#2B836D`、4.56:1）を使う。 - `more-button` は文字 `#FFFFFF` × 背景 `#F14C81` のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E61256`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのタイトル（白フチ・立体影付き） | 丸ゴシック | M PLUS Rounded 1c | 900 | 50px | 1.15 | 0.02em | | `headline-lg` | ピル見出し・順位帯 | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.3 | 0.04em | | `headline-md` | 公約吹き出し内の見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.02em | | `headline-sm` | ランキングの商品名・要項の小見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.4 | 0.05em | | `body-md` | 解説文・要項本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.75 | 0.04em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 票数の大きい数字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.1 | 0.02em | | `label-button` | ボタン・タグ | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.2 | 0.05em | - 見出しはすべて太い丸ゴシックにする - FVのタイトルはピンクとミントの2色に白フチとグレーの影をつける - 数字は大きく、単位は小さく添える - 写真のまわりの商品名は弧に沿って配置する - 要項の本文は紺の通常ゴシックで読みやすさを優先する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。期間限定とテイスト別は 2 カラムのカードグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 白いメモ帳カードは左右に約5%の余白を取る - カードの外側の余白にはシール写真を散らす - ランキング行は横長カードで縦に積む - 見出しピルは中央に置き、両脇にハートやキラキラを添える - 要項は細い紺の下線付き見出しで区切る ## Elevation & Depth - シール写真には薄いグレーのドロップシャドウ - カードは影なしか極薄い影 - FVのタイトルロゴは白フチの外側にグレーの立体影 - 見出しピルは白い二重フチで浮かせる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品を丸く切り抜き、白フチとパステル色の不定形フチをつけたシール風 - **セクション境界**: 上端にリング穴が並ぶメモ帳カードで区切る - 見出し・タグ・ボタンはピル型にする - 順位帯は左側だけ色面の角丸長方形にする - 公約の吹き出しは上に三角がつく角丸ボックス - バッジは波形フチの丸スタンプにする ## Components - **ピル見出し**（`heading-pill`）: ピンク地に白文字、白い二重フチ、両端に小さなアイコン - **王冠付き金プレート**（`crown-plate`）: 金のグラデーション枠に王冠を乗せた順位見出し - **公約吹き出し**（`pledge-balloon`）: ピンクの吹き出しで左上に金のギザギザバッジ、強調語は黄色 - **票数ボックス**（`vote-count`）: ピンクのラベルと白枠に大きな数字を並べる - **ランキング行**（`rank-row`）: 左に色帯と順位、丸い写真、商品名。ピンクとミントを交互に使う - **金の順位バッジ**（`rank-badge`）: 写真の右下に重ねる丸い金のバッジ - **もっと見るボタン**（`more-button`）: ピンクのピルに白い丸の矢印アイコン - **応募条件帯**（`condition-bar`）: 紺のピル帯に白文字で条件を示す - **メモ帳カード**（`memo-card`）: 上端にリング穴が並ぶ白い大きなカード ## Do's and Don'ts **Do** - 商品写真はすべて丸く切り抜き、白とパステルのフチをつける - 空いた余白にハートやキラキラ、星を散らす - 数字は大きくピンクで強調する - ランキングの配色は交互にしてリズムを出す - 要項部分は装飾を減らし、紺の文字でまとめる **Don't** - 黒や濃いグレーの大きな面を使わない - 角が尖った四角い写真を使わない - 明朝体を使わない - 金色を本文や大きな面に使わない - 方眼の背景を消して無地にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（結果発表を祝祭感とともに伝える）: 方眼の地に商品シールを敷き詰め、中央に白フチの立体タイトルと総数ボックスを置く 2. **お礼メッセージ**（参加者への感謝）: 斜線の飾りで挟んだ紺の中央寄せテキスト 3. **総合1位**（主役を大きく見せる）: 王冠の金プレートの下にメモ帳カード、大きなシール写真、票数、解説 4. **公約**（今後の展開を予告する）: ピンクの吹き出しと金バッジ、黄色の強調語 5. **部門別上位**（部門の上位4つを紹介）: 2カラムのカードで写真・順位バッジ・解説・票数を並べる 6. **総合ランキング**（上位10位を一覧で見せる）: ピンクとミントが交互の横長行と、もっと見るボタン 7. **タイプ別1位**（好みの切り口ごとに紹介）: 王冠付きのピルラベルと、角に飾りのあるシール写真を2カラムで並べる 8. **プレゼント要項**（賞品と条件を説明する）: 紺の条件帯、賞品の写真、紺の下線付き小見出し 9. **抽選・問い合わせ**（規約と連絡先を示す）: 紺の本文と●の箇条書き、※の注釈 10. **フッター**（ページトップへの戻りとSNS）: ピンクの角丸面にロゴ、丸いSNSアイコン、コピーライト ## Imagery - 商品を真上やや斜めから撮り、丸く切り抜く - シールは白フチの外にパステルの波形フチと年号を添える - ハート・四芒星・小さな丸の手描き風アイコンを散らす - 王冠は金のグラデーションでシンプルな線にする - 賞品は明るい室内で人物と一緒に撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に SP 幅のカラムを置き、左右に方眼とシール写真を広げる - 2カラムのカードは PC で3〜4カラムにしてもよい - ランキング行は PC で2列にする - 文字サイズは SP の約1.2倍を上限にする ## 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-6bc60492`（元 LP の URL から採番） - **元 LP**: https://www.31ice.co.jp/generalelection25/site/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。