--- version: alpha name: Vivid Fruit Gradient Beverage LP description: オレンジ・黄・黄緑の鮮やかな果汁グラデーションをセクションごとに切り替えるブランド LP。白い角丸カードに動画・本文・商品を収め、白抜きの欧文見出しと多色のラベルで元気で家族向けの明るさを出す。 colors: primary: '#FF7702' secondary: '#A1ED09' accent-1: '#FED401' background: '#FFFFFF' cta: '#1E8A3C' on-cta: '#F4FEF4' text: '#2B2B2B' accent-2: '#EC6C23' accent-3: '#DB156C' dark-section: '#0B8D3C' marker: '#FEAF21' tint-1: '#FEFDE3' line: '#2E7D32' surface: '#DDDEDD' accent-2-accessible: '#C15111' cta-accessible: '#1D8439' typography: display: fontFamily: Orbitron fontSize: 30px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.12em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 24px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 8px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-tile: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 60px section-title: typography: '{typography.display}' height: 90px content-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 800px number-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 56px nutrient-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 80px voice-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 160px recipe-card: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 240px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 48px chart-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' height: 330px --- # DESIGN.md — オレンジ×黄緑グラデの野菜飲料ブランド LP（Vivid Fruit Gradient Beverage LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、清潔・爽やか、ナチュラル、親しみ・手作り感 - **キーワード**: 果汁グラデーション・白カード・白抜き欧文見出し・多色ラベル・家族向け・動画中心 - **地の質感**: ぼかしたオレンジ・黄・黄緑のメッシュグラデーション背景。光が差すような柔らかいムラがある。 - **形**: 白カードは角丸小さめ。写真は手描き風の波打つ不定形フレーム。番号バッジは崩れた四角形。 - **温度感**: 暖色寄りで明るく元気。黄緑で健康感を補う。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF7702` | ブランドのオレンジ背景 | 12% | 画素の実測 | | `secondary` | `#A1ED09` | 黄緑のセクション背景 | 12% | 画素の実測 | | `accent-1` | `#FED401` | 黄色のセクション背景・番号バッジ | 10% | 画素の実測 | | `background` | `#FFFFFF` | カード・本文の地 | 30% | 画素の実測 | | `cta` | `#1E8A3C` | 詳しく見るボタン | 0% | 推定 | | `on-cta` | `#F4FEF4` | ボタン文字 | 0% | 画素の実測 | | `text` | `#2B2B2B` | 見出し・本文の文字 | 3% | 推定 | | `accent-2` | `#EC6C23` | レシピ帯・赤系ラベル | 2% | 画素の実測 | | `accent-3` | `#DB156C` | マゼンタのレシピ帯 | 1% | 画素の実測 | | `dark-section` | `#0B8D3C` | 濃い緑のセクション背景 | 5% | 画素の実測 | | `marker` | `#FEAF21` | 本文の強調下線 | 0% | 画素の主要色に補正 | | `tint-1` | `#FEFDE3` | グラフ背景の薄黄 | 1% | 画素の実測 | | `line` | `#2E7D32` | ナビボタンの緑枠・区切り | 0% | 推定 | | `surface` | `#DDDEDD` | ドット・レシピ写真の枠グレー | 0% | 画素の実測 | | `accent-2-accessible` | `#C15111` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#1D8439` | AA を満たす補正値（計算） | | 計算 | - セクションごとにオレンジ→黄→黄緑→濃緑→オレンジと背景グラデーションを切り替える。 - 見出しは背景上では白抜き、白カード内では濃いグレー。 - 強調はオレンジや淡緑の蛍光ペン風下線で行う。 - 商品・レシピのラベルは商品ごとの色（緑・紫・橙・赤・黄緑・黄）で塗り分ける。 - 主ボタンは濃い緑の塗り＋白文字。 - 白カードはグラデ背景上に置き、可読性を確保する。 - `nutrient-label` は文字 `#F4FEF4` × 背景 `#EC6C23` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C15111`、4.57:1）を使う。 - `recipe-card` は文字 `#F4FEF4` × 背景 `#EC6C23` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C15111`、4.57:1）を使う。 - `button-primary` は文字 `#F4FEF4` × 背景 `#1E8A3C` のコントラスト比が 4.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1D8439`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文大見出し | 装飾・ディスプレイ | Orbitron | 700 | 30px | 1.2 | 0.12em | | `headline-lg` | 背景上の日本語サブ見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.03em | | `headline-md` | カード内の見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.02em | | `body-md` | カード内本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `accent` | 番号バッジ・MORE表記 | 欧文サンセリフ | Montserrat | 800 | 24px | 1.0 | 0.05em | | `label-button` | ボタン・ラベル文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.03em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - 欧文見出しは角ばった幾何学系で全大文字・字間広め、白。 - 直下に日本語サブ見出しを太字白で置く。 - カード内見出しは中央揃え 2 行まで。 - 本文は左揃え、行間 1.8。 - 強調語は太字にせず蛍光ペン下線で示す。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品ラベルは 3 列グリッド、ナビは 2×2 - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは上下 60px 前後の余白で欧文見出しから始める。 - 白カードは左右 20px 前後の余白で全幅に近く置く。 - 動画は16:9でカード内いっぱい。 - レシピは写真＋色帯ラベルを縦に積む。 - 購入リンクはロゴボタンを 2×2 で並べる。 ## Elevation & Depth - 白カードは影なしかごく薄い影。 - ブランドラインナップのカードは柔らかい影＋大きな角丸。 - 購入ロゴボタンは薄い影。 - 吹き出しは影なしの白。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は波打つ不定形フレーム＋オレンジの影形。お客様アイコンは円形。 - **セクション境界**: 直線で背景グラデを切り替える - 番号バッジは手描き風に歪んだ黄色の四角。 - ボタンは角丸小さめの長方形。 - 吹き出しは左に三角の尾。 - グラフ上の数値は円形バッジ＋尾で強調。 ## Components - **ページ内ナビボタン**（`nav-tile`）: 白地に緑の細枠、太字黒文字の 2×2 ボタン - **欧文見出し＋和文サブ**（`section-title`）: 白抜き欧文大見出しの下に和文サブ見出し - **白コンテンツカード**（`content-card`）: 動画・見出し・本文・商品画像をまとめる白カード - **番号バッジ**（`number-badge`）: カード左上にはみ出す歪んだ黄色四角＋白数字 - **栄養ラベル**（`nutrient-label`）: 商品色で塗った角丸四角に白太字 - **お客様の声吹き出し**（`voice-bubble`）: 円形イラストアイコン＋白吹き出し - **レシピカード**（`recipe-card`）: グレー枠写真＋色帯タイトル＋MORE矢印、左上に色付き番号 - **詳しく見るボタン**（`button-primary`）: 濃い緑の長方形ボタン白文字 - **比較グラフ**（`chart-box`）: 緑の見出し帯＋薄黄背景の棒グラフ、オレンジ円で削減率 ## Do's and Don'ts **Do** - 背景はセクションごとに暖色と黄緑のグラデを交互に使う。 - コンテンツは必ず白カードに入れる。 - 見出しは白抜き欧文＋和文の2段にする。 - 商品ごとに固有色を割り当てラベルに使う。 - 強調は蛍光ペン下線で控えめに。 **Don't** - 暗い色やモノトーンの背景を使わない。 - グラデ背景上に細い本文を直接置かない。 - ボタンをピル型や大きな影にしない。 - 明朝体を使わない。 - 強調色を赤一色で多用しない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と商品を一目で伝える）: オレンジ背景に不定形フレームの家族写真、大きな手書き風コピー、商品パッケージ、小写真3枚 2. **ページ内ナビ**（各セクションへ誘導）: 白地緑枠のボタン 2×2 3. **動画**（CM動画を見せる）: 黄〜オレンジのグラデに動画タイトルと埋め込みを縦に2本 4. **出演者プロフィール**（起用人物を紹介）: 波形フレーム写真＋オレンジ影、名前と短い経歴を中央揃え 5. **こだわりポイント**（商品の特長を番号付きで説明）: 黄緑グラデに白カード、黄色番号バッジ、動画・本文・商品画像 6. **商品選び**（自分に合う商品を案内）: 商品画像の下に色分け栄養ラベルを 3 列 7. **開発者の声**（作り手の想いとデータで信頼づけ）: 濃緑背景に白カード、人物写真、下線付き本文、棒グラフ 8. **お客様の声**（共感と安心感）: オレンジグラデにイラストアイコン＋白吹き出し 9. **アレンジレシピ**（飲用以外の楽しみ方を提案）: 黄背景に写真＋色帯タイトルのカードを6枚縦積み 10. **商品情報**（ラインナップ紹介と詳細誘導）: 黄緑グラデに白カードのカルーセル、緑ボタンとドット 11. **ブランドラインナップ**（関連シリーズへ回遊）: 白背景に角丸影付きバナーカード 12. **購入先**（EC へ誘導）: 細枠ボックス内に通販ロゴボタン 2×2 ## Imagery - 人物は明るい屋外光で満面の笑顔の家族写真。 - 写真は波打つ不定形フレームで切り抜く。 - 料理写真は白皿・明るい俯瞰で彩りよく。 - お客様はシンプルな丸顔イラストを円背景に。 - 野菜と果物のみずみずしい素材写真をアクセントに。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅約 900px で中央寄せ。 - 動画は PC で 2 列並び。 - ポイントカード 1・2 は PC で 2 列。 - 栄養ラベル・商品情報は PC で 6 列／3 列グリッド。 - レシピは PC で 3×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-fead3dab`（元 LP の URL から採番） - **元 LP**: https://www.kagome.co.jp/products/brand/ys100/regular/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。