--- version: alpha name: Fresh Green Sunshine Supplement LP description: 鮮やかな緑と蛍光寄りの黄色を軸に、青空と陽光の写真で元気さを出したサプリ通販 LP。極太ゴシックの大きな数字、斜めに傾けた黄色帯の見出し、手書き風の吹き出しで訴求を積み上げる縦長 1 カラム構成。 colors: primary: '#30A700' on-primary: '#FDFCFD' background: '#FFFFFF' background-alt: '#EEF3B9' tint-1: '#D6DF9A' marker: '#E9F283' accent-1: '#F2EF1A' text: '#0E0E0E' dark-section: '#171B18' cta: '#CA2323' on-cta: '#FFFFFF' accent-2: '#5BBEAC' line: '#B8B8A8' surface: '#E7E7E7' primary-accessible: '#268600' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.2 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: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Yomogi fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Montserrat fontSize: 48px fontWeight: 800 lineHeight: 1.0 rounded: sm: 4px md: 12px lg: 20px 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}' badge-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px slant-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.display}' height: 56px marker-text: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 28px price-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 220px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px speech-hand: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 50px comparison-table: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 260px label-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px achievement-laurel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 160px --- # DESIGN.md — 若草緑×レモン黄の爽快サプリ LP（Fresh Green Sunshine Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ポップ・元気、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 若草グリーン・レモンイエロー・青空と日差し・極太数字・斜め帯見出し・手書き吹き出し - **地の質感**: 青空や逆光の写真と淡い黄緑のフラット面を交互に置く。緑面にはドット柄を薄く敷く。 - **形**: 波形のセクション境界、円形バッジ、下向き三角の帯、角丸の白カード。 - **温度感**: 明るく暖かい日差しの温度感。悩みパートだけ黒で冷たく落とす。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#30A700` | ブランドの緑。帯・数字・バッジ | 8% | 画素の実測 | | `on-primary` | `#FDFCFD` | 緑面の上の白文字 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 20% | 画素の実測 | | `background-alt` | `#EEF3B9` | 淡い黄緑の地 | 15% | 画素の実測 | | `tint-1` | `#D6DF9A` | やや濃い黄緑の地 | 6% | 画素の主要色に補正 | | `marker` | `#E9F283` | 蛍光黄の文字背景マーカー・見出し文字 | 4% | 画素の主要色に補正 | | `accent-1` | `#F2EF1A` | 強い黄色の見出し文字 | 1% | 推定 | | `text` | `#0E0E0E` | 見出し・本文の墨色 | 4% | 画素の実測 | | `dark-section` | `#171B18` | 悩み提起の黒地 | 5% | 画素の主要色に補正 | | `cta` | `#CA2323` | お得額の赤ボックス | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 赤ボックス上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#5BBEAC` | 空色の写真地・波 | 5% | 画素の主要色に補正 | | `line` | `#B8B8A8` | 表・区切りの細線 | 0% | 推定 | | `surface` | `#E7E7E7` | 比較表の他社列グレー | 1% | 画素の実測 | | `primary-accessible` | `#268600` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い黄緑を交互に使い、区切りに緑のベタ帯を挟む。 - 強調語は蛍光黄の帯マーカーか緑文字で示す。 - 数字の主張は緑か黄色の極太で大きく出す。 - 赤は価格のお得額表示だけに使う。 - 悩みパートだけ黒地にし、解決パートで緑に戻す。 - 黄色文字には濃い緑か黒の細いフチを付けて可読性を保つ。 - `badge-circle` は文字 `#FDFCFD` × 背景 `#30A700` のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#268600`、4.57:1）を使う。 - `comparison-table` は文字 `#30A700` × 背景 `#E9F283` のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#268600`、4.6:1）を使う。 - `label-pill` は文字 `#FDFCFD` × 背景 `#30A700` のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#268600`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ（手書き風の極太） | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.2 | 0.0em | | `headline-lg` | セクションの大見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-md` | 中見出し・帯の文字 | ゴシック | Noto Sans JP | 800 | 22px | 1.4 | 0.05em | | `headline-sm` | 小見出し・表の項目 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 手書き風の添え書き・吹き出し | 手書き・筆 | Yomogi | 400 | 18px | 1.4 | 0.05em | | `label-button` | 大きな数字・欧文ロゴ風 | 欧文サンセリフ | Montserrat | 800 | 48px | 1.0 | 0.0em | - 数字を本文の 3〜4 倍に、単位を小さくしてメリハリを付ける。 - 見出しでは助詞を小さく、キーワードを大きくする。 - 大見出しの上に「＼ 〇〇 ／」の小見出しを添える。 - 黄色の見出しは斜めに少し傾けて躍動感を出す。 - 本文は中央揃えで短く改行する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較表のみ 4 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに地色を切り替えて区切る。 - 写真は全幅に敷き、その上に見出しを重ねる。 - 商品パッケージ画像を何度も繰り返し置く。 - 価格表と比較表は画面幅いっぱいに近い幅で組む。 - 注釈は各ブロックの直下に小さく置く。 ## Elevation & Depth - 基本はフラット。影はほとんど使わない。 - 商品パッケージには柔らかい落ち影を付ける。 - 白カードは影なしで、淡い黄緑の地から浮かせる。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物は全幅の角版、食材は円形に切り抜き、果物は切り抜きで散らす - **セクション境界**: 波形のカーブ、下向き三角の帯、直線の切り替え - バッジは円形で緑か黄色のベタ。 - 斜め帯は平行四辺形で黒フチ付き。 - 吹き出しは手書き風の黒線で角丸に描く。 ## Components - **円形スペックバッジ**（`badge-circle`）: 緑や黄の円の中に小さな前置きと大きな数字。2〜3 個を重ねて置く。 - **斜め黄色帯見出し**（`slant-banner`）: 黄色の平行四辺形に黒フチ、極太文字を少し傾けて載せる。 - **蛍光マーカー強調**（`marker-text`）: 本文中のキーワードの背景に黄色の帯を敷く。 - **まとめ買い価格表**（`price-table`）: 黒ヘッダーの 3 列表。下に赤の下向き矢印ボックスでお得額を表示。 - **悩みチェックリスト**（`check-list`）: 黒地の上に白カード。黄色のチェックボックスと太字キーワードを並べる。 - **手書き吹き出し**（`speech-hand`）: 黒の手書き線で描いた吹き出しに短いひとこと。 - **他社比較表**（`comparison-table`）: 自社列を黄緑で高く強調し、数字を緑の極太で表示。他社はグレー。 - **成分ラベル**（`label-pill`）: 円形写真の下に置く緑や黄のピル型ラベル。 - **実績の月桂樹**（`achievement-laurel`）: 多色の葉の月桂樹で大きな実績数字を挟む。 ## Do's and Don'ts **Do** - 緑と黄の 2 色で元気さを統一する。 - 数字は極太で大きく、単位を小さく。 - 青空・逆光の明るい写真を使う。 - パッケージ画像を要所で繰り返し見せる。 - 強調語には黄色のマーカーを敷く。 **Don't** - くすんだ色や彩度の低い緑を主色にしない。 - 赤をお得表示以外に使わない。 - 明朝体で上品にまとめない。 - 長文を詰め込まない。 - 黒地を悩みパート以外に広げない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（元気さと主要スペックを一目で伝える）: 上部に緑ドットの波帯で問いかけ。日差しを浴びる人物写真に斜めの極太キャッチ、円形バッジと商品画像を重ねる。 2. **商品紹介**（商品名と役割を示す）: 黄緑地に欧文ロゴ風の名前。青空写真の上に縦書きの黄色見出しと短い本文。 3. **まとめ買い価格**（セット購入をすすめる）: 茶色帯の見出し、黄緑地にセット写真、黒ヘッダーの価格表と赤のお得額。 4. **実績**（信頼を示す）: 白地に月桂樹と大きな販売数、シリーズ商品を横並び、緑の巨大ランキング表記。 5. **悩みの提起**（自分ごと化する）: 黒地に人物写真と手書き吹き出し、白カードのチェックリスト。 6. **原因の指摘**（不足を気付かせる）: 緑ベタ帯に白の大見出し、下向き三角で次へ誘導。 7. **解決の提示**（商品で解決できると示す）: 手書きの添え書き、黄色の極太見出し、逆光の人物写真、マーカー強調の本文。 8. **特長1 配合量**（スペックの高さを伝える）: 青空写真に黄色の大きな数字と商品画像、波で白地へ。 9. **特長2 味**（続けやすさを伝える）: 黄色見出し、吹き出し、笑顔の人物と果物切り抜き、円形バッジ。 10. **特長3 追加成分**（付加価値を伝える）: 黄緑地にマーカー見出しと緑の大数字、写真と吹き出し、白カードで 2 成分を×で並べる。 11. **他社比較**（優位性を示す）: 緑ドット帯の見出し、斜め黄色帯、自社列を強調した比較表。 12. **安心・品質**（製造品質で安心させる）: 濃い黄緑地に吹き出し見出し、研究者写真、マーカーラベルと本文、商品画像。 ## Imagery - 人物は明るい逆光や青空の下で、笑顔や伸びをする写真。 - 空は青からシアンのグラデーションに白い雲。 - 果物は葉付きで切り抜き、画面端に散らす。 - 食材は俯瞰で撮り円形に切り抜く。 - 装飾は手書きの線、キラキラ、ぐるぐる線を黒で添える。 - 悩みパートは暗い室内で疲れた表情の写真。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元 LP は画像主体の縦長で SP と同じ 1 カラム構成。 - PC では中央に 480〜750px 幅で置き、左右は地色を延長する。 - 比較表と価格表は SP でも横スクロールなしで収める。 - 大きな数字は SP で画面幅の 6〜7 割に収める。 ## 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-e2b818c5`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/bvd001/ - **解析に使った画像**: 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/）からご連絡ください。