--- version: alpha name: Pink Gold Anime Collab Confectionery LP description: 淡いピンクのぼかし背景に、金色の飾り罫と明朝体を合わせたアニメコラボ菓子の限定販売 LP。黄色地に黒縁の極太ロゴ見出しを何度も入れて、華やかさと限定感を出している。商品は棚のように並べて見せる。CTA は金色のピル型ボタン。 colors: primary: '#EC848C' background: '#FFF7F5' background-alt: '#FFE5EA' cta: '#BEA144' on-cta: '#FFFCFC' secondary: '#CC996B' line: '#D6C7AA' text: '#483336' accent-1: '#D9162B' accent-2: '#2E9A3E' marker: '#FFE14A' surface: '#FEFDFC' tint-1: '#FEF9D4' accent-3: '#7EC8F0' cta-accessible: '#89732F' primary-accessible: '#DE2C39' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Shippori Mincho fontSize: 48px fontWeight: 600 lineHeight: 1.1 label-button: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.12em rounded: sm: 4px md: 8px lg: 16px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px logo-heading: textColor: '{colors.marker}' typography: '{typography.display}' height: 48px ornament-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' ribbon-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 30px badge-limited: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px price-block: textColor: '{colors.text}' typography: '{typography.accent}' height: 90px ornament-subhead: textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 28px button-secondary: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px --- # DESIGN.md — 桜ピンク×金の飾り枠で彩るアニメコラボ菓子 LP（Pink Gold Anime Collab Confectionery LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、上品・高級、情報量多め・訴求型 - **キーワード**: 桜ピンクのぼかし・金の飾り罫・明朝体の告知・限定特典・商品の整列陳列 - **地の質感**: 花びらが舞うような柔らかいピンクのグラデーションと光のボケ。告知ブロックは白に近い薄ピンク地を使う。 - **形**: 四隅に唐草装飾を付けた細い金枠のパネル、角丸の小ボタン、円形の数量バッジ、ピル型の金ボタン。 - **温度感**: 暖かく甘い。ピンクとベージュゴールドが中心。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EC848C` | 特典の帯や強調ラベルのピンク | 3% | 画素の実測 | | `background` | `#FFF7F5` | 告知・ポイント部の薄ピンク地 | 22% | 画素の実測 | | `background-alt` | `#FFE5EA` | 商品陳列部のピンクぼかし地 | 20% | 画素の実測 | | `cta` | `#BEA144` | 購入ボタンの金色 | 2% | 画素の実測 | | `on-cta` | `#FFFCFC` | 購入ボタンの文字色 | 0% | 画素の主要色に補正 | | `secondary` | `#CC996B` | 日付見出しと飾り罫の金茶 | 2% | 画素の主要色に補正 | | `line` | `#D6C7AA` | 飾り枠の細い線 | 1% | 画素の主要色に補正 | | `text` | `#483336` | 価格や本文の濃い焦げ茶 | 2% | 画素の実測 | | `accent-1` | `#D9162B` | 数量限定の円形バッジと赤い強調文字 | 0% | 推定 | | `accent-2` | `#2E9A3E` | コラボ商品の緑ラベル | 1% | 推定 | | `marker` | `#FFE14A` | ロゴ見出しと下部ボタンの黄色 | 2% | 推定 | | `surface` | `#FEFDFC` | 枠付きパネルの白地 | 6% | 画素の実測 | | `tint-1` | `#FEF9D4` | サービス紹介カードのクリーム地 | 2% | 画素の実測 | | `accent-3` | `#7EC8F0` | サービス紹介部の空色 | 3% | 推定 | | `cta-accessible` | `#89732F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#DE2C39` | AA を満たす補正値（計算） | | 計算 | - 地は薄ピンクとピンクぼかしを交互に敷き、セクションを分ける - 金茶は飾り罫・告知見出し・CTA だけに使い、高級感を出す - 濃いピンクは特典・限定を伝える帯ラベルだけに使う - 赤は数量限定バッジと特典名の強調だけに絞る - 黒は使わず、文字は焦げ茶にする - 別サービスの紹介ブロックだけ、空色・緑・黄色のポップな配色に切り替える - `button-primary` は文字 `#FFFCFC` × 背景 `#BEA144` のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#89732F`、4.52:1）を使う。 - `ribbon-label` は文字 `#FFFCFC` × 背景 `#EC848C` のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE2C39`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 黄色地に茶色の縁取りを付けた極太ロゴ見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 34px | 1.2 | 0.0em | | `headline-lg` | 発売日・価格など大きな告知 | 明朝 | Shippori Mincho | 700 | 24px | 1.4 | 0.04em | | `headline-md` | 販売期間・発送日などの小見出しと Point 番号 | 明朝 | Shippori Mincho | 700 | 18px | 1.5 | 0.1em | | `body-md` | 説明文・期間リスト | 明朝 | Noto Serif JP | 500 | 14px | 1.9 | 0.04em | | `note` | 数量上限などの注記 | 明朝 | Noto Serif JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 価格の大きな数字 | 明朝 | Shippori Mincho | 600 | 48px | 1.1 | 0.0em | | `label-button` | 金色 CTA の文字 | 明朝 | Shippori Mincho | 700 | 18px | 1.3 | 0.12em | - 告知と本文は明朝体で統一し、上品なトーンにする - ブランドのロゴ見出しだけ極太の装飾書体にし、縁取りと影を付ける - 見出しは中央揃えにし、左右に飾り罫を添える - 特典名は赤の太字明朝にする - 価格は数字を特大にし、円と税込は小さく添える - サービス紹介部だけ太い丸ゴシックに切り替える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長写真と特典パネルは 2 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションはロゴ見出し→リード→商品陳列の順に置く - 商品は 5 個×2 段で隙間なく並べる。SP では 3〜5 個×複数段 - 告知情報は金枠のパネル内に中央揃えで置く - 価格ブロックとCTAは陳列セクションの直後に毎回入れる - Point ごとに飾り枠パネルを区切る ## Elevation & Depth - 影はほぼ使わず、細い金の線枠で区切る - CTA の下だけに薄い影を付ける - ロゴ見出しには茶色の縁取りとドロップシャドウを付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜きで整列させる。説明写真は白地の四角 - **セクション境界**: 直線で背景色を切り替える。ぼかし背景はそのまま次の地へつなぐ - パネルは角を立てた細線枠にし、四隅に唐草の飾りを付ける - 数量のバッジは正円にする - バージョン名ラベルは小さなピル型にする - ボタンは横幅いっぱいのピル型にする ## Components - **金色の購入ボタン**（`button-primary`）: 金のグラデーションを使ったピル型のボタン。白い明朝体の文字と右端に三角の矢印を置く - **ロゴ風見出し**（`logo-heading`）: 黄色の極太文字に茶色の縁取りを付け、中に星を入れる。各陳列セクションの頭に置く - **唐草飾り枠パネル**（`ornament-frame`）: 白地に細い金線の枠を付け、四隅に飾りを入れたパネル。告知・特典・Point に使う - **ピンク帯ラベル**（`ribbon-label`）: 特典を伝えるピンクの横長帯。白い明朝体の文字を載せる - **数量限定バッジ**（`badge-limited`）: 赤い正円に白い太字で数量を入れる。パネルの右上にはみ出して置く - **価格ブロック**（`price-block`）: 左にピンクの円形条件バッジ、中央に金地の送料込みラベル、右に特大の価格数字を置く - **飾り罫付き小見出し**（`ornament-subhead`）: 金茶の明朝体の左右に、渦巻き状の細い罫を付ける - **黄色サブボタン**（`button-secondary`）: 黄色地に黒枠を付け、黒い丸ゴシックの文字と丸い矢印を置く。別サービスへの誘導に使う ## Do's and Don'ts **Do** - 見出しの左右とパネルの四隅には、必ず金の飾り罫を付ける - 限定・特典は、ピンク帯と赤バッジの両方で目立たせる - 商品は同じサイズで並べ、コレクション感を出す - 陳列のあとに、毎回価格とCTAを繰り返す - ピンクのぼかしと光のボケで、華やかな地を作る **Don't** - 文字に純黒や寒色系を使わない（サービス紹介部を除く） - 角丸の大きいカードを多用しない（飾り枠と調和しない） - 本文にゴシック体を使わない - CTA を金以外の色にしない - 白一色のフラットな背景にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観とロゴを見せる）: 全面にキャラクターのビジュアルを敷き、上部に両ブランドのロゴと極太のコラボ名を置く。右上に商品を配置する 2. **コラボ紹介**（企画の背景を伝える）: ピンクのぼかし地にロゴ見出しを置き、短い明朝文を左に、キャラクターを右に配置する。下に商品を並べる 3. **販売概要**（発売日・期間・発送日・数量を知らせる）: 薄ピンク地に金の飾り罫で挟んだ告知を置き、ピンク帯と大きな日付を入れる。小見出しの下に星印のリストを並べる 4. **特典告知**（限定特典をアピールする）: 飾り枠パネルの中に、左は文字、右は特典画像を置く 5. **商品陳列**（全種類を一覧で見せる）: ロゴ見出しとリードの下に、商品を5個×2段で並べる 6. **仕様・特典パネル**（箱・個包装・特典を説明する）: 2列の飾り枠パネルを置き、その下に赤バッジ付きの幅広い特典パネルを置く 7. **価格・CTA**（購入を促す）: 条件バッジ・送料込みラベル・特大価格を並べ、金色ピルボタンと注記を置く 8. **おすすめポイント**（デザインと箱のこだわりを伝える）: Point 番号を見出しにした飾り枠に、2列の写真とキャプションを入れる 9. **繰り返しの陳列とCTA**（購入をもう一度促す）: 陳列・パネル・価格・CTAを再度配置する 10. **関連サービス紹介**（別サービスへ誘導する）: 空と芝生のイラスト背景にする。Before/After のクリームカードと用途例を並べ、黄色ボタンを置く ## Imagery - キャラクターと商品パッケージは切り抜いて、正面から並べる - 背景はピンクのグラデーションに花びらと光のボケを散らす - 金の唐草・渦巻きの線画装飾を使う - 商品写真は白背景で、箱の開封状態や大きさの比較を撮る - 関連サービス部は空・雲・芝生・音符のポップなイラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は PC 版のみで、本文幅は約 900px 中央寄せ。SP では幅 90% の 1 カラムにする - 商品陳列は SP で 3 列程度に折り返す - 2列パネルは SP でも 2 列を保つ。文字が多い場合は 1 列に落とす - 特典パネルは SP で文字→画像の縦積みにし、バッジは右上に残す - 価格ブロックは SP でバッジを上、価格を下に積む ## 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-76f72b84`（元 LP の URL から採番） - **元 LP**: https://lotte-shop.jp/shop/e/eLmadoka2410 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。