--- version: alpha name: Sky Blue Dialogue Supplement LP description: 水色の地に白い角丸カードを重ねて組む、健康食品の LP。研究員と著名人 2 人の吹き出し会話で成分の説明を進め、赤のキーワード強調と緑のピル型 CTA で申し込みまで誘導する。 colors: primary: '#64B9DE' background: '#FDFEFD' cta: '#25B512' on-cta: '#FFFFFF' accent-1: '#E30313' secondary: '#028BAC' text: '#333333' tint-1: '#D2E9F4' marker: '#FEF5C7' background-alt: '#F3F3EC' accent-2: '#D9CFC0' text-muted: '#6D7A83' accent-3: '#F07A1A' cta-accessible: '#1C890E' secondary-accessible: '#027F9D' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.2 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px offer-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 200px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 80px section-title-bar: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 52px nav-tile: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px ingredient-badge: backgroundColor: '{colors.accent-3}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 60px function-heading: backgroundColor: '{colors.marker}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 70px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 140px stat-medal: backgroundColor: '{colors.background-alt}' textColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 120px --- # DESIGN.md — 水色地×白カードの会話型サプリ LP（Sky Blue Dialogue Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 清潔・爽やか、情報量多め・訴求型、信頼・誠実、親しみ・手作り感 - **キーワード**: 水色地・白カード・吹き出し会話・赤マーカー強調・成分の球体アイコン・グラフで根拠 - **地の質感**: 質感のないフラットな単色の面。カードにうっすら影を付け、光沢のある球体アイコンで立体感を足す - **形**: 角丸カード・角丸の吹き出し・ピル型ボタン・円形の成分バッジ - **温度感**: 爽やかで少し涼しい色温度。赤と黄で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#64B9DE` | ページ全体の地になる水色 | 27% | 画素の実測 | | `background` | `#FDFEFD` | カードと吹き出しの白 | 36% | 画素の実測 | | `cta` | `#25B512` | 主 CTA ボタンの緑 | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#E30313` | キーワード強調とオファー帯の赤 | 2% | 画素の実測 | | `secondary` | `#028BAC` | 見出し文字とナビボタンの濃い青緑 | 3% | 画素の実測 | | `text` | `#333333` | 本文の濃いグレー | 3% | 推定 | | `tint-1` | `#D2E9F4` | 小見出しの帯と区切りに使う淡い水色 | 5% | 画素の実測 | | `marker` | `#FEF5C7` | 吹き出しの下地と機能見出しの淡い黄 | 3% | 画素の主要色に補正 | | `background-alt` | `#F3F3EC` | 実績セクションの薄いグレー地 | 4% | 画素の主要色に補正 | | `accent-2` | `#D9CFC0` | 受賞バッジのベージュ系 | 4% | 画素の主要色に補正 | | `text-muted` | `#6D7A83` | 注釈の小さいグレー文字 | 2% | 画素の主要色に補正 | | `accent-3` | `#F07A1A` | 成分球体アイコンの橙 | 0% | 推定 | | `cta-accessible` | `#1C890E` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#027F9D` | AA を満たす補正値（計算） | | 計算 | - 水色を地にして、内容はすべて白いカードや吹き出しに載せる - 強調したい語は赤文字か赤の下線にし、1 文に 1〜2 か所までにする - 見出しは濃い青緑の文字にし、強調語だけ赤にする - 吹き出しの文字の下に淡い黄のマーカーを引く - CTA は緑だけ。ほかの要素に緑を使わない - 実績・数字のセクションだけ薄いグレー地とベージュの月桂冠で格を出す - `button-primary` は文字 `#FFFFFF` × 背景 `#25B512` のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1C890E`、4.53:1）を使う。 - `section-title-bar` は文字 `#028BAC` × 背景 `#FDFEFD` のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#027F9D`、4.59:1）を使う。 - `function-heading` は文字 `#028BAC` × 背景 `#FEF5C7` のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#027F9D`、4.58:1）を使う。 - `stat-medal` は文字 `#028BAC` × 背景 `#F3F3EC` のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#027F9D`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きなキャッチ | ゴシック | Zen Kaku Gothic New | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | セクションの見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.4 | 0.03em | | `headline-md` | 吹き出しのセリフとカードの見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.5 | 0.02em | | `headline-sm` | お客様の声のタイトル | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | | `body-md` | 説明の本文 | ゴシック | Noto Sans JP | 500 | 15px | 1.7 | 0.02em | | `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 実績の大きな数字 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.2 | 0.05em | - 全体を太めのゴシック体でそろえる - 見出しはキーワードだけ文字を大きくし、赤にする - 見出しの左右に斜線の飾り（＼ ／）を付けてリズムを出す - 数字は欧文の極太書体で、単位より大きく組む - 注釈は小さいグレー文字で、カードの下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。目次ナビだけ 2×2 のグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 吹き出し会話は人物アイコンと吹き出しを左右交互に置く - 説明は白い大きなカードに入れ、グラフや図版もその中に収める - セクションの頭に白いピル型の見出しバーを置く - セクションの間は下向きのシェブロンでつなぐ - お客様の声は横長のカードを縦に積む ## Elevation & Depth - 白カードには弱い影を付ける（0 2px 8px rgba(0,0,0,.08)） - 吹き出しは影を付けず白い面だけにする - 成分の球体アイコンはグラデーションとハイライトで立体的に見せる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物は背景を切り抜いて肩から上にする。食材と利用者の写真は角丸の矩形 - **セクション境界**: 境界は直線。白カードと水色地の切り替えで区切り、シェブロン矢印でつなぐ - 見出しバーは白のピル型で、太めの水色の枠線を付ける - 成分は円形のバッジで表す - 吹き出しには小さな三角のしっぽを付ける - CTA は全幅に近いピル型にする ## Components - **主 CTA ボタン**（`button-primary`）: 緑のピル型ボタン。右に丸い矢印アイコンを置く - **オファーカード**（`offer-card`）: 赤い見出し帯の下に白地で商品・価格・割引バッジを並べる - **会話の吹き出し**（`speech-bubble`）: 人物アイコンの横に置く白い吹き出し。強調語は赤文字にして黄のマーカーを引く - **見出しバー**（`section-title-bar`）: 白のピル型に水色の枠線。見出しのキーワードは赤 - **目次ナビ**（`nav-tile`）: 濃い青緑の角丸タイル。白文字で、下向き矢印の丸アイコンを付ける - **成分バッジ**（`ingredient-badge`）: 光沢のある円形。成分ごとに青・橙・緑・黄で色を分ける - **機能の見出し**（`function-heading`）: 番号ラベルとアイコンを上に載せ、淡い黄の帯に大きな見出しを置く - **お客様の声カード**（`voice-card`）: 白の横長カード。左に見出しと本文、右に写真を置き、年代は赤のタグで示す - **実績の月桂冠**（`stat-medal`）: 月桂冠か円グラフの中に、大きな数字と注釈番号を入れる ## Do's and Don'ts **Do** - 説明は人物どうしの会話の形で、短い吹き出しに区切って進める - 根拠のグラフには、出典を小さな注釈で必ず添える - 強調は赤文字と黄マーカーに絞る - 水色地と白カードの 2 層構造を最後まで保つ - 成分は色分けした球体アイコンでくり返し見せる **Don't** - 地色を暗い色にしない - CTA 以外に緑のボタンを置かない - 本文を長く続けない。3〜4 行ごとに吹き出しか見出しを挟む - 明朝体を使わない - カードの角を直角にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（問いかけで興味を引き、すぐにオファーを見せる）: 水色地に大きな白文字のキャッチを置き、著名人 2 人の切り抜き写真と成分の図を並べる。その下にオファーカードと緑の CTA 2. **導入の会話**（テーマを会話で自然に紹介する）: 人物アイコンと吹き出しを左右交互に置き、研究員が登場する 3. **目次ナビ**（読みたい章へすぐ移れるようにする）: 濃い青緑の角丸タイルを 2×2 で並べる 4. **悩み・理由の説明**（栄養が必要な理由を示す）: 見出しバーの後に、白カードの中で図解とグラフを見せ、会話を挟む 5. **成分の紹介**（注目している成分を紹介する）: 成分の球体バッジと食材の写真を並べる 6. **商品の解決策**（商品を答えとして提示する）: 白カードに成分バッジと＋記号を並べ、ボトルの写真と球体を組み合わせる 7. **機能の根拠**（3 つの機能を試験データで裏付ける）: 機能ごとに番号付きの黄の見出しを置き、イラストとグラフ、注釈を続ける 8. **お客様の声**（利用者の実感を伝える）: 写真付きの横長カードを縦に積み、その後に一言コメントのリストを続ける 9. **実績**（売上や満足度で信頼を示す）: 薄いグレー地に、商品を集合させた写真、月桂冠の数字、円グラフを並べる 10. **キャンペーン告知と CTA**（申し込みへ誘導する）: 大きな告知見出しと赤の下向き矢印を置き、赤い帯のオファーカードと緑の CTA を続ける ## Imagery - 人物は白背景で撮った笑顔の写真を、肩から上で切り抜く - 研究員は白衣を着せ、指差しや商品を持つポーズにする - 成分は光沢のあるカラフルな球体の 3D 風アイコンにする - 食材は明るい物撮り写真を角丸で見せる - 感情を表すのはシンプルな線画のイラストにする（電球・汗など） - グラフは棒グラフで、赤とグレーの 2 色にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元の PC 版は、中央に置いた SP 幅のカラムの左右を水色で埋めるだけのレイアウト - SP では幅 100% にし、カードの左右に 16px の余白を取る - PC で広げる場合も、本文カラムは最大 640px 程度にとどめる - 目次ナビは SP でも 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-77188450`（元 LP の URL から採番） - **元 LP**: https://www.suntory-kenko.com/contents/pw2s/50/omg/idom22/?yclid=YSS.1000043674.EAIaIQobChMI7c-xuprbjAMVRCR7Bx3IhQueEAAYASAAEgJwefD_BwE - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。