--- version: alpha name: Deep Green and Gold Health Drink Sales LP description: 深い緑の地に金のグラデーション文字、えんじ色の CTA と価格を合わせた、権威性と特別感を前面に出す健康食品の通販 LP。明朝の大きな見出し、メダル型の栄養バッジ、悩みの吹き出し、グラフ、特典リストを縦長に並べて訴求する情報量の多い構成。 colors: primary: '#203F25' secondary: '#549053' cta: '#8E342D' on-cta: '#FFF0EE' background: '#FBF8F3' background-alt: '#DDDCDA' surface: '#FEFEFE' accent-1: '#C7B899' tint-1: '#F3DC9A' dark-section: '#816252' tint-2: '#9CCC95' text: '#222222' accent-2: '#C1967B' marker: '#E3E88A' accent-2-accessible: '#DAC1B1' secondary-accessible: '#487B47' typography: display: fontFamily: Shippori Mincho fontSize: 52px fontWeight: 800 lineHeight: 1.2 headline-lg: fontFamily: Noto Serif JP fontSize: 36px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Yomogi fontSize: 20px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px 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.md}' height: 64px nutrient-medal: backgroundColor: '{colors.accent-2}' textColor: '{colors.cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.display}' height: 520px benefit-row: backgroundColor: '{colors.tint-1}' textColor: '{colors.cta}' typography: '{typography.headline-md}' height: 80px worry-bubble: backgroundColor: '{colors.text}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 70px label-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 36px reason-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px limited-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 56px --- # DESIGN.md — 深緑×金×えんじの健康青汁通販 LP（Deep Green and Gold Health Drink Sales LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、上品・高級、ナチュラル、力強い・インパクト - **キーワード**: 深緑・金グラデーション・えんじ CTA・明朝の大見出し・メダルバッジ・権威訴求 - **地の質感**: 深緑の布目や葉のボケ、金色の紙吹雪、野菜写真の合成。グレーのセクションにはひび割れたコンクリート調の質感を使う - **形**: 円形メダル、角丸の大きくない帯、斜めに切ったリボン帯、黒い角丸の吹き出し - **温度感**: 深緑と金で落ち着いた暖かみ。えんじで熱量を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#203F25` | ブランドを表す深緑の地 | | 画素の主要色に補正 | | `secondary` | `#549053` | 見出し帯やラベルに使う中間の緑 | | 画素の主要色に補正 | | `cta` | `#8E342D` | 購入ボタンや価格・OFF バッジのえんじ | | 画素の主要色に補正 | | `on-cta` | `#FFF0EE` | CTA 上の白文字 | | 画素の実測 | | `background` | `#FBF8F3` | 基本の明るい地 | | 画素の実測 | | `background-alt` | `#DDDCDA` | 薄いグレーの地 | | 画素の実測 | | `surface` | `#FEFEFE` | 価格カードや白枠 | | 画素の実測 | | `accent-1` | `#C7B899` | 金色の見出し文字とメダルの縁 | | 画素の主要色に補正 | | `tint-1` | `#F3DC9A` | 特典セクションの淡い金地 | | 画素の実測 | | `dark-section` | `#816252` | 価格ブロックを囲う焦げ茶の地 | | 画素の主要色に補正 | | `tint-2` | `#9CCC95` | 定期購入訴求の淡い緑枠 | | 画素の実測 | | `text` | `#222222` | 見出しと本文の黒文字 | | 推定 | | `accent-2` | `#C1967B` | メダル内のベージュ・ローズ | | 画素の主要色に補正 | | `marker` | `#E3E88A` | 文字下の黄緑マーカー | | 推定 | | `accent-2-accessible` | `#DAC1B1` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#487B47` | AA を満たす補正値（計算） | | 計算 | - 権威・ブランド訴求の区間は深緑の地に金グラデーション文字を置く - 悩み・問題提起の区間はグレーやダークの地に切り替え、明暗で物語を切る - 価格・OFF 率・CTA はえんじ一色に統一し、他の用途で多用しない - 特典リストは淡い金地に金紙吹雪、番号はえんじの丸で示す - 強調語は緑またはえんじの文字色、補助として黄緑マーカーを敷く - 注釈は小さいグレー文字で各ブロック下に置く - `nutrient-medal` は文字 `#8E342D` × 背景 `#C1967B` のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DAC1B1`、4.57:1）を使う。 - `label-ribbon` は文字 `#FFF0EE` × 背景 `#549053` のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#487B47`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名・実績数字の特大見出し | 明朝 | Shippori Mincho | 800 | 52px | 1.2 | 0.0em | | `headline-lg` | セクション大見出し | 明朝 | Noto Serif JP | 700 | 36px | 1.3 | 0.02em | | `headline-md` | ゴシックの訴求見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.02em | | `headline-sm` | 帯ラベル・小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `body-md` | 本文説明 | ゴシック | Noto Sans JP | 500 | 15px | 1.8 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 手書き風の前置き語 | 手書き・筆 | Yomogi | 400 | 20px | 1.2 | 0.0em | | `label-button` | CTA ボタン文字 | 明朝 | Noto Serif JP | 700 | 24px | 1.3 | 0.04em | - 商品名・数字・価格は明朝の極太、説明見出しはゴシックの極太と使い分ける - 暗い地の大見出しは金グラデーションか白で書く - 数字は単位より 1.5〜2 倍大きくし、単位や「食」「個」は小さく添える - 前置きの短い語は「＼ ／」で挟むか手書き体で斜めに置く - 縦書きの大見出しを 1 か所に使ってリズムを変える - 注釈の※番号は見出しの右上に小さく付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。メダルは 2〜4 列、画像は 2〜3 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションは画像と文字を一体にした全幅ブロックで作る - 見出しは中央揃え、本文は左揃え - 価格カードは焦げ茶の地の上に白カードで浮かせる - 比較グラフは全幅に近いサイズで見せる - CTA は価格ブロック内と要所に繰り返して置く ## Elevation & Depth - CTA ボタンは下側にやや濃い影と上部ハイライトを付け、立体的に見せる - 白い価格カードには薄いドロップシャドウ - メダルバッジは金の縁取りと内側のグラデーションで浮き出し感を出す - 写真は白枠を付けて少し傾け、ポラロイド風に重ねる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は白枠付きで傾けて重ね、食材は切り抜いて合成する。メダルは正円 - **セクション境界**: 基本は直線で区切る。斜めのリボン帯や、上下を山型・波型に切った区切りも混ぜる - CTA は角丸 8px 程度の横長ボタンにし、右端に丸い矢印アイコンを付ける - 栄養や特典の数値は正円メダルに収める - 悩みは黒の角丸吹き出しに入れ、人物の横に縦に並べる - ラベル帯は角丸小さめの緑またはえんじの帯にする ## Components - **購入 CTA ボタン**（`button-primary`）: えんじのグラデーションに白い明朝文字。左に小さな特典メダル、右に丸い矢印 - **栄養メダル**（`nutrient-medal`）: ベージュの正円に金の縁。成分名、えんじの大きな数値、緑の小ラベルを入れる - **価格カード**（`price-card`）: 白カードに通常価格、えんじの初回価格ラベル、特大の価格数字、右上のえんじ円 OFF バッジ - **特典リスト行**（`benefit-row`）: 淡い金地。左にえんじの丸番号、上に小さな前置き、右にえんじ明朝の特典名 - **悩み吹き出し**（`worry-bubble`）: 黒の半透明角丸ボックスに白文字。要点は太字にする - **緑ラベル帯**（`label-ribbon`）: 緑の角丸帯に白ゴシック。見出し前の前置きに使う - **理由番号バッジ**（`reason-badge`）: えんじの円に金縁。小さく「理由」、大きく 2 桁の番号 - **限定タグ帯**（`limited-tag`）: 左に焦げ茶の旗型タグ、右に深緑の帯と白い大見出し ## Do's and Don'ts **Do** - 実績数字や No.1 表記は深緑の地に金の明朝で特大にする - 悩み→事実データ→解決→理由→価格の流れを守る - 数値の主張には必ず※注釈を添える - 食材写真を商品の周りに配置し、自然さと栄養感を出す - 価格と CTA のセットはページ内で 2 回以上繰り返す **Don't** - えんじを装飾に広く使わない。価格・CTA・OFF に限定する - パステル調や丸ゴシックの可愛い表現にしない - 金文字を明るい地に細く置いて読みにくくしない - 余白を広く取りすぎたミニマル構成にしない - グラフや数値を根拠の注釈なしで出さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（割引率と商品の価値を一目で伝える）: 上部にえんじの割引帯。明るい地に緑の前置き帯、金明朝の商品名、商品と野菜の合成写真 2. **成分メダルと CTA**（主要な栄養値を示して購入へ誘導する）: 深緑の地に栄養メダルを 4 つと横長ラベルを 2 つ並べ、下に購入ボタン 3. **権威・実績**（No.1 実績と累計販売数で信頼を作る）: 深緑に金の紙吹雪、関連商品の並び、特大の金数字 4. **共感・利用者の声**（よくある生活の悩みに共感する）: 傾けた人物写真と、半透明の帯に入れた短い一言を交互に並べる 5. **価格オファー**（限定価格と定期コースの条件を示す）: 限定タグ帯、商品写真、焦げ茶の地に白い価格カードと CTA 6. **特典一覧**（特典を 5 つ並べてお得感を出す）: 金地に月桂樹の大見出し、番号付きの特典行 7. **継続率訴求**（多くの人が定期購入を選んでいることを示す）: 淡い緑の枠の中に人型アイコンを 5 つ並べ、比率で見せる 8. **悩みの提起**（栄養不足への不安を呼び起こす）: グレーの地に筆文字の大見出し、考え込む人物と黒い吹き出し 9. **事実データ**（公的データで問題を裏付ける）: 棒グラフ・折れ線グラフ、えんじの強調帯、縦書きの大見出し 10. **解決策の提示**（商品を解決策として登場させる）: 斜めのえんじ帯で切り替え、深緑の地に商品とメダルを並べる 11. **選ばれる理由**（4 つの理由で商品の価値を深掘りする）: 理由番号バッジ、栄養充足率の横棒グラフ、食材写真、素材写真に 100% 使用の円バッジ 12. **栄養の換算比較**（身近な食品に置き換えて栄養量を実感させる）: 食材の切り抜き写真と金縁メダルを左右交互に置き、緑ラベルを添える ## Imagery - 野菜・鶏むね肉・大豆を白木や明るい卓上に並べ、高い彩度で撮る - グラスに入った緑の飲料を主役にし、粉末とスプーンを添える - 人物は中高年から若い女性まで幅広く。飲んで笑顔になる瞬間を撮る - 悩みの場面はくすんだトーンで、手を顎に当てるなど考え込む姿 - 金の紙吹雪・月桂樹・リボンで受賞や実績の演出をする - 食材は切り抜いて白背景の上に影付きで置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、SP の画像ブロックを中央 480〜750px 幅で並べ、左右は深緑か薄グレーの地で埋める - メダルは PC では 6 個を横 1 列に並べてもよい - 価格カードと CTA は PC でも最大幅 600px 程度に収める - グラフは 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-820c6ba8`（元 LP の URL から採番） - **元 LP**: https://milim.co.jp/lp?u=kanzen_fv_img - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。