--- version: alpha name: Airy Lavender Blue Foam Skincare LP description: 白と淡いグレーの地に、青紫のブランド色とくすみスレートの悩みセクションを組み合わせたスキンケア LP。泡や水滴の透明感ある写真、丸く切り抜いた肌写真、細い線のアイコンで、やさしさと科学的な説得力を両立させている。 colors: primary: '#758BD4' background: '#FFFFFF' background-alt: '#E7E8EC' dark-section: '#738299' on-dark: '#FBFEFE' text: '#010102' text-body: '#4D4E52' secondary: '#9897A7' accent-1: '#C181AF' accent-2: '#498FAD' tint-1: '#B0C7F0' tint-2: '#FDEBEB' line: '#CCD5E2' surface: '#EBEBEB' dark-section-accessible: '#67768E' primary-accessible: '#546FCA' accent-1-accessible: '#AD5895' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Poppins fontSize: 18px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 16px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' feature-icon-row: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 110px outline-tag: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 30px price-block: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 90px worry-circle: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 200px highlight-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 40px compare-pill-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 560px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px free-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 84px step-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 110px section-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 30px --- # DESIGN.md — 淡い青紫と泡白のピーリング洗顔 LP（Airy Lavender Blue Foam Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、シンプル・ミニマル - **キーワード**: 泡・透明感・青紫グラデーション・細線アイコン・成分訴求 - **地の質感**: ふわっとした泡や水滴の写真、すりガラスのような淡いグラデーション背景 - **形**: 円形の写真切り抜き、上が半円のピル型カード、細い線の区切り - **温度感**: やや寒色寄りの涼しい印象。ピンクを差して柔らかさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#758BD4` | ブランド青紫（見出し帯・英字ラベル） | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#E7E8EC` | 淡いグレーのセクション地 | 14% | 画素の実測 | | `dark-section` | `#738299` | 悩み提起のスレート地 | 9% | 画素の実測 | | `on-dark` | `#FBFEFE` | スレート地の白文字 | 1% | 画素の実測 | | `text` | `#010102` | 見出し・本文の黒文字 | 3% | 画素の実測 | | `text-body` | `#4D4E52` | 本文のグレー文字 | 3% | 画素の実測 | | `secondary` | `#9897A7` | グレイッシュパープルの円・帯 | 3% | 画素の実測 | | `accent-1` | `#C181AF` | AHA側のピンク | 1% | 画素の実測 | | `accent-2` | `#498FAD` | BHA側のティールブルー | 1% | 画素の実測 | | `tint-1` | `#B0C7F0` | 泡背景の淡い水色 | 5% | 画素の実測 | | `tint-2` | `#FDEBEB` | 肌層イラストのピンクベージュ | 3% | 画素の実測 | | `line` | `#CCD5E2` | 細い区切り線・枠線 | 1% | 画素の主要色に補正 | | `surface` | `#EBEBEB` | 価格補足ボックスのグレー | 1% | 画素の実測 | | `dark-section-accessible` | `#67768E` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#546FCA` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#AD5895` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いグレーを交互に使い、悩みパートだけスレート地に白文字で沈める - ブランド青紫は見出しの帯・英字ラベル・アイコン塗りに限定する - 2成分の対比はピンクとティールで左右に色分けする - キービジュアルは水色→ラベンダー→ピンクの淡いグラデーション - 強調語は太字化のみで色は増やさない - 注釈は小さな灰色文字で地に溶かす - `worry-circle` は文字 `#FBFEFE` × 背景 `#738299` のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#67768E`、4.54:1）を使う。 - `highlight-band` は文字 `#FBFEFE` × 背景 `#758BD4` のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#546FCA`、4.6:1）を使う。 - `compare-pill-card` は文字 `#C181AF` × 背景 `#FFFFFF` のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#AD5895`、4.56:1）を使う。 - `pill-label` は文字 `#FBFEFE` × 背景 `#758BD4` のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#546FCA`、4.6:1）を使う。 - `free-badge` は文字 `#758BD4` × 背景 `#FFFFFF` のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#546FCA`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.05em | | `headline-lg` | セクション大見出し・帯付き見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.04em | | `headline-md` | 悩み提起・導入のリード（細字＋太字混在） | ゴシック | Noto Sans JP | 400 | 20px | 1.6 | 0.05em | | `accent` | 英字セクションラベル・商品英名 | 欧文サンセリフ | Poppins | 700 | 18px | 1.2 | 0.1em | | `headline-sm` | カード内見出し・アイコン下ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.04em | | `note` | 成分注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | - 見出しは細字の文に太字のキーワードを混ぜる - 重要語に傍点（上部のドット）を付ける - キービジュアル上のコピーは白抜きの縦書き - 英字ラベルは大文字で字間を広げる - 本文は行間2.0でゆったり組む - 注釈記号は小さな上付き※番号 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較は 2 列、アイコンは 3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクション間は細い縦線や×記号でつなぐ - 悩みは丸写真と文を左右交互に配置 - 比較カードは2列で左右対称 - 写真は全幅で切り替えのリズムを作る - 下層セクションは英字ラベル＋和文見出しの左揃え ## Elevation & Depth - 影はほぼ使わずフラット - 白カードはスレート地の上に置いて浮かせる - 泡や水滴の写真で奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 悩み写真は正円切り抜き、成分写真は上半円カード内の矩形 - **セクション境界**: 直線の色切り替えと、細い縦線・×記号の区切り。FV下部は泡で曲線的に終わる - 比較カードは上辺が半円のピル型 - ラベルはピル型の塗り帯 - 無添加表示は斜線入りの細線の円 - 見出し帯は角丸なしのベタ塗り矩形 ## Components - **3つの特長アイコン**（`feature-icon-row`）: 細線で区切った3列に線画アイコンと2行ラベル - **枠線カテゴリラベル**（`outline-tag`）: 黒細枠の四角に商品カテゴリを入れる - **価格表示**（`price-block`）: 大きな数字の価格と、グレー2分割の単価・期間ボックス - **悩みの丸写真＋チェック**（`worry-circle`）: 正円の肌写真と細線チェック、太字混じりの白文字 - **塗り帯見出し**（`highlight-band`）: 1行ずつ青紫や白の帯を敷いた強調見出し - **成分比較カード**（`compare-pill-card`）: 上が半円の白カード2枚。成分名の色、写真、3アイコン、図解 - **ピル型ラベル**（`pill-label`）: 正常/乱れの比較を青紫と濃グレーのピルで示す - **無添加バッジ**（`free-badge`）: 斜線入りの細線円に青紫文字、3＋2で配置 - **使い方ステップ**（`step-item`）: STEP英字、円の線画イラスト、右に説明文 - **英字セクションラベル**（`section-label`）: 青紫の大文字英字の下に黒の和文見出し ## Do's and Don'ts **Do** - 泡・水滴・透明感のある写真を主役にする - 見出しは細字と太字の混在で抑揚をつける - 2成分の比較は色を分けて左右対称に置く - 線画アイコンは細い線で統一する - 注釈は※番号で丁寧に付ける **Don't** - 原色の赤や黄色で強調しない - 太い影や立体ボタンを使わない - 装飾フォントや手書き書体を混ぜない - 背景に濃い柄を敷かない - 本文の行間を詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と2成分の掛け合わせを一目で伝える）: 白地の大見出しの下に、泡と商品のグラデーション写真。泡玉に成分名、左右に白い縦書きコピー 2. **特長アイコン・商品情報・価格**（要点と価格を示す）: 3列アイコン、枠線ラベル、英字商品名、大きな価格と単価ボックス 3. **悩みの提起**（悩みに共感させ原因を示す）: スレート地に丸い肌写真と悩み3つを左右交互に並べ、傍点付きで原因を述べる 4. **肌の仕組みの解説**（原因を図解で納得させる）: スレート地の上の白カードに肌層の図解、ピルラベル2つで比較、線画3つで影響を示す 5. **解決の提示**（毎日のケアの大切さへつなぐ）: 縦線でつなぎ、傍点付きの大きな中央見出し 6. **成分の特長**（2成分配合の根拠を示す）: 泡の写真に縦書きコピーと大きな英字成分名、下線付き見出しと本文 7. **成分比較**（2成分の違いと相乗効果を示す）: グレー地に上半円カード2枚、最後に青紫の塗り帯見出し 8. **やさしさの訴求**（低刺激性を伝える）: ×記号で区切り、白帯見出し、泡の円2つ、左右に縦線を付けた小見出し 9. **使用イメージ**（洗い上がりを想像させる）: 泡を手に持つ写真に3つの円の循環図、女性の洗顔写真に縦書き白帯コピー 10. **無添加処方**（安心感を補う）: 英字ラベル＋見出し、斜線入りの円バッジ5つ 11. **テクスチャー**（泡の使い心地を伝える）: 泡の写真に縦書き白帯コピー、本文、2枚並びの人物写真 12. **使い方**（手順を簡潔に示す）: STEP3つを円の線画イラストと説明文で縦に並べる 13. **ブランドの信頼**（製造背景で信頼を高める）: モノクロの研究室写真、淡いグレー地に太字見出しと長文、シリーズ商品写真 14. **クロージング**（商品と価格を再提示する）: FVと同じ構成で泡写真、グラデーション帯の縦書きコピー、アイコン、価格 ## Imagery - 白い泡と水滴を寄りで撮り、淡い水色〜ラベンダーの光を当てる - 肌の悩みは毛穴や角質のマクロ写真を正円で切り抜く - 人物は目を閉じて微笑む洗顔シーン。明るいグレー背景 - 肌の層や成分は柔らかいピンク系の3D風イラストにする - アイコンは細いグレー線の線画で、要所だけ青紫で塗る - 研究所の写真はモノクロにして信頼感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 600px 前後に SP の構成をそのまま置く - 左右の余白は淡いグレーで埋める - PC では比較カードや人物写真を横並びのまま広げる - 縦書きコピーは PC でも写真上に残す ## 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-c5da4928`（元 LP の URL から採番） - **元 LP**: https://cosmedon.com/products/powapowa/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。