--- version: alpha name: Crimson Pearl Science Skincare LP description: 深いワインレッドとくすみローズの帯を CTA に使い、パールグレーや淡いブルーの光沢背景、明朝体の大見出しで研究開発の信頼感と上品さを出すスキンケアのモニターセット LP。オファーのブロックを何度も繰り返す訴求型の構成。 colors: primary: '#B54162' secondary: '#BB769B' cta: '#B54162' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#EBEAED' tint-1: '#F2F6FA' tint-2: '#F5EEF0' dark-section: '#1E2D4A' accent-1: '#6F7EA0' accent-2: '#B54162' text: '#31384B' text-muted: '#89909C' marker: '#2C3C5C' typography: display: fontFamily: Shippori Mincho fontSize: 38px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 13px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 2px md: 4px lg: 8px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 68px offer-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 560px discount-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px service-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 160px concern-tag: backgroundColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 40px highlight-band: backgroundColor: '{colors.marker}' typography: '{typography.body-md}' height: 22px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 900px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 110px faq-bar: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px note-block: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 30px --- # DESIGN.md — 深紅×パールグレーの科学系エイジングケア LP（Crimson Pearl Science Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 深紅のオファー帯・パール光沢・明朝の大見出し・科学・研究感・注釈多め・繰り返しCTA - **地の質感**: 白〜グレーのシルクやパールのような光沢グラデーション。水滴や分子モデル、泡のテクスチャ写真を重ねる。 - **形**: 角丸の少ない四角カード、細い枠線、斜めにカットした色帯、CTA だけピル型。 - **温度感**: やや寒色寄りのクールなグレーとブルーに、温かい深紅を差し色として置く ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B54162` | オファー帯・CTAの深紅 | | 画素の主要色に補正 | | `secondary` | `#BB769B` | サービス紹介帯のくすみローズ | | 画素の実測 | | `cta` | `#B54162` | 主CTAボタン | | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | CTA上の文字 | | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の地 | | 画素の実測 | | `background-alt` | `#EBEAED` | 淡いグレーの地 | | 画素の実測 | | `tint-1` | `#F2F6FA` | 淡いブルーのコラム地 | | 画素の実測 | | `tint-2` | `#F5EEF0` | 淡いピンクの地・ラベル | | 画素の主要色に補正 | | `dark-section` | `#1E2D4A` | 科学訴求の濃紺セクション | | 画素の実測 | | `accent-1` | `#6F7EA0` | FAQバー・強調帯のグレイッシュブルー | | 推定 | | `accent-2` | `#B54162` | 本文中の強調ピンク文字 | | 画素の主要色に補正 | | `text` | `#31384B` | 見出し・本文の墨色 | | 画素の主要色に補正 | | `text-muted` | `#89909C` | 注釈グレー | | 画素の主要色に補正 | | `marker` | `#2C3C5C` | 本文のハイライト帯 | | 画素の実測 | - オファーと決済説明は深紅の帯の上に白いカードを載せてまとめる。 - その直後にくすみローズの帯を置き、3 つの安心サービスを白いカードで並べる。 - 商品説明はパールグレーや淡いブルーのグラデーションの地にして、色数を抑える。 - 科学根拠のセクション 1 つだけ濃紺の地に白文字を使い、印象に変化をつける。 - 本文の強調はピンク文字とアンダーライン、または濃紺の帯に白文字の 2 種類だけにする。 - 注釈は必ずグレーの小さい文字で書く。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し・キャッチ | 明朝 | Shippori Mincho | 500 | 38px | 1.3 | 0.04em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 500 | 28px | 1.4 | 0.05em | | `headline-md` | ステップ・成分の見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.02em | | `headline-sm` | カード見出し・ラベル | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.04em | | `note` | 注釈・米印 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 英字の小見出し・価格数字 | 欧文セリフ | Playfair Display | 400 | 13px | 1.3 | 0.1em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em | - 大見出しは明朝、説明文や小見出しはゴシックで使い分ける。 - 見出しの上に、欧文セリフの小さな英字ラベル（Problem・Technology など）を添える。 - 価格の数字は特大の太字にし、単位と税込表記は小さくする。 - 効能を述べる語にはすべて米印の注釈を付け、肩付きの小さい文字にする。 - 人物写真の上は縦書きの明朝コピーにする。 - 見出しのジャンプ率は高く、強調したい語は 1.5〜2 倍の大きさにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。サービスと悩みタグは 3〜4 列のグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - オファーブロック（価格・セット内容・CTA・決済・サービス）を、ほぼ同じ形のままページ内で 4 回繰り返す。 - 商品説明はポイント 1〜3 として番号付きの白カードで縦に積む。 - ステップ説明は、写真の上に見出しを重ね、その下に枠線付きの説明ボックスを置く。 - セクションの終わりに注釈ブロックを置く。 - 人物写真は画面幅いっぱいに置き、縦書きのコピーを重ねる。 ## Elevation & Depth - カードは基本的に影なしで、細いグレーの枠線で区切る。 - お客様の声のカードは右下にずらした細い線で奥行きを出す。 - CTA ボタンには下方向にうっすら影を付ける。 - シャボン玉のような球体の画像で、光沢と立体感を出す。 ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 四角く切り抜き、写真は画面幅いっぱいに置く。成分写真は四角の2枚並び。担当者の顔写真だけ円形に切り抜く。 - **セクション境界**: 斜めにカットした深紅・ピンクの三角帯、細い V 字の線、＋マークの丸アイコンでつなぐ - CTA ボタンは横幅いっぱいのピル型にし、右端に三角の矢印を付ける。 - 悩みタグは角丸ほぼなしの四角タグを 4 つ並べる。 - ポイント番号はメタリックな円形バッジにする。 - FAQ は角丸小さめのバーにし、右端に＋の丸アイコンを付ける。 ## Components - **主CTAボタン**（`button-primary`）: 深紅のグラデーションのピル型ボタン。白文字で2行にし、右に三角矢印を付ける。 - **オファーカード**（`offer-card`）: 深紅の帯の中に置く白いカード。限定ラベル、割引の丸バッジ、大きな価格、セット内容の表、注釈を順に並べる。 - **割引率の丸バッジ**（`discount-badge`）: 深紅の円の中に割引率を白文字で入れ、価格の左に置く。 - **安心サービスカード**（`service-card`）: ローズの地に白い縦長カードを3枚並べる。線画アイコンと明朝の深紅文字で入れる。 - **悩みタグ**（`concern-tag`）: 濃いグレーまたは半透明紺の四角に、白文字で悩みを短い言葉で4つ並べる。 - **濃紺のハイライト帯**（`highlight-band`）: 本文中の重要な一文を、濃紺の帯に白文字で入れて目立たせる。 - **ポイントカード**（`point-card`）: メタリックな番号バッジ、黒地のラベル、明朝の大見出し、図解、本文の順で入れる白いカード。 - **お客様の声カード**（`voice-card`）: 白いカードの左上にピンクのハッシュタグを置き、L字の細い罫線を付ける。本文の一部をピンクで強調する。 - **FAQバー**（`faq-bar`）: グレイッシュブルーのバーに白文字で質問を入れ、右に＋の丸アイコンを付ける。 - **注釈ブロック**（`note-block`）: 米印付きの小さいグレー文字で、セクション末尾に左揃えでまとめる。 ## Do's and Don'ts **Do** - 深紅のオファーブロックを、ページの区切りごとに同じデザインで繰り返す。 - 見出しは明朝、本文はゴシックの組み合わせを守る。 - 背景は白・グレー・淡いブルーの光沢グラデーションにして、清潔感を保つ。 - 効能の表現には必ず米印の注釈を付ける。 - 図解は細い線とパステル調の色でまとめ、科学的な印象にする。 **Don't** - ビビッドな原色や黄色を大きな面で使わない。 - カードの角を大きく丸めたり、ポップな影を付けたりしない。 - CTA 以外の要素を深紅で塗りつぶさない。 - 丸ゴシックや手書き風の書体は使わない。 - 注釈を省いて効能を言い切らない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品のラインと受賞実績、お試し価格を一度に見せる）: 光沢背景に商品の集合写真を置き、明朝の大コピーを重ねる。下に悩みタグを4つ、右下に深紅の価格バッジを置く。 2. **受賞実績**（第三者の評価で信頼を得る）: 金色の細枠のカードに、明朝の大きな文字で順位を並べ、右にエンブレムを置く。 3. **オファー・CTA**（限定のモニターセットへ申込を促す）: 深紅の帯に白いカードを載せ、価格・セット内容・ピル型CTA・決済ロゴを入れる。 4. **安心サービス**（送料・配送・返品の不安をなくす）: ローズの地に、白い3列のアイコンカードを並べる。 5. **研究開発の紹介**（企業の研究力と開発者の想いを伝える）: 研究室の写真と、濃紺のハイライト帯付きの本文を置く。開発者は円形の顔写真付きのカードで紹介する。 6. **口コミSNS**（投稿数で人気を示す）: 大きな件数表示と、SNS投稿の横スクロールを並べる。 7. **悩みの提起**（年齢肌の疑問に共感する）: 淡い人物写真の上に、白い吹き出し風の疑問を3つ並べ、続けて悩みタグを置く。 8. **科学的根拠**（新しい着眼点を訴求する）: 濃紺の地に、デジタル表現の顔写真と縦書きのピンクラベルを置く。 9. **成分紹介**（新しく配合した成分を見せる）: パール色の地に分子の球体ビジュアルを置き、明朝の見出しとピンクの帯ラベルを入れる。 10. **美容コラム**（加齢による変化を図解する）: 淡いブルーの枠の中に、年代別の線画イラストを3つ矢印でつないで並べる。 11. **3つのポイント**（商品の特長を論理的に示す）: 番号バッジ付きの白カードを縦に積み、図解と成分写真を入れる。 12. **お客様の声**（使った感想で後押しする）: ピンクの光沢地に、L字の罫線付きの白いカードを4枚並べる。 13. **使い方ステップ**（ライン使いの手順と各アイテムを説明する）: テクスチャ写真の上に、擬音のピンクのコピー、黒地のステップラベル、枠付きの説明ボックスを置く。 14. **よくある質問**（最後の不安を解消する）: 欧文セリフの見出しの下に、グレイッシュブルーのアコーディオンバーを並べる。 ## Imagery - 白とシルバーのボトルを、光沢のあるパール調の背景で撮影する。 - 肌のきれいな大人の女性を、白い服で目を閉じた横顔の構図にし、柔らかい自然光で撮る。 - 水滴・シャボン玉・分子模型の 3D ビジュアルで研究感を出す。 - 泡やクリームのテクスチャを大きく寄って撮る。 - 成分の植物は白背景や自然光で、四角く切り抜く。 - 図解は細い線とパステル調の色で、角層の断面などを描く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では本文を 640px 前後の中央 1 カラムに収め、左右の地は淡いグレーにする。 - 深紅やローズの帯は、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-34f84539`（元 LP の URL から採番） - **元 LP**: https://pr.orbis.co.jp/cosmetics/udot/100/?pcd=40000369&plnkcd=614280&pmcd=j64&pmsegcd=27&pagtcd=12&fbclid=PAAaa7dhYkAPzNPPH83MWSpgizYJy4uvl4dMqfW-EeK0qbpPZKMPBh3R9qPs4_aem_Ab0UQrkq9_Xu-eSHAeUA8He47vr0shxoTmA2qTZC-XHekjQ28dOCELP6E-pnQXIKWuOz9QZcasM15TJUehf - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。