--- version: alpha name: Dreamy Pink Ribbon Color Contact LP description: くすみピンクとラベンダーのグラデーション地に、白い細身の欧文セリフとリボン・ハートの線画を重ねた、ガーリーで甘いカラーコンタクトの LP。カラーごとに背景色を変えた商品紹介ブロックを縦に並べ、最後はラインナップ、カラーチャート、機能説明で締める。 colors: primary: '#D3ACC0' secondary: '#C4568D' background: '#F9FAFC' background-alt: '#D3BEE4' accent-1: '#ACCAD5' accent-2: '#613A4F' tint-1: '#F3E9F2' text: '#63424A' on-dark: '#FEFEFF' line: '#CF9BAF' surface: '#FEFEFE' secondary-accessible: '#C04B85' primary-accessible: '#A95E85' background-alt-accessible: '#925FBC' typography: display: fontFamily: Cormorant Garamond fontSize: 44px fontWeight: 500 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Great Vibes fontSize: 22px fontWeight: 400 lineHeight: 1.2 headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.2em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.2em body-lg: fontFamily: Cormorant Garamond fontSize: 20px fontWeight: 500 lineHeight: 1.2 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' badge-new: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 36px badge-dia-ribbon: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-lg}' height: 110px spec-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px eye-lens-pair: backgroundColor: '{colors.tint-1}' rounded: '{rounded.sm}' height: 140px scallop-frame: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 700px lineup-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 190px feature-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 120px section-plate: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 90px --- # DESIGN.md — くすみピンク×リボンの甘めカラコン LP（Dreamy Pink Ribbon Color Contact LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、やさしい・柔らかい、上品・高級 - **キーワード**: くすみピンク・リボン・ハート・細身セリフ・グラデーション・ガーリー - **地の質感**: 霞のようなグラデーションに、光の粒、細い線画のリボンやハート、ぼかしを散らしている - **形**: 波線の境界、花形・雲形のフレーム、ピル型のスペックラベル、角を内側に切り欠いた写真枠 - **温度感**: やや暖かい。甘く、少し夢みたいな雰囲気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D3ACC0` | ブランドを代表するくすみピンクの地 | 28% | 画素の主要色に補正 | | `secondary` | `#C4568D` | 濃いローズのバッジとフレーム | 4% | 画素の実測 | | `background` | `#F9FAFC` | 明るい白みのある地 | 12% | 画素の実測 | | `background-alt` | `#D3BEE4` | ラベンダー色のカラー紹介地 | 9% | 画素の実測 | | `accent-1` | `#ACCAD5` | くすみブルーのカラー紹介地 | 8% | 画素の実測 | | `accent-2` | `#613A4F` | ダークプラムの濃い見出しとバッジ | 2% | 画素の実測 | | `tint-1` | `#F3E9F2` | 薄ピンクのフレームの内側 | 6% | 画素の実測 | | `text` | `#63424A` | 見出しと本文の濃い文字 | 1% | 画素の主要色に補正 | | `on-dark` | `#FEFEFF` | 色の付いた地の上の白い文字 | 2% | 画素の実測 | | `line` | `#CF9BAF` | 区切り線とフレームの縁取り | 1% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 白い方眼のチャート面 | 6% | 画素の実測 | | `secondary-accessible` | `#C04B85` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#A95E85` | AA を満たす補正値（計算） | | 計算 | | `background-alt-accessible` | `#925FBC` | AA を満たす補正値（計算） | | 計算 | - 地はくすみピンクのグラデーションを基本にし、カラーごとにラベンダー、ブルー、ピンクへ切り替える - 色の付いた地の上では、見出しも本文も白い文字にする - 濃いローズは New バッジやフレームなどの要所だけに使う - ダークプラムは英字の大見出しと数字バッジに限って使う - スペックのラベルは、そのセクションの地の色を濃くしたピル型にする - 原色や鮮やかな赤は使わず、くすみ色でそろえる - `badge-new` は文字 `#FEFEFF` × 背景 `#C4568D` のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#C04B85`、4.54:1）を使う。 - `badge-dia-ribbon` は文字 `#FEFEFF` × 背景 `#D3ACC0` のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A95E85`、4.5:1）を使う。 - `spec-pill` は文字 `#FEFEFF` × 背景 `#D3ACC0` のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A95E85`、4.5:1）を使う。 - `lineup-card` は文字 `#FEFEFF` × 背景 `#D3BEE4` のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-alt-accessible`（`#925FBC`、4.54:1）を使う。 - `section-plate` は文字 `#FEFEFF` × 背景 `#C4568D` のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#C04B85`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の英字大見出し | 欧文セリフ | Cormorant Garamond | 500 | 44px | 1.1 | 0.0em | | `headline-lg` | 限定色などを伝える和文の大見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.3 | 0.08em | | `headline-md` | 機能名の見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.1em | | `accent` | New などの筆記体の装飾英字 | 欧文スクリプト | Great Vibes | 400 | 22px | 1.2 | 0.0em | | `headline-sm` | カタカナのカラー名 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.4 | 0.2em | | `body-md` | 2 行の説明文 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.9 | 0.2em | | `body-lg` | スペックの数値 | 欧文セリフ | Cormorant Garamond | 500 | 20px | 1.2 | 0.0em | | `note` | 注釈と承認番号 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.05em | - 商品名は細身の英字セリフで大きく書き、上に小さなカタカナを添える - 和文の本文は字間を 0.2em と広めに取り、中央揃えで 2 行に収める - 筆記体の英字は飾りとして斜めに添える - 数値は欧文セリフにし、単位 mm は小さく書く - 大見出しには白いふちや淡い影を付けて立体感を出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ラインナップだけ 2×2 のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カラーごとに、全幅写真→波線→名前→目元写真とレンズ画像→説明→スペックの順に並べる - 目元写真は左、レンズの円形画像は右に少し重ねて配置する - スペックは横 1 列に 3 つのピル型ラベルで並べる - 写真の右上に、縦長リボン形の直径バッジを重ねる - ほとんどの要素を中央揃えにする ## Elevation & Depth - レンズの円形画像に薄い影と白いふちを付ける - ラインナップカードには、ぼかした柔らかい影を付ける - 機能説明のカードは白地で、ごく弱い影を付ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 全幅の矩形写真、角を内側に切り欠いた目元写真、円形のレンズ画像 - **セクション境界**: ゆるい波線で区切り、セクションごとに地の色を切り替える - フレームは花形・雲形のスカラップ形にする - 見出しのプレートは波形の縁を持つ帯にする - 機能アイコンは花びら形の淡いピンクの面に置く ## Components - **New バッジ**（`badge-new`）: 濃いローズの波形プレートに、白い筆記体で New と書く - **直径リボンバッジ**（`badge-dia-ribbon`）: 写真の右上に重ねる縦長の旗形バッジ。直径の数値を入れる - **スペックラベル**（`spec-pill`）: DIA などの項目名をピル型の中に書き、数値を横に並べる - **目元とレンズのセット**（`eye-lens-pair`）: 切り欠き枠の目元写真に円形のレンズ画像を重ね、左上にリボンを添える - **スカラップフレーム**（`scallop-frame`）: 上部にリボンを付けた花形の淡い枠。ポイント解説を囲む - **ラインナップカード**（`lineup-card`）: 目元写真の下部にカラーごとの色帯と名前を載せ、右上に円形の数値バッジを置く - **機能説明の行**（`feature-row`）: 花びら形のアイコン、見出し、二重線、説明文を縦に並べる - **見出しプレート**（`section-plate`）: 濃いローズの波形の帯に、白い英字を入れる ## Do's and Don'ts **Do** - 装飾にはリボン、ハート、光の粒を細い白線で散らす - カラーごとに地の色を変え、構成は同じにそろえる - 英字セリフと和文ゴシックを組み合わせる - 数値は大きなセリフ体で見せる - セクションの境界は波線でやわらかくつなぐ **Don't** - 鮮やかな原色や黒い地を使わない - 太い角張った書体を見出しに使わない - 直線の硬い境界でセクションを区切らない - 文字を左に揃えた詰まったレイアウトにしない - 装飾を濃い色で描かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（モデルと新色を印象づける）: 全幅のモデル写真にレンズ画像と英字の商品名を重ね、ロゴを左上に置く 2. **新色の訴求**（サイズと限定色であることを伝える）: ぷっくりした大きな数字、筆記体の英字、ハートを組み合わせ、下に目元のアップを置く 3. **チェックポイント**（既存品との違いと発色の特徴を説明する）: スカラップフレームの中に、ハート型のラベル、拡大の丸、ポイント文を配置する 4. **限定カラーの導入**（新色紹介への見出し）: 英字の飾り見出しの下に和文の大見出しを置く 5. **カラー紹介（新色）**（色味とスペックを説明する）: 写真、波線、名前、目元とレンズ、説明、スペックの順に並べる 6. **カラー紹介（既存色×3）**（シリーズの各色を見せる）: 同じ構成を繰り返し、地をラベンダー、ブルー、ピンクに変える 7. **ラインナップ**（全色を一覧で比べられるようにする）: 2×2 のカードグリッドに数値の丸バッジを付ける 8. **カラーチャート**（発色の強さと直径で位置づける）: 方眼の白い面に、縦書きの軸ラベルとレンズ画像を配置する 9. **レンズの機能**（機能面の安心を伝える）: 白いカードの上部に見出しプレートを置き、アイコン付きの 4 項目を縦に並べる 10. **フッター**（ロゴと承認番号を表示する）: ピンクのグラデーション地にロゴを大きく置き、下に小さな文字で注記を書く ## Imagery - モデル写真は色白の肌に柔らかい正面光を当て、淡いピンク系の背景で撮る - 目元は正面からのマクロ撮影にし、まつげの質感まで見せる - レンズは白地に円形で切り抜く - 装飾は細い白線のリボン、ハート、粒状の光にする - 背景にはぼかした光やボケを重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため、PC では幅 480〜600px の中央カラムに SP 版を表示することを推奨する - カラムの外側の余白は、くすみピンクのグラデーションで埋める - ラインナップは PC で 4 列にしてもよい ## 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-1e7f9e4e`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/AngelColor/bambi/bambi1month/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/11 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。