紺×金×赤の医薬品通販 LP

Deep Navy Pharmaceutical Supplement Sales LP

深い紺の光彩背景に金のグラデ明朝見出しと赤の価格訴求を重ねた、医薬部外品の初回お試し通販 LP。成分を色付きの丸で見せ、老舗の信頼を写真で示し、緑の大きな申込ボタンへ何度も誘導する。

健康食品・サプリメント信頼・誠実力強い・インパクト情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

紺の面と白/薄グレーの面を交互に配置する
価格の数字と煽り見出しは赤、権威・効能見出しは金グラデ
申込ボタンは緑に限定し他で使わない
成分バッジは紫・黄・橙・緑・赤など彩度高い色を個別に割り当てる
お客様の声と特典はクラフト紙・金茶系で温かみを出す
本文中の要点は黄マーカーで強調

TYPOGRAPHY

書体

displayFVの大コピー（白・赤の極太、縁取り）ゴシック／ Dela Gothic One 900 ／ 44px ／行間 1.2

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

headline-lg紺地の金グラデ明朝見出し明朝／ Shippori Mincho 800 ／ 30px ／行間 1.35

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

headline-md白地のセクション見出し明朝／ Noto Serif JP 700 ／ 24px ／行間 1.4

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

headline-sm特典見出し・チェックリストゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.5

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

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

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

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

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

accentお客様の声の手書きメモ・沿革の筆文字手書き・筆／ Yomogi 400 ／ 14px ／行間 1.7

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

label-button申込ボタン文字ゴシック／ Noto Sans JP 900 ／ 20px ／行間 1.3

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

効能・権威の見出しは明朝、煽りと価格は極太ゴシック
金グラデ文字は紺地の上だけで使う
価格数字は明朝太字で単位より大きく、税込は小さく添える
見出しの一部の語だけを赤や大きさで強調する
注釈は※付きで小さく一括表示

PAGE STRUCTURE

セクション構成

ファーストビュー悩みと効果を一言で掴む紺の光彩背景に白と赤の極太コピー、商品瓶を中央、周りに悩みの丸バッジ、黄の限定帯
初回オファー即申込を促す明るい青の地に白いオファーボックスと緑ボタン、下に注釈
悩みの提起共感紺帯の明朝見出し、寝ている中高年の写真、チェックリスト4行
おすすめ対象・効能効く内容を示す白地の明朝見出しと効能カード
成分紹介配合成分の豊富さ紺の六角形背景に色付き丸バッジと商品写真
仕組みの図解作用を分かりやすく稲妻背景に金の大見出し、白カード内の矢印図
共感コピー・開発者の声理念の伝達赤紺の大見出し、ラボ写真のヘッダー、黄マーカー本文
企業の歴史と品質信頼の担保和紙風ベージュに筆文字見出しとモノクロ写真、工場写真に品質バッジ
商品沿革実績年号付き左右交互タイムライン
追加の効能・成分価値の再確認紺の光彩背景に効能カードと成分バッジを再掲
オファー再掲申込初回オファーと同じボックス
よくある質問不安解消白地にQ/A枠カードを縦積み
お客様の声社会的証明クラフト紙にリボン見出しと付箋型の手書きメモ
定期特典とクロージング定期購入へ誘導金枠の4特典カード、青地の定期オファーボックスと緑ボタン

COMPONENTS

部品

申込ボタン button-primary緑のグラデ横長ボタン。左端に黄の吹き出しで1日あたり価格、上段に小さな訴求文
お試し価格ボックス offer-box金の見出し帯、商品写真、通常価格→赤い特価の比較
成分の丸バッジ ingredient-badge色ごとの楕円に白い成分名、光る紺背景に散らす
悩みチェックリスト check-list赤いチェック枠付きの行を4つ、キーワードを赤字
効能リストカード benefit-card白角丸カードに○付き項目を縦に並べる
特典カード perk-card赤い番号ラベル＋茶の見出し帯＋白本文
FAQ faq-item枠線カード、Qは紺・Aは赤の明朝
お客様の声の付箋 sticky-noteクラフト紙地にテープ留めのメモ、手書き文字と年代

守ること

紺地には放射光や光の粒子を入れる
価格は必ず通常価格と特価を並べる
申込ボックスを複数回繰り返す
注釈を価格の近くに明記する
権威・歴史をモノクロ写真で示す

DON'T

避けること

