--- version: alpha name: Crimson Gold Fairytale Cosmetics LP description: 深紅の地に金の唐草フレームとリボン見出しを重ねた、童話風でクラシカルなコスメの比較 LP。上位版は赤、基本版はピンクのように、2 商品をそれぞれの色で塗り分ける。成分と Q&A は白いカードに金枠を付け、ひとつの箱の中にまとめる。CTA はマゼンタのピル型ボタン。 colors: primary: '#D72933' dark-section: '#A01318' cta: '#DE006F' on-cta: '#FFFFFF' secondary: '#BE8A3A' accent-1: '#C1266D' accent-2: '#D44292' background: '#FEFEFE' background-alt: '#F9D9E8' tint-1: '#FFFBEF' surface: '#F3F2EB' text: '#222222' on-dark: '#FEF5F2' tint-2: '#FEE2F2' secondary-accessible: '#976E2E' accent-2-accessible: '#CC2E85' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Playfair Display fontSize: 28px fontWeight: 400 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 48px 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-secondary: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 32px ornate-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' sparkle-subheading: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 28px type-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 80px compare-table: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' qa-answer: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' --- # DESIGN.md — 深紅×金装飾の童話風まつげ美容液 LP（Crimson Gold Fairytale Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、上品・高級、情報量多め・訴求型 - **キーワード**: 深紅・金の唐草・リボン見出し・2 商品比較・童話風・きらめき - **地の質感**: 赤やピンクのグラデーションにボケ光と星のきらめきを重ねる。金色はフラットな面で使う - **形**: 四隅に唐草飾りが付いた金の細枠カード、両端が渦巻くリボン、円形に切り抜いた写真、ピル型ボタン - **温度感**: 暖色。情熱的な赤と甘いピンク ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D72933` | 上位商品セクションの深紅の地 | 16% | 画素の主要色に補正 | | `dark-section` | `#A01318` | 見出しエリアの暗い赤 | 7% | 画素の主要色に補正 | | `cta` | `#DE006F` | 購入ボタン | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | 購入ボタンの文字 | 0% | 画素の主要色に補正 | | `secondary` | `#BE8A3A` | 金のリボン・枠線・小見出し | 4% | 画素の実測 | | `accent-1` | `#C1266D` | 見出し両脇の星・Answer リボンのマゼンタ | 1% | 画素の実測 | | `accent-2` | `#D44292` | 基本版のピンクラベル | 1% | 画素の実測 | | `background` | `#FEFEFE` | 詳細カードの白地 | 36% | 画素の実測 | | `background-alt` | `#F9D9E8` | 基本版セクションの淡いピンク地 | 12% | 画素の実測 | | `tint-1` | `#FFFBEF` | Q&A 外側の生成り地 | 4% | 画素の実測 | | `surface` | `#F3F2EB` | 成分説明・回答のグレージュ箱 | 8% | 画素の実測 | | `text` | `#222222` | 本文の黒 | 2% | 推定 | | `on-dark` | `#FEF5F2` | 赤地の上の白見出し | 1% | 画素の実測 | | `tint-2` | `#FEE2F2` | 比較表の基本版側の淡ピンク | 3% | 画素の実測 | | `secondary-accessible` | `#976E2E` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#CC2E85` | AA を満たす補正値（計算） | | 計算 | - 上位商品のゾーンは深紅、基本商品のゾーンは淡ピンクで塗り分ける - 詳細情報は白カードに載せ、金の細線と四隅の唐草で縁取る - 購入ボタンはどの地の上でもマゼンタの塗りにする - 見出しのリボンと成分名には金を使う。小見出しの星飾りにはマゼンタを使う - 補足や回答の箱はグレージュの面で区切る - Q&A の外側の地は生成りにする - `button-secondary` は文字 `#BE8A3A` × 背景 `#FEFEFE` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#976E2E`、4.54:1）を使う。 - `ribbon-heading` は文字 `#FEF5F2` × 背景 `#BE8A3A` のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#976E2E`、4.59:1）を使う。 - `type-badge` は文字 `#FEF5F2` × 背景 `#D44292` のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#CC2E85`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチコピー | ゴシック | Noto Sans JP | 700 | 34px | 1.3 | 0.02em | | `headline-lg` | 赤地の上の白いセクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.5 | 0.04em | | `headline-md` | カード内の金色のリード見出し | 明朝 | Shippori Mincho | 700 | 20px | 1.5 | 0.05em | | `headline-sm` | 星で挟んだマゼンタの小見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.08em | | `accent` | 「Details」「Q&A」などの欧文タイトル | 欧文セリフ | Playfair Display | 400 | 28px | 1.2 | 0.0em | | `body-md` | 本文と成分名 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.03em | | `note` | 価格の注記などの米印注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 15px | 1.0 | 0.05em | - 本文と見出しは中央揃えにする - 欧文タイトルは細いセリフ体にして、気品を出す - 金色のリード見出しは明朝寄りのやわらかい書体にする - 成分は金の太字見出しと黒の本文の 2 段で並べる - 価格は数字を大きくし、税込表記と米印は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較表のみ 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 白い金枠カードは画面の左右に 16px の余白を空けて置く - カードの中は細い点線で区切り、小見出しを積み重ねる - 商品紹介は写真・見出し・価格・購入ボタン・詳細ボタン・口コミリンクの順に縦に並べる - 比較表は左右 2 色のラベル帯、共通の特長を囲んだ枠、それぞれの箇条書き、ボタンの順で組む ## Elevation & Depth - 影はほぼ使わず、金の線と面の色差で階層を作る - 商品写真の後ろに光の円やボケを置いて立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: テクスチャやアイテムの写真は、金の細枠を付けた正円に切り抜く。商品写真は切り抜きにする - **セクション境界**: 直線で地色を切り替える。カードの四隅には金の唐草飾りを付ける - 購入ボタンと詳細ボタンはどちらもピル型にする - 見出しのリボンは、金またはマゼンタの帯の両端に渦巻きを付ける - 商品タイプのバッジは、点線の縁取りが付いた正円にする ## Components - **購入ボタン**（`button-primary`）: マゼンタのピル型ボタン。右端に白いカートのアイコンを置く - **詳細ボタン**（`button-secondary`）: 白地に金の細枠のピル型ボタン。文字は金で、右端に矢印を置く - **金リボン見出し**（`ribbon-heading`）: 両端が唐草状に渦巻く金の帯に、白抜きの文字を載せる - **金枠詳細カード**（`ornate-card`）: 白地に金の細線の枠。四隅に唐草飾りを付け、上部に欧文タイトルを置く - **星飾りの小見出し**（`sparkle-subheading`）: マゼンタの文字を、左右から四芒星で挟む - **商品タイプの丸バッジ**（`type-badge`）: 赤またはピンクの正円に白文字。縁は点線にする - **2 商品比較表**（`compare-table`）: 左右で色を分けたラベル帯、チェックボックス付きの共通特長、金の丸点の箇条書きで組む - **Q&A 回答箱**（`qa-answer`）: 金リボンの Q 番号、太字の質問、マゼンタリボンの Answer、グレージュの回答箱の順に並べる ## Do's and Don'ts **Do** - 2 つの商品はそれぞれのテーマ色の地で通して表現する - 見出しには金のリボンか星飾りを必ず添える - 写真は円形に切り抜き、金の細枠を付ける - 購入ボタンは商品ごとに必ず置き、詳細ボタンと上下に並べる - 注釈は米印付きの小さな文字で中央に置く **Don't** - 青や緑などの寒色を主要な色にしない - 角張った太い枠線や濃い影は使わない - 金をグラデーションにした派手な面を多用しない - 購入ボタンをマゼンタ以外の色にしない - カードの角丸を大きくしてポップにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品を一目で伝える）: モデルと商品の写真を赤いしずく形のビジュアルに重ね、白い大きなキャッチを載せる。右上に実績のメダルを置く 2. **商品比較**（2 タイプから選ばせる）: 深紅の地に金リボン見出しと白い問いかけ見出しを置き、その下に 2 カラムの比較表を組む 3. **上位商品紹介**（上位版の魅力と購入導線）: 赤いきらめき背景に商品の写真と丸バッジを置き、その下に白見出し、価格、ボタン 3 種を並べる 4. **上位商品の詳細**（処方・成分・付属品を説明する）: 金枠の白カードに、星飾りの小見出し、円形写真、成分一覧、グレージュの補足箱を入れる 5. **基本商品紹介**（基本版の魅力と購入導線）: 淡いピンクの地に泡状の商品ビジュアルを置き、金のリード見出し、価格、ボタンを並べる 6. **基本商品の詳細**（成分とチップを説明する）: 上位商品と同じ金枠カードの型で組む 7. **よくある質問**（使い方の不安を解消する）: 生成りの地に金枠カードを置き、Q リボン、質問、Answer リボン、回答箱を入れる。回答には写真やイラストを付ける 8. **最終 CTA**（好みの商品を選んで購入させる）: 赤からピンクへのグラデーション地に 2 商品を縦に並べ、それぞれに丸バッジ、価格、購入ボタン、詳細ボタンを付ける ## Imagery - 商品はボトルを切り抜き、光る円やしずくの中に浮かべる - 背景には赤やピンクのボケ光、雪の結晶、四芒星のきらめきを散らす - テクスチャやチップは白地の正円の中にアップで写す - まつげは線画のイラストにし、月や星などの紫の小物を添える - モデル写真は赤い衣装と花の装飾で童話風に仕上げる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央 600px ほどの幅に SP のレイアウトをそのまま置き、左右は地色を広げる - 比較表は PC でも 2 カラムのまま幅を広げる - 最終 CTA の 2 商品は、PC では横並びにしてもよい - 金枠カードの四隅の飾りは、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-c69f0446`（元 LP の URL から採番） - **元 LP**: https://www.shiseido.co.jp/mj/special/eyelashserum/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。