--- version: alpha name: Dark Cocoa Ribbon Lady Color Contact LP description: 濃いココアブラウンの地にダイヤ格子柄を敷き、深紅のリボンやパール、金の細枠で甘く上品な大人レディの世界を作るカラーコンタクトのLP。商品カラーごとにモーブやラベンダーグレーの地に切り替え、レンズ画像と目元の写真を整然と並べる。 colors: primary: '#B10128' background: '#5F4642' dark-section: '#3D2925' background-alt: '#FFFFFF' secondary: '#873D58' accent-1: '#6C718E' tint-1: '#8E83B5' tint-2: '#F5E5E1' accent-2: '#E0408A' accent-3: '#C9A25A' surface: '#FDFDFE' text: '#B60C32' on-dark: '#FFFFFF' text-muted: '#8A7A80' accent-2-accessible: '#DC287B' tint-1-accessible: '#7B6EA9' text-muted-accessible: '#817177' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Cinzel fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em headline-sm: fontFamily: Playfair Display fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Great Vibes fontSize: 26px fontWeight: 400 lineHeight: 1.1 body-md: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-plate: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 56px ribbon-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 36px spec-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 26px lens-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 170px badge-new: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 30px pill-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 18px spec-circle: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 170px feature-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 90px color-chart: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 480px --- # DESIGN.md — ココアブラウン×深紅リボンのカラコンLP（Dark Cocoa Ribbon Lady Color Contact LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、かわいい、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: ココアブラウン地・深紅リボン・パール装飾・ダイヤ格子柄・セリフ体の欧文・ネオン調の発光文字 - **地の質感**: 暗い地に細いダイヤ格子とキラキラの光を重ね、パールとリボンを立体素材として散らす - **形**: 大きな円形の写真枠、上が丸いアーチ窓、フレーム付きの装飾見出し、ドット縁取りの円 - **温度感**: 暖かく甘いのに、暗めで落ち着いたトーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B10128` | ブランドの深紅（帯・プロフィール地） | 7% | 画素の実測 | | `background` | `#5F4642` | メインのココアブラウン地 | 30% | 画素の実測 | | `dark-section` | `#3D2925` | ファーストビュー上部の濃い焦げ茶 | 6% | 画素の実測 | | `background-alt` | `#FFFFFF` | 白い一覧セクションの地 | 14% | 画素の実測 | | `secondary` | `#873D58` | 1色目紹介用のモーブワイン地 | 8% | 画素の実測 | | `accent-1` | `#6C718E` | 2色目紹介用のラベンダーグレー地 | 7% | 画素の実測 | | `tint-1` | `#8E83B5` | スペック円のラベンダー | 3% | 画素の実測 | | `tint-2` | `#F5E5E1` | 写真枠や淡いピンク面 | 3% | 画素の主要色に補正 | | `accent-2` | `#E0408A` | 見出しのマゼンタ発光文字・ラベル | 1% | 推定 | | `accent-3` | `#C9A25A` | 金の細枠・装飾線 | 1% | 推定 | | `surface` | `#FDFDFE` | 見出しプレートの生成り面 | 2% | 画素の実測 | | `text` | `#B60C32` | 見出しプレート内の深紅文字 | 1% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い地の上の白文字 | 1% | 画素の主要色に補正 | | `text-muted` | `#8A7A80` | カラー名の補助ルビ文字 | 1% | 推定 | | `accent-2-accessible` | `#DC287B` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#7B6EA9` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#817177` | AA を満たす補正値（計算） | | 計算 | - 基本の地はココアブラウンにする。ダイヤ格子柄はわずかに明るい茶色で重ねる - 商品カラーを紹介するときは、地をその色のイメージ（モーブ、ラベンダーグレー）に丸ごと切り替える - 深紅はリボン、スペック帯、プロフィールの面に絞って使う - カラー名はそれぞれのレンズ色に合わせたパステル（ピンク、ミント、ラベンダー、マスタード）で色分けする - 一覧やチャートは白地に置いて見やすくし、前後を暗い地ではさむ - 金の細線とパールは、高級感を出すための縁取りだけに使う - `lens-card` は文字 `#E0408A` × 背景 `#FFFFFF` のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DC287B`、4.53:1）を使う。 - `pill-label` は文字 `#FFFFFF` × 背景 `#8E83B5` のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#7B6EA9`、4.52:1）を使う。 - `feature-card` は文字 `#8A7A80` × 背景 `#FFFFFF` のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#817177`、4.6:1）を使う。 - `color-chart` は文字 `#8A7A80` × 背景 `#FFFFFF` のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#817177`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのメインコピー（発光する白抜き文字） | 明朝 | Shippori Mincho | 800 | 44px | 1.2 | 0.05em | | `headline-lg` | 訴求見出し（マゼンタの発光） | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.3 | 0.08em | | `headline-md` | 英字のセクション見出し・プレート | 欧文セリフ | Cinzel | 500 | 20px | 1.2 | 0.15em | | `headline-sm` | カラー名の英字 | 欧文セリフ | Playfair Display | 700 | 15px | 1.3 | 0.02em | | `accent` | Spec・Imageなどの筆記体の飾り文字 | 欧文スクリプト | Great Vibes | 400 | 26px | 1.1 | 0.0em | | `body-md` | 説明文・プロフィール文 | 明朝 | Noto Serif JP | 500 | 11px | 1.8 | 0.08em | | `note` | スペックカードの細かい説明 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `label-button` | ピル型のラベル | 明朝 | Noto Serif JP | 700 | 11px | 1.2 | 0.1em | - 欧文はセリフ体と筆記体を組み合わせて、ドレッシーに見せる - 主な見出しには白やマゼンタの外側グロー（発光）をつける - 縦書きの大きな英字カラー名を写真の左端に重ねる - 日本語の見出しは字間を広めに取り、明朝で上品に見せる - スペックの数字は大きくし、単位のmmは小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。レンズ一覧とスペックカードは2カラムのグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算） - レンズ一覧は、目元写真の右下に丸いレンズ画像を重ねる2列で並べる - スペックとイメージ写真は、左に円、右に角丸写真を置いて横に並べる - カラー紹介は、アーチ窓のポートレート、ズームの目元、説明文の順で縦に積む - 見出しの両側にパール3粒を並べて左右対称にする - 写真枠の背面に、色付きの板をずらして重ねる ## Elevation & Depth - カードとプレートには、細い金線の二重枠と弱いドロップシャドウをつける - パールとレンズ画像には、下に柔らかい影を落として立体感を出す - 円とアーチ窓の周りに、外側のぼかしグローをつける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 大きな円、上が丸いアーチ窓、楕円の目元、白フチのポラロイド風の写真 - **セクション境界**: 直線で地の色を切り替える。紫や茶の地は白へグラデーションでフェードさせる - 見出しプレートは、角を内側にえぐったクラシックなフレーム形にする - スペックは、白いドットで縁取りした円の中に入れる - レンズ画像は必ず正円で、白フチと影をつける - グラフのカードは角丸24pxの白い面にする ## Components - **フレーム見出しプレート**（`heading-plate`）: 生成りの面に金線の二重枠をつけ、深紅のセリフ英字と小さな和文ルビを入れる。上にリボン、両脇にパールを置く - **リボン帯見出し**（`ribbon-banner`）: 深紅の帯の両端を燕尾形にカットし、白いセリフ英字を入れる - **スペック帯**（`spec-bar`）: 横幅いっぱいの深紅の帯に、DIAなどの数値を区切り線で横に並べる - **レンズ一覧カード**（`lens-card`）: 目元写真の背面に色板をずらして重ね、右下に丸いレンズを置く。下にカラー名と和名を添える - **Newバッジ**（`badge-new`）: 左上に置く、深紅の円に白い筆記体の小さなバッジ - **直径ラベル**（`pill-label`）: ミントやピンクのピル型ラベルに、白い直径表記を入れる - **スペック円**（`spec-circle`）: ドット縁取りの円に、筆記体の見出しと数値を中央揃えで入れる - **機能スペックカード**（`feature-card`）: 白いカードに金枠をつけ、左にアイコン、右に見出しと説明を置いて2列で並べる - **カラーチャート**（`color-chart`）: 白い角丸カードに方眼を引き、縦軸に明るさ、横軸に体感サイズを取ってレンズを配置する ## Do's and Don'ts **Do** - 暗いココアの地にダイヤ格子とキラキラの光を必ず重ねる - リボン、パール、金線の三点で装飾を統一する - カラーごとに地の色を切り替えて世界観を変える - レンズは正円で白フチと影をつける - 英字はセリフ体か筆記体にする **Don't** - ポップな丸ゴシックや原色の配色にしない - 角ばった太い枠やフラットな四角いボタンを使わない - 装飾のない白地だけのセクションを続けない - 深紅を広い面に多用しない（使うのは帯とプロフィールだけ） - 写真を素の四角でそのまま置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とプロデューサーを印象づける）: 大きな円形の人物写真に金の細枠をつけ、ロゴと発光するメインコピーを重ねる。円の縁に沿って英字を曲線で配置する 2. **新色告知**（新色を伝える）: リボン付きのプレートの下に新色レンズ2つとカラー名を置き、全色のレンズを1列に並べる。下にスペック帯を通す 3. **ラインナップ**（全カラーを一覧で見せる）: リボン帯の見出しの下に、目元写真とレンズのカードを2列で並べる 4. **新色の訴求**（デザインの特徴を伝える）: 発光する見出しの下に、2色を半分ずつ合わせた巨大なレンズを置き、吹き出しの円を添える 5. **カラー別紹介**（各色の雰囲気を伝える）: そのカラーの地に切り替え、アーチ窓のポートレート、縦書きのカラー名、ズームの目元、説明帯を並べる 6. **スペックと装用イメージ**（自然光と室内光での見え方を示す）: 白地に、スペック円と写真を3段で並べる 7. **機能スペック**（レンズの機能を伝える）: 茶色の地に、アイコン付きの白いカードを2列で並べる 8. **プロデューサー紹介**（権威づけと共感）: 深紅の地にパール縁の写真を置き、大きな飾りイニシャルと中央揃えの略歴を続ける 9. **カラーチャート**（色を選ぶ助けにする）: 方眼のグラフ上にレンズとカラー名ラベルを配置する ## Imagery - 暗い茶色の背景で撮った人物写真。赤いリボンやドレス、パールで甘くクラシックに見せる - 目元のアップは明るく均一な光で撮り、まつげをくっきり見せる - レンズ単体は白い背景で真上から撮り、円形で切り抜く - 装飾にはパールの粒、赤いリボン、十字のキラキラを散らす - 背景には細い線のダイヤ格子パターンを敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に幅約480pxでSPのレイアウトを置き、左右の余白は格子柄の地で埋める - 広げる場合は、ラインナップを3〜4列にし、スペック円と写真の横並びを維持する - カラーチャートは最大幅800pxにして中央に置く ## 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-e977ac3f`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/Majette/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。