--- version: alpha name: Navy Gold Gradient Supplement LP description: 濃紺の太ゴシック見出しに、金のメタリック帯と、ピンクからオレンジへのグラデ円をアクセントに使うサプリ LP。地は白〜淡グレーの光沢グラデで清潔感を出す。数値を大きく見せる訴求型の構成。 colors: primary: '#094067' text: '#1C4060' accent-1: '#B6455D' secondary: '#C9A25A' accent-2: '#EE8E6A' cta: '#C8252B' on-cta: '#FDFCFC' background: '#FBFCFE' background-alt: '#F1F6FC' surface: '#FEFEFE' dark-section: '#333333' on-dark: '#EEEDED' text-body: '#262727' marker: '#F3E7A0' accent-1-accessible: '#B4445C' accent-2-accessible: '#BB4315' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' badge-gradient-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px card-gold-header: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 110px label-point: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 24px bar-navy-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px panel-savings: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.display}' height: 70px checklist-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 150px compare-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 480px bubble-gold: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px --- # DESIGN.md — 紺×金×ピンク橙グラデのサプリ LP（Navy Gold Gradient Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、信頼・誠実、上品・高級、清潔・爽やか - **キーワード**: 濃紺見出し・金メタリック帯・ピンク橙グラデ円・大きな数値訴求・光沢グレー地・比較表 - **地の質感**: 白〜銀の光沢グラデ地に、金の箔風グラデ帯を重ねる。悩みの提起部分だけ暗い写真背景にする。 - **形**: 正円バッジ・角丸控えめのカード・角丸の紺帯・下向き三角の区切り - **温度感**: やや寒色寄り（紺・銀）に暖色のグラデを差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#094067` | 見出し文字・帯・カード下部 | 8% | 画素の実測 | | `text` | `#1C4060` | 見出し・強い文字 | 4% | 画素の実測 | | `accent-1` | `#B6455D` | 強調語・数値の文字 | 2% | 画素の実測 | | `secondary` | `#C9A25A` | 金メタリック帯・カード見出し | 5% | 推定 | | `accent-2` | `#EE8E6A` | POINTラベル・グラデ橙側 | 2% | 推定 | | `cta` | `#C8252B` | お得額パネル・割引バッジの赤 | 2% | 推定 | | `on-cta` | `#FDFCFC` | 赤パネル上の文字 | 1% | 画素の実測 | | `background` | `#FBFCFE` | 基本の地 | 30% | 画素の実測 | | `background-alt` | `#F1F6FC` | 淡い青系の地 | 12% | 画素の実測 | | `surface` | `#FEFEFE` | カード・吹き出しの白 | 10% | 画素の実測 | | `dark-section` | `#333333` | 悩み提起の暗い背景 | 8% | 画素の実測 | | `on-dark` | `#EEEDED` | 暗い地の上の文字 | 1% | 画素の実測 | | `text-body` | `#262727` | 本文 | 3% | 画素の実測 | | `marker` | `#F3E7A0` | 暗い地の本文強調 | 0% | 推定 | | `accent-1-accessible` | `#B4445C` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#BB4315` | AA を満たす補正値（計算） | | 計算 | - 見出しは濃紺、いちばん伝えたい語だけピンク赤にする - 金メタリックのグラデはカード見出し帯・セクション見出し帯・比較表の自社列だけに使う - ピンク→オレンジのグラデは正円バッジ・数値帯・POINTラベルに使う - 赤はお得額と割引バッジだけに使う - 地は白〜淡グレー〜淡青のグラデを交互にし、悩みの提起だけ暗い写真背景にする - `badge-gradient-circle` は文字 `#EEEDED` × 背景 `#B6455D` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B4445C`、4.58:1）を使う。 - `label-point` は文字 `#EEEDED` × 背景 `#EE8E6A` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#BB4315`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー・大きな数値 | ゴシック | Noto Sans JP | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.35 | 0.04em | | `headline-md` | 小見出し・カード内の数値 | ゴシック | Noto Sans JP | 800 | 22px | 1.4 | 0.03em | | `headline-sm` | カード帯見出し・悩みの項目 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.04em | | `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | | `accent` | POINT番号ラベル | 欧文サンセリフ | Montserrat | 700 | 14px | 1.0 | 0.08em | | `label-button` | 帯ラベル・価格パネル | ゴシック | Noto Sans JP | 800 | 18px | 1.3 | 0.04em | - 見出しは極太ゴシックで2行に分け、2行目の強調語を大きくする - 数値は単位より大きくし、単位は小さく添える - 強調語の下に細い紺の下線を引く - 本文は中央揃えで行間を広めに取る - 見出しに明朝は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 2 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 見出し→説明文→図解→補足の順に中央揃えで縦に積む - 特長カードは2×2のグリッドにする - 正円バッジは2〜3個を横に並べ、記号（＞・＋）でつなぐ - 比較表は自社列を太くして上に飛び出させる - セクションの頭に POINT 番号ラベルを左寄せで置く ## Elevation & Depth - 白カードに淡くぼかした影（0 4px 12px rgba(0,0,0,.12)） - 正円バッジに柔らかい外影 - 比較表の自社列に強めの影 - 写真に重ねる白い説明ボックスに影 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの長方形。食材写真には正円の数値バッジを重ねる - **セクション境界**: 直線で区切り、下向き三角で次へ誘導する - 数値・成分は正円グラデバッジにする - 紺帯は角丸ピル型にする - POINTラベルは右端が斜めに抜けるグラデ帯にする - 吹き出しは金のピル型にしっぽを付ける ## Components - **グラデ正円バッジ**（`badge-gradient-circle`）: ピンク→オレンジのグラデ円に白抜きの太字で成分や数値を入れる - **金帯見出しカード**（`card-gold-header`）: 上部が金メタリック帯で白文字、下部は白地に紺の太字数値 - **POINTラベル**（`label-point`）: 橙ピンクのグラデ帯に白で POINT と番号を入れる - **紺ピル帯見出し**（`bar-navy-pill`）: 小見出しを白文字で入れる横長の紺帯 - **まとめ買い価格表**（`price-table`）: 黒い見出し行の価格表。下に赤のお得額パネルと下矢印を付ける - **お得額パネル**（`panel-savings`）: 赤地に白の大きな数値とお得の文字 - **悩みチェックリスト**（`checklist-dark`）: 暗い写真の上に金のチェック丸と白文字で3項目を並べる - **競合比較表**（`compare-table`）: 紺の項目列と、金枠で上に飛び出した自社列、グレーの他社列で作る - **金の吹き出し**（`bubble-gold`）: 見出しの前置きを金のピルに入れ、しっぽを付ける ## Do's and Don'ts **Do** - 大きな数値は単位を小さくして目立たせる - グラデは正円と帯にだけ使う - 金は高級感を出したい見出し帯に絞る - 各特長は POINT ラベル＋2行見出し＋図解でそろえる - 地は白と淡グレーの光沢グラデを交互にする **Don't** - ピンクと赤を本文に多く使わない - 細い書体や明朝で見出しを組まない - 原色ベタの背景を広く敷かない - 角丸を大きくしすぎない（カードは4px程度） - 暗い背景のセクションを何度も入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩みへの共感と商品を提示する）: 肌のアップ写真に、グラデ文字の大コピー、正円バッジ、成分タグ、商品パッケージを重ねる 2. **まとめ買い価格**（セット購入のお得さを見せる）: 金帯の見出しの下にセット写真と割引バッジ、価格表、赤のお得額パネルを置く 3. **悩みの提起**（不足に気づかせる）: 暗い人物写真に悩みを3つチェックリストで並べ、紺の地で結論を出す 4. **成分の解説**（成分の役割とバランスを教える）: 縦線付きの小見出しと本文の後、白帯の見出しと「＞」でつないだ正円2つを置く 5. **必要量の図解**（食事だけでは摂りにくいと示す）: グラデ数値帯の後、食材写真に個数バッジを重ね、最後に下三角で次へ導く 6. **品質の宣言**（商品の強みをまとめる）: 商品写真と、金帯見出しカードを2×2で並べる 7. **特長（含有量）**（摂取量の目安を示す）: POINTラベルと紺ピル帯の下に、粒の図と紺の下部が付いた2枚の枠カードを置く 8. **特長（成分・制度）**（配合成分の種類を見せる）: パール調の正円を5つ並べ、縦線付きの用語解説を添える 9. **特長（配合）**（相性の良い成分を見せる）: グラデ正円2つを「＋」でつなぎ、成分一覧はカッコで囲む 10. **特長（安全性）**（製造品質への信頼を作る）: 工場写真に白い説明ボックスを重ねる 11. **競合比較**（他社との差を見せる）: 金の吹き出しの後、自社列が金枠で上に飛び出した比較表を置く ## Imagery - 商品パッケージは白×金の光沢パウチを正面から撮る - 人物は肌のアップで、柔らかい自然光の明るいトーンにする - 悩みの部分は暗めでコントラストの低い人物写真を使う - 食材は鮮やかな接写で、画面いっぱいに写す - 背景に分子の玉やボケ・光沢を薄く入れ、科学的な印象を出す - 工場は青く寒色に補正した写真にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はSP幅の縦長デザインで、PCでも中央の1カラムで表示する - PCでは幅480〜750pxの中央カラムにし、左右は淡いグレーで埋める - SPのカード2列と正円3列はそのまま使う - 比較表は4列のまま、文字を小さくして横スクロールさせない ## 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-23961b00`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/ll001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。