--- version: alpha name: Violet and Bronze Premium Dermocosmetic LP description: 深い紫と金茶（ブロンズ）の2系統のグラデーションでラインを塗り分けたスキンケアLP。白地に細い罫線と明朝見出しを合わせ、余白を広くとった静かな高級感が特徴。商品は1点ずつ、写真・説明・ピル型ボタンの2カラムで紹介する。 colors: primary: '#3B2D84' secondary: '#5C49B3' dark-section: '#2A2544' accent-1: '#CCAC8B' cta: '#9C7B62' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F8F9FB' tint-1: '#ECF6F4' tint-2: '#FDEAE5' text: '#333333' text-muted: '#B09181' line: '#C9B8A6' surface: '#2F2B28' cta-accessible: '#8E7059' text-muted-accessible: '#916D5B' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Cormorant Garamond fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.12em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline: textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 40px line-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px heading-rule: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 20px badge-circle: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 90px check-list: textColor: '{colors.text}' typography: '{typography.body-md}' height: 80px intro-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 160px spec-tag: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 24px --- # DESIGN.md — 紫×ブロンズの高機能スキンケアLP（Violet and Bronze Premium Dermocosmetic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、クール・先進的、シンプル・ミニマル、信頼・誠実 - **キーワード**: 紫グラデーション・ブロンズグラデーション・細罫線・明朝見出し・余白多め・研究・科学感 - **地の質感**: 白〜淡いグレーの滑らかな地。水滴・光の反射・プリズムの光で透明感を出す - **形**: 四角いブロックに細い十字の罫線をあしらう。ボタンだけピル型 - **温度感**: 紫のクールさと金茶の温かさを2つのラインで対比させる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3B2D84` | 医療系ラインのブランド紫 | 8% | 画素の実測 | | `secondary` | `#5C49B3` | 明るい紫（グラデーションの終わり） | 4% | 画素の実測 | | `dark-section` | `#2A2544` | ファーストビューの濃紺地 | 4% | 画素の主要色に補正 | | `accent-1` | `#CCAC8B` | 通販ラインのブロンズ地 | 6% | 画素の実測 | | `cta` | `#9C7B62` | 購入ボタンのブロンズ | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 42% | 画素の実測 | | `background-alt` | `#F8F9FB` | 淡いグレーの地 | 8% | 画素の実測 | | `tint-1` | `#ECF6F4` | 商品写真の背景（淡いミント） | 2% | 画素の実測 | | `tint-2` | `#FDEAE5` | 商品写真の背景（淡いピーチ） | 2% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃いグレー | 3% | 推定 | | `text-muted` | `#B09181` | ライン名ラベルの金茶文字 | 0% | 画素の主要色に補正 | | `line` | `#C9B8A6` | 見出しの細い金茶の罫線 | 0% | 推定 | | `surface` | `#2F2B28` | フッターの濃い茶色 | 3% | 画素の実測 | | `cta-accessible` | `#8E7059` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#916D5B` | AA を満たす補正値（計算） | | 計算 | - ラインごとに色を決める。医療系は紫、通販系はブロンズで、グラデーションの帯を敷く - グラデーションの帯の上は白文字と白い枠線ボタンだけにする - 商品の詳細は白地に置き、強調はライン名ラベルと罫線の金茶だけにする - 購入ボタンはブロンズのグラデーションに白文字。どのラインでも共通にする - 商品写真の背景は、商品の色に合わせた淡い色にする - フッターだけ濃い茶色で締める - `button-primary` は文字 `#FFFFFF` × 背景 `#9C7B62` のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8E7059`、4.55:1）を使う。 - `badge-circle` は文字 `#B09181` × 背景 `#FFFFFF` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#916D5B`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | 明朝 | Shippori Mincho | 400 | 26px | 1.4 | 0.08em | | `headline-lg` | セクション見出し・商品名 | 明朝 | Noto Serif JP | 400 | 22px | 1.4 | 0.04em | | `headline-md` | 商品のリード文 | 明朝 | Noto Serif JP | 400 | 17px | 1.6 | 0.03em | | `accent` | 欧文のサブ見出し | 欧文セリフ | Cormorant Garamond | 400 | 14px | 1.4 | 0.12em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.04em | | `note` | 注釈・成分表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.2 | 0.06em | - 見出しは細めの明朝で、太字にしない - 本文と注釈はゴシック。行間は広めにとる - セクション見出しには、欧文の小さなサブ見出しを添える - 価格は数字を大きめにし、税込表記は小さく添える - 注釈番号は上付きで入れ、注釈は小さい文字でまとめて置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。PCは商品紹介を写真と説明の2カラムで組む - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 商品ブロックは「ライン名ラベル＋右へ伸びる罫線」から始める - 商品名→容量と価格→写真→リード文→本文→ボタン→注釈の順に並べる - ラインの紹介は、色帯と写真を左右にずらして重ねる - ナビボタンは2×2の格子に並べる - 余白は広く。1セクションに主題は1つだけ ## Elevation & Depth - 影はほぼ使わない。平面と罫線で構成する - 白い本文ボックスを淡い写真の上に重ねて奥行きを出す - ボタンは影を付けず、グラデーションで立体感を出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。商品は中央に置き、余白を広くとる - **セクション境界**: 直線で切り替え、グラデーションの帯で区切る - 角丸は購入ボタン（ピル型）と円形の成分バッジだけに使う - 見出しの右端に細い十字の罫線をあしらう - ナビボタンは角丸なしで、白い細い枠線にする ## Components - **購入ピルボタン**（`button-primary`）: ブロンズのグラデーションに白文字。右端に細い矢印を付ける - **枠線ナビボタン**（`button-outline`）: 色帯の上に置く、白い細枠の四角いボタン。2×2で並べる - **ライン切替バナー**（`line-tab`）: 紫とブロンズの帯ボタンを横に並べる。右端に矢印を付ける - **罫線付き見出し**（`heading-rule`）: 金茶の小ラベルから細い罫線が右へ伸び、端に縦線を交差させる - **成分の円バッジ**（`badge-circle`）: 細い枠線の白い円に、金茶の文字で配合成分を書く。商品写真に重ねる - **おすすめの人のチェックリスト**（`check-list`）: 見出しの下に、細いチェック記号付きの短い項目を3つ並べる - **想いの白ボックス**（`intro-box`）: 淡い背景写真の上に白い四角を重ね、中央揃えの文章を入れる - **スペック枠**（`spec-tag`）: 細い金茶の枠で囲み、数値表記を小さく入れる ## Do's and Don'ts **Do** - 2つのラインの色（紫・ブロンズ）を最後まで一貫させる - 見出しは細い明朝。余白をたっぷりとる - 商品ブロックの型は全商品で同じにそろえる - 注釈は商品ごとに、ボタンの下にまとめる **Don't** - 原色や蛍光色を使わない - 太いゴシックの大見出しや派手な装飾文字を使わない - カードに強い影や大きな角丸を付けない - グラデーションの帯の上に塗りつぶしのボタンを置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と全商品を見せる）: 濃紺から紫・金の光が差すグラデーション背景に商品群を並べ、明朝コピーと欧文を中央に置く 2. **ライン切替ナビ**（2つのラインへ誘導する）: 紫とブロンズの帯ボタンを左右に並べる 3. **ブランド紹介**（ブランドの成り立ちを伝える）: ロゴ、明朝見出し、中央揃えの本文。背景に水滴を散らす 4. **想い**（ブランドの理念を伝える）: 淡い写真の上に白いボックスを重ねる 5. **ラインナップ概要**（2ラインの違いを説明する）: 色帯と商品写真を左右交互にずらして重ね、枠線ボタンを置く 6. **ライン1のヒーロー**（医療系ラインへの導入）: 紫のグラデーション帯に大きな写真を置き、枠線ナビボタンを2×2で並べる 7. **商品詳細（ライン1）**（各商品を説明する）: 罫線付き見出し、価格、写真と説明の2カラム、ピル型ボタン、注釈 8. **ライン2のヒーロー**（通販ラインへの導入）: ブロンズのグラデーション帯に、コピー入りのバナー写真とナビボタンを置く 9. **カテゴリ見出し**（商品群を区切る）: 淡いグラデーション地に欧文と明朝の見出し、商品写真を右に置く 10. **商品詳細（ライン2）**（各商品の購入を促す）: 淡い色の写真背景、円バッジ、チェックリスト、購入ボタン 11. **フッター**（サイト内のナビゲーション）: 濃い茶色の地に、白文字のリンクを2列で並べる ## Imagery - 商品は白や淡い背景で、柔らかいサイド光を当てて撮る - 医療系は紫の水面・分子模様・反射を使い、研究室のような印象にする - 通販系は白い台座、虹色のプリズムの光、淡いパステル背景を使う - 装飾として、透明な水滴や泡を余白に散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCの写真と説明の2カラムは、SPでは写真→説明の縦積みにする - ライン切替バナーは、SPでは縦に2段で並べる - 左右にずらして重ねる構成は、SPでは帯の下に写真を重ねる程度に抑える - 2×2のナビボタンは、SPでも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-a1f2b450`（元 LP の URL から採番） - **元 LP**: https://www.shop.rohto.co.jp/dermacept-rx/dermacept-rx-brand-index.html - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。