--- version: alpha name: Warm Orange Organic Supplement Drink LP description: 果実のオレンジを主役に、生成りとくすみベージュの地で自然派の安心感を出した、女性向けの健康ドリンク通販 LP。明朝体の大見出し、権威バッジ、体験談、価格ブロックと緑の CTA を何度も繰り返す訴求型の構成。 colors: primary: '#DE9B66' background: '#FAF2EC' background-alt: '#FEFBEC' cta: '#5A9C2B' on-cta: '#FFFFFF' accent-1: '#E2625C' text: '#362A2C' secondary: '#9B7130' surface: '#E9E0D3' tint-1: '#FEF6E3' accent-2: '#859578' dark-section: '#606080' tag-blue: '#75A9D3' marker: '#FFF07A' cta-accessible: '#4C8424' accent-1-accessible: '#D9322A' secondary-accessible: '#976E2F' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Great Vibes fontSize: 28px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 17px 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.full}' height: 56px cta-banner: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 90px price-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 380px authority-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px number-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 60px worry-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 52px testimonial-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px ingredient-circle: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 140px --- # DESIGN.md — オレンジ×生成りの自然派健康ドリンク LP（Warm Orange Organic Supplement Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、ナチュラル、やさしい・柔らかい、信頼・誠実 - **キーワード**: 果実オレンジ・生成り・明朝見出し・金のバッジ・繰り返し CTA・女性の笑顔 - **地の質感**: 木目やリネン風の淡い地、果実と葉の写真、金の箔風バッジや帯 - **形**: 角丸は小さめ。丸いバッジや円形の成分アイコン、帯リボン、下向き三角でセクションをつなぐ - **温度感**: 暖かい（オレンジ・ベージュ寄り）。悩みパートだけ寒色グレーで切り替える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DE9B66` | 果実オレンジ（見出し帯・飲み方の地） | 7% | 画素の主要色に補正 | | `background` | `#FAF2EC` | 基本の白地 | 20% | 画素の実測 | | `background-alt` | `#FEFBEC` | 生成りの地（価格・こだわりパート） | 12% | 画素の実測 | | `cta` | `#5A9C2B` | 主 CTA の緑ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#E2625C` | 限定・強調の赤ピンク帯と強調文字 | 3% | 画素の実測 | | `text` | `#362A2C` | 見出し・本文の濃いこげ茶 | 6% | 画素の主要色に補正 | | `secondary` | `#9B7130` | 金茶（番号ラベル・バッジ） | 2% | 推定 | | `surface` | `#E9E0D3` | くすみベージュの区切り地 | 7% | 画素の主要色に補正 | | `tint-1` | `#FEF6E3` | 淡いグリーン地（体験談・自然訴求） | 7% | 画素の実測 | | `accent-2` | `#859578` | セージグリーン（オーガニック表示） | 2% | 画素の主要色に補正 | | `dark-section` | `#606080` | 悩み提起のスレートブルー帯 | 2% | 推定 | | `tag-blue` | `#75A9D3` | 価格特典タグの水色 | 0% | 画素の実測 | | `marker` | `#FFF07A` | 本文強調の黄色マーカー | 0% | 推定 | | `cta-accessible` | `#4C8424` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D9322A` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#976E2F` | AA を満たす補正値（計算） | | 計算 | - 地は白と生成りを交互にし、セクションの切り替わりを色でわかるようにする - オレンジは果実の写真・帯・飲み方パートの地に使う。文字色には使わない - 主 CTA はすべて同じ緑のグラデーションボタンにそろえる - 赤ピンクは限定帯・数字の強調・本文の重要文だけに使う - 金茶は番号ラベル、受賞・推奨バッジに使って権威感を出す - 悩み提起のパートだけ寒色グレーと白黒写真にし、解決パートで暖色に戻す - `button-primary` は文字 `#FFFFFF` × 背景 `#5A9C2B` のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#4C8424`、4.53:1）を使う。 - `cta-banner` は文字 `#FFFFFF` × 背景 `#5A9C2B` のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#4C8424`、4.53:1）を使う。 - `price-block` は文字 `#E2625C` × 背景 `#FEFBEC` のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D9322A`、4.55:1）を使う。 - `authority-badge` は文字 `#FFFFFF` × 背景 `#9B7130` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#976E2F`、4.58:1）を使う。 - `number-label` は文字 `#FFFFFF` × 背景 `#9B7130` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#976E2F`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きコピー | 明朝 | Shippori Mincho | 700 | 56px | 1.15 | 0.05em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 600 | 34px | 1.3 | 0.04em | | `headline-md` | 小見出し・帯見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em | | `headline-sm` | カード見出し・悩みリスト | 明朝 | Noto Serif JP | 600 | 18px | 1.4 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.75 | 0.02em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 英字の飾り文字・体験談の手書き | 欧文スクリプト | Great Vibes | 400 | 28px | 1.2 | 0.0em | | `label-button` | CTA 文字・価格数字 | ゴシック | Noto Sans JP | 900 | 17px | 1.3 | 0.02em | - 大見出しは明朝で、強調したい語だけを 1.4 倍に大きくする - 価格の数字は極太ゴシックで本文の 4〜5 倍にする - 注釈には ※ を付け、10px 前後で各ブロックの直下に置く - 体験談の本文は手書き風フォント（Klee One など）で親しみを出す - 英字のスクリプト体は背景の飾りとして薄く重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較や成分は 2〜3 列の小さなグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 画像中心のセクションは全幅で見せ、本文ブロックは左右 5% 余白 - 価格ブロックと CTA を 3〜4 セクションごとに挟む - セクション間は下向き三角や帯でつなぐ - 体験談は写真と文章を左右交互に並べる ## Elevation & Depth - CTA ボタンには下方向に濃い影を付けて立体的にする - 体験談カードや悩みリストには薄い影を付ける - 金のバッジにはグラデーションと光沢を付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの矩形が基本。成分や受賞は円形バッジにする - **セクション境界**: 下向き三角、斜めの帯、全幅の色帯で区切る - 主 CTA は角丸の大きいピル型にする - 特典タグは角丸小の矩形を横に 3 つ並べる - 番号ラベルは金茶の四角に細い枠線を付ける ## Components - **緑のグラデーション CTA**（`button-primary`）: 左に再生アイコン、白い太字。下に影 - **価格入り CTA バナー**（`cta-banner`）: 緑の枠の中に送料無料ラベル、大きな価格、商品画像、赤い丸バッジを入れる - **価格ブロック**（`price-block`）: 赤ピンクの限定帯、商品名、丸い特別価格バッジ、赤い大きな価格、水色のタグ 3 つ - **金の権威バッジ**（`authority-badge`）: 月桂樹付きの円形メダル。順位や推奨率を入れる - **こだわり番号ラベル**（`number-label`）: 金茶の正方形に 01 と短い語を入れ、下に三角を付ける - **悩みチェックリスト**（`worry-list`）: 白いカードの左に青のチェック、明朝の短文を 4 行 - **体験談カード**（`testimonial-card`）: 写真と縦書き見出し、本文の重要文は赤字に黄色マーカー - **FAQ アコーディオン**（`faq-item`）: 細い枠の行の右端に＋を置く - **成分の円**（`ingredient-circle`）: グラデーションの円の中に成分名と No.1 表示 ## Do's and Don'ts **Do** - 権威の根拠となる数字にはすべて注釈番号と出典を付ける - CTA は同じデザインで何度も繰り返す - 女性の明るい笑顔の写真で生活のイメージを見せる - 強調する文は赤字＋黄色マーカーに限る - 明朝の見出しとゴシックの本文を組み合わせる **Don't** - CTA の色を緑以外に変えない - 暖色の地にビビッドな青や紫を使わない - 見出しを全部ゴシックにして高級感をなくさない - 注釈なしで No.1 などの表示をしない - 余白を詰めすぎて写真と文字を重ねすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と主な訴求を一目で伝える）: 女性写真に縦書きの明朝コピー、商品写真、金のバッジを 3〜4 個 2. **CTA**（最初の申込導線）: 価格入りの緑バナー 3. **SNS 投稿**（口コミで共感を得る）: タブで切り替える 2 列の投稿カード 4. **無添加・アレンジ**（安心感と飲みやすさを伝える）: 果汁写真の上に明朝見出し、2 列のレシピカード 5. **権威・受賞・メディア**（信頼性を出す）: 推奨率メダル、受賞ロゴ、雑誌の表紙を重ねたコラージュ 6. **お客様の声**（効果の実感を伝える）: 漢字 1 字ずつの枠見出し、写真と縦書き見出しを左右交互に並べる 7. **価格オファー**（申込を促す）: 限定帯、大きな価格、タグ 3 つ、緑ボタン 8. **悩みの提起**（自分ごと化させる）: スレート帯の見出し、白黒写真、チェックリスト 9. **原因と解決**（商品を解決策として示す）: 食材写真 3 枚、黄色リボン、成分の丸バッジ 10. **専門家コメント**（専門家の裏付け）: 白衣の人物写真と枠付きのコメント 11. **成分の特長**（含まれる栄養を伝える）: オレンジの帯見出し、矢印でつながる円、グラデーションの円 12. **こだわり 3 点**（品質の差を示す）: 金の番号ラベル、写真、比較カード、青の安全パネル 13. **飲み方・FAQ**（不安を解消する）: オレンジ地に比率図、アレンジ写真のグリッド、アコーディオン 14. **定期の説明**（解約の不安をなくす）: 赤枠の注意ボックス、月ごとの矢印図、丸バッジ、アイコン 3 つ ## Imagery - 自然光で撮った 20〜40 代女性の明るい笑顔 - オレンジの小さな果実と葉をたっぷり写した寄りの写真 - グラスに注いだ果汁を逆光で見せる写真 - 白い背景や木目の上に置いた商品ボトル - 悩みパートだけ彩度を落としたモノクロ写真 - 金のメダル、リボン、月桂樹の装飾 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、SP の 1 カラムを幅 750px 程度の中央寄せで見せることを推奨する - 背景の色帯は全幅に広げ、内容は中央の列に収める - 体験談や比較は PC では横 2〜3 列に広げてよい - CTA の幅は最大 480px 程度にする ## 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-ce719cb3`（元 LP の URL から採番） - **元 LP**: https://cp.curilla.jp/so900ts1_06_500_p_u_leta - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。