緑をボタン以外に使わない
パステル調や余白過多のミニマル表現にしない
金グラデ文字を白地に置かない
見出しを細い書体にしない
効能表現を注釈なしで出さない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 紺×金×赤の医薬品通販 LP（Deep Navy Pharmaceutical Supplement Sales LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

業種: 健康食品・サプリメント／ 雰囲気: 信頼・誠実、力強い・インパクト、情報量多め・訴求型
キーワード: 紺の光彩背景・金グラデ明朝・赤い価格数字・成分の丸バッジ・老舗の信頼・緑の申込ボタン
地の質感: 紺の面に放射光・六角形・稲妻のエフェクトを重ねる。クラフト紙やベージュの和紙風テクスチャ。白い面はフラット。
形: 角丸カード、楕円の成分バッジ、斜めの帯、リボン型ラベル
温度感: 寒色の紺がベースで、赤・金・オレンジの暖色アクセントで熱を出す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#032D6D`	ブランドの紺（FV・訴求セクションの地）	25%	画素の主要色に補正
`dark-section`	`#040D4E`	最も深い紺の背景	8%	画素の主要色に補正
`secondary`	`#1D4B8D`	明るい青（申込エリアの地）	6%	画素の主要色に補正
`accent-1`	`#D7141E`	価格・見出しの赤	3%	推定
`cta`	`#019324`	申込ボタンの緑	2%	画素の実測
`on-cta`	`#FFFFFF`	ボタン上の白文字	1%	画素の主要色に補正
`background`	`#FEFEFE`	白い基本地	20%	画素の実測
`background-alt`	`#E2E2E2`	薄いグレーの区切り地	10%	画素の実測
`accent-2`	`#BFA78B`	金・ゴールドの見出し/枠	6%	画素の主要色に補正
`tint-1`	`#BFA78B`	クラフト紙風のベージュ	5%	画素の主要色に補正
`accent-3`	`#5A2E14`	特典見出し帯の茶	2%	推定
`text`	`#050418`	本文の濃紺/黒	4%	画素の実測
`marker`	`#FFF27A`	重要文の黄マーカー	0%	推定
`accent-1-sub`	`#FEE302`		1%	画素の実測
`cta-accessible`	`#018922`	AA を満たす補正値（計算）		計算

紺の面と白/薄グレーの面を交互に配置する
価格の数字と煽り見出しは赤、権威・効能見出しは金グラデ
申込ボタンは緑に限定し他で使わない
成分バッジは紫・黄・橙・緑・赤など彩度高い色を個別に割り当てる
お客様の声と特典はクラフト紙・金茶系で温かみを出す
本文中の要点は黄マーカーで強調
button-primary は文字 #FFFFFF × 背景 #019324 のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018922、4.56:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの大コピー（白・赤の極太、縁取り）	ゴシック	Dela Gothic One	900	44px	1.2	0.0em
`headline-lg`	紺地の金グラデ明朝見出し	明朝	Shippori Mincho	800	30px	1.35	0.03em
`headline-md`	白地のセクション見出し	明朝	Noto Serif JP	700	24px	1.4	0.02em
`headline-sm`	特典見出し・チェックリスト	ゴシック	Noto Sans JP	700	18px	1.5	0.0em
`body-md`	本文・FAQ回答	ゴシック	Noto Sans JP	400	14px	1.8	0.0em
`note`	※注釈	ゴシック	Noto Sans JP	400	10px	1.6	0.0em
`accent`	お客様の声の手書きメモ・沿革の筆文字	手書き・筆	Yomogi	400	14px	1.7	0.0em
`label-button`	申込ボタン文字	ゴシック	Noto Sans JP	900	20px	1.3	0.02em

効能・権威の見出しは明朝、煽りと価格は極太ゴシック
金グラデ文字は紺地の上だけで使う
価格数字は明朝太字で単位より大きく、税込は小さく添える
見出しの一部の語だけを赤や大きさで強調する
注釈は※付きで小さく一括表示
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、成分は丸バッジを 2〜3 列で散らす
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
申込ボックスはページ上部・中盤・末尾の 3 回置く
見出しは中央揃え、本文は左揃え
沿革は中央線を挟んだ左右交互のタイムライン
特典は番号ラベル付きの縦積みカード

Elevation & Depth

白カードに薄いドロップシャドウ
申込ボタンは下方向の影で立体感
商品写真に光彩・反射を付ける
声の付箋は少し傾けて影を付ける

Shapes

