--- version: alpha name: Soft Coral Femcare Supplement LP description: 生成りと淡いミント・ピンクの地に、コーラルとオレンジを差し色にした女性向け健康食品 LP。英字セリフの大見出しと手書き風スクリプトで上品さを出す。後半は赤い価格訴求と緑の CTA で、しっかり売り込む構成。 colors: primary: '#FB997A' background: '#FEFFFE' surface: '#FEFEFE' background-alt: '#F2E4E0' tint-1: '#DEF2F1' secondary: '#90C1C8' accent-1: '#A46B59' accent-2: '#CC2D2D' accent-3: '#F7D4A9' cta: '#34BA73' on-cta: '#FFFFFF' text: '#3A3A3A' text-muted: '#8A8A8A' marker: '#F9D3CC' cta-accessible: '#268653' primary-accessible: '#DB3A07' typography: display: fontFamily: Cormorant Garamond fontSize: 38px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Mrs Saint Delafield fontSize: 40px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 6px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 70px 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: 64px button-secondary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 48px section-label: textColor: '{colors.text}' typography: '{typography.display}' height: 60px benefit-row: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 64px badge-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px check-list-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 160px voice-card: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px price-block: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.display}' height: 120px ingredient-tile: textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 70px --- # DESIGN.md — コーラル×生成りの女性向けフェムケアサプリ LP（Soft Coral Femcare Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、上品・高級、情報量多め・訴求型 - **キーワード**: フェムケア・コーラル・生成り・英字セリフ見出し・縦書きコピー・価格訴求 - **地の質感**: 生成りの紙のような地。うっすらしたグリッドや光のボケ、オレンジのシルク波を重ねる - **形**: 角丸カード、円形バッジ、ピル型ラベル、緩やかな波の区切り - **温度感**: 暖色寄り。ミントの寒色をアクセントにしてバランスを取る ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FB997A` | ブランドのコーラル（見出し帯・円バッジ） | 8% | 画素の実測 | | `background` | `#FEFFFE` | 生成りの基本地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード | 19% | 画素の実測 | | `background-alt` | `#F2E4E0` | 淡いピンク地 | 7% | 画素の主要色に補正 | | `tint-1` | `#DEF2F1` | 淡いミント地 | 6% | 画素の実測 | | `secondary` | `#90C1C8` | くすみティール（安全性セクション） | 4% | 画素の実測 | | `accent-1` | `#A46B59` | ブラウン系の特典番号・円バッジ | 3% | 画素の主要色に補正 | | `accent-2` | `#CC2D2D` | 価格・割引の赤 | 2% | 画素の実測 | | `accent-3` | `#F7D4A9` | オレンジイエローの商品色 | 4% | 画素の主要色に補正 | | `cta` | `#34BA73` | 緑の主CTAボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#3A3A3A` | 見出しの濃いグレー | 2% | 推定 | | `text-muted` | `#8A8A8A` | 注釈グレー | 0% | 推定 | | `marker` | `#F9D3CC` | 本文の淡ピンクマーカー | 0% | 推定 | | `cta-accessible` | `#268653` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#DB3A07` | AA を満たす補正値（計算） | | 計算 | - 地は生成り・白・淡ピンク・淡ミントをセクションごとに切り替える - 強調語はコーラル文字か淡ピンクのマーカーで目立たせる - 価格と割引率は赤だけで示し、ほかの場所では赤を使わない - 主CTAは緑のグラデーションにして、ページ内で唯一の緑にする - 成分2種はコーラルとイエローで色分けする - 安全性セクションだけティールの地にして、清潔感を出す - `button-primary` は文字 `#FFFFFF` × 背景 `#34BA73` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#268653`、4.55:1）を使う。 - `button-secondary` は文字 `#FFFFFF` × 背景 `#FB997A` のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DB3A07`、4.55:1）を使う。 - `badge-circle` は文字 `#FFFFFF` × 背景 `#FB997A` のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DB3A07`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション英字ラベル（ABOUT/POINT等） | 欧文セリフ | Cormorant Garamond | 400 | 38px | 1.1 | 0.05em | | `headline-lg` | セクション主見出し | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.4 | 0.05em | | `headline-md` | ファーストビュー縦書きコピー | 明朝 | Shippori Mincho | 700 | 44px | 1.2 | 0.05em | | `headline-sm` | カード見出し・声のタイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em | | `note` | 注釈・個人の感想 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 手書きスクリプトの装飾英字 | 欧文スクリプト | Mrs Saint Delafield | 400 | 40px | 1.0 | 0.0em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 900 | 19px | 1.3 | 0.03em | - 英字セリフのラベルの下に短い横線を入れ、その下に和文見出しを置く - ファーストビューと訴求写真には縦書きの明朝コピーを重ねる - 本文は中央揃え。長文のときだけ左揃えにする - 価格の数字は太い大サイズにし、円・税込表記は小さく添える - 見出し前後に斜線『＼ ／』を入れて、小見出しのリード文にする - 成分名などの英字ローマ字は、細身のセリフで大きく見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分写真は 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの頭に英字ラベル、横線、和文見出しの順で中央に積む - カードは画面端から約 6% 内側に置く - 写真の上に半透明の白カードを重ねて本文を載せる - 特典は番号バッジ付きの横並び行を点線で区切る - 価格ブロックの後にCTAと定期購入の注釈を必ず続ける ## Elevation & Depth - 白カードには薄く広いシャドウ（0 4px 16px rgba(0,0,0,.06)）をつける - CTAボタンは下方向に濃いめのドロップシャドウで浮かせる - 写真の上のカードは白 80% 程度の半透明にする ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 人物は角丸の長方形か、背景に溶け込む全幅写真。成分写真は角丸の横長 - **セクション境界**: 緩やかな波形、下向きの三角矢印、リボン型の帯 - 実績バッジ・割引率・人物名は正円で囲む - カテゴリラベルはピル型にする - 区切りに斜めリボンの見出し帯を使う ## Components - **緑グラデのCTA**（`button-primary`）: ピル型で右端に矢印。上段に小さく特典文言、左上に赤丸の補足バッジ - **コーラルの開閉ボタン**（`button-secondary`）: ピル型で、白文字と下向きの山矢印 - **英字セリフ見出し**（`section-label`）: 大きな細いセリフの英字の下に短い線。和文見出しと一緒に使う - **特典リスト**（`benefit-row`）: ブラウンの丸い番号の横に説明、右に赤の大きな数字。行は点線で区切る - **円形訴求バッジ**（`badge-circle`）: コーラルの正円に白い明朝文字で配合や割引率を示す - **チェックリストカード**（`check-list-card`）: 白い角丸カードにチェック丸アイコンと悩みを4行。キーワードはコーラル - **お客様の声カード**（`voice-card`）: コーラルの見出し、イラストのアバター、名前と年齢、注釈 - **価格ブロック**（`price-block`）: 取り消し線の通常価格、赤丸の割引率、赤い大きな初回価格を並べる - **成分タイル**（`ingredient-tile`）: 角丸の写真の下に成分名を小さなグレーで置く ## Do's and Don'ts **Do** - セクションごとに淡い地色を切り替えてリズムを作る - 英字セリフの見出しと和文ゴシックを必ず組み合わせる - 強調は淡ピンクのマーカーかコーラル文字にとどめる - CTAの直前に価格と特典を置き、CTAの直後に定期購入の注釈を置く - グラフは細い線と淡い色の帯で、やさしく描く **Don't** - 濃い原色の背景を広い面積に使わない - 赤を価格以外の装飾に使わない - 緑をCTA以外に使わない - 角張った硬い枠や太い黒線を使わない - 効果を断定する表現の近くに注釈を省かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と実績を一目で伝える）: 女性のポートレートに縦書きの明朝コピー。上部に実績の金バッジとコーラルの帯、下部にコーラルの円バッジ2つ 2. **実績・受賞**（信頼を補強する）: 金枠の中に月桂樹と大きな数字、受賞メダル3つ、注釈 3. **コンセプト**（ブランドの想いを伝える）: ぼかした写真の地にスクリプト英字と中央揃えの文章 4. **悩みの提起**（ターゲットに共感してもらう）: ミント地に白カード、チェックリスト4行 5. **メソッド・監修者**（仕組みと専門性を示す）: ピル型ラベル2つを×でつなぎ、コーラルの枠の中に監修者写真 6. **特典・オファー**（購入動機を作る）: 赤い帯見出しと番号付きの特典4つ、価格ブロック、クーポン、緑CTA 7. **実績データ**（利用者の増加を示す）: 壁写真の地に、コーラルの大きな円で数値を示す 8. **お客様の声**（共感と信頼を得る）: イラストアバター付きの白カードを3枚縦に並べる 9. **メディア掲載・SNS**（社会的証明）: 斜線柄のピンク地に雑誌の誌面、横に並ぶ表紙、3列の写真グリッド 10. **問題の解説**（体の変化の理由を説明する）: グリッドの紙の地に、折れ線グラフのカードと人物写真 11. **解決策・ポイント**（商品の特長を示す）: リボン帯のPOINT、大きな番号、ローマ字の見出し、成分写真の2列グリッド 12. **安全性**（品質への安心感）: ティール地に工場写真、未配合成分を斜線の円で示す 13. **ピックアップの声**（具体的な体験談）: 大きな薄いVOICE番号、人物写真、コーラルの円で名前と年齢 14. **クロージング**（最終的な購入を促す）: 人物写真とスクリプト英字のあと、特典・価格・CTA・継続縛りなしの案内を繰り返す ## Imagery - 30〜50代女性のポートレートは自然光で明るく、白い服で柔らかい表情 - 商品はオレンジとイエローのグラデーション。水面や光の反射の上に置く - 成分は素材の寄りの写真を角丸で切り抜く - 背景にオレンジのシルク波や光のボケをうっすら重ねる - お客様のアバターは顔を省いたシンプルなイラスト - グラフは細い線で、期間を淡い色の帯で示す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため SP の構成を基準にする - PC では中央 750px 前後の 1 カラムに置き、左右に生成りの地を広げる - 成分グリッドは PC で 4 列に広げてもよい - 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-db091095`（元 LP の URL から採番） - **元 LP**: https://bbiteki-lab.com/lp?u=FD071250005s - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。