--- version: alpha name: Soft Pink Pearl Beauty Supplement LP description: 淡いピンクと白の水彩風の地に、濃いマゼンタで強調する40〜50代女性向けの美肌サプリLP。明朝の大見出しで上品さを出し、グラフ・データ・体験談で信頼を積み上げる。価格ボックスとピル型CTAを何度も繰り返す。 colors: primary: '#DC0B73' cta: '#ED6C8A' on-cta: '#FEFCFC' background: '#FFFFFF' background-alt: '#FEF0F6' tint-1: '#FEEAF3' tint-2: '#E7A4A5' text: '#44444B' text-muted: '#7A7A7F' secondary: '#2BA8B0' dark-section: '#0C367B' accent-1: '#E2B84A' accent-2: '#D56349' line: '#F9E7E5' cta-accessible: '#E31C4B' tint-2-accessible: '#CD4345' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 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: 30px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 56px 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: 60px price-badge-cta: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 66px price-box: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 260px ribbon-heading: backgroundColor: '{colors.tint-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 56px data-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 480px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 70px testimonial-card: backgroundColor: '{colors.background}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px yes-no-quiz: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 180px faq-accordion: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 64px gold-medal: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px --- # DESIGN.md — 桃色パールと濃紅の美肌サプリLP（Soft Pink Pearl Beauty Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型 - **キーワード**: 淡ピンク・パール光沢・明朝の大見出し・データ訴求・大人の女性・ピル型CTA - **地の質感**: 水彩のようなピンクのグラデーションに、光の玉・泡・植物の線画を薄く重ねる。白カードには柔らかい影をつける。 - **形**: 角丸の白カード、大きいピル型ボタン、円形の数値バッジや顔写真、斜線つきリボン見出し - **温度感**: 暖色寄り。ピンクを主に使い、ターコイズとネイビーを差し色として少量使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DC0B73` | 強調文字・帯見出し・枠線の濃いマゼンタ | 5% | 画素の実測 | | `cta` | `#ED6C8A` | 申込ボタンの塗り（コーラルピンク） | 2% | 画素の実測 | | `on-cta` | `#FEFCFC` | ボタン上の白文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 23% | 画素の実測 | | `background-alt` | `#FEF0F6` | 淡いピンクのセクション地 | 12% | 画素の実測 | | `tint-1` | `#FEEAF3` | 注意書きボックス・回答欄の淡ピンク | 6% | 画素の実測 | | `tint-2` | `#E7A4A5` | リボン見出し・円グラフの中間ピンク | 6% | 画素の主要色に補正 | | `text` | `#44444B` | 見出し・本文の濃いチャコール | 5% | 画素の主要色に補正 | | `text-muted` | `#7A7A7F` | 出典・注釈の灰色 | 1% | 推定 | | `secondary` | `#2BA8B0` | うるおいを表すターコイズの強調文字 | 1% | 推定 | | `dark-section` | `#0C367B` | データ章の見出し帯・機能カード枠のネイビー | 2% | 画素の実測 | | `accent-1` | `#E2B84A` | Dataや機能番号のゴールドバッジ | 0% | 推定 | | `accent-2` | `#D56349` | グラフ結論吹き出しの朱色 | 0% | 画素の実測 | | `line` | `#F9E7E5` | カードの区切り点線・薄い罫線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#E31C4B` | AA を満たす補正値（計算） | | 計算 | | `tint-2-accessible` | `#CD4345` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いピンクを交互に使い、セクションの切り替えをグラデーションで柔らかくする - 強調する語句はマゼンタの文字にし、1文につき1か所までにする - うるおい系の語はターコイズ、弾力系の語はマゼンタで色分けする - 科学データの章だけネイビーの帯と枠を使い、信頼感を出す - CTAは必ずコーラルピンクのピル型ボタンに白文字で入れる - 番号や実績のバッジにはゴールドのメダル調を使う - `button-primary` は文字 `#FEFCFC` × 背景 `#ED6C8A` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E31C4B`、4.53:1）を使う。 - `ribbon-heading` は文字 `#FEFCFC` × 背景 `#E7A4A5` のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-2-accessible`（`#CD4345`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ・章の大見出し | 明朝 | Shippori Mincho | 700 | 44px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 30px | 1.4 | 0.05em | | `headline-md` | 帯見出し・訴求コピー | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.04em | | `headline-sm` | カード見出し・設問 | ゴシック | Noto Sans JP | 500 | 17px | 1.6 | 0.05em | | `body-md` | 本文・体験談 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em | | `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 価格の数字・ブランドの英字 | 欧文サンセリフ | Montserrat | 700 | 30px | 1.1 | 0em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.3 | 0.08em | - 大見出しは明朝で書き、上品さを出す - 説明文やUIの文字はゴシックにし、字間を少し広げる - 強調語は色を変え、上に傍点を付ける - 見出しは左揃えと右揃えを段ごとに交互にして動きを出す - 価格は数字だけを大きくし、「円（税込）」は小さく添える - 注釈は小さい灰色の文字にし、※番号で本文と結ぶ - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。価格ブロックだけ商品画像と価格の左右 2 分割 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右に約15pxの余白を残して置く - 写真は全幅で、テキストを重ねて配置する - 価格とCTAのセットを約3画面ごとに繰り返す - グラフは白カードの中に置き、下に結論ボックスを付ける - 体験談は丸い顔写真を左、本文を右に並べる ## Elevation & Depth - 白カードには薄いピンクがかった広めの影を付ける（例: 0 4px 16px rgba(200,120,130,.15)） - CTAボタンには白の外枠と下向きの影を付けて立体的に見せる - Yes/Noボタンはグラデーションと内側の影でパールのような質感にする - ゴールドのバッジにはメタリックなグラデーションを付ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物は角版か全幅の写真で背景に溶け込ませる。顔写真と数値は円形で切り抜く - **セクション境界**: 直線では区切らず、グラデーションでぼかしてつなぐ。一部に斜めのピンクの帯を入れる - CTA・Yes/No・タグはすべてピル型にする - リボン見出しは左右に斜線を付けた台形の帯にする - グラフの結論は角丸の吹き出しボックスにする - Q&AのQは淡ピンクの円の中に明朝で書く ## Components - **申込ピル型CTA**（`button-primary`）: コーラルピンクのグラデーションに白い外枠を付けた全幅ボタン。右端に＞を付ける - **価格円バッジ付きFV CTA**（`price-badge-cta`）: ボタン左端に白い円形バッジを重ね、1日あたりの価格を表示する - **価格カード**（`price-box`）: 左に商品画像、右に白カード。英字の商品名・通常価格・マゼンタ枠の条件タグを入れる - **斜線リボン見出し**（`ribbon-heading`）: ピンクの帯に白文字を入れ、両側に＼／の斜線を付けた導入ラベル - **データグラフカード**（`data-card`）: ゴールドの番号バッジと色帯の見出しを付けた白カード。中にグラフを置き、下に結論ボックスを入れる - **悩みチェックリスト**（`check-list`）: 白カードにマゼンタのチェックアイコンと悩みの文を並べ、行の間を点線で区切る - **体験談カード**（`testimonial-card`）: 円形の顔イラストと引用符付きの本文。強調部分はマゼンタにし、年代を右下に書く - **セルフチェック設問**（`yes-no-quiz`）: 番号の円と設問を書いた白カードに、パール調のYes/Noピルを2つ並べる - **FAQアコーディオン**（`faq-accordion`）: Qを淡ピンクの円で囲んだ白い行。開くと淡ピンクの地にA.を表示する - **ゴールドメダルバッジ**（`gold-medal`）: 月桂樹付きの金色の円。購入条件の安心ポイントを示す ## Do's and Don'ts **Do** - 淡ピンクの水彩調の地と白いカードを基調にする - 大見出しは明朝にし、改行を多くして余韻を作る - 主張には必ずグラフ・出典・注釈を添える - 価格カードとCTAのセットを複数回繰り返す - 強調はマゼンタの文字と傍点に限る **Don't** - 原色の赤や黒ベタの面を広く使わない - 角の立った四角いボタンにしない - 強調色を1文に何色も混ぜない - ネイビーをデータの章以外で多用しない - 注釈や出典を省かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ターゲットの憧れと商品を一目で伝える）: 笑顔の女性の写真の上に明朝の大キャッチを置く。円形の機能バッジ、商品パッケージ、価格バッジ付きCTAを配置する 2. **悩みの提起**（年齢による肌の悩みに共感させる）: 暗めの人物写真に縦書きの独白を重ねる。その下に白カードのチェックリストで悩みを3〜4つ並べる 3. **原因の解説**（悩みの本当の原因を示す）: ピンク枠で囲んだキーワード、肌断面の比較図、くの字矢印で順に説明する 4. **データ根拠**（年齢による減少を数値で示す）: マゼンタの帯見出しの下に、ゴールドのData番号を付けたグラフカードを2枚並べる。最後に出典ボックスを置く 5. **商品紹介**（解決策として商品を提示する）: 商品パッケージと素材写真の横に縦書きの大コピーを置く。ターコイズとマゼンタで2つの機能を色分けする 6. **価格CTA**（購入へ誘導する）: リボン見出し、人物写真、価格カード、ピル型CTAの順に並べる 7. **開発ストーリー**（素材と研究による信頼を伝える）: 畑や研究者の写真に円形の実績バッジを重ね、中央揃えの明朝で物語を書く 8. **臨床データ**（機能性を科学的に裏付ける）: ネイビーの帯見出しにゴールドの機能番号を付ける。折れ線グラフの下に朱色の結論吹き出しを置く 9. **お客様の声**（実感の声で後押しする）: 大きな%のドーナツグラフ、手書き風の吹き出し、顔イラスト付きの体験談カードを並べる 10. **セルフチェック**（自分ごと化させる）: 3問のYes/Noカードの後に、チェックアイコン付きの解答ボックスを置く 11. **コスパ訴求**（1日あたりの安さを伝える）: マゼンタの帯の後に、いつものスキンケアと商品を＋で並べた図を置く。2分割の価格比較ボックスも入れる 12. **よくある質問**（購入前の不安を解消する）: 明朝の見出しの下に、白いアコーディオンを8項目ほど並べる 13. **最終CTA**（購入条件の安心感を伝えて申込させる）: ゴールドメダルで縛りなしを示し、価格・箇条書きの説明・ピル型CTAで締める ## Imagery - 40〜50代女性の写真。自然光でハイキーにし、頬に手を添える笑顔のポーズにする - 悩みの場面は夕景で彩度を落とした物憂げな写真にする - 背景はピンクの水彩グラデーションに、光の玉・水滴・シャボン玉を散らす - 植物の細い線画を角にうっすら添える - 原料の畑や研究室は明るく清潔なトーンで撮る - グラフは白地で、マゼンタの点と線のシンプルな作りにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に幅480px前後のSPカラムを置き、左右を淡ピンクの背景で埋める - PCに広げる場合は、FVを人物写真とコピーの2カラムにするとよい - データカードや体験談はPCで2列に並べてもよい - CTAの幅はPCでは最大420px程度に抑える ## 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-e2c090ce`（元 LP の URL から採番） - **元 LP**: https://lp.potato-ceramide.calbee.jp/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-23、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。