--- version: alpha name: Deep Cobalt Snow Clarity Skincare LP description: 深いコバルトブルーと雪・水面の白で透明感を表した、薬用化粧品のLP。大きな欧文セリフの見出しを薄いグレーで重ね、明朝体のコピーで上品さを、紺地の四角いボタンで信頼感を出している。 colors: primary: '#002496' dark-section: '#00195B' background: '#FFFFFF' background-alt: '#F3F0EB' tint-1: '#EAEDF5' text: '#002292' text-body: '#131313' text-muted: '#C9C9C9' cta: '#012495' on-cta: '#FFFFFF' accent-1: '#BDC9D5' accent-2: '#A88A4A' line: '#252F90' accent-3: '#190FB1' typography: display: fontFamily: Playfair Display fontSize: 56px fontWeight: 400 lineHeight: 0.95 letterSpacing: -0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 36px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cart: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 30px button-outline-dark: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 32px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 185px badge-hexagon: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 70px accordion-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 28px banner-claim: backgroundColor: '{colors.accent-3}' typography: '{typography.body-md}' height: 32px product-carousel-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 330px circle-scene: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 95px --- # DESIGN.md — 深い瑠璃色と雪白の透明感スキンケアLP（Deep Cobalt Snow Clarity Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、清潔・爽やか、信頼・誠実、和風 - **キーワード**: 透明感・雪・水面・コバルトブルー・欧文セリフ・明朝 - **地の質感**: 水面の波紋、雪の結晶、ボケた光の粒を白地にうっすら敷く。紺の面には光沢のあるグラデーション - **形**: 角丸ほぼなしの四角いカードとボタン。六角形バッジ、七角形チャート、円形アイコンをアクセントにする - **温度感**: 寒色寄りでクール。白と紺の澄んだ冷たさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#002496` | ブランドの深い紺。帯・カード見出し・ボタン | 18% | 画素の実測 | | `dark-section` | `#00195B` | 商品一覧の濃紺背景 | 10% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 23% | 画素の実測 | | `background-alt` | `#F3F0EB` | フッターとヘッダーの生成り地 | 10% | 画素の実測 | | `tint-1` | `#EAEDF5` | 雪の質感がある淡いグレー地 | 12% | 画素の実測 | | `text` | `#002292` | 見出しや強調文の紺の文字 | 3% | 画素の主要色に補正 | | `text-body` | `#131313` | 商品名などの本文の黒文字 | 2% | 画素の実測 | | `text-muted` | `#C9C9C9` | 大きな欧文見出しの薄いグレー | 3% | 画素の実測 | | `cta` | `#012495` | カートに入れるボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#BDC9D5` | 六角形バッジのくすみブルーグレー | 1% | 画素の実測 | | `accent-2` | `#A88A4A` | 受賞マークの金色 | 0% | 推定 | | `line` | `#252F90` | カード枠・アコーディオンの紺の線 | 1% | 画素の主要色に補正 | | `accent-3` | `#190FB1` | 強調帯の鮮やかな青紫 | 1% | 画素の実測 | - 白・雪グレーの地と濃紺の地を交互に置いて、リズムを作る - 見出し・強調文・線はすべて紺1色にまとめ、他の有彩色は使わない - 大きな欧文見出しは薄いグレーで背景になじませる - 金色は受賞マークにだけ使う - フッターだけ生成りの温かいオフホワイトにする - 濃紺の地の上では、文字は白、カードは白抜きにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション冒頭の大きな欧文見出し（2行で段違い） | 欧文セリフ | Playfair Display | 400 | 56px | 0.95 | -0.02em | | `headline-lg` | 効能訴求の太い見出し | 明朝 | Shippori Mincho | 700 | 32px | 1.3 | 0.02em | | `headline-md` | セクションのリードコピー（中央揃え） | 明朝 | Noto Serif JP | 600 | 17px | 1.9 | 0.05em | | `headline-sm` | カード見出しやケア名 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `body-md` | 商品名・本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.0em | | `note` | 注釈・※の記号 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `accent` | カード番号の大きな数字 | 欧文セリフ | Playfair Display | 400 | 36px | 1.0 | 0.0em | | `label-button` | ボタンのラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | - 情緒的なコピーは明朝体、機能説明やUIはゴシック体と使い分ける - 欧文見出しは左端にはみ出す大きさにし、2行目を右へずらす - キーワードは《》や「」で囲み、下線を付けて強調する - 明朝体のリードは中央揃え、行間は広めの1.9 - ※の注釈はセクションの右下に小さく置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは左右に約10%の余白を取る - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは欧文の大見出しから始める - コピーは中央揃えで、短い行を積み重ねる - カードは上に紺の見出し帯、下に白い本文の2段構成 - 効能ブロックはページ内で2回繰り返し、訴求を念押しする - 商品一覧は濃紺の地に白いカードを縦に並べる ## Elevation & Depth - カードには右下に薄いドロップシャドウ（2px 2px 4px rgba(0,0,0,.2)）を付ける - 商品写真の下には反射の映り込みを入れる - それ以外は平面にし、影は控えめにする ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の四角い写真と、白抜きの商品切り抜き - **セクション境界**: 直線で切り替え、地色または写真背景で区切る - ボタンは角丸なしの長方形 - バッジは六角形にする - 要因は七角形のチャートで示す - 使用シーンは白い円で示す - フッターの店舗ボタンだけピル型の枠線ボタンにする ## Components - **カート投入ボタン**（`button-cart`）: 紺の地に白文字。右に＋を付け、下に価格を白地・紺枠で並べる - **紺地上の枠線ボタン**（`button-outline-dark`）: 紺の地に白い1px枠線と白文字。右端に＋を付ける - **番号付きポイントカード**（`point-card`）: 紺のグラデーションの見出し帯に大きな欧文数字。下の白地にケア名と商品画像、全幅の詳細ボタンを置く - **成分の六角形バッジ**（`badge-hexagon`）: ブルーグレーの六角形の中に、白文字の明朝で成分名を入れる - **アコーディオン行**（`accordion-row`）: 白地に紺の枠線。左に文言、右に＋を置き、行を縦に連結する - **強調帯**（`banner-claim`）: 鮮やかな青紫の帯に白文字2行、右に＋を置く - **商品カルーセルカード**（`product-carousel-card`）: 紺の見出し帯と白い本文のカード。左右に三角の矢印、下にプログレスバーを置く - **使用シーンの円**（`circle-scene`）: 写真の上に白い円を置き、紺の太字で2行のシーン名を入れる ## Do's and Don'ts **Do** - 白と紺の2色を基調にし、透明感を最優先する - 欧文の大見出しは薄いグレーのセリフ体で大胆に置く - 背景には水・雪・光の粒の写真を薄く敷く - コピーは明朝体で中央揃え、短い行で区切る - 注釈は※付きの小さな文字で丁寧に添える **Don't** - 暖色の強調色や赤いCTAは使わない - 丸みの強いポップなボタンは使わない - 太いゴシック体を多用しない - 背景の質感を濃くしすぎて、文字を読みにくくしない - 影や立体効果を強くしすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観を一瞬で伝える）: 水面の写真の上に商品ボトルを大きく置き、縦書きのブランド名を添える 2. **効能訴求**（独自の効能を主張する）: 六角形バッジ、太い明朝の見出し、成分写真、強調帯を並べる 3. **主力商品の購入**（その場で購入へ導く）: 濃紺のグラデーション地に商品画像、受賞マーク、容量のラジオボタン、枠線ボタンを置く 4. **悩みの提起**（肌悩みの要因を整理する）: 七角形のチャートで要因を周囲に配置する 5. **解決の考え方**（ケアの流れを段階的に示す）: 紺枠のカードに明朝の3段の文を置き、V字の矢印でつなぐ 6. **特長ポイント**（4つのケア効果を示す）: 番号付きのポイントカードを縦に4枚並べる 7. **使い方**（使用シーンの幅を示す）: 写真の上に白い円4つを置き、下にアコーディオン行を並べる 8. **ライン使いの提案**（関連商品との併用を促す）: 雪の背景に3分割の円環図を置き、周囲に商品3点を配置する 9. **雪のスキンケア**（シリーズの価値を情緒的に伝える）: 雪の上の商品写真、明朝の中央揃えの文章、光る円の中に4つのケアを置く 10. **テクスチャー**（使用感を伝える）: 雪の結晶の背景に、紺の明朝コピーを左右交互に寄せて置く 11. **商品一覧**（シリーズの購入）: 濃紺の地に商品カルーセルカードを縦に並べる 12. **ブランドストーリー**（歴史と世界観を伝える）: 明朝の中央揃えの文章に続けて、水・深海・雪の3つの全幅写真ブロックを置く 13. **関連ブランドとフッター**（回遊と信頼の担保）: 生成りの地にバナーカード、アコーディオンのナビ、SNSアイコン、ピル型の枠線ボタンを並べる ## Imagery - 光の差す澄んだ水面の波紋を、俯瞰で撮った白〜淡グレーの写真 - 雪原の上に商品を置き、寒色のボケと雪の粒をまとわせる - 青いガラスボトルは白抜きで、下に反射の映り込みを入れる - 水しぶきや泡の接写で、みずみずしさを表す - 雪の結晶や光の粒を背景装飾として薄く重ねる - 天然素材の写真は小さく添える程度にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約1000px幅のコンテナを置き、背景写真は全幅で敷く - PC の購入ブロックは、左にコピー、中央に商品、右に購入フォームの横並び - PC のポイントカードは2列×2段 - PC の商品一覧は2列のグリッド - PC のストーリーの3ブロックは横3列に並べる - 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-e114ea36`（元 LP の URL から採番） - **元 LP**: https://sekkisei.jp/site/p/sekkisei_brightening_points.aspx - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。