--- version: alpha name: Fresh Green Sprout Supplement LP description: 深い緑の帯と白いカードを交互に積み、黄色マーカーとサーモン色の強調文字で成分の効能を伝える健康食品 LP。極太ゴシック見出しと新芽の写真、キャラクターイラストで親しみと情報量を両立させている。 colors: primary: '#026B1C' dark-section: '#054616' background: '#FFFFFF' background-alt: '#FCFCFC' surface: '#FDFDFD' marker: '#F9F877' accent-1: '#CC8374' accent-2: '#FC5B02' accent-3: '#037DDC' tint-1: '#F36394' tint-2: '#A6C389' text: '#222222' on-primary: '#F9FEFA' on-dark: '#F9F877' accent-2-accessible: '#CC4A02' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Caveat fontSize: 16px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' speech-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 48px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 520px burst-badge: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 120px marker-text: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 24px category-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 36px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 64px secret-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px brand-pill: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px --- # DESIGN.md — 深緑×黄マーカーの訴求型サプリ LP（Fresh Green Sprout Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、ナチュラル、ポップ・元気、力強い・インパクト - **キーワード**: 深緑・黄マーカー・極太ゴシック・新芽写真・白カード・番号バッジ - **地の質感**: 緑地に薄い斜線やグリッドの紙地テクスチャ。白カードは方眼柄の淡い背景 - **形**: 角丸の白カード、円形の番号バッジ、ギザギザの星形バッジ、円切り抜き写真 - **温度感**: 爽やかで元気な暖寒中間。緑が主、黄とオレンジが温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#026B1C` | セクション帯・見出し文字の深緑 | 9% | 画素の実測 | | `dark-section` | `#054616` | カード背後の濃緑地 | 5% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 31% | 画素の実測 | | `background-alt` | `#FCFCFC` | 淡いグレーのセクション地 | 12% | 画素の実測 | | `surface` | `#FDFDFD` | 白カードの内側 | 6% | 画素の実測 | | `marker` | `#F9F877` | 黄色マーカー・見出し帯 | 5% | 画素の主要色に補正 | | `accent-1` | `#CC8374` | 効能強調のサーモン文字 | 2% | 画素の実測 | | `accent-2` | `#FC5B02` | ダイエット系ラベルのオレンジ | 1% | 画素の実測 | | `accent-3` | `#037DDC` | 美容ラベルの青 | 1% | 画素の実測 | | `tint-1` | `#F36394` | 臓器説明パネルのピンク | 3% | 画素の実測 | | `tint-2` | `#A6C389` | 淡い黄緑の葉色 | 5% | 画素の主要色に補正 | | `text` | `#222222` | 本文・見出しの黒文字 | 3% | 推定 | | `on-primary` | `#F9FEFA` | 緑地上の白文字 | 2% | 画素の実測 | | `on-dark` | `#F9F877` | 濃緑帯上の黄見出し文字 | 1% | 画素の主要色に補正 | | `accent-2-accessible` | `#CC4A02` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡グレーを基本に、成分解説・秘密紹介は深緑帯の上に白カードを載せる - 重要語は黄色マーカーを文字下半分に敷いて強調する - 効能の説明文はサーモン色の太字で一段大きく - 健康=緑、ダイエット=オレンジ、美容=青の3色ラベルを一貫して使う - 警告や原因提示は赤い円バッジでのみ使う - 濃緑帯の見出しは白文字、キーワードのみ黄文字 - `category-label` は文字 `#F9FEFA` × 背景 `#FC5B02` のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#CC4A02`、4.53:1）を使う。 - `brand-pill` は文字 `#F9FEFA` × 背景 `#FC5B02` のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#CC4A02`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクション大見出し | ゴシック | Dela Gothic One | 900 | 36px | 1.25 | 0.02em | | `headline-lg` | 成分名など緑の太見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-md` | カード上の小見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `headline-sm` | リード見出し・帯見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.05em | | `body-lg` | 効能強調文 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.7 | 0.02em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | | `accent` | 英字の手書き風添え文字 | 欧文スクリプト | Caveat | 400 | 16px | 1.2 | 0.02em | - 見出しは極太ゴシックで、キーワードだけ緑や黄の色替え＋大きく - 助詞は一回り小さくして語のメリハリを出す - 本文は中央寄せかカード内左寄せ、行間広め - 数字は特大にして単位を小さく添える - カテゴリ英字は手書き風欧文で添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較パネルは 3 列並び - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 緑帯の上に白カードを縦に積み、カード間は 24px - カード上端に番号バッジを半分はみ出させて置く - チェックリストは左アイコン＋右文言、点線区切り - 悩みは中央の人物を円写真4つで囲む - セクション冒頭に吹き出し型の問いかけ帯を置く ## Elevation & Depth - 白カードに薄い影（0 2px 8px rgba(0,0,0,.15)） - 商品パッケージ写真に落ち影 - 星形バッジは影なしでフラット ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 円形切り抜きと横長矩形、商品は切り抜き - **セクション境界**: 直線の色切替と斜めの白い帯 - カードは角丸 16〜20px - 番号は緑の円バッジ - 成分名はギザギザ円バッジ - ラベルは角なし矩形の色帯 ## Components - **問いかけ吹き出し帯**（`speech-band`）: 下に三角の付いた深緑のピル帯に白文字 - **番号円バッジ**（`number-badge`）: カード上端に重なる緑円の白数字 - **成分白カード**（`feature-card`）: 緑地上の角丸白カード、見出し・写真・チェック付き説明 - **星形数値バッジ**（`burst-badge`）: 黄色のギザギザ円に特大赤数字 - **黄色マーカー強調**（`marker-text`）: 語の下半分に黄色を敷く - **3色カテゴリラベル**（`category-label`）: 緑・オレンジ・青の矩形に白太字 - **チェックリスト**（`check-list`）: 緑の大きなチェックアイコンと点線区切りの行 - **秘密番号タグ**（`secret-tag`）: 深緑の小さな角丸タグに白文字 - **締めのオレンジピル**（`brand-pill`）: フッター前のオレンジ帯に白文字 ## Do's and Don'ts **Do** - 重要語は必ずマーカーか色替えで強調する - 緑帯と白地を交互にしてリズムを作る - 数字は大きく、星形バッジで目立たせる - キャラクター化したイラストで仕組みを説明する - 3色のカテゴリ色を最後まで統一する **Don't** - 細い明朝や淡い色だけで見出しを組まない - 緑以外の色を地の色に広く使わない - 強調色を一文に3色以上混ぜない - 写真なしの文字だけのセクションを続けない - カードを角張らせない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と主効果を一目で伝える）: 新芽の全面写真に白の極太見出し、黄帯サブコピー、商品と星形数値バッジ 2. **素材紹介**（原料の話題性を伝える）: 吹き出し帯の問いかけ、色替え大見出し、素材写真、マーカー入り本文 3. **悩みの提起**（続けにくさへの共感）: 中央に悩む人物、周囲に円写真と短い悩み、下に黄文字の緑帯 4. **解決提示**（凝縮量を示す）: 大量の素材イラスト、商品、星形バッジ、写真上の特大文字 5. **成分解説**（2大成分の効能説明）: 緑地上に番号付き白カード、写真とチェック付きサーモン強調文 6. **トリプルサポート**（3つの効果を整理）: 写真背景に白見出し、黄円3つを×で連結、商品 7. **仕組みの説明**（体内の働きを図解）: キャラクター、ピンクの3列パネル、3色ラベル 8. **問題提起**（働きの低下を示す）: 落ち込むキャラ、紫の3列写真パネル、赤円警告 9. **解決の効能**（成分による改善）: 笑顔キャラと素材、点線罫の本文、3色ラベル 10. **おすすめ対象**（自分ごと化）: 緑帯見出し、チェックリスト5行と円写真 11. **続けられる理由**（飲みやすさ・価格・品質）: 緑地に秘密タグ付き白カード3枚、マーカー付きチェック項目 12. **クロージング**（購入意欲の後押し）: 大見出し、人物写真と商品、成分バッジ、オレンジのピル帯 ## Imagery - 新芽や葉を寄りで撮った鮮やかな緑の写真を背景に使う - 商品パッケージは切り抜きで粒を添える - 臓器や太陽を顔付きのゆるキャラで描く - 悩み人物は明るい室内のストック写真を円で切る - 製造現場は白衣の清潔な写真を横並び - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はPC幅でも約950pxの縦長1カラム、SPはそのまま縮小で成立 - SP では見出し 28〜36px に抑え 2〜3 行で改行 - 3列パネルは SP でも3列維持、文字は13px程度 - 白カードの左右余白は16px - PCでは中央 750px 前後に固定し左右を緑地で埋める ## 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-bf106129`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/oga/bs1m/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。