--- version: alpha name: Warm Orange Clinical Supplement LP description: 朱赤〜橙のグラデーションと淡い黄色地を組み合わせた、機能性表示食品の定期通販LP。臨床試験のグラフ、大きな数字実績、価格オファーカード、緑のCTAボタンを繰り返し配置し、信頼性と値ごろ感を同時に打ち出す情報量多めの構成。 colors: primary: '#F46B1F' secondary: '#F6270C' cta: '#12996C' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F8F1D3' tint-1: '#FCF4EB' tint-2: '#FDFEC5' accent-1: '#F6B667' accent-2: '#E00C17' accent-3: '#1E3F8C' dark-section: '#981A15' text: '#222222' marker: '#FFF07A' cta-accessible: '#10875F' secondary-accessible: '#E82209' primary-accessible: '#C94E0A' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 72px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 48px 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: 64px offer-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 560px benefit-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px section-ribbon: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 90px stat-circle: backgroundColor: '{colors.secondary}' typography: '{typography.display}' rounded: '{rounded.full}' height: 360px graph-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 420px voice-card: backgroundColor: '{colors.background}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px stamp-badge: textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px notice-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 300px --- # DESIGN.md — 朱橙×黄色の臨床訴求型サプリLP（Warm Orange Clinical Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、力強い・インパクト、信頼・誠実 - **キーワード**: 朱赤グラデーション・臨床データ・大きな数字・定期オファー・果実と製品・金の月桂樹 - **地の質感**: 白木目調・植物の線画を淡く敷いた地に、光沢のある橙グラデーション帯や金色リボンを重ねる - **形**: 角丸の白カード、角丸ラベル、ピル型CTA、下向き三角でつなぐ帯見出し - **温度感**: 暖色中心で熱量高め。CTAだけ緑で寒色寄りに外す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F46B1F` | ブランド橙・見出し帯 | 10% | 画素の主要色に補正 | | `secondary` | `#F6270C` | オファー背景の朱赤 | 9% | 画素の主要色に補正 | | `cta` | `#12996C` | 申込ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 21% | 画素の実測 | | `background-alt` | `#F8F1D3` | 淡い黄の帯背景 | 8% | 画素の主要色に補正 | | `tint-1` | `#FCF4EB` | クリーム地・成分表示枠 | 7% | 画素の実測 | | `tint-2` | `#FDFEC5` | 特典帯の淡黄 | 4% | 画素の実測 | | `accent-1` | `#F6B667` | 薄オレンジ・グラデ明部 | 7% | 画素の主要色に補正 | | `accent-2` | `#E00C17` | 価格・強調の赤文字 | 1% | 画素の実測 | | `accent-3` | `#1E3F8C` | 見出しの紺 | 1% | 推定 | | `dark-section` | `#981A15` | 開発見出しの深紅帯 | 2% | 画素の主要色に補正 | | `text` | `#222222` | 本文・見出しの黒 | 2% | 推定 | | `marker` | `#FFF07A` | 文字下の黄マーカー | 0% | 推定 | | `cta-accessible` | `#10875F` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#E82209` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C94E0A` | AA を満たす補正値（計算） | | 計算 | - 地は白・クリーム・淡黄を交互にし、オファー部だけ朱赤〜橙の全面グラデにする - 見出し帯は橙グラデ＋白文字、要所の大見出しは紺で落ち着きを出す - 価格・割引率・強調語は赤、数字実績は赤〜金のグラデ文字 - CTAだけ緑のグラデで暖色の中から際立たせる - 特典ラベルは赤地白文字のピル、マーカーは黄 - 注釈はグレーではなく黒の小さい文字で白地に置く - `button-primary` は文字 `#FFFFFF` × 背景 `#12996C` のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#10875F`、4.51:1）を使う。 - `benefit-pill` は文字 `#FFFFFF` × 背景 `#F6270C` のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E82209`、4.5:1）を使う。 - `section-ribbon` は文字 `#FFFFFF` × 背景 `#F46B1F` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C94E0A`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大見出し・数字実績 | ゴシック | Noto Sans JP | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | 帯見出し・セクション見出し | 明朝 | Shippori Mincho | 800 | 30px | 1.3 | 0.08em | | `headline-md` | カード見出し・訴求コピー | ゴシック | Noto Sans JP | 800 | 22px | 1.4 | 0.03em | | `headline-sm` | ラベル・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.03em | | `body-md` | 本文・お客様の声 | ゴシック | Noto Sans JP | 500 | 15px | 1.8 | 0.02em | | `note` | 注釈・試験方法 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 価格数字・割引率 | 欧文セリフ | Playfair Display | 700 | 72px | 1.0 | 0.0em | | `label-button` | CTAボタン文字 | 明朝 | Shippori Mincho | 700 | 20px | 1.2 | 0.08em | - 数字は本文の3〜4倍に大きくし、単位は小さく添える - 大見出しは極太ゴシックで、助詞だけ小さくする - 帯見出しとCTAは明朝で上品さを足す - 強調語は赤文字＋黄マーカーで二重に目立たせる - 注釈は※付きで11px程度、必ず該当数字の近くに置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、価格カード内のみ商品画像と価格の2列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは全幅背景＋中央寄せの白カード - オファーブロック（価格カード＋CTA＋注意事項）をページ内で3回繰り返す - グラフはカルーセルでドット送り - お客様の声は人物イラストとカードを左右交互に配置 - 注意事項は白地にベタ組みで箇条書き ## Elevation & Depth - 白カードに薄い影（0 4px 12px rgba(0,0,0,.12)） - CTAボタンは光沢グラデと下影で立体的に - 見出し帯は影付きで地から浮かせる - 商品パッケージ画像にドロップシャドウ ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品と果実は切り抜き、人物・研究室は全幅の角版 - **セクション境界**: 直線区切り＋下向き三角の吹き出し状の帯 - 価格カードは大きめ角丸の白 - 特典ラベルはピル型 - 割引バッジは下向き矢印型の赤 - スタンプ風の円形バッジを斜めに置く ## Components - **緑の申込ボタン**（`button-primary`）: ピル型緑グラデ、左に紺の円で1日あたり価格、右に白丸矢印 - **価格オファーカード**（`offer-card`）: 朱赤地に白カード。通常価格取消線、赤い割引バッジ、巨大な赤い価格 - **特典ラベル**（`benefit-pill`）: 淡黄帯の上に赤地白文字ピルを2つ並べる - **橙の帯見出し**（`section-ribbon`）: 橙グラデ角丸帯に白文字、金の月桂樹を左右に添える - **数字実績サークル**（`stat-circle`）: 赤〜橙の円グラフ風に、黒ラベルと金色の大数字 - **臨床グラフカード**（`graph-card`）: 白カードに折れ線グラフ、橙の見出しピル、左右矢印でカルーセル - **お客様の声**（`voice-card`）: 線画の人物と白カード、PR表記、赤字＋黄マーカーで強調 - **スタンプバッジ**（`stamp-badge`）: 赤い二重円のかすれスタンプ風で試験実施を示す - **表示情報ボックス**（`notice-box`）: クリーム地に紺枠、紺ラベルと箇条書き ## Do's and Don'ts **Do** - 数字実績・割引率は画面幅いっぱいに大きく見せる - オファーブロックを複数回繰り返す - 強調には赤文字と黄マーカーを使う - 根拠データには必ず注釈を添える - CTAは緑にして暖色地と対比させる **Don't** - 寒色を地色に広く使わない - CTAを赤や橙にしない - 注釈を省略・極小化しすぎない - 写真を暗くトーンダウンしない - 細い書体だけで見出しを組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（効果領域と信頼を即伝える）: 木目地に橙枠の大見出し、商品と果実、スタンプバッジ 2. **販売実績帯**（社会的証明）: 深紅地に金リボンと月桂樹、大きな金数字 3. **臨床試験**（科学的根拠の提示）: 淡黄地に紺の大見出し、グラフカードのカルーセルと試験注釈 4. **表示情報**（法定表示）: クリーム地の枠ボックスに箇条書き 5. **オファー**（購入へ誘導）: 朱赤地に価格カード、特典ピル、リピート率、緑CTA、注意事項 6. **実績お礼**（人気の強調）: 金のきらめき背景に赤い大数字、商品を横に並べる 7. **継続率**（継続しやすさ）: 橙帯見出しと赤い円グラフ風数字 8. **お客様の声**（共感）: 線画人物と白カードを交互に 9. **開発背景**（メーカーの信頼）: 深紅帯見出し、研究者写真に商品を重ねる 10. **成分訴求**（作用と含有量）: 橙ラベル2つ、太字黒コピー、橙地に果実と黄色の数字 11. **飲み方**（手軽さ）: 枠付き数字の見出しと黄色カード 12. **よくある質問**（不安解消）: 黒Q・橙Aの四角アイコン付き白カード 13. **申込フォーム**（購入完了）: 橙の矢印帯見出し、青系の表組みフォーム ## Imagery - 商品パッケージは切り抜きで影付き、果実を添える - 赤い果実は艶のある実物写真を葉付きで - 人物は白衣の研究者写真、明るい白基調 - お客様は線画＋淡彩のイラスト - 背景に植物の線画を薄い茶で敷く - 金のリボン・月桂樹・光の粒で実績を飾る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央約640px幅にSPの構成をそのまま置く - PCでは臨床グラフを2枚横並びにする - FVは商品を右、見出しを左の横組みにする - 継続率と声はPCで左右2カラム - フォームはPCで表組み2列 ## 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-f3a940bb`（元 LP の URL から採番） - **元 LP**: https://www.taisho-direct.jp/simages/lp/ET_tk.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。