--- version: alpha name: Lime Green Gut Health Energy Drink LP description: 黄緑の斜めリボン見出しと深緑の背景セクションを軸にした、縦長1カラムの腸活ドリンクLP。写真の上に太いゴシックの白文字を重ね、悩みの列挙・権威づけ・3段階の価格カードまで情報を多く詰めた訴求型の構成。 colors: primary: '#84C558' dark-section: '#034524' on-dark: '#FFFFFF' background: '#FDFEFE' background-alt: '#F5F5F5' surface: '#D5D5D5' text: '#161815' text-body: '#4C4C43' cta: '#EB8B04' on-cta: '#FFFFFF' accent-1: '#D63B62' accent-2: '#D5BF94' dark-section-alt: '#4C4C43' line: '#333333' tint-1: '#EDF1F4' primary-accessible: '#4F822D' cta-accessible: '#AC6603' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Oswald fontSize: 40px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 2px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 44px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px price-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 300px label-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px circle-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px check-list: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px stat-medal: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 130px dark-label: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 36px --- # DESIGN.md — ライムグリーン×深緑の腸活ドリンクLP（Lime Green Gut Health Energy Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 情報量多め・訴求型、力強い・インパクト、清潔・爽やか、ナチュラル - **キーワード**: ライムグリーン・斜めリボン見出し・太ゴシック・写真合成・腸活・価格カード - **地の質感**: 水しぶきや光の粒を重ねた写真合成と、コンクリート調グレーの地を使う。単色の面は少なめ。 - **形**: 平行四辺形のリボン、角が小さい四角い白枠ボックス、正円の悩みバッジ、四隅だけのかぎ括弧の枠。 - **温度感**: やや涼しい。緑と白が中心で、価格まわりだけ橙の暖色。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#84C558` | ブランドの黄緑（リボン見出し・強調帯） | 7% | 画素の主要色に補正 | | `dark-section` | `#034524` | ブランド紹介の深緑背景 | 6% | 画素の実測 | | `on-dark` | `#FFFFFF` | 深緑や写真の上の白文字 | 2% | 画素の主要色に補正 | | `background` | `#FDFEFE` | 基本の白い地 | 15% | 画素の実測 | | `background-alt` | `#F5F5F5` | 淡いグレーのセクション地 | 12% | 画素の実測 | | `surface` | `#D5D5D5` | コンクリート調グレーの悩みセクション地 | 7% | 画素の実測 | | `text` | `#161815` | 見出し・本文の黒文字 | 3% | 画素の実測 | | `text-body` | `#4C4C43` | 濃いグレーの本文 | 2% | 画素の主要色に補正 | | `cta` | `#EB8B04` | 購入ボタンの橙グラデ | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | 購入ボタンの白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D63B62` | 価格の赤ピンク数字 | 0% | 画素の実測 | | `accent-2` | `#D5BF94` | 満足度バッジの金色リング | 2% | 画素の主要色に補正 | | `dark-section-alt` | `#4C4C43` | | | 画素の主要色に補正 | | `line` | `#333333` | 白枠ボックス・かぎ括弧の黒線 | 0% | 推定 | | `tint-1` | `#EDF1F4` | 腸活セクションの淡い水色グレー地 | 8% | 画素の実測 | | `primary-accessible` | `#4F822D` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#AC6603` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いグレーを交互に使い、ブランド紹介だけ深緑の全面背景にする。 - 黄緑は平行四辺形のリボン見出しと強調語の下線だけに使う。 - 購入ボタンは橙のグラデにして、緑系の画面の中でいちばん目立たせる。 - 価格の数字は赤ピンクにし、税込表記は小さく添える。 - 悩みセクションはグレーのコンクリート調にして暗めにし、解決のセクションで明るい水色系に切り替える。 - 実績バッジの数値だけ金リングで縁取る。 - `ribbon-heading` は文字 `#FFFFFF` × 背景 `#84C558` のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4F822D`、4.6:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#EB8B04` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AC6603`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大キャッチ・写真の上の白抜き文字 | ゴシック | Noto Sans JP | 900 | 34px | 1.25 | 0.02em | | `headline-lg` | セクションの大見出し（黒・太字） | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.02em | | `headline-md` | リボン見出し・価格カードの見出し | ゴシック | Noto Sans JP | 800 | 20px | 1.4 | 0.02em | | `headline-sm` | 白枠ボックスのラベル・悩みの円内の文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.0em | | `body-md` | 本文・想いの文章 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.02em | | `note` | 注釈・調査出典 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | | `accent` | 英字の商品名ロゴ風・数値（細長い欧文） | 欧文サンセリフ | Oswald | 700 | 40px | 1.1 | 0.0em | | `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.2 | 0.05em | - 見出しはほぼ太さ800〜900のゴシックで、1行を8〜12文字に抑えて改行する。 - 見出しの中のキーワードは黄緑のリボンや白抜きの黒ボックスに入れて強調する。 - 強調したい語は文字サイズを1.3倍にして、ほかの語との大小差をつける。 - 写真の上の白文字には暗めの影をつけて読めるようにする。 - 本文は中央揃えにし、行間は1.8以上とる。 - 英字の商品名は細長いコンデンスド書体で横幅いっぱいに組む。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。写真グリッドだけ2〜4列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは全幅の背景で区切り、中身は中央揃えにする。 - 見出し・写真・説明を縦に積み、写真は全幅で大きく見せる。 - 価格カードは3段で縦に並べ、それぞれ見出しリボン、商品写真、価格、ボタン、注釈の順にする。 - 悩みは左寄せのチェックリストにし、写真の人物と左右交互に配置する。 - 原因や効果は正円を3つ・2つと並べるか、3×2のグリッドで並べる。 ## Elevation & Depth - 白枠ボックスと価格カードには薄い影をつける（0 2px 6px rgba(0,0,0,.15)）。 - 購入ボタンは下側に濃い橙の影をつけて立体的に見せる。 - 悩みの正円は白地に薄い影をつけて浮かせる。 - 写真の上の文字には黒い影（0 2px 4px rgba(0,0,0,.5)）をつける。 ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角のまま全幅で配置する。人物は切り抜いて背景と合成する。SNSの画面はスマホ型の角丸カードにする。 - **セクション境界**: 基本は直線で切り替える。FVの下端などに斜めの帯を重ねることがある。 - 見出しは平行四辺形のリボン（skew -12°前後）にする。 - ラベルは黒線の白い四角ボックスにし、下に吹き出しの三角をつける。 - 注釈や補足は四隅だけのかぎ括弧の枠で囲む。 - 悩み・効果は正円のバッジにする。 - 購入ボタンは角丸6px前後の横長にする。 ## Components - **斜めリボン見出し**（`ribbon-heading`）: 黄緑の平行四辺形に白の太字。見出しの中のキーワードを強調する。 - **購入ボタン**（`button-primary`）: 橙のグラデにした横長ボタン。白の太字で、下に影をつける。 - **価格プランカード**（`price-card`）: 黄緑の見出しリボンの下に、商品写真・数量ラベル・赤い価格・ボタン・かぎ括弧の注釈を並べる。 - **吹き出しラベル**（`label-box`）: 黒線の白い四角に太字の短い語を入れ、下に三角をつける。図解の注記にも使う。 - **悩み・効果の円バッジ**（`circle-badge`）: 白い正円の中に2〜3行の太字を入れる。3つ・3つや3つ・2つで並べる。 - **悩みチェックリスト**（`check-list`）: チェックボックスのアイコンに短い悩みを1行ずつ並べ、キーワードは大きくする。 - **実績メダル**（`stat-medal`）: 金のリングで囲んだ円に、満足度の%や星評価を大きく入れる。 - **黒地の強調語**（`dark-label`）: 濃いグレーの帯に白文字で強調語を入れ、文中に挟む。 ## Do's and Don'ts **Do** - キーワードは必ず黄緑のリボンか黒地の帯に入れて目立たせる。 - 購入ボタンは橙だけで作り、ほかの要素に橙を使わない。 - 写真の上には白の極太文字を重ねて勢いを出す。 - 悩み→原因→改善→解決の流れで、背景の明るさも暗→明に変える。 - 数値（%・★・価格）は大きく、単位は小さくする。 **Don't** - 細い明朝体やかわいい丸ゴシックは使わない。 - 黄緑を広い面の背景に敷かない（リボンや帯だけにする）。 - 大きな角丸やピル型でやわらかくしすぎない。 - 余白を広くとりすぎず、詰めた情報量を保つ。 - 価格の色を緑にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と新しさを一目で伝える）: 黄緑の光と柑橘の水しぶきの上に缶を3本合成する。上部に白の極太キャッチ、下部に英字の商品名を大きく置く。 2. **成分の根拠**（研究に基づく成分配合を示す）: 白地に黒の太字見出しとリボンを置き、腸のイラストに吹き出しラベルで成分を示す。 3. **コンセプト**（小腸と大腸の両方に働きかけることを伝える）: 吹き出しラベルを2つ並べ、人物写真の上に斜めの黄緑の帯と白の大文字を置く。 4. **商品ラインナップ**（3つの味を見せる）: 自然素材と一緒にテーブルに置いた缶の写真の上に、英字のタイトルを置く。 5. **ブランド紹介**（作り手と店舗で信頼をつくる）: 深緑の背景にロゴ、白枠の見出し、人物写真、白いカードの説明を置き、続けて店舗写真を2×2で並べる。 6. **店舗・スタッフ**（専門スタッフがいることを示す）: 白地に葉の装飾をあしらい、スタッフ写真を4列と3列で並べ、資格名を大きな太字にする。 7. **実績**（満足度と口コミの評価を示す）: 金色の光の背景に、金リングのメダルを2つ並べる。 8. **著名人の愛用**（SNSの投稿で社会的証明を見せる）: 放射線の装飾をつけた見出しの下に、スマホ型のSNS画面を3×2で並べる。 9. **開発の想い**（開発の理由を語って共感を得る）: グレーの地に白いカードを置き、四隅を黄緑の括弧で飾って、中央揃えの本文を入れる。 10. **価格プラン**（3つの購入段階を選べるようにする）: 価格カードを縦に3枚並べ、各カードに購入ボタンを置く。 11. **悩みの提起**（体調の悩みに当てはまるか確認してもらう）: コンクリート調のグレーの地に、悩んでいる人物の写真とチェックリストを置く。下向きの山形矢印を挟む。 12. **原因**（生活習慣が原因だと示す）: 原因を円バッジで並べ、黒帯の強調語を入れる。さらに悪化する可能性を、人物を左右に置いた帯で示す。 13. **改善の効果**（腸活のメリットを並べる）: 明るい光の背景に効果の円バッジを3×2で並べ、笑顔の人物写真とリボン見出しを置く。 14. **腸活の考え方**（小腸と大腸の役割を解説する）: 淡い水色の地に腸の図解と黒見出しの説明ボックスを置き、四角で囲んだキーワード文を入れる。 ## Imagery - 商品の缶は柑橘や水しぶき、黄緑の光彩と合成し、躍動感を出す。 - 人物は明るい屋外で自然に笑う男女を撮り、背景はぼかす。 - 悩みの場面はグレーの色調で、頭を抱える・横になる人物を使う。 - 腸はやわらかいピンクのイラストにし、緑の光で注目する部分を示す。 - 店舗やスタッフは植物の多い自然光の写真にし、エプロン姿で商品を持たせる。 - 装飾として葉っぱのイラストや、ぼけた光の粒を散らす。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元のLPはPCでも中央に約750px幅のSP型カラムで表示している。SPでもそのまま1カラムにする。 - SPでは写真を全幅で配置し、テキストブロックは左右に約6%の余白をとる。 - スタッフ写真の4列グリッドは、SPでは2列にしてもよい。 - 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-9aa3cf01`（元 LP の URL から採番） - **元 LP**: https://15e-organic.com/pages/symbiotics-energy-lp?srsltid=AfmBOorz9BmSE4BFjC4LJY9xUig0eMRlw9LlwYZ6f2t90d-O7a0XLuCg - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/15 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。