角丸: 小 4px ／中 8px ／大 16px。ボタンは角丸の長方形。
写真の切り抜き: 商品は切り抜き、人物・工場は矩形や斜めカット
セクション境界: 直線区切りが基本。FVは斜めの帯、工場写真は斜め切り
申込ボタンは角丸8px程度の横長
成分は楕円バッジ
リボン型ラベルで小見出しを囲む
FAQはQ/Aの赤紺文字を付けた枠カード

Components

申込ボタン（button-primary）: 緑のグラデ横長ボタン。左端に黄の吹き出しで1日あたり価格、上段に小さな訴求文
お試し価格ボックス（offer-box）: 金の見出し帯、商品写真、通常価格→赤い特価の比較
成分の丸バッジ（ingredient-badge）: 色ごとの楕円に白い成分名、光る紺背景に散らす
悩みチェックリスト（check-list）: 赤いチェック枠付きの行を4つ、キーワードを赤字
効能リストカード（benefit-card）: 白角丸カードに○付き項目を縦に並べる
特典カード（perk-card）: 赤い番号ラベル＋茶の見出し帯＋白本文
FAQ（faq-item）: 枠線カード、Qは紺・Aは赤の明朝
お客様の声の付箋（sticky-note）: クラフト紙地にテープ留めのメモ、手書き文字と年代

Do's and Don'ts

Do - 紺地には放射光や光の粒子を入れる - 価格は必ず通常価格と特価を並べる - 申込ボックスを複数回繰り返す - 注釈を価格の近くに明記する - 権威・歴史をモノクロ写真で示す

Don't - 緑をボタン以外に使わない - パステル調や余白過多のミニマル表現にしない - 金グラデ文字を白地に置かない - 見出しを細い書体にしない - 効能表現を注釈なしで出さない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（悩みと効果を一言で掴む）: 紺の光彩背景に白と赤の極太コピー、商品瓶を中央、周りに悩みの丸バッジ、黄の限定帯
初回オファー（即申込を促す）: 明るい青の地に白いオファーボックスと緑ボタン、下に注釈
悩みの提起（共感）: 紺帯の明朝見出し、寝ている中高年の写真、チェックリスト4行
おすすめ対象・効能（効く内容を示す）: 白地の明朝見出しと効能カード
成分紹介（配合成分の豊富さ）: 紺の六角形背景に色付き丸バッジと商品写真
仕組みの図解（作用を分かりやすく）: 稲妻背景に金の大見出し、白カード内の矢印図
共感コピー・開発者の声（理念の伝達）: 赤紺の大見出し、ラボ写真のヘッダー、黄マーカー本文
企業の歴史と品質（信頼の担保）: 和紙風ベージュに筆文字見出しとモノクロ写真、工場写真に品質バッジ
商品沿革（実績）: 年号付き左右交互タイムライン
追加の効能・成分（価値の再確認）: 紺の光彩背景に効能カードと成分バッジを再掲
オファー再掲（申込）: 初回オファーと同じボックス
よくある質問（不安解消）: 白地にQ/A枠カードを縦積み
お客様の声（社会的証明）: クラフト紙にリボン見出しと付箋型の手書きメモ
定期特典とクロージング（定期購入へ誘導）: 金枠の4特典カード、青地の定期オファーボックスと緑ボタン

Imagery

商品は切り抜き＋光彩・反射で輝かせる
悩みは寝苦しそうな中高年の実写
研究員・工場の実写で品質を示す
創業期のモノクロ写真を貼り合わせる
背景は放射光・六角形グリッド・稲妻のCG
声は付箋とテープの紙素材
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

元はSP幅の縦長1カラムをPCでも中央に置く構成
PCでは本文幅を約640px固定で中央寄せ、左右は背景色を延長
成分バッジは配置そのままで拡大
タイムラインはSPでも左右交互を保つ
申込ボタンはSPで幅90%

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: Deep Navy Pharmaceutical Supplement Sales LP
description: 深い紺の光彩背景に金のグラデ明朝見出しと赤の価格訴求を重ねた、医薬部外品の初回お試し通販 LP。成分を色付きの丸で見せ、老舗の信頼を写真で示し、緑の大きな申込ボタンへ何度も誘導する。
colors:
  primary: '#032D6D'
  dark-section: '#040D4E'
  secondary: '#1D4B8D'
  accent-1: '#D7141E'
  cta: '#019324'
  on-cta: '#FFFFFF'
  background: '#FEFEFE'
  background-alt: '#E2E2E2'
  accent-2: '#BFA78B'
  tint-1: '#BFA78B'
  accent-3: '#5A2E14'
  text: '#050418'
  marker: '#FFF27A'
  accent-1-sub: '#FEE302'
  cta-accessible: '#018922'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.2
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.35
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Yomogi
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 56px
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.md}'
    height: 64px
  offer-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.sm}'
    height: 300px
  ingredient-badge:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 60px
  check-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 36px
  benefit-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 160px
  perk-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 140px
  faq-item:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 100px
  sticky-note:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 110px
