--- version: alpha name: Soft Pink Teal Kids Supplement LP description: 淡いピンクの地に、ミントティールとキャメルブラウンの2色で強調する、ママ向けのやさしいサプリ LP。丸ゴシックと角丸カード、波形の区切り、丸く切り抜いた親子写真で柔らかく安心感のある見た目にしている。CTA は赤ピンクと緑のツヤのあるピル型ボタン。 colors: primary: '#5CC5BC' secondary: '#C5A688' cta: '#FD5374' on-cta: '#FFFFFF' accent-1: '#5BA304' background: '#FFFFFF' background-alt: '#FFDBDB' tint-1: '#FEF0EE' tint-2: '#FDCCCB' surface: '#F6F1ED' text: '#6C5E53' text-body: '#6E6460' accent-2: '#C88A2E' text-muted: '#948F8B' cta-accessible: '#EC0330' accent-1-accessible: '#4A8503' primary-accessible: '#2E827B' typography: display: fontFamily: Zen Maru Gothic fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-sm: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.25em label-button: fontFamily: Zen Maru Gothic fontSize: 19px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.06em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 60px button-line: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px badge-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px heading-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 40px price-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 900px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 400px step-row: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 64px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 50px number-tag: backgroundColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 44px --- # DESIGN.md — 桜ピンク×ミント×キャメルの子ども向けサプリ LP（Soft Pink Teal Kids Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、かわいい、信頼・誠実、情報量多め・訴求型 - **キーワード**: 淡ピンク・ミントティール・キャメル・丸ゴシック・親子写真・波形区切り - **地の質感**: フラットな淡色面に、ぼかした水彩風のピンクの曲線と和紙のような薄い凹凸の地紋を重ねる - **形**: 大きな角丸カード、ピル型の帯見出し、丸窓の写真、波形やアーチ形のセクション境界 - **温度感**: 暖かく柔らかい。ピンクとベージュを主にし、ミントで清潔感を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5CC5BC` | 見出し強調・帯見出し・Qアイコンのミントティール | 4% | 画素の実測 | | `secondary` | `#C5A688` | キャメルブラウンの帯・番号・強調文字 | 7% | 画素の主要色に補正 | | `cta` | `#FD5374` | 購入CTAの赤ピンクボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字・価格の黄色強調 | 0% | 画素の主要色に補正 | | `accent-1` | `#5BA304` | LINE無料サンプルの緑ボタン | 1% | 画素の実測 | | `background` | `#FFFFFF` | ベースの白地 | 24% | 画素の実測 | | `background-alt` | `#FFDBDB` | 淡ピンクのセクション地 | 12% | 画素の実測 | | `tint-1` | `#FEF0EE` | ごく淡いピンクのカード地 | 11% | 画素の実測 | | `tint-2` | `#FDCCCB` | ピンクの枠線・波形区切り | 6% | 画素の実測 | | `surface` | `#F6F1ED` | フッターの生成り地 | 3% | 画素の実測 | | `text` | `#6C5E53` | 見出しのブラウングレー | 2% | 画素の実測 | | `text-body` | `#6E6460` | 本文のグレーブラウン | 3% | 推定 | | `accent-2` | `#C88A2E` | 50%OFFバッジの金色グラデ | 0% | 推定 | | `text-muted` | `#948F8B` | 注釈の薄いグレー | 0% | 画素の実測 | | `cta-accessible` | `#EC0330` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#4A8503` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#2E827B` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡ピンクを交互に置き、セクションの切り替えを地の色で見せる - 強調文字はミントとキャメルの2色だけを使う。1つの見出しの中で両方を混ぜてもよい - 見出しや本文の基本色は黒にせず、ブラウングレーにする - CTAは購入が赤ピンク、無料サンプルが緑と、役割で色を固定する - 価格は大きなミント文字にし、通常価格はグレーの取り消し線にする - バッジは円形で、ミント・サーモン・金色を使う - `button-primary` は文字 `#FFFFFF` × 背景 `#FD5374` のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#EC0330`、4.54:1）を使う。 - `button-line` は文字 `#FFFFFF` × 背景 `#5BA304` のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#4A8503`、4.52:1）を使う。 - `badge-circle` は文字 `#FFFFFF` × 背景 `#5CC5BC` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2E827B`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ | 丸ゴシック | Zen Maru Gothic | 900 | 40px | 1.3 | 0.04em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.5 | 0.08em | | `headline-md` | カード見出し・帯見出し | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.5 | 0.06em | | `headline-sm` | FAQの質問・小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 1.5 | 0.04em | | `body-md` | 本文・お客様の声 | 丸ゴシック | Zen Maru Gothic | 500 | 13px | 1.9 | 0.06em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.02em | | `accent` | 英字の飾り見出し・手書き風の添え文字 | 欧文サンセリフ | Montserrat | 500 | 13px | 1.2 | 0.25em | | `label-button` | CTAボタンの文字 | 丸ゴシック | Zen Maru Gothic | 900 | 19px | 1.3 | 0.06em | - 全体を太めの丸ゴシックでそろえ、角のある書体はほぼ使わない - 見出しの中のキーワードだけを1.2〜1.4倍に大きくし、色を変える - セクションの上に英字の飾り見出し（字間広め・薄色）を小さく置く - 手書き風の添え文字を見出しの左上に斜めに置き、親しみを出す - 本文は字間を広め、行間を1.9前後にとってゆったり見せる - 数字（価格・配合量）は特大の太字にし、単位は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分カードは 3 列、保証アイコンは 3 列に並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - お客様の声は写真とテキストを左右交互に並べる - 価格ボックスは画面幅いっぱいに近い大きな角丸カードにまとめる - CTAの上に斜線で挟んだ短い一文を置く - 見出しは中央揃え、本文は左揃え - 特長は番号を付けたカードを縦に並べ、カードを細い線でつなぐ ## Elevation & Depth - CTAボタンは上部にツヤのハイライトを入れ、下に濃い色の影を付けて立体的に見せる - カードは影なしの淡色面にし、ピンクの線で囲む - 価格ボックスの外側にピンクの厚みのある縁を付け、少し浮かせる - 大きな影は使わない ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の長方形か円形の窓で切り抜き、太いピンクの枠を付ける。人物は背景を抜いて区切り線からはみ出させることもある - **セクション境界**: スカラップ状の波形、ゆるいアーチ、斜めの色面で区切る - 帯見出しは片側だけが角丸のピル形にする - 吹き出しは丸括弧の形の線で文を挟む - Qアイコンはミントの円にする - バッジは正円にする ## Components - **購入CTA**（`button-primary`）: 赤ピンクのツヤありピル型ボタン。上に小さく一言を添え、右端に丸い矢印アイコンを置く - **無料サンプルCTA**（`button-line`）: 緑のピル型ボタン。左に白い円で日数のバッジを付ける - **円形バッジ**（`badge-circle`）: FVの右上に推奨や無料配布の円バッジを重ねて置く - **帯見出し**（`heading-band`）: ミントの帯に白文字で書き、キーワードだけを黄色にする。お客様の声の見出しに使う - **価格ボックス**（`price-box`）: 通常価格に取り消し線を引き、矢印の下に初回価格を大きなミント文字で示す。金色の割引バッジと送料無料タグを添える - **成分カード**（`ingredient-card`）: 上に丸窓の写真、中央に配合量の大きな数字、下にキャメルかミントの色帯で効果を書いた縦長カード - **ステップ**（`step-row`）: 左にミントのタグ形STEPラベル、右に白い角丸の説明欄。間を点線の矢印でつなぐ - **FAQ**（`faq-item`）: ピンクの地に白いピル形の質問欄を置き、左端にミントのQ円を付ける。回答は地の上にそのまま書く - **番号タグ**（`number-tag`）: キャメルの角丸正方形に白い明朝風の数字を入れ、特長カードの上に重ねる ## Do's and Don'ts **Do** - 強調色はミントとキャメルに絞り、交互に使う - CTAブロック（購入とサンプル）はページ内に2回以上繰り返す - 写真には子どもと母親の自然な笑顔を使い、丸窓に入れる - 数値の根拠は注釈で小さく添える - 見出しの左右に斜線やきらめきの小さな飾りを置く **Don't** - 純黒の文字や濃紺は使わない - 角ばった四角いボタンにしない - 彩度の高い原色を広い面に塗らない - 医薬品のような冷たい青系にしない - 明朝体を本文に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（驚きのある効果と安心感を一度に伝える）: 親子の写真の上に円形バッジを置き、特大の丸ゴシックで二段のキャッチを入れる。下に商品パッケージと認定マークを置く 2. **実績と初回CTA**（満足度の数字で背中を押す）: 白い帯に数字をミントで大きく書き、斜線で挟んだ一文の下に緑のサンプルボタンを置く 3. **価格オファー**（初回の割引価格を示す）: キャメルの吹き出し帯の下に大きな角丸の価格ボックスを置き、2種類のCTA、保証アイコン3列、注釈を入れる 4. **お客様の声**（共感と実感を伝える）: 波形で区切り、英字の飾りと数字見出しを置く。ミントの帯見出しと写真を左右交互に並べる 5. **悩みの提起**（子どもの悩みを3つ挙げる）: アーチ形の白い面にチェックアイコン付きのリストを並べ、悩む子どもの写真を右に置く 6. **解決提示**（商品を解決策として示す）: 下向きの三角の下に商品と説明文、金色の枠で囲んだメッセージを置く 7. **成分の仕組み**（成分の働きを図で示す）: 腸のイラストをキャメルとミントの循環矢印で囲み、下に成分カードを3列並べる 8. **味の訴求**（子どもでも食べやすいことを伝える）: 錠剤と果物の写真を並べ、大きな薄い英字を背景に敷く 9. **専門家の推奨**（信頼性を補う）: 背景を抜いた人物写真、円形バッジ、白い吹き出しでの一言、淡いピンクのカードに書いたコメント 10. **使い方ステップ**（続け方を示す）: ミントのSTEPタグと白いピル形の説明を縦に3段並べる 11. **特長**（選ばれる理由を3つ示す）: 円形の見出しの下に、番号タグ付きのピンクのカードを並べ、写真を丸窓に入れて線でつなぐ 12. **開発者の想い**（作り手の想いを伝える）: 和紙のような地紋の上に、英字の飾りとピンクの雲形見出しを置き、本文を長めに書く。最後に署名 13. **よくある質問**（不安をなくす）: 波形の上端を持つピンク地に、Q円付きの白いピル形の質問欄を縦に並べる 14. **フッター**（ナビゲーション）: 生成り地の中央にロゴ、SNSアイコン、リンクを縦に並べる ## Imagery - 自然光の明るい室内で撮った、白い服の親子の笑顔の写真 - 商品パッケージはピンクベージュで、白い錠剤を散らして添える - 臓器は淡いピンクのやわらかいイラストにし、きらめきを付ける - 原材料の粉や液体を白背景で寄って撮り、円形に切り抜く - 背景には水彩風のピンクのにじみ、小さな星やきらめきを散らす - 見出しの横に線画のアイコン（吹き出し・手・カレンダー）を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもSPと同じ約375px幅のカラムを中央に置き、レイアウトは変えない - PCの左右の余白には、淡いピンクのにじみと商品画像を繰り返し並べた背景を敷く - PCの右側の余白に、商品名と購入ボタンの追従ミニCTAを置く - 画像・文字サイズはSPのまま拡大しない ## 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-a8af4b25`（元 LP の URL から採番） - **元 LP**: https://molsy.co.jp/pages/lactulmg_lp2 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。