--- version: alpha name: Dessert Lace Collage Color Lens LP description: 生成りの紙地にレース縁・リボン・焼き菓子・銀食器をコラージュした、甘くて上品なカラコンLP。モカブラウンを基調に、色ごとのテーマ色（ブラウン・ボルドー・グレー・ピンク・ブルー）で商品セクションを切り替える。星空の黒背景を挟んで、締まりのある印象にしている。 colors: primary: '#906B62' background: '#FAFAF5' background-alt: '#EED2BD' surface: '#FDFDFC' dark-section: '#0B0B0B' text: '#906B62' text-body: '#60514D' secondary: '#85424B' accent-1: '#C9759A' accent-2: '#8495B3' accent-3: '#5F5E5A' tint-1: '#DFC4BD' line: '#DED8D6' text-accessible: '#8E6A61' tint-1-accessible: '#FCFAF9' typography: display: fontFamily: Montserrat fontSize: 56px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Montserrat fontSize: 36px fontWeight: 700 lineHeight: 1.1 headline-sm: fontFamily: Playfair Display fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: Klee One fontSize: 15px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em body-lg: fontFamily: Montserrat fontSize: 22px fontWeight: 500 lineHeight: 1.1 rounded: sm: 2px md: 6px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' lace-paper-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 400px lineup-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 200px theme-band: backgroundColor: '{colors.secondary}' typography: '{typography.accent}' height: 70px spec-row: textColor: '{colors.text-body}' typography: '{typography.body-lg}' height: 50px compare-photo: backgroundColor: '{colors.surface}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 90px feature-item: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 110px spec-table: backgroundColor: '{colors.primary}' typography: '{typography.note}' height: 180px section-title-en: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 60px --- # DESIGN.md — モカとレースのスイーツ風カラコンLP（Dessert Lace Collage Color Lens LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、かわいい、やさしい・柔らかい - **キーワード**: スイーツモチーフ・レース縁・紙質感・コラージュ・モカブラウン・星空の黒 - **地の質感**: ざらついた和紙・画用紙風の生成り地に、レースペーパーの縁取りと網点の銀食器写真を重ねる - **形**: 角の立った紙片カード、波打つレース縁、リボンと星（四芒星）の小さな装飾 - **温度感**: 暖かめのベージュとピンクが中心。黒の星空とグレーで甘さを引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#906B62` | ブランド基調のモカブラウン（見出し・表見出し） | 6% | 画素の主要色に補正 | | `background` | `#FAFAF5` | 生成りの紙地 | 20% | 画素の実測 | | `background-alt` | `#EED2BD` | ピーチベージュのグラデ地 | 12% | 画素の実測 | | `surface` | `#FDFDFC` | カード・口コミ枠の白 | 8% | 画素の実測 | | `dark-section` | `#0B0B0B` | 星空の黒セクション | 7% | 画素の実測 | | `text` | `#906B62` | 見出しのブラウン文字 | 2% | 画素の主要色に補正 | | `text-body` | `#60514D` | 本文のグレーブラウン | 2% | 画素の主要色に補正 | | `secondary` | `#85424B` | テーマ色ボルドー | 3% | 画素の実測 | | `accent-1` | `#C9759A` | テーマ色ピンク | 2% | 推定 | | `accent-2` | `#8495B3` | テーマ色ブルーグレー | 2% | 画素の実測 | | `accent-3` | `#5F5E5A` | テーマ色チャコールグレー | 2% | 画素の実測 | | `tint-1` | `#DFC4BD` | 特長アイコンの淡ピンク円 | 2% | 画素の主要色に補正 | | `line` | `#DED8D6` | スペック表の区切り線 | 1% | 画素の主要色に補正 | | `text-accessible` | `#8E6A61` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#FCFAF9` | AA を満たす補正値（計算） | | 計算 | - 地は生成りとピーチベージュの紙地。白一色にしない - ブランド文字や見出しはモカブラウンで統一する - 商品ごとにテーマ色を決め、帯・商品名・リボンをその色にそろえる - 星空の黒セクションを1〜2か所挟んでメリハリをつける - 強い原色やビビッドな色は使わず、くすみトーンにする - 本文はグレーブラウンにして、真っ黒は避ける - `lace-paper-card` は文字 `#906B62` × 背景 `#FAFAF5` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#8E6A61`、4.57:1）を使う。 - `feature-item` は文字 `#906B62` × 背景 `#DFC4BD` のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#FCFAF9`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ風の欧文大見出し | 欧文サンセリフ | Montserrat | 700 | 56px | 1.1 | 0.0em | | `headline-lg` | 手書き風の明朝系キャッチ見出し | 明朝 | Shippori Mincho | 500 | 34px | 1.3 | 0.05em | | `headline-md` | 商品名の太い欧文 | 欧文サンセリフ | Montserrat | 700 | 36px | 1.1 | 0.0em | | `headline-sm` | セクション英字見出し | 欧文セリフ | Playfair Display | 500 | 22px | 1.2 | 0.05em | | `accent` | 帯の上の斜体ふう手書きコピー | 手書き・筆 | Klee One | 600 | 15px | 1.5 | 0.03em | | `body-md` | 特長説明・コンセプト文 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.03em | | `note` | 注釈・スペック表 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `body-lg` | スペックの数値 | 欧文サンセリフ | Montserrat | 500 | 22px | 1.1 | 0.0em | - 和文の見出しは細身の明朝か手書き風にして、一部に引用符を付けて強調する - 商品名は太い丸みのある欧文サンセリフに、カタカナ読みを小さく添える - 英字見出しはセリフ体で左右に二重線を添える - 本文は小さめで行間を広めにとり、中央揃えにする - 数値は欧文で大きく、単位とラベルは小さく上に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ラインナップと特長は 2 カラムを併用 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 紙片カードを画面幅の約85%で中央に置き、周りに背景写真やコラージュをのぞかせる - 商品セクションは、写真・テーマ色帯・商品名・スペック4列・比較写真2枚の順に固定する - スペックは縦線で区切った4列で横に並べる - 特長はアイコン円を左に、見出しと説明を右に置いて縦に積む - 見出しの上に四芒星を置き、中央揃えにする ## Elevation & Depth - 紙片カードにはごく薄いドロップシャドウを付ける - コラージュ素材（お菓子・食器）は切り抜きに軽い影を付けて浮かせる - 表やボタンは影なしのフラットにする ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: モデルは角のある矩形、口コミのアイコンは円、商品はフォトフレーム風の白縁 - **セクション境界**: レースペーパーの波形の縁で区切る。一部は斜めのカーブで切り替える - カード下端はレース縁で仕上げる - スペックのラベルは小さなピル型にする - 口コミ枠は外側を大きく角丸にし、内側は直角の紙片にする - 装飾のリボンはカード左上に斜めに置く ## Components - **レース縁の紙カード**（`lace-paper-card`）: 生成りの紙質感カード。上下にレースの波縁を付ける - **ラインナップカード**（`lineup-card`）: 上辺がテーマ色の白カード。リボン・瞳写真・商品名・スペックピルを載せる - **テーマ色コピー帯**（`theme-band`）: 写真下に重ねる斜体コピーの帯。下端にレース縁を付ける - **スペック4列**（`spec-row`）: 小ラベルと大きい数値を縦線で区切って並べる - **装用比較写真**（`compare-photo`）: 裸眼と装用時の目元写真を2枚並べ、縦書きのピルラベルを添える - **特長アイテム**（`feature-item`）: 淡ピンクの円に線画アイコン、右にブラウン見出しと説明文 - **口コミカード**（`review-card`）: 上辺がテーマ色の紙片。円形アイコン・ユーザー名・感想・リボン、下端はレース縁 - **スペック表**（`spec-table`）: 見出しセルがモカブラウンに白文字、値セルは罫線のみの2列×2組 - **英字セクション見出し**（`section-title-en`）: 四芒星の下にセリフ体の英字を置き、左右に二重線を添える ## Do's and Don'ts **Do** - 紙の質感・レース縁・リボンを各セクションに繰り返し使う - お菓子や銀食器の切り抜きを、カードの角からはみ出させる - 商品ごとにテーマ色を一つ決め、帯・商品名・リボンに統一して使う - 見出しの前に四芒星のきらめきを置く - 注釈は小さく中央揃えで、カードの下部にまとめる **Don't** - 真っ白なフラット背景だけで構成しない - ビビッドな赤や青のボタンを置かない - 太いゴシックで和文見出しを組まない - 装飾を角丸の大きいポップなカードに置き換えない - テーマ色を一つの商品セクションの中で混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とブランドを一目で伝える）: 暖色の室内でモデルを撮った全面写真に、大きな欧文ロゴと四芒星を重ねる 2. **主訴求カード**（商品の魅力を短いコピーで伝える）: レース縁の紙カードに目元写真・円形バッジ・明朝見出し・レンズ色5つを並べる 3. **スペック帯**（基本仕様をすぐ見せる）: 黒地に白の小文字で仕様を5項目横に並べる 4. **技術訴求**（質感の特長を説明する）: 星空の黒の上に紙カードを置き、レンズの拡大写真と食器コラージュを配置する 5. **ラインナップ**（全色を一覧で見せる）: ぼかした写真の上に、2カラムのテーマ色カードを並べる 6. **カラー別紹介**（各色の印象と装用感を見せる）: フレーム風のモデル写真、テーマ色の帯、商品名、スペック、比較写真の順。これを色数分くり返す 7. **特長**（機能面の安心感を伝える）: 星空から斜めのカーブでベージュに切り替え、アイコン円付きの項目を4つ縦に並べる 8. **コンセプト**（シリーズの世界観を物語る）: 紙カードに中央揃えの詩的な文章を置き、下にお菓子が浮遊する写真を続ける 9. **初上陸訴求**（話題性を示す）: 明朝の大見出しに筆記体の英字を重ね、目元写真とバッジを添える 10. **お客様の声**（共感と信頼を得る）: 白い角丸の大枠の中に、テーマ色付きの口コミ紙片を縦に並べる 11. **製品仕様**（詳細スペックを示す）: ピーチ地にブラウン見出しセルの表を置く 12. **注意事項**（法的な注意を伝える）: レース縁の白い紙地に、小さな文字で中央揃えの箇条を並べる ## Imagery - モデルは暖色の室内で柔らかい光の中で撮り、ウェーブヘアで上品な表情にする - 目元のアップは肌色がきれいに出る明るさで、裸眼と装用時を同じ構図で撮る - シュークリーム・ベーグル・ドーナツなどの焼き菓子は、リボン付きで切り抜いて散らす - フォークやナイフは網点加工したモノクロの切り抜きにし、端からはみ出させる - レースペーパー、リボン、四芒星のきらめき、星空の粒子テクスチャを使う - アイコンは細い線画で、ブラウンの単色にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 400〜500px）の縦長カラムを置き、左右に星空か紙質感の背景を敷く - ラインナップは PC で 3〜5 列に広げてもよい - カラー別紹介は PC で写真とスペックを左右 2 カラムにできる - 装飾のコラージュ素材は、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-98573318`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/cofancy/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。