--- version: alpha name: Soft Pink Bubble Oral Care Supplement LP description: 白地に淡いピンクと濃いローズ赤を合わせ、泡玉のビジュアルと金色の月桂樹バッジで信頼感と可愛さを出したサプリの縦長 LP。実績を見せた後、SNS 拡散、悩みの提起、理由説明、番号付きの特長へと進む訴求型の構成。 colors: primary: '#EB5569' dark-section: '#DB526A' background: '#FEFEFE' background-alt: '#FEF2F5' tint-1: '#FBD1D6' secondary: '#AB7B4F' accent-1: '#D4A93C' marker: '#F5F29B' text: '#585452' text-muted: '#A3A2A0' surface: '#E7E7E9' accent-2: '#D7A7A3' cta: '#CB6364' on-cta: '#FEF6F1' primary-accessible: '#DE1A34' cta-accessible: '#C24849' accent-2-accessible: '#B2554E' typography: display: fontFamily: Shippori Mincho fontSize: 38px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 64px fontWeight: 500 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px 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}' heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 40px laurel-badge: textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 90px sns-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 440px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 80px feature-number: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 80px circle-photo: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 170px additive-free-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 95px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px coupon-ticket: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 120px --- # DESIGN.md — 桜ピンク×白の泡玉オーラルケアサプリ LP（Soft Pink Bubble Oral Care Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: かわいい、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 淡ピンク・泡玉・金の月桂樹・SNS風フレーム・円形写真・番号付き特長 - **地の質感**: 白地にシルクのような柔らかいグラデーションと光沢感のある泡玉。紙吹雪で華やかさを足す - **形**: 円形の写真切り抜き、四角い帯見出し、角丸カード、下向き三角の吹き出し - **温度感**: 暖かめ。ピンクと金でやさしく華やか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EB5569` | 見出し帯・強調文字のローズ赤 | | 画素の実測 | | `dark-section` | `#DB526A` | SNSセクションの地 | | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | | 画素の実測 | | `background-alt` | `#FEF2F5` | 薄ピンクのセクション地 | | 画素の実測 | | `tint-1` | `#FBD1D6` | 円グラフや枠線の淡ピンク | | 画素の実測 | | `secondary` | `#AB7B4F` | 番号数字・ラベルの焼き茶 | | 画素の実測 | | `accent-1` | `#D4A93C` | 月桂樹バッジの金 | | 推定 | | `marker` | `#F5F29B` | 文字下の黄色マーカー | | 画素の実測 | | `text` | `#585452` | 見出し・本文の濃グレー | | 画素の実測 | | `text-muted` | `#A3A2A0` | 注釈のグレー | | 画素の実測 | | `surface` | `#E7E7E9` | 無添加円の薄グレー | | 画素の実測 | | `accent-2` | `#D7A7A3` | クーポン券のくすみピンク | | 画素の実測 | | `cta` | `#CB6364` | 登録ボタンのローズ | | 画素の実測 | | `on-cta` | `#FEF6F1` | ボタン文字の白 | | 画素の実測 | | `primary-accessible` | `#DE1A34` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#C24849` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#B2554E` | AA を満たす補正値（計算） | | 計算 | - 白地を基本にし、薄ピンクの地は推奨リストなどの区切りに使う - ローズ赤は見出し帯と数字の強調にだけ使う - SNS 紹介だけはローズ赤の全幅背景にして、白いカードを載せる - 実績は金の月桂樹と焼き茶の明朝文字で見せる - 悩みの提起は黒い帯とモノクロ写真にして暗めのトーンへ切り替える - 大事な一文には黄色マーカーを引く - `heading-band` は文字 `#FEF6F1` × 背景 `#EB5569` のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE1A34`、4.57:1）を使う。 - `button-primary` は文字 `#FEF6F1` × 背景 `#CB6364` のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C24849`、4.56:1）を使う。 - `coupon-ticket` は文字 `#FEF6F1` × 背景 `#D7A7A3` のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#B2554E`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー | 明朝 | Shippori Mincho | 700 | 38px | 1.3 | 0.05em | | `headline-lg` | セクションの大見出し | ゴシック | Noto Sans JP | 700 | 30px | 1.35 | 0.04em | | `headline-md` | 特長の小見出し（ローズ赤） | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em | | `headline-sm` | 帯見出し・リード | ゴシック | Noto Sans JP | 500 | 18px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 01〜04の番号と実績の数字 | 欧文セリフ | Playfair Display | 500 | 64px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.05em | - 実績と番号は明朝・セリフ体にし、焼き茶か金で上品に見せる - 本文と見出しはゴシックで読みやすくする - 強調語だけローズ赤の太字にして一段大きくする - 見出しの前置きは「＼ ／」で挟んだ小さな文字にする - 注釈は ※ 付きの 10px のグレーで、該当ブロックのすぐ下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分写真は 2 列、無添加の円は 3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは中央揃えで縦に積む - 特長は大きな番号を左上に置き、白いカードと重ねる - 成分は円形写真を「×」でつないで並べる - 説明は小見出し→本文→図解の順に置く - 見出しには下線か三角の吹き出しを付けて次へつなぐ ## Elevation & Depth - 基本は影なしのフラット - SNS カードは白地で影を付けない - ボタンは下に濃い影を付けて立体的にする - 泡玉は光沢のハイライトで立体に見せる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 成分や悩みの写真は正円で切り抜く。インフルエンサー写真は傾けた矩形で白枠を付ける - **セクション境界**: 直線の境界。セクションの間に下向きの三角や V 字の線を入れる - 見出し帯は角丸なしの長方形 - 推奨リストは細い枠線の四角とチェックボックス - 吹き出しは角丸で、下向きの三角を付ける - クーポンは切り込みと点線のあるチケット形 ## Components - **帯見出し**（`heading-band`）: ローズ赤の長方形に白文字。2 行のときは段ずらしで重ねる - **月桂樹実績バッジ**（`laurel-badge`）: 金の月桂樹で囲み、焼き茶の明朝で順位や本数を見せる - **SNS 投稿風カード**（`sns-card`）: 白い角丸カードに写真と吹き出しタグを載せ、下にハート・コメント・送信アイコンを並べる - **チェックリスト**（`check-list`）: 四角のチェックボックスと 2 行の文。文の一部に黄色マーカーを引く - **特長番号**（`feature-number`）: 01 などの大きなセリフ数字を焼き茶で入れ、カード左上に重ねる - **円形写真＋キャプション**（`circle-photo`）: 正円の写真の下に名称を置き、2 枚を×でつなぐ - **無添加マーク**（`additive-free-circle`）: 薄グレーの円に斜線と成分名。3 列×2 段 - **登録ボタン**（`button-primary`）: ローズのピル型に星アイコンと白い太字。下に影 - **クーポン券**（`coupon-ticket`）: くすみピンクのチケットに大きな金額と点線の切り取り線 ## Do's and Don'ts **Do** - 白地を広く取り、ピンクは淡色を中心に使う - 数値の実績は月桂樹と明朝で上品に見せる - 成分や悩みの写真は正円で統一する - 強調語はローズ赤の太字か黄色マーカーで示す - 主張ごとに ※ 注釈を小さく添える **Don't** - 原色の赤やビビッドな色を広い面に使わない - 角張った重い黒背景を多用しない（悩み提起の帯だけにする） - 番号や実績にゴシックの極太体を使わない - 写真の形を四角と円で混在させない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と実績を一目で伝える）: ピンクの泡玉背景に人物写真を置き、明朝の大コピーを載せる。泡玉 2 つで機能を×表示し、月桂樹バッジ 2 つを並べる 2. **商品イメージ**（パッケージの可愛さを見せる）: 白いガラスの上に商品を置いた明るい物撮り 3. **ブランド実績**（信頼感を出す）: 紙吹雪の背景に黄色マーカーのリードを置き、シリーズ商品の写真と月桂樹バッジを複数並べる 4. **インフルエンサー紹介**（第三者のおすすめを見せる）: 段ずらしの帯見出しの下に、傾けた動画キャプチャを 2 枚。手描きのハートと吹き出しを添える 5. **SNS 口コミ**（話題性を見せる）: ローズ赤の全幅背景に SNS 風カードのスライダーを置き、下にサムネイル投稿を 2 段で横に流す 6. **満足度**（数値で効果感を示す）: 淡ピンクの大きな円グラフに大きな % 表示。茶色の吹き出しと商品画像を添える 7. **こんな方におすすめ**（ターゲットの自己認識を促す）: 薄ピンクの地に枠線ボックスを置き、帯見出しとチェックリスト 3 項目を並べる 8. **悩みの提起**（問題に気づかせる）: 困り顔の写真に黒い帯の見出しを重ね、本文と口内イラスト、天秤の図解、モノクロの円形写真 2 枚を続ける 9. **解決の要点**（理想のバランスを示す）: ピンク枠のボックスに黄色マーカーの比率表示と、キャラクター付きの天秤イラストを入れる 10. **商品紹介**（解決策として商品を出す）: ピンクの水面グラデーションに商品を置き、縦書きの明朝コピー、六角形バッジ、泡玉 2 つを添える 11. **特長 01〜04**（成分・機能・携帯性・無添加を説明する）: セリフ体の大きな番号と白いカード。ローズ赤の見出しに下線を引き、円形写真や無添加の円グリッドを入れる 12. **会員・クーポン案内**（再訪と登録を促す）: ローズ赤の枠バナー、チケット形のクーポン、ピル型の登録ボタン 13. **注文前の注意**（注意事項を伝える）: 淡いグラデーションの枠に、中央揃えの小さな文字を並べる ## Imagery - 人物写真は柔らかな自然光で、肌はピンク寄りの明るい色調にする - 泡玉は光沢とハイライトのあるピンクの球体を CG 風に描く - 成分写真は粉末や菌の接写で、正円に切り抜く - 悩みの写真はモノクロかくすんだ色調にする - 図解は丸い顔のキャラクターを使ったゆるいフラットイラストにする - 金の紙吹雪や手描きのハートで華やかさを足す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC では中央 480〜750px 幅のカラムで SP 構成を保つ - 左右の余白は薄ピンクか白のグラデーションで埋める - SNS サムネイルと無添加の円は、PC では横並びの数を増やしてよい - 見出しの文字サイズは 1.2〜1.4 倍程度に抑える ## 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-b67bbb46`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/miis/miis-mmflora/?l-id=shoptop_widget_item_list/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。