--- version: alpha name: Sunny Pink Gradient Beauty Supplement LP description: 赤〜ピンク〜紫のグラデーション文字と空色の背景、淡いミント・クリーム色の地で、明るく日差しを感じる美容補助食品の縦長 LP。太陽の放射線モチーフと引用符つきカード、Point 番号バッジで、悩み→提案→根拠→特長→口コミの順に読ませる。 colors: primary: '#C14460' secondary: '#46A6E1' background: '#FFFFFF' background-alt: '#E1F6D7' tint-1: '#FCEDBE' tint-2: '#F3CAD8' surface: '#F5FAFD' text: '#3D3D3D' accent-1: '#0CA68E' accent-2: '#C14460' accent-3: '#FE5CAA' marker: '#F3FDBC' line: '#C7C7C7' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 44px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 999px 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}' gradient-headline: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px worry-quote-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 80px point-badge: backgroundColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 110px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 600px pill-label: backgroundColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 26px speech-tab: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px icon-circle-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 120px review-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 90px text-marker: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 20px venn-diagram: typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 300px --- # DESIGN.md — 桃色グラデと空色の美容サプリ LP（Sunny Pink Gradient Beauty Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型、ポップ・元気 - **キーワード**: 日差し・グラデーション文字・空色・ミント地・引用符カード・太陽の放射線 - **地の質感**: フラットな淡色の面にやわらかなグラデーションと光のボケを重ねる。カードは薄い影で少し浮かせる - **形**: 角丸小さめのカード、円形のアイコン台座、波形のセクション境界、V字の矢印 - **温度感**: 暖かく明るい。ピンクの暖色を空色とミントで爽やかに中和 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C14460` | ブランド色・グラデ見出しの主色 | 3% | 画素の主要色に補正 | | `secondary` | `#46A6E1` | 提案セクションの空色地 | 8% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 37% | 画素の実測 | | `background-alt` | `#E1F6D7` | 特長セクションのミント地 | 6% | 画素の実測 | | `tint-1` | `#FCEDBE` | 口コミセクションのクリーム地 | 6% | 画素の実測 | | `tint-2` | `#F3CAD8` | FVのピンク地 | 5% | 画素の実測 | | `surface` | `#F5FAFD` | 悩みカードの淡い青白 | 4% | 画素の実測 | | `text` | `#3D3D3D` | 見出し・本文の濃グレー | 4% | 画素の実測 | | `accent-1` | `#0CA68E` | Point見出しの緑青文字 | 1% | 画素の実測 | | `accent-2` | `#C14460` | Pointバッジ・ラベルの濃ピンク | 2% | 画素の主要色に補正 | | `accent-3` | `#FE5CAA` | 年代バッジのマゼンタ | 0% | 画素の実測 | | `marker` | `#F3FDBC` | 本文強調の黄マーカー | 0% | 画素の主要色に補正 | | `line` | `#C7C7C7` | 区切り線のグレー | 0% | 画素の実測 | - 地は白を基本に、提案は空色グラデ、特長はミント、口コミはクリームとセクションごとに切り替える - 最重要の見出しは赤橙→ピンク→紫の横グラデーション文字にする - 本文の強調語はピンク文字か黄マーカーで示す - Point見出しの主語は緑青で、ピンク系と補色関係にする - ラベルや番号バッジは濃ピンクの塗りに白文字 - 濃い色の面は使わず全体を明るく保つ ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | グラデーション訴求見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.05em | | `headline-lg` | 問いかけ・セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.6 | 0.08em | | `headline-md` | Pointの小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | リード・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.05em | | `body-md` | 本文・カード内の文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.08em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | Point番号・数字 | 欧文セリフ | Playfair Display | 700 | 44px | 1.0 | 0.0em | | `label-button` | ピンクのラベル・バッジ | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em | - 見出しは中央揃え、字間を広めにとる - 訴求したい語だけ文字サイズを1.3〜1.5倍に上げる - グラデ見出しは2行以内に収める - 本文は左揃えで行間1.9前後 - Point番号はセリフ体の大きな数字で、日本語と書体を対比させる - 悩みカードの文は中央揃えで2行構成 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分の比較だけ2列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右に約6%の余白をとる - セクション間はV字矢印でつなぎ、流れを示す - Pointカードは左上に円形番号をはみ出して置く - アイコン円と文を左右に並べるリストにする - 口コミの吹き出しは左右交互にずらす ## Elevation & Depth - カードには薄い灰色のドロップシャドウ（下と右へ4px程度） - Pointカードの右下に緑青の帯をずらして重ね、厚みを出す - 商品写真には床への映り込みを入れる - 吹き出しにはごく弱い影 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 成分やアイコンは淡いミント／黄緑の正円の台座にのせる。人物は角のない背景なじませ - **セクション境界**: ゆるい波形カーブと、下に向けたV字矢印 - ラベルはピル型 - 年代バッジは小さな正円 - Point番号は大きな正円 - 悩みカードは左上と右下に大きな引用符を置く ## Components - **グラデーション見出し**（`gradient-headline`）: 赤橙からピンク、紫へ流れる極太の訴求見出し - **悩み引用カード**（`worry-quote-card`）: 淡い青白のカードに薄い影、左上と右下に青い大きな引用符 - **Point番号バッジ**（`point-badge`）: 濃ピンクの正円に白の英字とセリフ数字、カード左上にはみ出す - **特長カード**（`point-card`）: 白いカードに影と緑青のずれ帯。見出しの下にピンクの下線 - **ピルラベル**（`pill-label`）: 濃ピンクのピル型に白文字。成分名などのタグ - **吹き出しタブ**（`speech-tab`）: 白い吹き出しにピンク文字で問いかけを書き、見出しの上に置く - **円アイコン付き説明行**（`icon-circle-row`）: 淡い黄緑の円に線画アイコン、右に強調語ピンクの説明文 - **口コミ吹き出し**（`review-bubble`）: 白い吹き出しを左右交互に配置し、右下にマゼンタの年代丸バッジ - **黄マーカー強調**（`text-marker`）: 本文の重要語を太字にし、下半分に黄色マーカーを引く - **共同研究ベン図**（`venn-diagram`）: ピンク・オレンジ・青の円を重ね、中央に商品の粒を置く ## Do's and Don'ts **Do** - 見出しのキーワードはグラデーションと大きい文字で目立たせる - セクションの地の色を淡い色で切り替えて区切る - 太陽の放射線や光のボケを薄く添えて日差し感を出す - 強調はピンク文字・黄マーカー・ピルラベルに限る - 注釈は※付きの小さい文字でカード下に置く **Don't** - 黒や濃紺の重い面を使わない - 角の鋭い直角のボックスを多用しない - グラデ見出しを長文に使わない - 写真を強い彩度や暗いトーンにしない - ピンク・緑青・空色以外の強い色を増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と世界観を一目で伝える）: ピンクのグラデ地に帽子姿の笑顔の女性、大きなグラデのロゴ風タイトル、斜めの手書き風コピー、商品ボトルと丸バッジ 2. **共感の導入**（日常の場面に引き込む）: 白地に薄い太陽の放射線、細字の数字と太字の一文 3. **悩みの提起**（外側ケアだけの不安を言語化する）: 問いかけ見出しの一部を青字にし、引用符つきカードを4つ縦に並べる 4. **解決の提案**（飲むケアを提案する）: 波形で切り替わる空色グラデ地、V字矢印、大きなグラデ見出しと映り込みつきの商品写真 5. **信頼の根拠**（国産と共同開発で安心感を出す）: 丸い文字バッジの見出し、3色の円を重ねたベン図 6. **ベネフィット宣言**（内側からのサポートを強調する）: V字矢印のあとにグレーとピンクの段組み、大きなグラデ見出し 7. **特長ポイント**（成分と手軽さの2つの理由を説明する）: ミント地に吹き出しタブと放射線つき数字、Point番号つき白カード2枚に成分の円写真・ラベル・アイコン行 8. **お客様の声**（利用者の実感を伝える）: クリーム地に線つき見出し、白い吹き出しを左右交互に並べ年代バッジ ## Imagery - 人物は屋外の自然光で、帽子姿で上を見上げる明るい笑顔 - 商品は白背景か空色背景で正面から撮り、下に映り込みを入れる - 成分は葉の水彩風イラストを淡い円にのせる - 動作アイコンは緑青の細い線画 - 太陽の放射線と、ピンク・黄の光のボケを薄く散らす - ビタミンなどは顔のついた丸いキャラクターでかわいく見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はSP幅の1カラムを中央に置いたPC版。PCでも幅480〜750px程度の中央カラムを保つ - PCの左右余白は各セクションの地の色を延ばす - SPでは見出し34px前後、本文14pxを目安に - 成分2列はSPでも2列のまま、アイコン行は横並びを保つ - FVの人物と商品は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-7a498848`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/rohto610/158881/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（10/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。