--- version: alpha name: Soft Coral Pink Wellness Supplement LP description: くすみコーラルピンクを主役に、ココアブラウンの文字・帯とティールの CTA を合わせた女性向け健康食品 LP。淡いベージュとグレーの地に白い角丸カードを重ねる。丸い成分バッジ、吹き出し型の悩み、口コミカードを縦に積んで、情報量は多いがやさしく見せる構成。 colors: primary: '#DB837D' secondary: '#614D47' cta: '#3E9C98' on-cta: '#FFFFFF' background: '#F7F6F4' background-alt: '#FEFDFD' surface: '#FFFEFE' tint-1: '#EBB3A5' tint-2: '#FCEEEB' text: '#5A4E4E' text-body: '#614D47' accent-1: '#CBAD7B' text-muted: '#98938B' marker: '#F5D9CC' cta-accessible: '#34827F' primary-accessible: '#C43F36' typography: display: fontFamily: Zen Maru Gothic fontSize: 44px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 52px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 6px md: 16px lg: 32px 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: 64px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px badge-circle: backgroundColor: '{colors.tint-2}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px label-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 34px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 520px bubble-worry: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 80px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 360px faq-item: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 48px --- # DESIGN.md — コーラルピンク×ココアの菌活サプリ LP（Soft Coral Pink Wellness Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、情報量多め・訴求型、上品・高級、清潔・爽やか - **キーワード**: くすみピンク・ココアブラウン・丸いバッジ・角丸カード・ふんわりボケ背景・ティールCTA - **地の質感**: 淡いグラデーションと、ぼかしたカプセル・菌モチーフを背景に散らしたソフトな質感 - **形**: 大きな角丸カード、正円バッジ、吹き出し、斜めカットの帯 - **温度感**: 暖色寄り。ピンクベージュの温かみに、ブラウンで引き締めを加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DB837D` | 見出し強調・帯・ラベルのコーラルピンク | 8% | 画素の実測 | | `secondary` | `#614D47` | ココアブラウンの帯・吹き出し | 6% | 画素の主要色に補正 | | `cta` | `#3E9C98` | 主CTAのティールボタン | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#F7F6F4` | 基本の淡いグレー地 | 20% | 画素の実測 | | `background-alt` | `#FEFDFD` | 生成りベージュ地 | 9% | 画素の実測 | | `surface` | `#FFFEFE` | 白いカード面 | 15% | 画素の実測 | | `tint-1` | `#EBB3A5` | 価格セクションのピンクグラデ地 | 8% | 画素の実測 | | `tint-2` | `#FCEEEB` | 淡いピンクの面 | 8% | 画素の実測 | | `text` | `#5A4E4E` | 見出しのブラウン文字 | 2% | 画素の実測 | | `text-body` | `#614D47` | 本文文字 | 3% | 画素の主要色に補正 | | `accent-1` | `#CBAD7B` | 成分表の見出しのゴールドベージュ帯 | 0% | 画素の実測 | | `text-muted` | `#98938B` | 注釈のグレー文字 | 1% | 画素の実測 | | `marker` | `#F5D9CC` | 強調数字・見出し下に敷くマーカー | 1% | 画素の主要色に補正 | | `cta-accessible` | `#34827F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C43F36` | AA を満たす補正値（計算） | | 計算 | - 地はグレーとベージュを交互に使い、セクションを区切る - 強調語はコーラルピンク、他の見出し語はブラウンで書き分ける - 主CTAだけをティールにして、ページ内で唯一の寒色にする - 価格セクションはピンクのグラデーション地に白カードを載せる - 悩みと結論の帯はココアブラウン地に白文字 - FAQの質問帯はピンク地に白文字。回答の要点はピンク文字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#3E9C98` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#34827F`、4.52:1）を使う。 - `badge-circle` は文字 `#DB837D` × 背景 `#FCEEEB` のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C43F36`、4.52:1）を使う。 - `price-card` は文字 `#DB837D` × 背景 `#FFFEFE` のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C43F36`、4.57:1）を使う。 - `faq-item` は文字 `#FFFFFF` × 背景 `#DB837D` のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C43F36`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクションの大見出し | 丸ゴシック | Zen Maru Gothic | 900 | 44px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 28px | 1.4 | 0.08em | | `headline-md` | カード見出し・口コミタイトル | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.6 | 0.08em | | `headline-sm` | 帯ラベル・小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.9 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 価格・%などの大きな数字 | 欧文サンセリフ | Montserrat | 700 | 52px | 1.1 | 0.0em | | `label-button` | CTAボタン | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.4 | 0.1em | - 見出しは字間を広めにとった太い丸ゴシック - 強調語だけ文字を一回り大きくし、ピンクにする - キーワードは大きな二重引用符で挟む - 数字は欧文書体で特大にし、単位は小さく添える - 「※」の注釈は小さなグレー文字で右寄せにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バッジやSNS投稿は 2〜4 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクション内は中央揃えの見出しから本文へ流す - 白カードは左右6%の余白をとって浮かせる - 成分は正円バッジを3つ横並び、または5つを散らして配置 - 口コミは写真とカードを左右交互に配置 - 各訴求の区切りごとにCTAを再掲する ## Elevation & Depth - 白カードはごく淡い影（0 4px 16px rgba(0,0,0,.06)） - CTAボタンは下に濃いティールの立体影 - 正円バッジは白からピンクへのグラデーションと柔らかな影 - フラットな面が基本で、強い影は使わない ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 人物は正円か大きな角丸、食材は縦長のカプセル型で切り抜く - **セクション境界**: 基本は直線。悩みセクションの下端だけV字カット、ほかに緩い波線 - カードは大きな角丸 - ラベルはピル型か角丸の帯 - 悩みは不定形の吹き出し - 見出しを角括弧型の罫線で囲むこともある ## Components - **ティールのピル型CTA**（`button-primary`）: グラデーションとボタン下の影で立体的にしたピル型ボタン。右端に白い丸の矢印を置き、左上に割引ラベルを重ねる - **ブラウンのサブボタン**（`button-secondary`）: 単品購入用。ブラウンのグラデーションのピル型 - **正円の成分バッジ**（`badge-circle`）: 白からピンクのグラデーションの円に、太字で数字や特長を書く - **ブラウンの帯ラベル**（`label-band`）: 見出しの上に置くピル型の導入ラベル - **価格カード**（`price-card`）: ピンク地の上に白い角丸カードを載せる。定価は打ち消し線、割引率はピンクの矢羽型ラベル、価格は特大の数字 - **悩みの吹き出し**（`bubble-worry`）: モノクロ写真の上に重ねるブラウンの吹き出し。悩みの要点を白地にして反転させる - **口コミカード**（`voice-card`）: 白い角丸カード。背景に薄い大きな英字の番号、正円の人物写真、ブラウンのピル型属性ラベル - **FAQ項目**（`faq-item`）: ピンクの質問帯の左に白丸のQアイコンを置き、下に白地の回答を続ける ## Do's and Don'ts **Do** - ピンク・ブラウン・ティールの3色に絞る - 数字の訴求は特大の欧文書体で見せる - 背景にぼかしたカプセルや菌の形をうっすら散らす - 効果をうたう表現には必ず小さな注釈を添える - CTAは価格カードの直後と各セクションの区切りに置く **Don't** - 原色の赤や青は使わない - 真っ黒な文字は使わず、ブラウン系にする - 角の尖ったカードは使わない - CTA以外にティールを使わない - 写真を強いコントラストに加工しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（共感と商品の印象づけ）: 明るい笑顔の女性写真に大きなピンクのキャッチを重ね、商品パッケージと特長バッジ3つを置く 2. **導入・権威づけ**（本格感を伝える）: ぼかした背景に商品を置き、素材2種を×でつなぐ写真パネル 3. **価格オファー**（早い段階で購入へ誘導）: ピンクのグラデーション地に白い価格カードとティールのCTA 4. **実績・専門家**（信頼性を補強）: 継続率の円グラフと医師のプロフィールカード 5. **SNSの口コミ**（話題性を示す）: ハッシュタグのピルと、SNS投稿風の写真を2×2で並べる 6. **悩みの提起**（自分ごと化）: モノクロの人物写真に吹き出しを4つ。下端をV字にカット 7. **原因の解説**（教育）: パステルのイラストと円の図解、カプセル型に切り抜いた写真3枚 8. **解決策の提示**（商品の登場）: 芝生の上に商品を置いたシーンに縦書きのコピー、続けてCTA 9. **お客様の声**（共感と安心）: VOICE番号付きの白カードを左右交互に並べる 10. **成分・製法**（根拠を示す）: 菌群4つのグリッド、菌名のピルタグ、正円バッジ群、原材料表 11. **開発者の思い**（ストーリーで信頼を得る）: アーチ型の枠のカードに、人物写真と長文 12. **最終オファー**（購入）: 複数コースの価格カードを並べ、単品購入枠を添える 13. **よくある質問**（不安の解消）: 白カード内に、ピンクのQ帯と回答を交互に並べる 14. **フッター**（法的リンク）: 中央揃えのテキストリンクと、ピンク地のコピーライト ## Imagery - 30〜50代女性の自然光の笑顔写真。白い服で明るく柔らかい階調 - 悩みの場面はモノクロ写真にする - 商品は芝生や木の台に置き、背景を浅くぼかす - 菌はパステルの不定形でダンベル型のフラットなイラスト - 背景に半透明のカプセルや棒状モチーフを散らす - 人物の線画イラストに淡いピンクの差し色を入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため以下は推奨。PC は最大幅 750px 前後の中央カラムに SP デザインを置き、左右は淡いグレー地にする - 正円バッジや菌群のグリッドは、PC で横一列に広げてよい - 大見出しは PC で 1.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-2b015b71`（元 LP の URL から採番） - **元 LP**: https://global-fo.com/lp/soilallplus/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。