紺×水色の牛柄ファミリー向け健康菓子LP

Navy Cow-Spot Family Health Snack LP

濃紺を主役に、水色や生成り、木目の写真を組み合わせた健康おやつのLP。縦長の1カラムで、牛柄のイラストや吹き出し、ピル型ラベルを使って親しみやすさを出しつつ、数字を大きく見せる訴求も効かせている。

健康食品・サプリメント清潔・爽やか親しみ・手作り感信頼・誠実情報量多め・訴求型PC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

見出しはほぼすべて紺の太字にする
割引率などの強い数字だけを赤にする
地は白・生成り・水色を交互に切り替えて、セクションを区切る
黄色はクーポン帯と、見出しの短い下線だけに使う
LINE誘導には黒の帯と緑の文字を使う
茶色は木目の写真や生成りの面になじませて、温かみを出すために使う

TYPOGRAPHY

書体

displayFVの見出し・大きな数字ゴシック／ Zen Kaku Gothic New 900 ／ 40px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出しゴシック／ Zen Kaku Gothic New 700 ／ 30px ／行間 1.45

あなたの LP を、もっと伝わる形に。Aa 123

headline-md小見出し・リードゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-smカードの見出し・ラベルゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 400 ／ 14px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note※の注釈ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

accent手書き風の英字欧文スクリプト／ Caveat 400 ／ 18px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

label-button帯ボタン・ピル型ラベルゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

見出しは2〜3行に改行して、中央か左に揃える
数字は周りの文字の2倍ほどに大きくし、単位は小さくする
読み方を示すルビを小さく添える
引用符やカギ括弧を使って、強調したい言葉を目立たせる
注釈は数字のすぐ下に小さく置く

PAGE STRUCTURE

セクション構成

ファーストビュー新発売セールの告知紺の帯に白い見出し。水色の地に商品を散らした写真を置き、新登場のバッジを添える
クーポン訴求まとめ買いの促進黄色の地に段階割引カードを置き、期間をラベルで示す
LINEクーポン友だち登録への誘導白い地に縮小した割引カードを置き、黒の誘導帯につなげる
コンセプト提示商品の位置づけを示す問いかけの見出しと牛のイラスト。全幅写真の上に見出しを縦に重ねる
商品紹介成分の量を訴求木目の上の商品写真に、数字の白文字と成分リストを重ねる
数字比較効果を分かりやすく示す写真の上に、白い大きな数字で等式を置く。プラス記号で次の訴求につなげる
実績・メディア信頼を補強する紺の地に白いカード。ランキングと雑誌掲載を並べる
味の訴求おいしさを伝える子どもの写真に手書きの英字を添え、ピル型ラベルを置く
こんな方にターゲットの共感を得る生成りの地に傾けた写真3枚。それぞれに吹き出しを重ねる
成分詳細由来と根拠を示す成分を放射状に並べた図と線画イラスト。粉の写真の上に説明文を置く
栄養成分付加価値を示す水色の写真に、栄養成分タイルを3列×2段で並べる
安心・こだわり原料の安全性を伝える紺見出し付きカードに素材写真2枚。家族の写真と大きな吹き出しを添える

COMPONENTS

部品

段階割引カード coupon-card赤枠の白いカード。中を点線で区切り、割引率を赤の大きな数字で3段に並べる
LINE誘導帯 line-bar全幅の黒い帯に、三角アイコンと白文字を置く
ピル型ラベル label-pill紺地に白文字。味や区分を短い言葉で示す
手描き吹き出し speech-bubble白地を紺の線で囲み、悩みや声を短く書く
プラス記号 plus-circle紺の丸に白い十字。訴求をつなぐ
栄養成分タイル nutrient-tile白い角丸ボックスに、成分名と量を紺の文字で入れる
紺見出し付きカード framed-card上部に紺の見出し帯、中に写真2枚と説明文を入れる
下線付き見出し heading-marker紺の見出しの下に、黄色い短い線を引く

守ること

見出しは紺の太いゴシックに統一する
数字の訴求は大きく、注釈を必ず添える
牛柄の手描きイラストを、ページの端に小さく添える
子どもや家族の自然な写真を使う
地は白・水色・生成りで切り替える

DON'T

避けること

赤を見出しや面に多く使わない
強いドロップシャドウやグラデーションのボタンを使わない
明朝体を使わない
暗い背景のセクションを多用しない
吹き出しを直線的な四角にしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（新発売セールの告知）: 紺の帯に白い見出し。水色の地に商品を散らした写真を置き、新登場のバッジを添える
クーポン訴求（まとめ買いの促進）: 黄色の地に段階割引カードを置き、期間をラベルで示す
LINEクーポン（友だち登録への誘導）: 白い地に縮小した割引カードを置き、黒の誘導帯につなげる
コンセプト提示（商品の位置づけを示す）: 問いかけの見出しと牛のイラスト。全幅写真の上に見出しを縦に重ねる
商品紹介（成分の量を訴求）: 木目の上の商品写真に、数字の白文字と成分リストを重ねる
数字比較（効果を分かりやすく示す）: 写真の上に、白い大きな数字で等式を置く。プラス記号で次の訴求につなげる
実績・メディア（信頼を補強する）: 紺の地に白いカード。ランキングと雑誌掲載を並べる
味の訴求（おいしさを伝える）: 子どもの写真に手書きの英字を添え、ピル型ラベルを置く
こんな方に（ターゲットの共感を得る）: 生成りの地に傾けた写真3枚。それぞれに吹き出しを重ねる
成分詳細（由来と根拠を示す）: 成分を放射状に並べた図と線画イラスト。粉の写真の上に説明文を置く
栄養成分（付加価値を示す）: 水色の写真に、栄養成分タイルを3列×2段で並べる
安心・こだわり（原料の安全性を伝える）: 紺見出し付きカードに素材写真2枚。家族の写真と大きな吹き出しを添える

Imagery

商品とその粒を、水色の地に俯瞰で散らして撮る
ヨーグルトの瓶や粉を、木目のテーブルの上で自然光で撮る
子どもや母親の自然な笑顔を、明るい室内で撮る
牛柄の手描きイラストを、白黒に紺の線で描く
原料は単色の線画アイコンで描く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央に幅 750px 前後の縦長カラムを置き、左右の余白は白にする
SP は画像の幅をそのまま 375px に縮小する
SP の見出しは 26〜32px にする
栄養成分タイルは SP でも3列を保つ

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://www.has710.com/view/category/tubuyogurt（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

健康食品・サプリメントピンク×抹茶グリーンのイラスト系スムージー LPSoft Pink and Matcha Green Illustrated Smoothie LP 健康食品・サプリメントマゼンタ×黒金の訴求型ボディサプリ LPHot Pink and Gold Body Supplement Sales LP 健康食品・サプリメント若草緑×オレンジの置き換えスムージー LPFresh Green Smoothie Diet LP 健康食品・サプリメントクリーム×テラコッタの子ども向け栄養食品 LPWarm Cream Family Nutrition LP 健康食品・サプリメント朱色×栄養素別カラーの女性向けプロテインLPWarm Orange Multi-Color Nutrition Supplement LP 健康食品・サプリメント淡いセージ緑と手書き感の家族向け青汁 LPSoft Sage Family Green Juice LP