--- version: alpha name: Pastel Tri-Color Serum Skincare LP description: 淡いピンク・ミント水色・アプリコットの3色を、商品タイプごとのテーマ色として切り替えるスキンケア美容液LP。泡や水滴の透明感ある写真を背景に敷く。濃い見出しと注釈記号を組み合わせた、画像主体の縦長の訴求構成。 colors: primary: '#E9806E' secondary: '#5FB3AE' accent-1: '#F1AE93' background: '#F4E8E8' background-alt: '#EDFBFC' tint-1: '#FDFAF3' tint-2: '#F0BCAC' surface: '#FEFDFD' text: '#312E2B' text-body: '#5A4A44' text-muted: '#838187' dark-section: '#2F3A40' line: '#F0BCAC' secondary-accessible: '#3C7F7B' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Great Vibes fontSize: 18px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' pill-label: backgroundColor: '{colors.secondary}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px dark-tag: backgroundColor: '{colors.dark-section}' textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 28px worry-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 56px free-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 72px ingredient-bubble: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 160px step-flow: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 140px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 240px note-text: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 14px --- # DESIGN.md — ピンク×水色×アプリコットの3色美容液LP（Pastel Tri-Color Serum Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、上品・高級、情報量多め・訴求型 - **キーワード**: 透明感・泡・水滴・3色テーマ切替・個包装・注釈付き訴求・パステル - **地の質感**: 光のにじみや虹色のハレーション、泡と水滴を写真で重ねた、つややかで透明な質感 - **形**: 角丸の白カード、ピル型のラベル、円形の成分バブル、斜線入りの禁止マーク付き正方形 - **温度感**: やや温かいパステル。水色パートだけ涼しげにする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E9806E` | ピンク系テーマの強調色（キーワード・箇条点） | 3% | 推定 | | `secondary` | `#5FB3AE` | 水色系テーマのメイン色 | 4% | 推定 | | `accent-1` | `#F1AE93` | アプリコット系テーマの色 | 3% | 画素の実測 | | `background` | `#F4E8E8` | ピンク系パートの淡い地 | 20% | 画素の実測 | | `background-alt` | `#EDFBFC` | 水色系パートの淡い地 | 18% | 画素の実測 | | `tint-1` | `#FDFAF3` | アプリコット系パートの淡い地 | 12% | 画素の実測 | | `tint-2` | `#F0BCAC` | ピンクの中間色（帯・セクション地） | 7% | 画素の主要色に補正 | | `surface` | `#FEFDFD` | カード・悩みボックスの白 | 8% | 画素の実測 | | `text` | `#312E2B` | 見出しの濃い色 | 3% | 画素の実測 | | `text-body` | `#5A4A44` | 本文・ブランド文字のブラウン | 2% | 推定 | | `text-muted` | `#838187` | 注釈の小さいグレー文字 | 1% | 画素の実測 | | `dark-section` | `#2F3A40` | ラベル帯の濃い色（使用期限・高濃度など） | 1% | 推定 | | `line` | `#F0BCAC` | 禁止マークの斜線・枠線 | 1% | 画素の主要色に補正 | | `secondary-accessible` | `#3C7F7B` | AA を満たす補正値（計算） | | 計算 | - 商品タイプごとにテーマ色を1つ決め、そのパートの地・ラベル・強調文字を同系色でそろえる - 地は白に近い淡いトーンにして、写真の光とグラデーションでつなぐ - 強調語だけをテーマ色の濃いめで塗り、ほかは濃いグレーにする - 濃い色の面は小さなラベル帯だけに使う - 注釈はグレーの極小文字で見出し下か区画の下端に置く - `pill-label` は文字 `#FEFDFD` × 背景 `#5FB3AE` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3C7F7B`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 各パートの大見出し | ゴシック | Noto Sans JP | 700 | 40px | 1.25 | 0.02em | | `headline-lg` | 明朝系のキャッチ見出し | 明朝 | Shippori Mincho | 600 | 30px | 1.35 | 0.05em | | `headline-md` | セクション見出し・悩みの問いかけ | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.02em | | `headline-sm` | カードタイトル・ステップ名 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.0em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | Step表記などの筆記体 | 欧文スクリプト | Great Vibes | 400 | 18px | 1.2 | 0.0em | | `label-button` | ピル型ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.05em | - 大見出しは2行で改行し、強調語だけテーマ色にする - 見出しの語尾に※番号を小さく上付きで添える - 明朝とゴシックをパートごとに使い分けて緩急をつける - スラッシュで囲む見出し「＼ ／」をサブ見出しに使う - 本文は短く2〜3行で区切る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード群は2〜3列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは背景写真を全幅で敷き、文字を上に重ねる - 悩みは2×2のピル型カードか、縦の箇条書きにする - 使い方は丸番号のステップを横に3つ並べ、矢印でつなぐ - 注釈はセクションの下端に左寄せでまとめる - 商品写真は見出しの右や下に大きく斜めに置く ## Elevation & Depth - 白カードにごく薄い影（0 4px 12px rgba(0,0,0,.06)）をつける - 泡や個包装の写真で奥行きを出し、面の影は控える - 悩みボックスは半透明の白をにじませて浮かせる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜き。ステップ画像は角丸の正方形か円形 - **セクション境界**: 直線で切り替え、背景のグラデーションでつなぐ - 成分は円形の泡の中に文字を入れる - 「〜フリー」は正方形の枠に斜線を入れた禁止マークにする - ラベルはピル型か小さな角丸の矩形 ## Components - **テーマ色のピルラベル**（`pill-label`）: 効果や使い方の要点を入れる、塗りのピル型ラベル - **濃色タグ**（`dark-tag`）: 見出し上に置く短い訴求タグ - **悩みカード**（`worry-card`）: アイコン円と2行の悩みを入れた白いピル型カードを2×2で並べる - **不使用バッジ**（`free-badge`）: 斜線入りの正方形枠に成分名を入れる - **成分バブル**（`ingredient-bubble`）: 透明な泡の円の中に、成分名とチェック付きの効果を入れる - **使用ステップ**（`step-flow`）: 丸番号・画像・名称を横に3つ並べ、中央に目印のラベルを付ける - **処方特長カード**（`feature-card`）: 上にテーマ色の見出し帯、丸番号、説明、質感写真を縦に積むカード - **注釈**（`note-text`）: ※番号付きの小さなグレー文字 ## Do's and Don'ts **Do** - テーマ色はパートごとに1色だけ使う - 泡・水滴・光のにじみで透明感を出す - 強調語はテーマ色で太く、見出しの中で1〜2語に絞る - 効果の訴求には必ず注釈番号を付ける - 白カードは角丸にして余白を広めにとる **Don't** - 原色や彩度の高い赤・青を広い面に使わない - 1つのパートに複数のテーマ色を混ぜない - 背景を真っ白の単色だけにしない - 角の鋭い重たい枠線を多用しない - 注釈を本文と同じ大きさにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（3タイプの商品を一目で見せる）: 水面と泡の写真の上に、3色のパッケージを斜めに重ねる。左側にロゴ風の明朝見出しを置く 2. **タイプ選択**（肌悩み別に3種を比較する）: 3色の箱を横に並べ、下に悩みと略称ラベルを置く 3. **商品A訴求**（主成分と鮮度を伝える）: ピンク地に大見出しと濃色タグを置き、個包装の写真を大きく見せる 4. **悩みの提起**（共感を得る）: 半透明の白ボックスに、点付きの太字の悩みを縦に5つ並べる 5. **不使用成分**（安心感を伝える）: 斜線入りの正方形バッジを4+3個のグリッドで並べる 6. **使い方**（習慣化のイメージを伝える）: 丸番号の3ステップと、Step筆記体付きの手順写真を並べる 7. **商品B訴求**（水色タイプの価値を伝える）: 水色地で、泡の中に個包装を置いたビジュアルにする 8. **悩みカード**（タイプ別に共感を得る）: 2×2のアイコン付きピルカードと商品写真、スラッシュで囲んだ締めの見出し 9. **成分の解説**（Wケアと保湿成分を伝える）: 左右2つの泡の円にチェックリストを入れる。成分名の泡を散らす 10. **処方の特長**（低刺激設計を伝える）: 3列の特長カードと質感の写真 11. **商品C訴求**（エイジングケアのタイプを伝える）: アプリコット地で、悩みカード・成分の泡・使い方を同じ型で繰り返す ## Imagery - 泡や水滴を明るい逆光で撮り、虹色のハレーションを入れる - 個包装やパッケージは切り抜いて斜めに配置し、柔らかい影を落とす - テクスチャ（ジェル・クリーム・水）は白い背景でマクロ撮影する - 手のひらや頬に塗る女性の写真は、明るく清潔なトーンにする - 線画アイコンは細線にして、テーマ色の円の中に入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はPC画像だが、幅の狭い縦長の画像主体で組まれているので、SPでもほぼそのまま1カラムにする - PCでは中央に約480〜750pxの列を置き、左右は淡いテーマ色で埋める - SPでは2×2カードを維持する。文字が詰まる場合は1列にする - SPでは3列の特長カードを横スクロールか縦積みにする - SPでは大見出しを36〜40pxに抑え、2行で収める ## 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-2dba18d3`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/granbeautyon-line/4580785290040-2515/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。