--- version: alpha name: Midnight Navy Rose Gold Luxury Skincare LP description: 濃紺の星空グラデーションを地に、水滴をまとったローズピンクの花びらとシャンパンゴールドの装飾を重ねた高級スキンケア LP。明朝体の見出しと金の帯で上質さを出しつつ、特典カード・価格ブロック・深紅のピル型カートボタンで購入まで導く訴求型の構成。 colors: primary: '#333483' dark-section: '#030213' secondary: '#1D2F65' background: '#FEFEFF' background-alt: '#FAF6EB' tint-1: '#FDF3ED' accent-1: '#B8975A' cta: '#CD2151' on-cta: '#FEFEFF' accent-2: '#BE2939' text: '#303658' text-body: '#333333' accent-3: '#C0306A' marker: '#F4D2D5' on-dark: '#FEFEFF' accent-1-accessible: '#8E713D' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em body-lg: fontFamily: Playfair Display fontSize: 46px fontWeight: 700 lineHeight: 1.0 letterSpacing: -0.02em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cart: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px present-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 260px badge-circle: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' rounded: '{rounded.full}' height: 64px ribbon-heading: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px price-block: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 120px gold-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 110px voice-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 360px point-number: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 50px ingredient-label: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' rounded: '{rounded.sm}' height: 34px --- # DESIGN.md — 夜空ネイビー×薔薇×金の高級夜用クリーム LP（Midnight Navy Rose Gold Luxury Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、情報量多め・訴求型 - **キーワード**: 夜空・濃紺グラデーション・薔薇の花びら・シャンパンゴールド・明朝体・特典訴求 - **地の質感**: 星屑がきらめく濃紺グラデーションと、サテン調のアイボリー地。金の箔風グラデーション帯 - **形**: 角丸の白カード、金の細枠、リボン型見出し、円形バッジ - **温度感**: 冷たい夜の濃紺に、薔薇ピンクと金で温かみと艶を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#333483` | ブランド濃紺（成分・ポイント地） | 25% | 画素の実測 | | `dark-section` | `#030213` | ファーストビューの夜空 | 12% | 画素の実測 | | `secondary` | `#1D2F65` | 特典エリアの紺グラデーション地 | 8% | 画素の主要色に補正 | | `background` | `#FEFEFF` | 価格カード・白地 | 12% | 画素の主要色に補正 | | `background-alt` | `#FAF6EB` | 特典カードのアイボリーサテン地 | 6% | 画素の実測 | | `tint-1` | `#FDF3ED` | コラムの淡いピーチ地 | 5% | 画素の実測 | | `accent-1` | `#B8975A` | シャンパンゴールド（帯・枠・ラベル） | 4% | 推定 | | `cta` | `#CD2151` | カートボタンの深紅 | 2% | 画素の実測 | | `on-cta` | `#FEFEFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#BE2939` | 価格数字・お得額タグ | 1% | 画素の実測 | | `text` | `#303658` | 特典カードの紺見出し | 1% | 画素の実測 | | `text-body` | `#333333` | 白地の本文 | 3% | 推定 | | `accent-3` | `#C0306A` | 声見出しのローズピンク・成分ラベル | 0% | 推定 | | `marker` | `#F4D2D5` | 口コミ強調のピンクマーカー | 0% | 画素の実測 | | `on-dark` | `#FEFEFF` | 濃紺地の白文字 | 2% | 画素の主要色に補正 | | `accent-1-accessible` | `#8E713D` | AA を満たす補正値（計算） | | 計算 | - 地は濃紺〜夜空の黒紺を基本にし、口コミやコラムだけ白・淡いピーチに切り替えて呼吸させる - 金は帯・細枠・ラベル・円バッジに限定し、面積を小さく保つ - 購入行動は深紅のピル型ボタンと赤い価格数字だけに使う - 薔薇ピンクは写真と口コミ見出し・マーカーで反復させる - 濃紺地の大見出しは白〜淡い金のグラデーション文字にする - コラムの強調は黄色マーカー、口コミの強調はピンクマーカーで使い分ける - `badge-circle` は文字 `#B8975A` × 背景 `#FEFEFF` のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8E713D`、4.55:1）を使う。 - `gold-band` は文字 `#303658` × 背景 `#B8975A` のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8E713D`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・訴求の大見出し | 明朝 | Shippori Mincho | 700 | 34px | 1.3 | 0.05em | | `headline-lg` | 特典名・セクション見出し | 明朝 | Noto Serif JP | 700 | 24px | 1.4 | 0.05em | | `headline-md` | ポイント見出し・口コミ見出し | 明朝 | Noto Serif JP | 600 | 19px | 1.5 | 0.04em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 500 | 14px | 1.9 | 0.04em | | `note` | 注釈・成分表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | PRESENT・POINT などの欧文ラベルと番号 | 欧文セリフ | Playfair Display | 500 | 14px | 1.2 | 0.1em | | `label-button` | カートボタン | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.05em | | `body-lg` | 価格数字 | 欧文セリフ | Playfair Display | 700 | 46px | 1.0 | -0.02em | - 見出し・本文とも明朝体を基本にし、上品さを統一する - 注釈とボタンのみゴシックにする - 濃紺地の見出しは金〜白のグラデーション文字にする - 価格は大きなセリフ数字で「円」を小さく添える - 番号やラベルは欧文セリフのイタリックで装飾する - 手書き風の短い吹き出しコピーをワンポイントで使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特典・価格はカード積み重ね - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - カードは画面端から約 6% の余白をとり中央配置 - 特典カードは文章左・商品写真右の重ね配置 - 価格ブロックは金帯見出し→商品写真→特典枠→価格→ボタンの順 - ポイントは中央揃えの番号と見出し、本文は左揃え - 注釈は各ブロック直下に小さくまとめる ## Elevation & Depth - 白カードに薄い影を付けて濃紺地から浮かせる - カートボタンは金縁と下方向のドロップシャドウで立体感 - 商品写真の下に映り込み・水面で奥行きを作る - 口コミの見出し枠は白地に淡い影 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜き、口コミの人物は円形、使用感写真は大きな円形・楕円トリミング - **セクション境界**: 大きな円弧で濃紺地を区切る、金の二重線で区切る - 特典カードは金の細枠+角丸 12px - セット数・全員プレゼントは金縁の円形バッジ - お得額は右向き矢印型の赤タグ - 見出しはリボン形の金帯 ## Components - **カートボタン**（`button-cart`）: 深紅グラデのピル型、金の縁取り、右に > 矢印 - **特典カード**（`present-card`）: アイボリーサテン地+金細枠。上辺中央に金の PRESENT 番号ラベル - **円形バッジ**（`badge-circle`）: 白地に金の線の円で「個数セット」等を表示 - **リボン見出し**（`ribbon-heading`）: アイボリー〜金の帯を左右に折り返したリボン形。星のきらめき装飾 - **価格ブロック**（`price-block`）: 取消線付き通常価格、赤い矢印タグのお得額、大きな赤い価格数字、送料無料の円バッジ - **金のセット見出し帯**（`gold-band`）: 金のグラデ帯に明朝のプラン名、下に淡金帯で月当たり価格 - **口コミ**（`voice-item`）: 円形イラスト人物+紺の見出し、点線罫の本文にピンクマーカー、右下に年代 - **ポイント番号**（`point-number`）: POINT 小文字+大きな斜体数字、左右に金の二重線 - **成分ラベル**（`ingredient-label`）: ローズ紫の帯に白文字の成分名 ## Do's and Don'ts **Do** - 濃紺の夜空に星屑と水滴付きの薔薇の花びらを散らす - 金は細線・帯・バッジに絞り高級感を保つ - 見出しは明朝で、ゆったりした字間をとる - 特典はカードを番号付きで縦に積む - 各価格ブロックの直後に必ずカートボタンを置く - 注釈は小さいゴシックでブロック直下にまとめる **Don't** - ビビッドな原色や蛍光色を使わない - 丸ゴシックやポップな書体を見出しに使わない - 深紅をカート以外の大面積に使わない - 金を太いベタ面で多用しない - 白地を連続させて夜のトーンを失わない - 角の尖った無装飾ボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（夜の高級ケアの世界観提示）: 黒紺地に大輪の薔薇と商品、縦書き明朝コピー、金縁の円バッジ 2. **コンセプト導入**（進化を短く伝える）: 星空地に金グラデ見出しと白い短文、右に商品 3. **購入特典**（特典で購入意欲を高める）: 円弧で区切った紺地にリボン見出し、番号付き特典カードを 4 枚 4. **お客様の声**（実感の共有）: 大理石風の白地、円形イラスト人物と点線罫本文、ピンクマーカー 5. **使用感ビジュアル**（テクスチャを見せる）: 手書き風見出しと手の甲の円形写真 6. **価格プラン**（まとめ買いへ誘導）: 濃紺地に白カード 3 つ。金帯見出し、特典枠、赤価格、カートボタン 7. **商品の実績**（信頼性の訴求）: 薔薇と水しぶきの商品写真に金メダル風円バッジ 8. **コラム**（悩みの背景をデータで示す）: 淡いピーチ地、茶系明朝の大見出し、イラスト、白カードの棒グラフ 9. **開発者メッセージ**（作り手の想い）: 白地に白衣の人物写真、金の二重線で上下を区切る 10. **中間 CTA**（再度購入を促す）: 紫紺地に手のひらと商品、縦書きコピー、価格とカートボタン 11. **新ポイント解説**（処方の特長を 3 点解説）: 紺紫グラデ地に POINT 番号、成分ラベル、肌断面図、円形成分写真 12. **使用感の要素**（色・香り・感触を五感で伝える）: 細い白枠内に円形写真と短文を縦に並べる 13. **パッケージ紹介**（容器改良の説明）: 白サテン地、細い線枠見出し、商品の開封写真 ## Imagery - 水滴が付いた濃いローズピンクの薔薇・花びらを黒紺背景で艶やかに撮る - 濃紺に金のバンドが入ったジャー容器を中央に、下に水面の波紋や映り込み - 星屑・金の粒子のきらめきを背景に散らす - 人物は線画風のやさしいイラストを円形背景に置く - 成分は円形トリミングのマクロ写真 - 白いサテン生地や大理石調のテクスチャを淡い地に使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 600〜750px のカラムに SP デザインを据え、左右は濃紺の星空背景を広げる - FV は横長にし、薔薇と商品を中央、コピーを左右に配置 - 特典カードと価格カードは 2〜3 列にせず縦積みを維持して読み順を保つ - 文字サイズは SP の約 1.2 倍、カート幅は最大 400px ## 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-7c873efe`（元 LP の URL から採番） - **元 LP**: https://www.shinnihonseiyaku.co.jp/s/CPCF306548/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。