--- version: alpha name: Clinical Teal Gray Supplement LP description: 明るい水色とくすんだ青緑を基調に、グレーの石目テクスチャと白カードを重ねた機能性表示食品の通販 LP。明朝の大見出しで信頼感を出し、ピンクの数値強調、緑グラデの CTA、金帯の返金保証でしっかり売り込む。 colors: primary: '#1291BE' secondary: '#7CCBE9' dark-section: '#5E6064' accent-1: '#128AA4' cta: '#02AC03' on-cta: '#FFFFFF' accent-2: '#E2516E' marker: '#FDF202' accent-3: '#AC9B8C' background: '#FFFFFF' background-alt: '#F5F6FA' tint-1: '#DBF0F6' text: '#30363E' text-muted: '#776865' cta-accessible: '#028902' accent-2-accessible: '#DD3254' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 28px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 12px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 72px guarantee-band: backgroundColor: '{colors.accent-3}' typography: '{typography.headline-lg}' height: 150px label-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 32px effect-bubble: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px badge-yellow: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 90px worry-bubble: backgroundColor: '{colors.accent-1}' rounded: '{rounded.full}' height: 80px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 420px chart-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 300px --- # DESIGN.md — 青緑×グレー石目の機能性サプリ LP（Clinical Teal Gray Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 医師推薦・エビデンスグラフ・明朝の大見出し・石目テクスチャ・定期初回割引 - **地の質感**: 薄いグレーのコンクリート・石目テクスチャを地に敷き、白カードを浮かせる。暗いグレーの章は重めの石目を使う - **形**: 角丸はごく小さい長方形カードが基本。成分は丸いバブルで並べ、悩みは吹き出しにする - **温度感**: やや寒色寄りで清潔な印象。ピンクと黄色を差し色に使って温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1291BE` | ブランドの青緑。見出し文字と見出し帯 | 4% | 画素の実測 | | `secondary` | `#7CCBE9` | 明るい水色の地。オファー章とバッジ帯 | 9% | 画素の実測 | | `dark-section` | `#5E6064` | 注意喚起章の暗いグレー地 | 8% | 推定 | | `accent-1` | `#128AA4` | 成分カード・食品カードの深い青緑面 | 3% | 画素の実測 | | `cta` | `#02AC03` | 申込ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#E2516E` | 数値と効果を強調するピンク | 1% | 推定 | | `marker` | `#FDF202` | 黄色バッジとマーカー下線 | 1% | 画素の実測 | | `accent-3` | `#AC9B8C` | 返金保証帯の金茶 | 3% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 22% | 画素の主要色に補正 | | `background-alt` | `#F5F6FA` | 薄グレーの石目地 | 20% | 画素の実測 | | `tint-1` | `#DBF0F6` | 淡い水色のグラデ地 | 5% | 画素の主要色に補正 | | `text` | `#30363E` | 見出しと本文の墨色 | 4% | 画素の主要色に補正 | | `text-muted` | `#776865` | 注釈の灰色文字 | 2% | 画素の主要色に補正 | | `cta-accessible` | `#028902` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#DD3254` | AA を満たす補正値（計算） | | 計算 | - 地は白と薄グレーの石目を交互に使う。オファー章だけ水色の全面地にする - ブランドの青緑は明朝の大見出しと見出し帯に使う - 効果や価格の数字はピンクで大きく強調する - 申込ボタンは緑のグラデだけにして、他の要素には緑を使わない - 返金保証は金茶のグラデ帯にして、オファーのすぐ下に置く - 悩みとリスクの章は暗いグレー地に白文字を置き、空気を変える - `button-primary` は文字 `#FFFFFF` × 背景 `#02AC03` のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#028902`、4.58:1）を使う。 - `effect-bubble` は文字 `#E2516E` × 背景 `#FFFFFF` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DD3254`、4.51:1）を使う。 - `benefit-card` は文字 `#E2516E` × 背景 `#FFFFFF` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DD3254`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV やセクションの大見出し | 明朝 | Shippori Mincho | 600 | 44px | 1.25 | 0.02em | | `headline-lg` | 章タイトル | 明朝 | Noto Serif JP | 600 | 30px | 1.35 | 0.04em | | `headline-md` | カード見出しや強調の一行 | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `headline-sm` | 帯見出し・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em | | `note` | 出典・届出表示の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 英字ラベルと POINT 番号 | 欧文セリフ | Playfair Display | 400 | 28px | 1.1 | 0.1em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 900 | 22px | 1.3 | 0.03em | - 大見出しは明朝にして、キーワードだけ青緑で大きくする - 見出しの助詞は小さくし、名詞を大きく見せる - 数字は見出しの 1.5〜2 倍の大きさにする - 見出しの末尾は感嘆符を斜体ぎみに添える - 吹き出しの文言は手書き風の書体にする - 注釈は 10px の灰色で、各ブロックの直下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分バブルは 2〜3 列、手順アイコンは 3 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右 5% の余白をとり、石目の地の上に置く - グラフは必ず白い枠内に入れ、出典を下に添える - オファー枠は商品画像、価格、月ごとの流れ、注意事項、CTA の順に並べる - POINT 番号は左端に縦書きの欧文で置く - 申込 CTA と返金保証帯は 2 回繰り返す ## Elevation & Depth - 白カードには弱いドロップシャドウを付ける - CTA ボタンは立体的なグラデにし、下に影を付ける - 地のテクスチャで奥行きを出し、濃い影は使わない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物と商品は角切りまたは切り抜き。食材と食品は円形に切り抜く - **セクション境界**: 基本は直線で切り替える。一部の章は下向きの V 字で次へつなぐ - 成分の効果は白い円バブルに入れ、番号を水色の小丸で添える - サブボタンは角丸のピル型にする - バッジは黄色の円形にする - ラベル帯は青緑で角の小さい長方形にする ## Components - **申込 CTA**（`button-primary`）: 緑グラデの大型ボタン。上段に小さな特典文、下段に太字の申込文、右端に三角 - **返金保証帯**（`guarantee-band`）: 金茶のグラデ帯に明朝の保証見出しを置き、白いピル型の詳細ボタンを添える - **見出しラベル帯**（`label-band`）: 青緑の長方形に白文字で小見出しを入れる - **効果バブル**（`effect-bubble`）: 白い円の中に、効果を明朝とピンクの強調で書く。上に番号の小丸を付ける - **黄色丸バッジ**（`badge-yellow`）: 監修や無料を伝える円形バッジ。黒の太字を入れる - **特典カード**（`benefit-card`）: 白カードの左に大きな斜体の数字、右にピンク太字の特典名を置く - **悩み吹き出し**（`worry-bubble`）: くすんだ青緑の吹き出しに、手書き風の白文字を入れる - **お客様の声**（`voice-card`）: 写真の左下に青緑の円形バッジで番号と年齢を重ね、明朝の見出しと本文を続ける - **エビデンスグラフ枠**（`chart-card`）: 白枠に棒グラフや折れ線グラフを入れ、差分は吹き出しで強調する ## Do's and Don'ts **Do** - 明朝の大見出しを青緑と墨色の 2 色で組む - 効果の主張の近くには必ずグラフと出典を置く - 石目の地と白カードの組み合わせを全体で統一する - 価格は打ち消し線の旧価格とピンクの大きな初回価格を並べる - 暗いグレー章で悩みを見せ、そのあと明るい章で解決へ切り替える **Don't** - ポップな丸ゴシックを見出しに使わない - 緑を CTA 以外に使わない - 大きく角を丸めたカードにしない - 出典のない数字を強調しない - 原色の多いイラストで医療らしい信頼感を崩さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（機能と権威を一目で伝える）: 食事中の人物写真の上に、明朝の大見出しを青緑で重ねる。商品と黄色の監修バッジを添える 2. **医師推薦・メディア実績**（権威付け）: 青緑のラベル見出しの下に、医師の切り抜き写真とメディア実績の一覧を並べる 3. **取扱実績・初回特典**（安心感と特典を予告する）: クリニック写真を並べ、丸バブル 3 つで特長を示す 4. **成分の効果**（効果を網羅して見せる）: 大きな数字の見出しの下に、番号付きの白い円バブルを格子状に並べる 5. **試験結果**（エビデンスを示す）: 白カードにグラフを入れ、カルーセルで切り替える 6. **オファー**（初回価格と申込）: 水色の地に白枠を置き、価格、月ごとの流れ、CTA、金の保証帯の順に並べる 7. **注意喚起**（問題を意識させる）: 暗いグレーの石目地に白カードの図解を 2 つ置く 8. **悩みの提起**（共感を得る）: モノクロ寄りの人物写真に、悩みを吹き出しで 3 つ重ねる 9. **年齢リスクの事実**（危機感を高める）: 黄色の番号ラベルと黄色の見出しの下に、グラデの棒グラフを置く 10. **解決提案・成分**（商品を救世主として提示する）: 楽しみの写真を縦書きの見出しと交互に並べ、そのあと商品と成分カードを見せる 11. **特典一覧**（定期購入の後押し）: 水色グラデの地に、番号付きの白カードを 5 枚縦に並べる 12. **付帯サービスの特長**（独自性を示す）: 縦書きの POINT 番号と明朝の見出しを置き、アイコン手順、スマホ画面、比較表で説明する 13. **お客様の声**（実感を伝える）: 写真に円形の年齢バッジを重ね、明朝の見出しと本文を続ける 14. **食事の糖質**（日常のリスクを示す）: 円形の料理写真と青緑の数値カードを左右交互に置く ## Imagery - 人物写真は自然光で、清潔な白やグレーの服を着たものを使う - 悩みの写真は彩度を落とし、暗めのトーンにする - 料理は真上か斜め上から撮り、円形に切り抜く - 地にはグレーの石目テクスチャを敷き、ユーカリ系の葉影を添える - 図解はフラットな青緑とオレンジの簡単な図形で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では SP と同じデザインを中央の 750px 幅で表示し、左右には地のテクスチャを敷く - PC でもグラフと表は 1 カラムのままにする - 成分バブルは PC では 4〜5 列に広げてもよい ## 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-103e1a69`（元 LP の URL から採番） - **元 LP**: https://wellreco.jp/lp?u=tssspow01_bot_red_gsgskt980_100_2 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。