--- version: alpha name: Fresh Green Vegetable Soup Health Food LP description: 深緑と黄緑を基調に、橙・黄を強調色に使った健康食品の通販LP。白い器の料理写真や素材写真と、明朝の情緒的な見出し、太ゴシックの数字訴求を組み合わせている。ナチュラルな雰囲気と訴求力を両立させた構成。 colors: primary: '#005140' secondary: '#AECE01' cta: '#2E8B1E' on-cta: '#FFFFFF' accent-1: '#F36801' accent-2: '#DB330B' marker: '#FED501' background: '#FDFDFD' background-alt: '#EAEBE6' tint-1: '#F5F1DD' dark-section: '#14261A' text: '#313129' on-dark: '#FFFFFF' line: '#1E6B45' cta-accessible: '#2D871D' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 32px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 14px lg: 24px 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.full}' height: 76px price-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.md}' height: 360px feature-card: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 620px worry-note: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 280px badge-round: typography: '{typography.note}' rounded: '{rounded.full}' height: 110px heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 90px voice-card: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 110px ingredient-circle: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px --- # DESIGN.md — 深緑×黄緑×橙の野菜スープ健康食品LP（Fresh Green Vegetable Soup Health Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ナチュラル、信頼・誠実、情報量多め・訴求型、清潔・爽やか - **キーワード**: 国産野菜・深緑と黄緑・白い器の料理写真・明朝×太ゴシック・数字訴求・波形の区切り - **地の質感**: 白い漆喰風の薄いテクスチャ地と、写真を重ねたフラットな色面 - **形**: 角丸カード・ピル型の立体CTA・円形バッジ・大きな波形の区切り - **温度感**: 温かみのある自然派で、少し温度高めの訴求 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#005140` | ブランドの深緑（帯・ダークセクション） | 10% | 画素の実測 | | `secondary` | `#AECE01` | 黄緑のセクション地・カード見出し | 15% | 画素の実測 | | `cta` | `#2E8B1E` | CTAボタンの緑グラデーション | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTAボタンの文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#F36801` | 橙の強調・番号・価格丸バッジ | 6% | 画素の実測 | | `accent-2` | `#DB330B` | 価格・数字の赤 | 0% | 画素の実測 | | `marker` | `#FED501` | 黄色マーカー・黄色セクション | 4% | 画素の実測 | | `background` | `#FDFDFD` | 白い基本地 | 17% | 画素の実測 | | `background-alt` | `#EAEBE6` | 薄いグレーのテクスチャ地 | 15% | 画素の実測 | | `tint-1` | `#F5F1DD` | 生成りの付箋カード・ベージュ地 | 4% | 画素の実測 | | `dark-section` | `#14261A` | 悩みセクションの黒緑地 | 3% | 推定 | | `text` | `#313129` | 見出し・本文の濃い文字 | 3% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い地の上の白文字 | 1% | 画素の主要色に補正 | | `line` | `#1E6B45` | 価格カードの緑枠 | 0% | 推定 | | `cta-accessible` | `#2D871D` | AA を満たす補正値（計算） | | 計算 | - 基本の地は白か薄いグレーのテクスチャにし、深緑・黄緑・黄・橙の帯を交互に挟んでリズムを作る - 深緑はブランドの帯や科学的説明に、黄緑は特長カードや商品紹介に使う - 橙は番号・お客様の声の地・円形の価格バッジに限って使う - 価格の数字は赤、その周りの補助文字は黒にする - 黄色は見出し下のマーカーと、主張を見せるセクションの地に使う - CTAは緑のグラデーションで立体感を出し、白文字と白い▼を入れる - `button-primary` は文字 `#FFFFFF` × 背景 `#2E8B1E` のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2D871D`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 実績数字・割引率 | ゴシック | Dela Gothic One | 900 | 72px | 1.1 | 0.0em | | `headline-lg` | 情緒的な大見出し（縦書きを含む） | 明朝 | Shippori Mincho | 600 | 34px | 1.4 | 0.05em | | `headline-md` | セクション見出し・帯見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.5 | 0.03em | | `headline-sm` | カード内の小見出し・利用シーンの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.02em | | `note` | 注釈・算出根拠 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 欧文ブランド表記・番号 | 欧文セリフ | Playfair Display | 500 | 32px | 1.2 | 0.02em | | `label-button` | CTAの文言 | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.05em | - 情緒的なコピーは明朝で書き、縦書きにして縦線を添える - 数字と価格は極太ゴシックで大きくし、単位は小さくする - 見出しの一部の語だけ橙にするか、文字を大きくして抑揚をつける - キーワードの下には黄色いマーカー線を引く - 番号は橙の欧文セリフにする - 注釈は小さく、関係する要素のすぐ下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。素材の円形アイコンだけ 4 列に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 特長カードは上部が黄緑の見出し、下部が白い本文の2段にする - 利用シーンは見出しを写真に少し重ね、白いキャプション箱を下に置く - セクションの間に大きな写真を全幅で挟む - 購入までの流れの中にCTAを3回置く - 装飾として野菜の切り抜き写真を画面端に散らす ## Elevation & Depth - CTAボタンには下方向に濃い影をつけ、立体的に見せる - 白いカードには淡い影をつける - 利用シーンのキャプション箱にもごく薄い影をつける - 暗い写真の上には影を置かず、色面だけで見せる ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 角丸の矩形と人物の円形切り抜き。商品と野菜は背景を抜いて置く - **セクション境界**: 大きな曲線の波形と斜めのカット、下向きの三角 - 番号を入れた特長カードの上には半円のタブを出す - 価格カードは緑枠で囲み、下に吹き出しの尖りをつける - 素材名は細い線の円で囲む - 価格は橙の円形バッジに入れて強調する ## Components - **立体ピルCTA**（`button-primary`）: 緑のグラデーションに白文字2行と右端の▼を入れ、影で立体感を出す - **価格オファーカード**（`price-card`）: 緑枠の白カード。帯見出しの下に取り消し線の通常価格、赤の大きな価格、橙の丸バッジを置く - **番号付き特長カード**（`feature-card`）: 黄緑の上部に半円タブと橙の番号を置き、明朝の見出し、写真、白地の本文と続ける - **悩みのメモカード**（`worry-note`）: 生成りの付箋カードを画鋲で留めた見た目にし、橙のチェックアイコンで悩みを3つ並べる - **円形の実績バッジ**（`badge-round`）: 紺と金のメダル風エンブレムにリボンをつける - **深緑の帯見出し**（`heading-band`）: 商品画像の横に深緑の帯を敷き、白文字で権威を示す見出しを置く - **お客様の声カード**（`voice-card`）: 橙の地に白いカードを置き、人物イラストと声を左右交互に配置して、属性は緑の小さな文字で添える - **素材の円タグ**（`ingredient-circle`）: 細い黒線の円の中に素材名を小さく入れる ## Do's and Don'ts **Do** - 実績の数字は極太で大きく、赤か深緑で見せる - 白い器に盛ったスープの写真を何度も登場させる - 明朝の情緒的なコピーと、ゴシックの具体的な訴求を交互に置く - 根拠を示す注釈は必ず添える - 色の帯は波形や斜めで区切り、動きを出す **Don't** - 青や紫をメインの色に使わない - CTAを平板な四角にしない - 白地だけのセクションを3つ以上続けない - 装飾フォントを多用しない - 写真の上に注釈なしで効果を断言する表現を載せない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の特徴と権威を一目で伝える）: 野菜とスープの写真の上に、白い帯で明朝の見出しを2段重ねる。メダルバッジと深緑の帯も置く 2. **実績訴求**（販売数で信頼を得る）: 紙吹雪を散らした明るい背景に、赤い極太数字と商品を2つ並べる 3. **オファー・CTA**（初回価格を提示して申込を促す）: 大きな割引率、緑枠の価格カード、立体CTAの順に置く 4. **悩みの提起**（共感を得る）: 黒緑の地にメモカードと悩む人物の写真を置き、下端は三角で区切る 5. **解決提示**（商品を答えとして示す）: 吹き出しラベル、黄色マーカーを引いた明朝見出し、スプーンの写真の順に置く 6. **こだわり**（品質の根拠を伝える）: 番号付きの黄緑カードを4枚、縦に並べる 7. **利用シーン**（自分ごと化させる）: 橙の波形帯に縦書きコピーを入れ、写真とキャプションのブロックを4つ置く 8. **仕組みの説明**（科学的な根拠を示す）: 暗い葉の写真に縦書きを重ね、深緑の地に図解と比較グラフを置く 9. **監修者紹介**（権威付け）: 白い地に、橙の見出しと人物写真、経歴を並べる 10. **商品ラインナップ**（味の違いを伝える）: 黄緑の地にパッケージ、色付きの名前、器の写真、素材の円タグを置く 11. **専門家コメント**（第三者の推薦）: ベージュの地に、黄と深緑のラベル見出しと白いカードを置く 12. **お客様の声**（社会的証明）: 橙の地に白いカードを3枚、人物イラストを左右交互にして並べる 13. **メディア掲載・企業信頼**（信頼の補強）: スマホ画面のモックとロゴを3列で並べ、工場の写真と認証バッジの枠を置く 14. **最終CTA**（購入を後押しする）: 価格カードと立体CTAを再び置く ## Imagery - 白い陶器の器に盛ったスープを、明るい自然光で斜め上から撮る - 生の野菜とまな板を白い卓上に並べ、俯瞰で撮る - 白い背景で撮った商品パウチを、2種類並べて見せる - 白シャツ・オフィス服の人物写真を、柔らかいトーンで使う - 野菜の切り抜きを装飾として画面端に散らす - お客様の声は顔を描かないフラットな人物イラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に 750px 前後の 1 カラム幅でそのまま表示する - PC の左右の余白には薄いグレーのテクスチャ地を敷く - PC でも縦書きコピーや波形の区切りは維持する - メディアのロゴは PC で4列に広げてもよい - CTA は SP と同じく 90% 幅のまま固定する ## 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-959acf5d`（元 LP の URL から採番） - **元 LP**: https://we-vegetable.com/lp?u=lp01_b&utm_source - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。