--- version: alpha name: Warm Beige Natural Plant Milk LP description: 生成りベージュの地にこげ茶の太い欧文ロゴ文字と焼きオレンジの丸バッジを合わせた、やさしい食品 LP。角の大きい白カードと有機的な曲線の境界で区切り、生活シーンの写真とフラットな人物イラストで親しみを出す。購入導線は白地に薄い影の EC モール風ボタンを何度も並べる。 colors: background: '#ECE4D9' background-alt: '#E9CFAC' surface: '#FEFEFD' primary: '#4A260B' accent-1: '#EC6B02' cta: '#EEE9E2' on-cta: '#13171B' secondary: '#9C7A5C' accent-2: '#F3DA8A' tint-1: '#EFD8BF' text-body: '#4A4038' tint-2: '#F7F4EE' line: '#D8D6CD' typography: display: fontFamily: Montserrat fontSize: 48px fontWeight: 800 lineHeight: 0.95 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Caveat fontSize: 16px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-ec: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px badge-number: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px bubble-worry: backgroundColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 60px card-product: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 520px label-limited: backgroundColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px card-set-offer: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 180px card-voice: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 110px heading-watermark: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 80px box-expert: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px --- # DESIGN.md — 生成りベージュ×焼きオレンジの植物性ミルク LP（Warm Beige Natural Plant Milk LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ナチュラル、やさしい・柔らかい、親しみ・手作り感、清潔・爽やか - **キーワード**: 生成りベージュ・焼きオレンジ・こげ茶の太字・大きな角丸カード・うっすら大きな欧文・朝の生活感 - **地の質感**: マットな無地の面。紙のような淡いベージュに白カードを重ねる。光沢やグラデーションは使わない。 - **形**: 角丸 24px 前後の大きなカード、丸いナンバーバッジ、吹き出し型の悩みカード、波のような有機的なセクション境界 - **温度感**: 暖色寄り。朝の光のような温かく穏やかなトーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#ECE4D9` | ページの基本地色（生成りベージュ） | 22% | 画素の実測 | | `background-alt` | `#E9CFAC` | フレーバー・購入セクションの濃いベージュ地 | 15% | 画素の実測 | | `surface` | `#FEFEFD` | カード・購入ボックスの白 | 12% | 画素の実測 | | `primary` | `#4A260B` | ロゴ文字・大見出しのこげ茶 | 3% | 画素の実測 | | `accent-1` | `#EC6B02` | ナンバーバッジ・限定ラベルの焼きオレンジ | 5% | 画素の実測 | | `cta` | `#EEE9E2` | 購入ボタンの白地（EC ボタン） | 2% | 画素の実測 | | `on-cta` | `#13171B` | 購入ボタン上の文字 | 0% | 画素の実測 | | `secondary` | `#9C7A5C` | 悩み吹き出し・ラベルの茶色 | 2% | 推定 | | `accent-2` | `#F3DA8A` | 特別セットセクションの黄色地 | 7% | 画素の実測 | | `tint-1` | `#EFD8BF` | 見出しの淡いオレンジのマーカー帯 | 1% | 画素の主要色に補正 | | `text-body` | `#4A4038` | 本文・成分表の文字 | 1% | 推定 | | `tint-2` | `#F7F4EE` | 背面の大きな欧文透かし文字 | 2% | 画素の主要色に補正 | | `line` | `#D8D6CD` | 成分表の区切り線・点線 | 0% | 画素の主要色に補正 | - 地は生成りベージュを基本に、商品・購入エリアは一段濃いベージュ、限定セットは黄色地に切り替える - 情報はすべて白カードに載せ、地色の上に直接本文を置かない - 焼きオレンジは番号バッジ・限定ラベル・特別セット枠など強調だけに使う - 見出しはこげ茶、黒は使わない - フレーバー別にカード上部を白・淡黄・淡茶で塗り分ける - セクション背面に地色よりわずかに明るい大きな欧文を透かしで置く ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名ロゴ風の大きな欧文 | 欧文サンセリフ | Montserrat | 800 | 48px | 0.95 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.06em | | `headline-md` | カード内見出し・フレーバー名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.04em | | `body-md` | 本文・声のコメント | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈・成分表 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 見出し横の手書き風欧文 | 欧文スクリプト | Caveat | 400 | 16px | 1.2 | 0.0em | | `label-button` | 購入ボタン・バッジ内文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.3 | 0.04em | - 見出しは中央揃えで 2 行に分け、キーワード部分だけ淡いオレンジのマーカーを敷く - セクション見出しの背面に 60px 超の大きな欧文を透かし文字で置く - 商品名は太い欧文を 2 段に積み、縦書きの小さなカナを添える - 見出しの強調語に小さな丸点（傍点）を付ける - 手書き風欧文を見出しの斜め上に傾けて添える - 数値・価格は太字で大きく、税込表記は小さく併記 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品カードは横スクロールか縦積み、PC は 3 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションは角丸の大きなパネルとして地色の上に浮かせる - 写真の帯セクションを挟み、中央に白い半透明ボックスでコピーを置く - 番号付きの特長は丸バッジを 2×2 に並べる - 購入ボタンは 2 種を縦に並べ、すべての商品カードの下に置く - 限定セットは横長カードで左に写真・右にオレンジ地の情報 ## Elevation & Depth - カードは影なしか、ごく薄い影（0 2px 8px rgba(0,0,0,.06)） - 購入ボタンは下方向に 2px の薄い影で押せる感を出す - 限定セット枠は黄色の太い縁取りで浮かせる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は四角い写真をそのまま背景に、商品は切り抜き。声のアバターは丸切り抜き - **セクション境界**: 大きな角丸パネルの上下端と、有機的な波形の曲線 - 番号・特長は正円バッジ - 悩みは角丸の吹き出し型 - ボタンは角丸 8px の長方形 - 限定ラベルは角丸のピル型 ## Components - **EC 購入ボタン**（`button-ec`）: 淡いグレージュ地に販売先ロゴ、右端に外部リンクアイコン。薄い影付き。 - **特長ナンバーバッジ**（`badge-number`）: オレンジの正円に小ラベル＋大きな数字、その下に白文字で特長を 2 行。 - **悩み吹き出し**（`bubble-worry`）: 茶色の角丸吹き出しに白文字で短い悩み、中央の人物イラストを囲んで配置。 - **フレーバー商品カード**（`card-product`）: 白カード上部をフレーバー色で塗り商品を切り抜き配置、下に名前・成分表・価格・購入ボタン。 - **限定ラベル**（`label-limited`）: オレンジのピルに白文字の数量限定、横に白地オレンジ文字の煽り文。 - **特別セットカード**（`card-set-offer`）: 黄色縁の横長カード。左が白地で商品写真、右がオレンジ地で名前・価格・購入ボタン。 - **お客様の声カード**（`card-voice`）: 白の角丸カードに丸アバター・年代性別・短いコメント。 - **透かし欧文見出し**（`heading-watermark`）: 背面に大きな白っぽい欧文、手前にこげ茶の日本語見出し。 - **専門家コメント枠**（`box-expert`）: 人物写真と、マーカー付き見出し・本文・肩書き名前を並べた枠。 ## Do's and Don'ts **Do** - 地色はベージュ系で統一し、白カードで情報をまとめる - オレンジは強調箇所に絞って使う - 購入導線は各商品の直下と最下部で繰り返す - 見出しに透かし欧文と手書き風欧文を添える - 人物写真は自然光で笑顔の生活シーンにする **Don't** - 純黒の文字や寒色のメイン色を使わない - 角の鋭い四角いカードにしない - 強いグラデーションや光沢を加えない - オレンジを広い面の地色に多用しない - 本文を地色の上に直接長く置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品名と飲む情景を一目で伝える）: 明るい室内で飲む女性の写真、左に太い欧文の商品名、オレンジのマーカー付きコピー、右下に商品パッケージとオレンジの丸バッジ 2. **購入導線**（すぐ買いたい人を EC へ送る）: 白い横長角丸カードに 3 商品・商品名・味ラベル・EC ボタン 2 つ 3. **悩みの提起**（朝食や栄養の悩みに共感）: 透かし欧文見出し、中央に考える人物イラスト、周りに茶色の吹き出し 4 つ 4. **解決ブリッジ**（悩みから商品へ転換）: 木のテーブルとグラスの写真帯、中央に白ボックスのコピー 5. **特長**（商品の良さを 4 点で示す）: 人物写真と商品の大型ロゴ、下にオレンジの丸バッジ 4 つ 6. **フレーバー紹介**（味の違いと成分を比較）: 濃いベージュ地に白カード 3 枚、成分表と購入ボタン 7. **写真ブリッジ**（生活への取り入れを想起）: くつろぐ女性の写真帯に白ボックスの問いかけコピー 8. **健康コンセプト解説**（健康面の根拠を示す）: 白カード内で栄養素の丸ラベル・認証マーク、下段に専門家写真とコメント 9. **限定セット訴求**（セット販売で客単価を上げる）: 黄色地に限定ラベル、組み合わせ見出し、オレンジの横長セットカード 10. **お客様の声**（実際の評価で安心させる）: キッチン写真の背景に白カード 3×2、丸アバターと年代 11. **最終 CTA**（購入を後押し）: 透かし欧文見出し、3 商品カードと価格・EC ボタン、再度限定セットカード、最下部に EC ボタン 2 つ ## Imagery - 自然光の白い室内で、20〜30 代女性が笑顔で飲むシーン - 木目のテーブルに置いたグラスなど、温かい生活感の静物 - 人物はベージュや淡ブルーの柔らかい服装、背景は少しぼかす - 悩みは線の少ないフラットな人物イラストと観葉植物 - 商品パッケージは白背景で切り抜き、豆の粒を散らす - 専門家は白衣の正面写真で信頼感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は 1 カラム、商品カード 3 枚は縦積みか横スクロール - PC のファーストビュー左右配置は、SP では商品名を写真の上に重ねて縦に積む - 特長バッジは PC で 4 列、SP で 2×2 - 限定セットカードは SP で写真を上・オレンジ情報を下に縦並べ - 透かし欧文は SP で 48px 程度に縮小する - お客様の声は PC 3 列、SP 1 列 ## 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-79c6ce72`（元 LP の URL から採番） - **元 LP**: https://www.calbee.co.jp/planty/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。