--- version: alpha name: Clear Aqua Glow Skincare UV LP description: 白〜淡いグレーの地に鮮やかな青を差し、発光する青い明朝見出しと水彩の筆跡で透明感を出したスキンケアUVスプレーのLP。成分は透けた水玉の泡で見せ、医師監修や香りのパートは落ち着いた色に切り替えて信頼感と上品さを加えている。 colors: primary: '#0197FE' background: '#FFFFFF' background-alt: '#FDFDFC' surface: '#FDFDFD' secondary: '#ABD5E5' dark-section: '#0082A6' text: '#292929' text-body: '#4A4D4E' text-muted: '#9C9C9C' line: '#CAE5F1' tint-1: '#D9D9D9' tint-2: '#E5E5E2' accent-1: '#BC9B73' on-primary: '#F2F2E7' primary-accessible: '#0171BE' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Cormorant Garamond fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.3em label-button: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 10px lg: 16px 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}' glow-headline: textColor: '{colors.primary}' typography: '{typography.display}' height: 80px brush-lead: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 60px slant-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 48px bubble-badge: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 160px spec-pill: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px doctor-profile: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 110px section-title-bar: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 70px scent-tag: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 200px --- # DESIGN.md — 透明感ブルー×白の発光系UVコスメLP（Clear Aqua Glow Skincare UV LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、上品・高級、情報量多め・訴求型、信頼・誠実 - **キーワード**: 透明感・発光する青文字・水彩の筆跡・水玉の泡・白い余白・医療の信頼感 - **地の質感**: 淡いグレーのグラデーションに水面や光のにじみを重ね、ガラスや泡のような透けた質感を出す - **形**: 角丸 8〜12px のカード、平行四辺形の青帯、丸い泡型のバッジ、左端の青い縦線 - **温度感**: 寒色寄りで涼しい。香りのパートだけ生成りの暖色に切り替える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0197FE` | ブランドの青。見出しと帯に使う | 6% | 画素の実測 | | `background` | `#FFFFFF` | 全体の白い地 | 15% | 画素の実測 | | `background-alt` | `#FDFDFC` | 淡いグレーのセクション地 | 12% | 画素の実測 | | `surface` | `#FDFDFD` | 成分カードの地 | 5% | 画素の実測 | | `secondary` | `#ABD5E5` | 見出し帯の淡い水色 | 4% | 画素の実測 | | `dark-section` | `#0082A6` | 医師監修の青緑ヘッダー帯 | 2% | 画素の実測 | | `text` | `#292929` | 濃い見出しの文字 | 2% | 画素の実測 | | `text-body` | `#4A4D4E` | 本文の文字 | 2% | 画素の実測 | | `text-muted` | `#9C9C9C` | 英字併記と注釈 | 1% | 画素の実測 | | `line` | `#CAE5F1` | カードの枠と区切り線 | 1% | 画素の主要色に補正 | | `tint-1` | `#D9D9D9` | 医師監修パートのグレーの地 | 8% | 画素の実測 | | `tint-2` | `#E5E5E2` | 香りパートの生成りの地 | 5% | 画素の実測 | | `accent-1` | `#BC9B73` | 香りパートの金茶の欧文 | 0% | 画素の実測 | | `on-primary` | `#F2F2E7` | 青帯の上の白文字 | 1% | 画素の実測 | | `primary-accessible` | `#0171BE` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いグレーを交互に使い、青は見出し・帯・線にしぼる - 大きな見出しは青の文字に白〜水色の光彩を付けて光って見せる - 成分の色は泡ごとに淡い水色・ピーチ・ミントで分け、彩度は低めにする - 医師監修は青緑の帯とグレーの地にして、医療らしい落ち着きを出す - 香りパートだけ生成りと金茶の暖色に切り替え、上品なムードにする - 赤やオレンジの強い色はボタン以外に使わない - `slant-band` は文字 `#F2F2E7` × 背景 `#0197FE` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0171BE`、4.54:1）を使う。 - `bubble-badge` は文字 `#0197FE` × 背景 `#FDFDFD` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0171BE`、4.6:1）を使う。 - `spec-pill` は文字 `#0197FE` × 背景 `#FFFFFF` のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0171BE`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 訴求ワードの特大見出し（光彩付き） | 明朝 | Shippori Mincho | 700 | 56px | 1.2 | 0.02em | | `headline-lg` | FVやセクションの主見出し | ゴシック | Zen Kaku Gothic New | 700 | 34px | 1.3 | 0.04em | | `headline-md` | 成分名やカードの見出し | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.03em | | `headline-sm` | 水彩の筆跡に乗せる前置きの見出し | 明朝 | Noto Serif JP | 500 | 16px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.05em | | `note` | 注釈や成分の英名 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.03em | | `accent` | 縦書きの欧文ラベル・ブランドの欧文 | 欧文セリフ | Cormorant Garamond | 500 | 12px | 1.2 | 0.3em | | `label-button` | 数値や機能バッジ | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.2 | 0.08em | - 特大の訴求ワードは明朝体にし、青の文字に白い外光を付ける - 見出しの中で、強調する語だけ文字を大きくして文字サイズに強弱を付ける - セクションの端に欧文ラベルを字間広めの縦書きで置く - 本文は 12px 前後で行間を 1.8 にし、左揃えで短く改行する - 数値（SPF など）は太いゴシックにして白いピルの中に入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分カードは 2 列、成分の写真は 4〜5 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 各訴求セクションは白いパネルの左端に青い縦線を付けて区切る - 人物の写真を片側に寄せ、反対側に見出しと本文を重ねる - 成分の泡は大きさをそろえず、ずらして浮かんでいるように並べる - セクションの区切りに青い全幅帯や水色の見出し帯を挟む ## Elevation & Depth - カードには薄い青みの影（0 4px 12px rgba(40,120,200,0.15)）を付ける - 白い数値ピルには軽いドロップシャドウを付けて浮かせる - 写真フレームは少し傾けたポラロイド風にし、影を付ける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物は角版か、背景に溶け込ませる切り抜き。成分は円形の泡に入れる - **セクション境界**: 直線で区切り、青い全幅帯を挟む。斜めの平行四辺形の帯も使う - 機能バッジは円形の泡型にし、中に小さな英字の筆記体を添える - 前置きの見出しは水彩の筆跡の上に乗せる - 成分カードは細い水色の枠で囲み、角丸 10px にする ## Components - **発光見出し**（`glow-headline`）: 青い明朝の特大文字に白い光彩を付け、前に水彩の筆跡の前置きを乗せる - **水彩の筆跡ラベル**（`brush-lead`）: 水色の水彩の筆跡の上に、2 行の前置き見出しを中央に置く - **青い斜め帯**（`slant-band`）: 平行四辺形の青い帯に白抜き文字で機能名を載せる - **泡型の機能バッジ**（`bubble-badge`）: 半透明の水色の円の中に、機能名と小さな英字を縦に積む - **成分カード**（`ingredient-card`）: 水色の枠のカード。成分名・英名・説明を入れ、2 枚の間に＋の丸を置く - **数値ピル**（`spec-pill`）: 白いピルに太い青文字で SPF などの数値を大きく見せる - **医師プロフィール**（`doctor-profile`）: 左に角版の顔写真、右に所属と氏名を区切り線と英字併記で並べる - **水色の見出し帯**（`section-title-bar`）: 全幅の水色の帯に明朝の見出しと、波線付きのサブ見出しを載せる - **香りの紙タグ**（`scent-tag`）: 生成りの縦長タグに、香りの段階を筆記体の英字の見出しと和文で並べる ## Do's and Don'ts **Do** - 白と淡いグレーを基調にし、青は要所だけに使って透明感を保つ - 大見出しには必ず光彩を付けて、肌が明るく見える印象を出す - 成分は泡や水滴のモチーフで、透けて見えるように表現する - 訴求セクションごとに前置き・大見出し・本文・補足カードの型をそろえる - 英字の縦書きラベルで、洗練された雰囲気を足す **Don't** - 濃い原色の地を広い面に使わない - 見出しをすべてゴシックにしない（明朝との対比が要） - 角の立った硬い枠や太い黒線を使わない - 泡やカードに強い影を付けて重く見せない - 香りパート以外で暖色を主役にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と 2 つの価値を一目で伝える）: 水面のような淡い青の地に商品ボトルを斜めに置き、右に大きな明朝の見出しと白いラベルを置く 2. **メインビジュアル訴求**（機能の全体像をまとめて示す）: 人物と商品を並べ、青い発光文字と斜め帯で機能を積む。右に泡型のバッジを縦に並べ、下に青い帯で仕様を載せる 3. **特長1（スキンケア）**（保湿成分の価値を伝える）: 前置きの筆跡・大見出し・人物写真を置き、色違いの泡 3 つで成分を説明する 4. **配合成分の一覧**（成分数の多さを見せる）: 青帯の見出しの下に、水滴を中心にして泡に入れた成分を円く配置する 5. **特長2（美白）**（美白成分を説明する）: 左に青い縦線を付けたパネル。人物写真に発光見出しを重ね、2 枚の成分カードを＋でつなぐ 6. **特長3（メイクキープ）**（付加価値を伝える）: 人物を右に寄せ、左に見出しと本文を置く。下に補足のバリアカードを付ける 7. **UVの性能**（数値で防御力を証明する）: 青空の写真をポラロイド風に傾け、白いピルに数値を積む 8. **髪への効果**（使える範囲の広さを示す）: 笑顔の人物に悩みの泡を重ね、矢印で解決のカードへつなぐ 9. **医師監修**（信頼性を担保する）: 青緑の帯の下のグレーの地に見出しを置き、医師のプロフィール 2 名と商品ボトルを並べる 10. **天然由来成分**（原料の安心感を伝える）: 水色の見出し帯の下に、切り抜いた果実・生薬の写真を名前付きで格子状に並べる 11. **香り**（使う楽しさと上品さを伝える）: 生成りの地に金茶の欧文ラベルを置き、花束の写真に香りの紙タグを重ねる ## Imagery - 人物は透明感のある肌のアジア系女性。白い衣服で、柔らかい自然光で撮る - 商品ボトルは白いマットな質感。斜めに置くか、立てて配置する - 成分は半透明の泡や水滴の3D表現。淡い色付きのハイライトを入れる - 水彩の筆跡、光のフレア、水面の揺らぎを背景のアクセントにする - 原料は白背景に切り抜いた写真。影は控えめにする - 香りは白い花束と緑を、暖色の柔らかいトーンで撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像がないため、PC では中央に 600〜750px 幅の 1 カラムで置き、左右は淡いグレーの地にする - PC では人物と見出しの横並びを保ったまま、余白を 1.5 倍にする - 成分の格子は PC では 1 行に 6 列まで広げる - 特大の見出しは PC で 80px 程度まで拡大する ## 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-9fa44733`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kyogokupro/kg1103/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。