--- version: alpha name: Navy Cow-Spot Family Health Snack LP description: 濃紺を主役に、水色や生成り、木目の写真を組み合わせた健康おやつのLP。縦長の1カラムで、牛柄のイラストや吹き出し、ピル型ラベルを使って親しみやすさを出しつつ、数字を大きく見せる訴求も効かせている。 colors: primary: '#01346C' on-primary: '#F5FDFD' background: '#FEFEFE' background-alt: '#F2ECE2' secondary: '#8ABFCB' accent-1: '#F5C31C' cta: '#AA352E' dark-section: '#090504' on-cta: '#F9F6F5' accent-2: '#3FA535' text: '#333333' text-muted: '#9E7F65' tint-1: '#D5E5EB' marker: '#F2D24A' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.06em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Caveat fontSize: 18px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 6px 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}' coupon-card: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.display}' rounded: '{rounded.md}' height: 220px line-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 48px label-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px plus-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 48px nutrient-tile: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 50px framed-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 280px heading-marker: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 60px --- # DESIGN.md — 紺×水色の牛柄ファミリー向け健康菓子LP（Navy Cow-Spot Family Health Snack LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 清潔・爽やか、親しみ・手作り感、信頼・誠実、情報量多め・訴求型 - **キーワード**: 濃紺・水色・牛柄イラスト・吹き出し・大きい数字・家族 - **地の質感**: 白と水色のフラットな面と、木目や粉、ヨーグルトを写した実写の写真。生成りの面には紙のような淡いテクスチャを入れる - **形**: 角丸カード、ピル型ラベル、手描き調の吹き出し、丸いプラス記号 - **温度感**: 爽やかでやや温かい。紺と水色の寒色に、生成りと木の茶色を加えて温度を上げる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#01346C` | 見出し文字・帯・ラベル | 8% | 画素の主要色に補正 | | `on-primary` | `#F5FDFD` | 紺地上の文字 | 2% | 画素の実測 | | `background` | `#FEFEFE` | 基本の地 | 29% | 画素の実測 | | `background-alt` | `#F2ECE2` | 生成りテクスチャの地 | 7% | 画素の実測 | | `secondary` | `#8ABFCB` | 爽やかな水色の地 | 5% | 画素の主要色に補正 | | `accent-1` | `#F5C31C` | クーポン帯の黄色 | 3% | 画素の実測 | | `cta` | `#AA352E` | 割引数字・強調の赤 | 1% | 画素の実測 | | `dark-section` | `#090504` | 黒のLINE誘導帯 | 1% | 画素の実測 | | `on-cta` | `#F9F6F5` | 黒帯上の文字 | 0% | 画素の実測 | | `accent-2` | `#3FA535` | 見出しの緑・LINE色 | 0% | 推定 | | `text` | `#333333` | 本文の文字 | 1% | 推定 | | `text-muted` | `#9E7F65` | 見出しのくすんだ茶色・グレー | 2% | 画素の主要色に補正 | | `tint-1` | `#D5E5EB` | 淡い水色のグラデーション地 | 6% | 画素の実測 | | `marker` | `#F2D24A` | 見出しの黄色い下線 | 0% | 推定 | - 見出しはほぼすべて紺の太字にする - 割引率などの強い数字だけを赤にする - 地は白・生成り・水色を交互に切り替えて、セクションを区切る - 黄色はクーポン帯と、見出しの短い下線だけに使う - LINE誘導には黒の帯と緑の文字を使う - 茶色は木目の写真や生成りの面になじませて、温かみを出すために使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの見出し・大きな数字 | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.3 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.45 | 0.06em | | `headline-md` | 小見出し・リード | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-sm` | カードの見出し・ラベル | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 手書き風の英字 | 欧文スクリプト | Caveat | 400 | 18px | 1.2 | 0.0em | | `label-button` | 帯ボタン・ピル型ラベル | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.05em | - 見出しは2〜3行に改行して、中央か左に揃える - 数字は周りの文字の2倍ほどに大きくし、単位は小さくする - 読み方を示すルビを小さく添える - 引用符やカギ括弧を使って、強調したい言葉を目立たせる - 注釈は数字のすぐ下に小さく置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC も中央に縦長の 1 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は画面幅いっぱいに置き、見出しを写真の上に重ねる - セクションごとに地の色を変える - プラス記号の丸を挟んで、訴求を順につなげる - 吹き出しは写真の角に少し重ねて、ずらして配置する ## Elevation & Depth - 影はほぼ使わずフラットにする - 写真カードはわずかに傾けて白枠をつけ、薄い影を落とす - カードは紺の線で囲んで区切る ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は全幅の四角か白枠付きの四角。素材写真は角丸のカードに入れる - **セクション境界**: 直線で地の色を切り替える - 吹き出しは紺の線で、手描き調の楕円にする - ラベルは紺地に白文字のピル型にする - 栄養成分はタイル状の角丸ボックスで並べる ## Components - **段階割引カード**（`coupon-card`）: 赤枠の白いカード。中を点線で区切り、割引率を赤の大きな数字で3段に並べる - **LINE誘導帯**（`line-bar`）: 全幅の黒い帯に、三角アイコンと白文字を置く - **ピル型ラベル**（`label-pill`）: 紺地に白文字。味や区分を短い言葉で示す - **手描き吹き出し**（`speech-bubble`）: 白地を紺の線で囲み、悩みや声を短く書く - **プラス記号**（`plus-circle`）: 紺の丸に白い十字。訴求をつなぐ - **栄養成分タイル**（`nutrient-tile`）: 白い角丸ボックスに、成分名と量を紺の文字で入れる - **紺見出し付きカード**（`framed-card`）: 上部に紺の見出し帯、中に写真2枚と説明文を入れる - **下線付き見出し**（`heading-marker`）: 紺の見出しの下に、黄色い短い線を引く ## Do's and Don'ts **Do** - 見出しは紺の太いゴシックに統一する - 数字の訴求は大きく、注釈を必ず添える - 牛柄の手描きイラストを、ページの端に小さく添える - 子どもや家族の自然な写真を使う - 地は白・水色・生成りで切り替える **Don't** - 赤を見出しや面に多く使わない - 強いドロップシャドウやグラデーションのボタンを使わない - 明朝体を使わない - 暗い背景のセクションを多用しない - 吹き出しを直線的な四角にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新発売セールの告知）: 紺の帯に白い見出し。水色の地に商品を散らした写真を置き、新登場のバッジを添える 2. **クーポン訴求**（まとめ買いの促進）: 黄色の地に段階割引カードを置き、期間をラベルで示す 3. **LINEクーポン**（友だち登録への誘導）: 白い地に縮小した割引カードを置き、黒の誘導帯につなげる 4. **コンセプト提示**（商品の位置づけを示す）: 問いかけの見出しと牛のイラスト。全幅写真の上に見出しを縦に重ねる 5. **商品紹介**（成分の量を訴求）: 木目の上の商品写真に、数字の白文字と成分リストを重ねる 6. **数字比較**（効果を分かりやすく示す）: 写真の上に、白い大きな数字で等式を置く。プラス記号で次の訴求につなげる 7. **実績・メディア**（信頼を補強する）: 紺の地に白いカード。ランキングと雑誌掲載を並べる 8. **味の訴求**（おいしさを伝える）: 子どもの写真に手書きの英字を添え、ピル型ラベルを置く 9. **こんな方に**（ターゲットの共感を得る）: 生成りの地に傾けた写真3枚。それぞれに吹き出しを重ねる 10. **成分詳細**（由来と根拠を示す）: 成分を放射状に並べた図と線画イラスト。粉の写真の上に説明文を置く 11. **栄養成分**（付加価値を示す）: 水色の写真に、栄養成分タイルを3列×2段で並べる 12. **安心・こだわり**（原料の安全性を伝える）: 紺見出し付きカードに素材写真2枚。家族の写真と大きな吹き出しを添える ## Imagery - 商品とその粒を、水色の地に俯瞰で散らして撮る - ヨーグルトの瓶や粉を、木目のテーブルの上で自然光で撮る - 子どもや母親の自然な笑顔を、明るい室内で撮る - 牛柄の手描きイラストを、白黒に紺の線で描く - 原料は単色の線画アイコンで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅 750px 前後の縦長カラムを置き、左右の余白は白にする - SP は画像の幅をそのまま 375px に縮小する - SP の見出しは 26〜32px にする - 栄養成分タイルは SP でも3列を保つ ## 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-10ba1808`（元 LP の URL から採番） - **元 LP**: https://www.has710.com/view/category/tubuyogurt - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。