--- version: alpha name: Deep Purple Gold Supplement LP description: 濃い紫と金のグラデーション帯で高級感と効き目を表した、栄養機能食品の縦長 LP。成分量を極太数字で大きく見せ、ランキング実績・まとめ買い価格表・成分カード・品質管理・コスト比較の順で信頼と納得感を積み上げる。 colors: primary: '#410676' dark-section: '#320C58' secondary: '#82508C' accent-1: '#B8963E' accent-2: '#C8202A' background: '#FFFEFE' background-alt: '#F3EAFB' surface: '#FCF4FE' text: '#320C58' text-body: '#373536' tint-1: '#F3E5CB' on-dark: '#FFFFFF' line: '#C9A84E' accent-1-accessible: '#8C722F' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Klee One fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-band-purple: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 64px heading-band-gold: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 56px big-dose-number: textColor: '{colors.primary}' typography: '{typography.display}' height: 80px price-table: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 260px ingredient-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 80px label-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 26px ranking-medal: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 180px bridge-arrow: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 100px cost-compare-chart: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 200px --- # DESIGN.md — 深紫×金帯の目のサプリ訴求 LP（Deep Purple Gold Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、上品・高級、力強い・インパクト、信頼・誠実 - **キーワード**: 深紫・金グラデーション・極太数字・ベリー装飾・光のボケ・比較表 - **地の質感**: 紫のボケ光やきらめき粒子、白〜薄紫のグラデーション地。見出し帯は金属的な金グラデーション。 - **形**: 角ばった帯と白カード中心。見出し帯の下に逆三角の切り欠き、下向き矢印の台形で章をつなぐ。 - **温度感**: やや寒色寄り。紫の深みに金と赤のアクセントで温度を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#410676` | ブランドの深紫・見出し帯 | 12% | 画素の実測 | | `dark-section` | `#320C58` | ランキング実績の濃紫背景 | 8% | 画素の主要色に補正 | | `secondary` | `#82508C` | 中間紫・成分ラベル | 7% | 画素の主要色に補正 | | `accent-1` | `#B8963E` | 金グラデーション帯・ラベル | 3% | 推定 | | `accent-2` | `#C8202A` | 割引・お得額の赤 | 2% | 推定 | | `background` | `#FFFEFE` | カード・基本地 | 20% | 画素の実測 | | `background-alt` | `#F3EAFB` | 薄紫のセクション地 | 10% | 画素の実測 | | `surface` | `#FCF4FE` | 本文ボックス地 | 6% | 画素の実測 | | `text` | `#320C58` | 紫系見出し文字 | 3% | 画素の主要色に補正 | | `text-body` | `#373536` | 本文 | 2% | 画素の実測 | | `tint-1` | `#F3E5CB` | ベージュ系のグラデ地 | 8% | 画素の実測 | | `on-dark` | `#FFFFFF` | 紫帯上の白文字 | 1% | 画素の主要色に補正 | | `line` | `#C9A84E` | 価格表の金枠線 | 1% | 推定 | | `accent-1-accessible` | `#8C722F` | AA を満たす補正値（計算） | | 計算 | - 地は白・薄紫・グレーのグラデーションを交互に使い、要所だけ濃紫の全面背景にする。 - 見出し帯は濃紫グラデーション、一部は金グラデーション帯で差をつける。 - 成分量の数字は濃紫に白縁取り＋影で立体的に見せる。 - 割引率・お得額だけ赤を使い、ほかで赤は使わない。 - 金はラベル・枠線・バッジなど小面積に限る。 - `heading-band-gold` は文字 `#FFFFFF` × 背景 `#B8963E` のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8C722F`、4.6:1）を使う。 - `ranking-medal` は文字 `#C8202A` × 背景 `#B8963E` のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8C722F`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー・成分量の極太数字 | ゴシック | Dela Gothic One | 900 | 56px | 1.1 | -0.02em | | `headline-lg` | 章見出し（感謝・特長名） | 明朝 | Shippori Mincho | 800 | 34px | 1.3 | 0.02em | | `headline-md` | 紫帯内の見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.35 | 0.04em | | `headline-sm` | ラベル帯・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.04em | | `body-md` | 成分説明などの本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `accent` | 手書き風の添え書き | 手書き・筆 | Klee One | 600 | 18px | 1.5 | 0.05em | | `note` | 注釈・基準説明 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | - 数字は単位の約3倍の大きさにし、単位を右下に小さく付ける。 - 見出しは強調語だけサイズを上げるか金・紫に色替えする。 - 情緒的な見出しは明朝、機能訴求はゴシックで分ける。 - 大見出しには白縁取りやドロップシャドウを付ける。 - 本文は1ブロック3〜4行に収める。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分写真は 3 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 白カードは左右5%の余白を取り中央に置く。 - 見出し帯はカード幅いっぱいにし、下中央に逆三角を付ける。 - 章の間に『つなぎ語＋下向き紫矢印』を挟む。 - 価格表は3列。右2列を黒ヘッダー＋赤のお得額で強調する。 - 成分カードは写真＋下部ラベル帯で揃える。 ## Elevation & Depth - 白カードには薄い影（0 4px 12px rgba(0,0,0,0.1)）。 - 大数字は濃紫の影で浮かせる。 - 商品パッケージは柔らかい落ち影付き。 ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 成分写真は角丸小の長方形、商品と人物は切り抜き - **セクション境界**: 直線の切替えに逆三角の切り欠きと台形の下向き矢印 - 基本は角ばった形で角丸は最小限にする。 - バッジは金の星形や円形メダル。 - 成分量は半透明の紫の球の中に置く。 - 小ラベルは斜体の手書き文字と斜線の飾りで挟む。 ## Components - **紫グラデ見出し帯**（`heading-band-purple`）: 濃紫グラデの帯に白太字。強調語は金色。下中央に逆三角。 - **金グラデ見出し帯**（`heading-band-gold`）: 金属調の帯に白太字で、まとめ買いなどの章を始める。 - **成分量の極太数字**（`big-dose-number`）: 濃紫の極太数字に白縁取りと影。単位は小さく右下に置く。 - **まとめ買い価格表**（`price-table`）: 金枠の3列表。セットの列は黒ヘッダー、割引は赤、下に赤のお得額ボックスと矢印。 - **成分写真カード**（`ingredient-card`）: 食材写真の下に紫帯で白文字の成分名。3列で並べる。 - **小見出しラベル**（`label-tag`）: 紫または金の細帯に白文字。説明ボックスの左上に付ける。 - **ランキング金メダル**（`ranking-medal`）: 金の円形メダルにリボン。順位を大きく入れ、集計日を小さく添える。 - **つなぎ語＋矢印**（`bridge-arrow`）: 影付きの明朝のつなぎ語の下に紫の台形矢印。 - **コスト比較図**（`cost-compare-chart`）: 他社とのコスト内訳を積み上げの箱で比べ、削減分を斜線で示す。 ## Do's and Don'ts **Do** - 成分量は必ず極太の数字で最大級に見せる。 - 濃紫と金の組合せで高級感を保つ。 - 章の間につなぎ語と矢印を入れ、読み進める流れを作る。 - ブルーベリーの実と葉をセクションの端に散らす。 - 実績・価格・成分・品質の順に根拠を重ねる。 **Don't** - パステル調だけで構成しない（深紫を必ず入れる）。 - 赤を価格以外の装飾に使わない。 - 丸ゴシックや大きな角丸で幼く見せない。 - 数字と単位を同じサイズにしない。 - 本文を長く続けない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（凝縮感と主成分量を一目で伝える）: 薄青グレーの地に笑顔の女性と商品。上に大コピー、下に紫の球に入れた成分量の大数字。端にベリー装飾。 2. **追加配合の訴求**（副成分と共同開発を伝える）: 紫の見出し帯と白カード。左にビタミン量の一覧、右に強調コピー。 3. **ランキング実績**（人気の裏付け）: 濃紫のボケ光の背景に白い明朝の感謝コピー、金メダル、ランキング画面のキャプチャ。 4. **まとめ買い価格**（セット購入を促す）: 金帯の見出し、きらめき地に商品セット写真と赤の割引バッジ、価格表。 5. **主成分の解説**（2大成分の働きを説明）: 紫の見出し帯、ラベル付きの説明ボックス、素材写真に重ねた成分量の数字。 6. **サポート成分一覧**（配合の充実ぶりを伝える）: 紫の枠の中に3列の食材写真カード。右下に商品。 7. **飲みやすさ**（続けやすさを伝える）: グレーのグラデ地に明朝の大見出し、スプーンに盛ったカプセルの写真。 8. **栄養機能食品の解説**（機能表示で信頼を得る）: 紫の背景に金帯の見出し。A/C/Eの大きな透かし文字と食材写真、量の数字を横長カードで並べる。 9. **品質管理**（安全性を伝える）: つなぎ矢印のあとに白カード。紫帯の見出し、工場の写真、注釈。 10. **低価格の理由**（価格の納得感を出す）: ベージュ金のグラデ地に紫帯の見出し、コスト比較図、継続のすすめと携帯性の訴求。 ## Imagery - 人物は明るい自然光の笑顔の女性。スマホを持つ日常の場面。 - ブルーベリーと葉を画面の端に散らし、手前をぼかす。 - 食材は鮮やかな物撮り。正方形に近く切り出す。 - 背景は紫のボケ光・きらめき粒子・波の光で高級感を出す。 - 商品パッケージは紫と白で、複数を重ねて並べる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はPC版も幅720pxの1カラム画像なので、SPは同じ構成を縦に積む。 - SPでは成分量の数字を幅の40%程度に収める。 - 価格表はSPでも3列を保ち、文字は12〜14pxにする。 - PCでは中央720px幅に固定し、左右は背景色で延ばす。 ## 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-92165160`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/llu001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。