--- version: alpha name: Clinical Blue Aging-Care Skincare LP description: 白〜淡い水色の透明感ある地に、濃い青の帯見出しと赤の強調を合わせた化粧水の縦長 LP。明朝体の見出しと黄色マーカーでつくる、成分を訴える情報量多めの構成。 colors: primary: '#116EB2' background: '#FFFFFF' background-alt: '#E9EEF3' surface: '#FEFEFE' secondary: '#D32C45' accent-1: '#E0284A' marker: '#F5EE6A' cta: '#C1A28D' on-cta: '#FEF5E9' text: '#151D30' text-body: '#333333' accent-2: '#D7450C' dark-section: '#1D1C1C' line: '#898089' cta-accessible: '#90694E' accent-2-accessible: '#D5440C' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 0px md: 4px lg: 999px 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}' point-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 50px feature-circle: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px band-heading: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 90px worry-check: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 36px hex-ingredient: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 130px free-from-cell: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 28px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.accent}' height: 300px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 30px discount-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.note}' rounded: '{rounded.full}' height: 60px --- # DESIGN.md — 青×白の透明感エイジング化粧水 LP（Clinical Blue Aging-Care Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、上品・高級 - **キーワード**: 透明感・水のテクスチャ・成分訴求・明朝見出し・黄色マーカー・POINT番号 - **地の質感**: 水滴やとろみ液の写真を背景にうっすら敷いた、光沢のある白〜水色のグラデーション地 - **形**: 円形バッジ、六角形の成分写真、斜めにカットした帯、細い横罫線 - **温度感**: やや寒色寄り。ランキング訴求と CTA だけは暖色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#116EB2` | POINT 帯・見出し帯の濃い青 | 10% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 25% | 画素の実測 | | `background-alt` | `#E9EEF3` | 淡い水色の地 | 20% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 手順カードの面 | 5% | 画素の実測 | | `secondary` | `#D32C45` | 使い方見出し帯の深紅 | 3% | 画素の実測 | | `accent-1` | `#E0284A` | 強調文字の赤 | 1% | 推定 | | `marker` | `#F5EE6A` | 黄色マーカー | 1% | 推定 | | `cta` | `#C1A28D` | 購入ボタンのベージュ | 0% | 画素の実測 | | `on-cta` | `#FEF5E9` | ボタン上の文字 | 0% | 画素の実測 | | `text` | `#151D30` | 見出しの濃紺 | 2% | 画素の実測 | | `text-body` | `#333333` | 本文のグレー黒 | 2% | 推定 | | `accent-2` | `#D7450C` | 割引価格のオレンジ | 0% | 画素の実測 | | `dark-section` | `#1D1C1C` | 悩み見出しの黒帯 | 1% | 画素の実測 | | `line` | `#898089` | 無添加リストの枠線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#90694E` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#D5440C` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い水色を交互に使い、水の写真を薄く重ねる - POINT などの区切り帯は濃い青の面に白文字を置く - 大事なキーワードは赤文字か黄色マーカーで強調する。両方を同じ行に重ねすぎない - 数字や成分名の強調には黄色文字を青帯の上で使う - 暖色（赤・金）はランキングと使い方の帯だけに限る - CTA は落ち着いたベージュで、高級感を保つ - `button-primary` は文字 `#FEF5E9` × 背景 `#C1A28D` のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#90694E`、4.51:1）を使う。 - `discount-badge` は文字 `#D7450C` × 背景 `#FFFFFF` のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D5440C`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と浸透力訴求の大見出し | 明朝 | Shippori Mincho | 600 | 44px | 1.3 | 0.05em | | `headline-lg` | POINT 見出し | 明朝 | Noto Serif JP | 500 | 28px | 1.4 | 0.04em | | `headline-md` | 帯見出し・セクション導入 | 明朝 | Noto Serif JP | 500 | 22px | 1.5 | 0.05em | | `headline-sm` | 成分名の小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 英字見出し・POINT ラベル | 欧文セリフ | Playfair Display | 400 | 28px | 1.2 | 0.04em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 13px | 1.0 | 0.1em | - 見出しは明朝、本文と成分名はゴシックで使い分ける - 数字だけ大きく、斜体の明朝で目立たせる - 上付きの注釈記号を付け、ページ下部に注釈をまとめる - 英字見出しのすぐ下に日本語の小見出しを添える - 本文は 13px 前後にし、行間は広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分アイコンは 4 列、効果バッジは 3 列、手順は 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - セクションごとに POINT 番号の円を帯の上端に重ねる - 文章と写真を左右交互に並べる - 無添加の項目は 2 列のグリッドで並べる - 見出しは中央揃え、本文は左揃え ## Elevation & Depth - 円形バッジは銀色のリングと淡い影で立体感を出す - カードは影をほぼ付けず白い面だけで区切る - 六角形の写真には白い縁取りと薄い影を付ける ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 成分写真は六角形、効果は円形バッジ、商品は切り抜き - **セクション境界**: 斜めのカットや水のグラデーションで区切り、帯は直線 - ボタンは角丸なしか小さい角丸 - 強調バッジは円形にする - 取り消し線入りの四角で「入っていない成分」を表す ## Components - **POINT 番号円**（`point-badge`）: 白い円の中に POINT と 2 桁の数字を明朝で入れ、青帯の上端に重ねる - **銀リングの効果バッジ**（`feature-circle`）: 銀色のリングで囲んだ白い円。2 行の訴求を入れ、一部にマーカーを引く - **青グラデの帯見出し**（`band-heading`）: 画面幅いっぱいの青い帯に白い明朝の見出しを置く - **悩みのチェックリスト**（`worry-check`）: 赤いチェックボックスと一文を 4 行並べ、悩みの部分を赤文字にする - **六角形の成分アイコン**（`hex-ingredient`）: 六角形に切り抜いた写真の下に成分名を 2 行で添える - **無添加項目のセル**（`free-from-cell`）: 灰色の四角に斜めの取り消し線を引き、中央に成分名を置く - **使い方ステップ**（`step-card`）: 赤い STEP 番号と斜線、線画のイラスト、説明文を並べ、間に赤い三角の矢印を置く - **購入ボタン**（`button-primary`）: ベージュの長方形に白文字と右向きの矢印を入れる - **割引の丸バッジ**（`discount-badge`）: オレンジの線で描いた円に、割引額を小さな明朝で入れる ## Do's and Don'ts **Do** - 水滴やとろみ液の写真を背景に薄く重ね、透明感を出す - 成分ごとに注釈番号を付け、注釈をまとめて載せる - 訴求の中心となる語には黄色マーカーを引く - POINT 番号で特長を順に展開する - 明朝の見出しは中央揃えにし、余白をたっぷりとる **Don't** - ビビッドなピンクやネオン色を使わない - 見出しを丸ゴシックにしない - カードに強い影や大きな角丸を付けない - 赤の強調を 1 段落に多用しない - CTA を派手な原色にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の価値と特長を一目で伝える）: 女性の肌の写真の上に明朝 3 行のコピーを置き、銀リングのバッジ 3 つと商品のボトルを添える 2. **実績訴求**（人気の証拠で信頼を得る）: 赤い幕と金の装飾の背景に、受賞バッジ、ランキングの画像、大きな白い見出しを置く 3. **悩みの提起**（読み手の課題に共感する）: 黒帯の明朝見出しの下に、チェック付きの悩みを 4 行並べる。ひび割れのテクスチャを地にする 4. **解決提示**（商品を解決策として紹介する）: 青い丸の吹き出しでつなぎ、水の背景に商品写真、商品名、バッジを置く 5. **特長 POINT01**（主成分を説明する）: 青帯に POINT 円を重ね、六角形の写真、本文、円形バッジ 3 つを並べる 6. **特長 POINT02**（美肌成分を紹介する）: 成分写真を六角形にして左右交互に置き、赤い下線の小見出しを付ける 7. **技術訴求**（浸透の仕組みを示す）: 特大の明朝見出しを置き、肌の断面図に赤い矢印を描く。青い逆三角で結果につなぐ 8. **特長 POINT03**（その他の配合成分を見せる）: 六角形のアイコンを 4 列で 2 段並べる 9. **特長 POINT04**（無添加で安心感を伝える）: 青帯に商品を添え、取り消し線入りのセルを 2 列で 8 つ並べる 10. **クロージング**（使ってみたい気持ちを高める）: 明朝で問いかける見出しを置き、商品と女性の写真を大きく見せる 11. **使用方法**（使い方を示す）: 深紅の英字帯を置き、線画のステップを 2 列で並べる 12. **購入**（まとめ買いを促す）: 青い英字帯の下に、細い枠のカード、価格、オレンジの割引表示、ベージュのボタンを置く ## Imagery - 白いボトルを明るい背景に切り抜いて置く - 水滴やとろみ液、波紋の写真を淡い青で敷く - 女性の写真は目を閉じ頬に手を当てたクローズアップにする - 成分写真は白背景で鮮やかに撮り、六角形に切り抜く - 使い方はモノクロの線画に、金の小さなきらめきを添える - 仕組みの図はピンクの肌の層に赤い矢印を描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文幅を 750px 前後で中央に寄せ、両端を淡い水色の地にする - 帯見出しは画面幅いっぱいに伸ばす - 成分アイコンは PC でも 4 列のまま余白を広げる - 使い方のステップは PC で横並びを保つ - FV は 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-7ea56ed3`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/cm001/?sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。