--- version: alpha name: Soft Pink Spa Skincare LP description: 淡いピンクの地に、くすみローズの明朝見出しとこげ茶の本文を合わせたスキンケア通販LPです。湯気や水面の質感を背景に敷き、縦書きコピーと白カードを重ねて「癒し×効果」を伝えます。CTAだけ水色のピル型にして、ピンク一色の画面の中で目立たせています。 colors: primary: '#E07D93' secondary: '#CD919A' background: '#FFFFFF' background-alt: '#F8E9ED' tint-1: '#CD919A' tint-2: '#FEEDF1' cta: '#7BC2D4' on-cta: '#EEFEFF' text: '#614E48' text-body: '#6B5B5A' text-muted: '#A79FA1' line: '#8A7472' accent-1: '#C9A24A' marker: '#F5E1E7' cta-accessible: '#2F7D91' primary-accessible: '#D03B5C' secondary-accessible: '#B35765' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.06em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.1em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 12px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.12em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 24px 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 trial-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.md}' height: 560px badge-discount: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 70px point-heading: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 140px label-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px band-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 50px voice-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 480px award-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 200px --- # DESIGN.md — 桜色と明朝のスパ発想スキンケアLP（Soft Pink Spa Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、上品・高級、清潔・爽やか、情報量多め・訴求型 - **キーワード**: スパ・湯気・水面・桜色・明朝・縦書き - **地の質感**: 水面の揺らぎ、湯気のぼかし、大理石風の淡いピンクの地。光沢のある柔らかいグラデーション - **形**: 角丸の小さい白カードと、左上に罫線のL字を置いた見出し。水色のピル型CTAと、ピンクの丸いバッジ - **温度感**: ややあたたかい。ピンクとベージュが中心で、香りの話だけ森の緑と水色を入れる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E07D93` | 強調見出し・ブランドのローズピンク | 4% | 画素の実測 | | `secondary` | `#CD919A` | 濃いくすみローズ（帯見出しの地） | 6% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 20% | 画素の実測 | | `background-alt` | `#F8E9ED` | 淡いピンクの地 | 16% | 画素の実測 | | `tint-1` | `#CD919A` | トライアル枠の濃いピンク地 | 8% | 画素の主要色に補正 | | `tint-2` | `#FEEDF1` | カード見出し帯の淡ピンク | 3% | 画素の実測 | | `cta` | `#7BC2D4` | 主CTAボタンの水色 | 1% | 画素の実測 | | `on-cta` | `#EEFEFF` | CTAボタン上の文字 | 0% | 画素の実測 | | `text` | `#614E48` | 見出しと価格のこげ茶 | 3% | 画素の実測 | | `text-body` | `#6B5B5A` | 本文のグレーブラウン | 3% | 推定 | | `text-muted` | `#A79FA1` | 注釈の薄いグレー | 1% | 画素の実測 | | `line` | `#8A7472` | 見出しの罫線・ポイントのL字線 | 0% | 推定 | | `accent-1` | `#C9A24A` | ランキングの金色 | 0% | 推定 | | `marker` | `#F5E1E7` | 強調文字の下に敷く淡ピンクのマーカー | 0% | 画素の主要色に補正 | | `cta-accessible` | `#2F7D91` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D03B5C` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#B35765` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡ピンク・水面テクスチャを交互に使い、濃い色の面は作らない - 見出しはこげ茶を基本にして、キーワードだけローズピンクにする - 購入CTAだけ水色にして、ピンクの中で補色として目立たせる - トライアル訴求の区間だけ濃いピンクの大理石風の地に白カードを置く - 割引や特典のバッジはピンクの丸地に白文字で書く - ランキングの金色は受賞ブロックの中だけで使う - `button-primary` は文字 `#EEFEFF` × 背景 `#7BC2D4` のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2F7D91`、4.54:1）を使う。 - `badge-discount` は文字 `#EEFEFF` × 背景 `#E07D93` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D03B5C`、4.54:1）を使う。 - `band-heading` は文字 `#EEFEFF` × 背景 `#CD919A` のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#B35765`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVやセクションの大きなキャッチ | 明朝 | Shippori Mincho | 600 | 40px | 1.3 | 0.08em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 500 | 30px | 1.4 | 0.06em | | `headline-md` | 縦書きコピー・小見出し | 明朝 | Noto Serif JP | 500 | 22px | 1.6 | 0.1em | | `headline-sm` | 成分名やステップ名 | 明朝 | Noto Serif JP | 600 | 18px | 1.5 | 0.04em | | `body-md` | 本文・お客様の声 | 明朝 | Noto Serif JP | 400 | 14px | 2.0 | 0.05em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `accent` | 英字の小見出し（POINT / STEP / VOICE） | 欧文サンセリフ | Montserrat | 600 | 12px | 1.2 | 0.2em | | `label-button` | CTAボタンの文字 | 明朝 | Shippori Mincho | 600 | 18px | 1.2 | 0.12em | - 見出しも本文も明朝で統一し、ゴシックは注釈と英字ラベルだけに使う - 1つの見出しの中でこげ茶とピンクを混ぜ、キーワードはピンクで一回り大きくする - 写真の横には縦書きの明朝コピーを2〜3行で置く - 英字ラベルは字間を広げ、小さく大文字で置く - 価格の数字は太いセリフ体で特大にし、「円」は少し小さくする - 強調ワードは白地の四角や細い枠線で囲み、ラベル風にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と縦書きコピーの左右配置を多用 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは左右に約20pxの余白を残して中央に置く - 写真はカードからはみ出させたり、画面端まで裁ち落としたりして重ねる - ポイントの見出しは左上にL字の罫線を添えて左寄せにする - トライアルの訴求ブロックをページの中で3回繰り返す - セクションの間は縦の細い線でつなぎ、流れを見せる ## Elevation & Depth - 白カードには淡くぼかした影（0 4px 20px rgba(150,90,100,0.12)）を付ける - 写真カードは少し傾けて重ね、薄い影を付ける - CTAは影なしのフラットにする ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの四角、または素材写真だけ円形にくり抜く - **セクション境界**: 水平な切り替えか、ゆるい波線。縦線でつなぐ - カードの角丸は小さめにする - バッジは正円にする - 強調ラベルは角丸なしの白い四角にする ## Components - **水色ピルCTA**（`button-primary`）: 横幅いっぱいの水色ピル型ボタン。明朝の白文字に右矢印の線を添える - **トライアル価格カード**（`trial-card`）: 濃いピンクの地に白カードを置く。淡ピンクの見出し帯、商品写真、特大の価格、割引バッジを入れる - **割引丸バッジ**（`badge-discount`）: ピンクの正円に白字で割引率を入れる - **ポイント見出し**（`point-heading`）: 英字ラベルとピンクの番号を並べ、左上のL字罫線から明朝の見出しへつなぐ - **強調ラベル**（`label-box`）: 写真の上に白い四角と細い枠線を置き、明朝コピーを入れる。縦書きにも使う - **帯見出し**（`band-heading`）: くすみローズの帯に白い明朝の見出しを入れる - **お客様の声**（`voice-card`）: 英字ラベルと名前、ピンクの年齢数字を並べ、右に人物写真を置く。本文の一部をピンクのマーカーで強調する - **受賞ブロック**（`award-block`）: 金の月桂冠で受賞内容を囲み、横に誌面の画像を置く ## Do's and Don'ts **Do** - 見出しも本文も明朝にして、余白を広めにとる - ピンクの濃淡と白だけで画面を組み、CTAだけ水色にする - 写真の横に縦書きコピーを置き、雑誌風に見せる - 成分の説明は淡いトーンの断面図イラストで見せる - 注釈は※付きの小さい文字で必ず添える **Don't** - 原色の赤や黒い背景を使わない - 太いゴシックの見出しにしない - CTAをピンクにして周りに埋もれさせない - 強い影や立体的なボタンを使わない - 四角いカードの角丸を大きくしすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（スパ発想の世界観と新商品を伝える）: 水面の写真に商品を並べ、2段の明朝キャッチ、NEWの丸バッジ、縦書きコピー、特長2つのアイコン枠を置く 2. **メディア掲載**（第三者の評価で権威づけする）: 英字ラベルと手書き風の下線付き見出しを置き、白カードに誌面画像と掲載誌のリストを入れる 3. **イベント実績**（人気ぶりを見せる）: ロゴを2つ並べ、会場写真をコラージュ風に重ねる 4. **受賞**（ランキング1位を訴求する）: 銀地に金の月桂冠と特大の受賞表記を置く 5. **トライアルCTA**（お試し購入を促す）: 濃いピンクの地に白い価格カードを置き、水色のピルCTAを付ける 6. **悩みの提起**（忙しい日常への共感）: 人物写真と縦書きコピーを左右交互に置く 7. **コンセプト**（肌と心の二軸を伝える）: グラデーションの地に、無限記号風の線で2つの大きな漢字をつなぐ 8. **3つのこだわり**（成分・香り・手順の特長を伝える）: POINT番号付きの白カードに、素材写真の丸切り抜き、香りのピラミッド図、手順の縦リストを入れる 9. **使い方3ステップ**（商品ごとの効果を説明する）: STEP番号の大きな見出しに商品を斜めに置き、強調ラベルと断面図イラストで説明する 10. **専門家の推薦**（専門家の言葉で信頼を高める）: 縦書きの見出しと人物写真を並べ、マーカー付きの明朝で推薦文を載せる 11. **お客様の声**（実際に使った人の共感を伝える）: VOICE番号と枠囲みの見出し、人物写真、年齢をピンクの数字で入れる 12. **最終CTA**（購入を後押しする）: 受賞ブロックとトライアルカードをもう一度並べる ## Imagery - 水面の揺らぎや湯気を感じる、淡いピンクの柔らかい光の写真 - マットなピンクのボトルを水面や白い台に置き、ハイキーで撮る - 女性の頬や口元をクローズアップした、ツヤ肌の写真 - 泡・化粧水・クリームの質感を、白背景で切り抜いた写真 - パステル調の断面図イラスト（角層・成分の粒） - 香りの説明には森・花・木肌を写した円形の写真 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 375〜480px の SP 幅のカラムを置き、左右は淡ピンクの地かテクスチャで埋める - 広げる場合は、写真と縦書きコピーの左右配置を2カラムにする - CTA の幅は最大 400px 程度に抑える ## 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-e4e4ba08`（元 LP の URL から採番） - **元 LP**: https://shop.mandom.co.jp/shop/lp/hl_p_02.aspx - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。