---

# DESIGN.md — 紺×金×赤の医薬品通販 LP（Deep Navy Pharmaceutical Supplement Sales LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: 健康食品・サプリメント ／ **雰囲気**: 信頼・誠実、力強い・インパクト、情報量多め・訴求型
- **キーワード**: 紺の光彩背景・金グラデ明朝・赤い価格数字・成分の丸バッジ・老舗の信頼・緑の申込ボタン
- **地の質感**: 紺の面に放射光・六角形・稲妻のエフェクトを重ねる。クラフト紙やベージュの和紙風テクスチャ。白い面はフラット。
- **形**: 角丸カード、楕円の成分バッジ、斜めの帯、リボン型ラベル
- **温度感**: 寒色の紺がベースで、赤・金・オレンジの暖色アクセントで熱を出す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#032D6D` | ブランドの紺（FV・訴求セクションの地） | 25% | 画素の主要色に補正 |
| `dark-section` | `#040D4E` | 最も深い紺の背景 | 8% | 画素の主要色に補正 |
| `secondary` | `#1D4B8D` | 明るい青（申込エリアの地） | 6% | 画素の主要色に補正 |
| `accent-1` | `#D7141E` | 価格・見出しの赤 | 3% | 推定 |
| `cta` | `#019324` | 申込ボタンの緑 | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 1% | 画素の主要色に補正 |
| `background` | `#FEFEFE` | 白い基本地 | 20% | 画素の実測 |
| `background-alt` | `#E2E2E2` | 薄いグレーの区切り地 | 10% | 画素の実測 |
| `accent-2` | `#BFA78B` | 金・ゴールドの見出し/枠 | 6% | 画素の主要色に補正 |
| `tint-1` | `#BFA78B` | クラフト紙風のベージュ | 5% | 画素の主要色に補正 |
| `accent-3` | `#5A2E14` | 特典見出し帯の茶 | 2% | 推定 |
| `text` | `#050418` | 本文の濃紺/黒 | 4% | 画素の実測 |
| `marker` | `#FFF27A` | 重要文の黄マーカー | 0% | 推定 |
| `accent-1-sub` | `#FEE302` |  | 1% | 画素の実測 |
| `cta-accessible` | `#018922` | AA を満たす補正値（計算） |  | 計算 |

- 紺の面と白/薄グレーの面を交互に配置する
- 価格の数字と煽り見出しは赤、権威・効能見出しは金グラデ
- 申込ボタンは緑に限定し他で使わない
- 成分バッジは紫・黄・橙・緑・赤など彩度高い色を個別に割り当てる
- お客様の声と特典はクラフト紙・金茶系で温かみを出す
- 本文中の要点は黄マーカーで強調
- `button-primary` は文字 `#FFFFFF` × 背景 `#019324` のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#018922`、4.56:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大コピー（白・赤の極太、縁取り） | ゴシック | Dela Gothic One | 900 | 44px | 1.2 | 0.0em |
| `headline-lg` | 紺地の金グラデ明朝見出し | 明朝 | Shippori Mincho | 800 | 30px | 1.35 | 0.03em |
| `headline-md` | 白地のセクション見出し | 明朝 | Noto Serif JP | 700 | 24px | 1.4 | 0.02em |
| `headline-sm` | 特典見出し・チェックリスト | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.0em |
| `body-md` | 本文・FAQ回答 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.0em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `accent` | お客様の声の手書きメモ・沿革の筆文字 | 手書き・筆 | Yomogi | 400 | 14px | 1.7 | 0.0em |
| `label-button` | 申込ボタン文字 | ゴシック | Noto Sans JP | 900 | 20px | 1.3 | 0.02em |

- 効能・権威の見出しは明朝、煽りと価格は極太ゴシック
- 金グラデ文字は紺地の上だけで使う
- 価格数字は明朝太字で単位より大きく、税込は小さく添える
- 見出しの一部の語だけを赤や大きさで強調する
- 注釈は※付きで小さく一括表示
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、成分は丸バッジを 2〜3 列で散らす
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
- 申込ボックスはページ上部・中盤・末尾の 3 回置く
- 見出しは中央揃え、本文は左揃え
- 沿革は中央線を挟んだ左右交互のタイムライン
- 特典は番号ラベル付きの縦積みカード

