--- version: alpha name: Amber Brown Elegant Serum LP description: 琥珀色のボトルに合わせた焦げ茶のグラデーション帯と、生成り・ベージュの淡い地色を交互に重ねた美容液 LP。見出しは明朝体で上品にまとめる。価格表の赤と、成分見出しのテラコッタ色を強調色として使う。 colors: primary: '#4E2C18' secondary: '#A66D4A' background: '#E7E2DC' background-alt: '#EBE4D2' surface: '#F9F4F1' tint-1: '#E7E2DC' tint-2: '#F0F1F3' accent-1: '#C56437' accent-2: '#BA9E55' accent-3: '#BB93C1' cta: '#C8202A' on-cta: '#FDF9F8' dark-section: '#333333' text: '#333333' marker: '#E5DAC4' text-muted: '#8A7A6A' cta-accessible: '#C41F29' accent-1-accessible: '#B35B32' typography: display: fontFamily: Noto Serif JP fontSize: 40px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.2 rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' price-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 260px discount-badge: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 60px band-heading: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 64px label-black: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' height: 40px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 36px review-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 160px ingredient-circle: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 110px keyword-ring: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px --- # DESIGN.md — 琥珀ブラウン×生成りの上品美容液 LP（Amber Brown Elegant Serum LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 琥珀ブラウン・生成り・明朝見出し・成分訴求・大人の肌・ナチュラル高級 - **地の質感**: 焦げ茶のグラデーション帯と、紙のような淡いベージュ地。大理石風の薄いテクスチャを背景に敷く箇所がある - **形**: 四角い帯見出しと細い枠線のカードが基本。成分写真やキーワードは正円で見せる - **温度感**: 暖色寄り。茶とベージュで温かく落ち着いた印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4E2C18` | 焦げ茶の帯・セクション地 | 12% | 画素の主要色に補正 | | `secondary` | `#A66D4A` | キャラメル茶のグラデーション帯 | 6% | 画素の主要色に補正 | | `background` | `#E7E2DC` | 基本の白地 | 19% | 画素の実測 | | `background-alt` | `#EBE4D2` | 生成りのセクション地 | 10% | 画素の実測 | | `surface` | `#F9F4F1` | 淡いピンクベージュのカード地 | 7% | 画素の実測 | | `tint-1` | `#E7E2DC` | グレージュの帯地 | 11% | 画素の実測 | | `tint-2` | `#F0F1F3` | 淡いブルーグレー地 | 7% | 画素の実測 | | `accent-1` | `#C56437` | 成分見出しのテラコッタ帯・大見出し文字 | 3% | 画素の実測 | | `accent-2` | `#BA9E55` | 信頼訴求のオリーブゴールド帯 | 2% | 画素の実測 | | `accent-3` | `#BB93C1` | 口コミの年代バッジの藤色 | 0% | 画素の実測 | | `cta` | `#C8202A` | 価格表のお得額の赤 | 1% | 推定 | | `on-cta` | `#FDF9F8` | 赤地の白文字 | 0% | 画素の実測 | | `dark-section` | `#333333` | 黒の帯ラベル | 2% | 画素の実測 | | `text` | `#333333` | 本文・見出しの文字 | 3% | 推定 | | `marker` | `#E5DAC4` | 本文中のベージュのマーカー | 0% | 画素の実測 | | `text-muted` | `#8A7A6A` | 無添加の丸枠・線のグレージュ | 0% | 推定 | | `cta-accessible` | `#C41F29` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#B35B32` | AA を満たす補正値（計算） | | 計算 | - 地色は生成り・グレージュ・白を交互に変えて、セクションの切れ目を見せる - 要所は焦げ茶から茶への縦グラデーション帯で締める - 成分見出しの帯と大見出しの強調はテラコッタ色にする - 赤は価格のお得額と割引率だけに使う - 悩み項目のキーワードには薄い藤色のマーカーを引く - 黒帯は小見出しラベルや製造訴求の見出しに限って使う - `discount-badge` は文字 `#C8202A` × 背景 `#E7E2DC` のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C41F29`、4.56:1）を使う。 - `band-heading` は文字 `#FDF9F8` × 背景 `#C56437` のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#B35B32`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きなキャッチ | 明朝 | Noto Serif JP | 500 | 40px | 1.35 | 0.05em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 600 | 30px | 1.4 | 0.05em | | `headline-md` | 帯見出し・カード見出し | 明朝 | Noto Serif JP | 500 | 20px | 1.5 | 0.05em | | `headline-sm` | 比較ラベル・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | 本文・口コミ文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.03em | | `note` | 注釈・成分名 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 背景の大きな欧文の透かし・STEP 表記 | 欧文セリフ | Playfair Display | 400 | 48px | 1.1 | 0.02em | | `label-button` | 価格表の数字・お得額 | ゴシック | Noto Sans JP | 900 | 28px | 1.2 | 0.0em | - 見出しは明朝体、本文と表はゴシック体で分ける - 大見出しの数字や強調語は文字を一回り大きくする - 価格や割引の数字は極太ゴシックにして、単位は小さく添える - 欧文は大きく薄い色で背景の透かしにする - 注釈には ※ を付けて小さい灰色の文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分は 3〜4 列、無添加は 2〜4 列のグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - カードは画面幅の 90% で中央に置き、左右に地色を見せる - 帯見出しはカード幅いっぱいに敷き、文字は左寄せにする - セクションの区切りに丸い下向き矢印アイコンを置く - 比較図は 2 カラムの左右対比にする ## Elevation & Depth - 影はほぼ使わず、平面的に作る - カードは白い面か細い枠線で浮かせる - 商品ボトルの写真だけ、写真自体の陰影で立体感を出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 成分写真は正円に切り抜く。人物写真は角丸なしの四角か正円にする - **セクション境界**: 直線で地色を切り替える。丸い矢印アイコンをつなぎに使う - 帯とカードは角丸なしにする - キーワード（ハリ・弾力など）は細い枠線の正円で並べる - STEP の間には細い V 字の線を置く ## Components - **まとめ買い価格表**（`price-table`）: 単品と複数セットの列見出しは黒地に白文字。最下段は赤地で白抜きのお得額を見せる - **割引率の丸バッジ**（`discount-badge`）: 商品写真に重ねる赤枠・白地の円。中に赤文字で割引率を入れる - **帯見出し**（`band-heading`）: テラコッタ・オリーブゴールド・焦げ茶のいずれかの地に、白の明朝体を左寄せで置く - **黒ラベル**（`label-black`）: 大見出しの上に置く短い黒帯。白文字のリード - **悩みチェックリスト**（`check-list`）: 人物写真の上に白い帯を重ね、チェックボックスと文を並べる。キーワードには藤色のマーカーを引く - **口コミカード**（`review-card`）: 白いカードに明朝の見出しと本文。右上に、年代と日付を入れた藤色の円バッジを重ねる - **成分の丸写真**（`ingredient-circle`）: 正円の素材写真の下に、成分名を小さく 2 行で入れる - **キーワードの丸枠**（`keyword-ring`）: 細線の正円の中に短い語を入れ、× でつないだり格子状に並べたりする - **使い方 STEP カード**（`step-card`）: 白いカード。左に欧文セリフの STEP 番号と説明、右に正円の人物写真を置く ## Do's and Don'ts **Do** - 地色は茶系とベージュ系の範囲で切り替える - 見出しには明朝体を使い、余白を広めに取って上品に見せる - 成分は正円の写真をグリッドに並べて見せる - 数字の訴求は大きく、単位は小さくする - 注釈はセクション末に小さくまとめる **Don't** - 蛍光色やビビッドな青・緑を面に使わない - 赤を価格以外の場所に広げない - 見出しを丸ゴシックにしない - 強い影や大きな角丸で、ポップな印象にしない - 1 セクションに地色を 3 色以上混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（効果のイメージと商品を一目で伝える）: 大人の女性の写真に明朝の大キャッチを重ねる。下は焦げ茶の帯にボトル写真と受賞バッジ 2. **リニューアル告知**（容量や処方の改善を知らせる）: 白いカードに、新旧のボトル比較と強調色の数字を置く 3. **まとめ買い価格**（セット購入のお得感を示す）: 金茶の見出し帯、商品写真と割引バッジ、比較表、赤地のお得額の順 4. **主成分の訴求**（核となる成分と効果を伝える）: 焦げ茶のグラデーション地に細線の枠。キーワードは丸枠を × でつなぐ 5. **無添加・香り**（安心感を補う）: 生成りのカードに、項目を 2 列の枠付きセルで並べる 6. **ブランド紹介**（ブランドへの信頼をつくる）: 細い枠線の淡いカードに明朝の見出し。本文の要所にマーカーを引く 7. **悩みの提起**（読み手の悩みに共感する）: 黒ラベルと大見出しの下に、人物写真とチェックリスト 4 項目を重ねる 8. **お客様の声**（実際の使用感で後押しする）: 生成りの地に白い口コミカードを縦に並べ、藤色の年代バッジを付ける 9. **浸透技術の説明**（技術的な裏付けを示す）: 焦げ茶の帯見出しのあと、従来品との違いを 2 カラムの図解で見せる 10. **配合成分**（成分の豊富さを伝える）: テラコッタの大見出しとテラコッタの帯。丸写真の成分グリッドを入れる 11. **体験の訴求**（使ったあとの理想の姿を想像させる）: 茶のラベル、明朝の大見出し、笑顔の人物写真と商品の順 12. **信頼・品質**（製造品質と無添加を示す）: オリーブゴールドの帯、無添加の丸枠グリッド、黒帯の製造見出しと認証マークを入れたカード 13. **使用方法**（使い方を示し、不安をなくす）: 欧文の大きな透かし文字を敷き、STEP カードを V 字線でつなぐ ## Imagery - 30〜60 代の女性が頬に手を添える、白背景で柔らかい自然光の写真 - 琥珀色のスポイトボトルを正面から撮り、白ラベルが見えるようにする - 成分は果実・花・葉の接写を正円に切り抜く - 肌の断面は、ピンクのタイル状の層と水色の矢印で描く図解にする - 背景にはごく薄い大理石やボケのテクスチャを敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像も 1 カラムの縦長構成で、SP と同じ並びで作る - PC はコンテンツ幅を 720px 程度に固定し、左右には地色を延ばす - SP では成分グリッドを 3 列にし、植物成分は 3〜4 列にする - 価格表は SP でも横 3 列を保ち、数字を少し小さくする ## 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-1d3ccf52`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/ce001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（11/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。