## Elevation & Depth

- 白カードに薄いドロップシャドウ
- 申込ボタンは下方向の影で立体感
- 商品写真に光彩・反射を付ける
- 声の付箋は少し傾けて影を付ける

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品は切り抜き、人物・工場は矩形や斜めカット
- **セクション境界**: 直線区切りが基本。FVは斜めの帯、工場写真は斜め切り
- 申込ボタンは角丸8px程度の横長
- 成分は楕円バッジ
- リボン型ラベルで小見出しを囲む
- FAQはQ/Aの赤紺文字を付けた枠カード

## Components

- **申込ボタン**（`button-primary`）: 緑のグラデ横長ボタン。左端に黄の吹き出しで1日あたり価格、上段に小さな訴求文
- **お試し価格ボックス**（`offer-box`）: 金の見出し帯、商品写真、通常価格→赤い特価の比較
- **成分の丸バッジ**（`ingredient-badge`）: 色ごとの楕円に白い成分名、光る紺背景に散らす
- **悩みチェックリスト**（`check-list`）: 赤いチェック枠付きの行を4つ、キーワードを赤字
- **効能リストカード**（`benefit-card`）: 白角丸カードに○付き項目を縦に並べる
- **特典カード**（`perk-card`）: 赤い番号ラベル＋茶の見出し帯＋白本文
- **FAQ**（`faq-item`）: 枠線カード、Qは紺・Aは赤の明朝
- **お客様の声の付箋**（`sticky-note`）: クラフト紙地にテープ留めのメモ、手書き文字と年代

## Do's and Don'ts

**Do**
- 紺地には放射光や光の粒子を入れる
- 価格は必ず通常価格と特価を並べる
- 申込ボックスを複数回繰り返す
- 注釈を価格の近くに明記する
- 権威・歴史をモノクロ写真で示す

**Don't**
- 緑をボタン以外に使わない
- パステル調や余白過多のミニマル表現にしない
- 金グラデ文字を白地に置かない
- 見出しを細い書体にしない
- 効能表現を注釈なしで出さない

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（悩みと効果を一言で掴む）: 紺の光彩背景に白と赤の極太コピー、商品瓶を中央、周りに悩みの丸バッジ、黄の限定帯
2. **初回オファー**（即申込を促す）: 明るい青の地に白いオファーボックスと緑ボタン、下に注釈
3. **悩みの提起**（共感）: 紺帯の明朝見出し、寝ている中高年の写真、チェックリスト4行
4. **おすすめ対象・効能**（効く内容を示す）: 白地の明朝見出しと効能カード
5. **成分紹介**（配合成分の豊富さ）: 紺の六角形背景に色付き丸バッジと商品写真
6. **仕組みの図解**（作用を分かりやすく）: 稲妻背景に金の大見出し、白カード内の矢印図
7. **共感コピー・開発者の声**（理念の伝達）: 赤紺の大見出し、ラボ写真のヘッダー、黄マーカー本文
8. **企業の歴史と品質**（信頼の担保）: 和紙風ベージュに筆文字見出しとモノクロ写真、工場写真に品質バッジ
9. **商品沿革**（実績）: 年号付き左右交互タイムライン
10. **追加の効能・成分**（価値の再確認）: 紺の光彩背景に効能カードと成分バッジを再掲
11. **オファー再掲**（申込）: 初回オファーと同じボックス
12. **よくある質問**（不安解消）: 白地にQ/A枠カードを縦積み
13. **お客様の声**（社会的証明）: クラフト紙にリボン見出しと付箋型の手書きメモ
14. **定期特典とクロージング**（定期購入へ誘導）: 金枠の4特典カード、青地の定期オファーボックスと緑ボタン

## Imagery

- 商品は切り抜き＋光彩・反射で輝かせる
- 悩みは寝苦しそうな中高年の実写
- 研究員・工場の実写で品質を示す
- 創業期のモノクロ写真を貼り合わせる
- 背景は放射光・六角形グリッド・稲妻のCG
- 声は付箋とテープの紙素材
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- 元はSP幅の縦長1カラムをPCでも中央に置く構成
- PCでは本文幅を約640px固定で中央寄せ、左右は背景色を延長
- 成分バッジは配置そのままで拡大
- タイムラインはSPでも左右交互を保つ
- 申込ボタンは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-6ebe736a`（元 LP の URL から採番）
- **元 LP**: https://www.taisho.co.jp/company/outline/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（5/14 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この 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