--- version: alpha name: Navy and Champagne Gold Science Skincare LP description: 濃紺の夜空と光の粒に金のボトルを浮かせたFVで始まり、淡い水色の透明感ある地と明朝体見出しで研究や成分を伝える。そこに紺グラデのオファーブロックと金グラデのCTAを何度も挟む、通販型の高級スキンケアLP。 colors: primary: '#145274' dark-section: '#0A2740' secondary: '#3B729B' cta: '#F2C230' on-cta: '#623607' accent-1: '#C69C6C' accent-2: '#8A6230' background: '#FFFFFF' background-alt: '#E0EBF1' tint-1: '#FDE9E2' tint-2: '#CFDCE4' text: '#1B475E' text-body: '#3E4754' marker: '#E8325A' accent-1-accessible: '#CDA87E' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 32px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 64px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 16px 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-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 70px button-secondary: typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px offer-block: backgroundColor: '{colors.secondary}' typography: '{typography.accent}' height: 900px accordion-guarantee: backgroundColor: '{colors.accent-2}' typography: '{typography.body-md}' height: 80px hex-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 70px point-card: textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 640px label-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 36px voice-card: textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 560px faq-item: textColor: '{colors.text}' typography: '{typography.body-md}' height: 84px sticky-banner: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 56px --- # DESIGN.md — 紺×シャンパンゴールドの研究系美容液 LP（Navy and Champagne Gold Science Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 濃紺×金・透明感ブルー・明朝体の縦書きコピー・六角形バッジ・研究・エビデンス・定期便オファー反復 - **地の質感**: 光のボケ・水滴・泡のきらめきを重ねた半透明の質感。金はメタリックのグラデーションで表現する。 - **形**: 角丸は小さめの白カード、六角形の部位バッジ、円形のポイント番号、斜めのセクション境界。 - **温度感**: クールな青が基調。金と肌色のピンクベージュでほんのり温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#145274` | ブランドの紺（見出し帯・ラベル） | 4% | 画素の実測 | | `dark-section` | `#0A2740` | FVの濃紺の夜空 | 5% | 画素の主要色に補正 | | `secondary` | `#3B729B` | オファー枠の青グラデ地 | 9% | 画素の主要色に補正 | | `cta` | `#F2C230` | 主CTAの金黄グラデ | 1% | 推定 | | `on-cta` | `#623607` | CTA上の焦げ茶文字 | 0% | 画素の実測 | | `accent-1` | `#C69C6C` | シャンパンゴールド（バッジ・見出し帯） | 3% | 画素の実測 | | `accent-2` | `#8A6230` | 保証アコーディオンのブロンズ | 1% | 推定 | | `background` | `#FFFFFF` | 基本の白地 | 19% | 画素の実測 | | `background-alt` | `#E0EBF1` | 透明感の淡い水色地 | 15% | 画素の実測 | | `tint-1` | `#FDE9E2` | お客様の声の淡いピンクベージュ地 | 6% | 画素の実測 | | `tint-2` | `#CFDCE4` | 定期便特典ブロックのグレーブルー地 | 3% | 画素の実測 | | `text` | `#1B475E` | 見出しの濃紺文字 | 2% | 画素の実測 | | `text-body` | `#3E4754` | 本文のダークグレー | 2% | 画素の主要色に補正 | | `marker` | `#E8325A` | 強調部の黄色マーカーと赤文字 | 0% | 推定 | | `accent-1-accessible` | `#CDA87E` | AA を満たす補正値（計算） | | 計算 | - FVとオファーは濃紺〜青グラデで締め、説明セクションは淡い水色・白・ピンクベージュで明るく保つ - 金は高級感の記号として使う。ボトル・六角バッジ・円形バッジ・見出し帯・保証ボタンに限定する - 主CTAだけは明るい金黄のグラデにして、ページ内で一番目立たせる - 見出しのラベル帯は紺の地に白文字。特典の帯は金の地に白文字で使い分ける - 本文の強調は赤文字に黄色マーカーを重ねる。使うのはお客様の声の中だけ - 単品購入はグレーのグラデボタンで格下げし、定期便との差をはっきりさせる - `hex-badge` は文字 `#1B475E` × 背景 `#C69C6C` のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CDA87E`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書き大コピー・成分名の大見出し | 明朝 | Shippori Mincho | 600 | 56px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 500 | 32px | 1.35 | 0.08em | | `headline-md` | オファー見出し・特典見出し | ゴシック | Noto Sans JP | 700 | 30px | 1.3 | 0.1em | | `headline-sm` | 成分名・小見出し・ラベル帯 | 明朝 | Noto Serif JP | 600 | 18px | 1.5 | 0.08em | | `body-md` | 本文・成分説明 | 明朝 | Noto Serif JP | 400 | 14px | 1.8 | 0.04em | | `note` | 注釈・特商法表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 価格の大数字・英字の商品ロゴ風見出し | 欧文セリフ | Playfair Display | 700 | 64px | 1.0 | 0.0em | | `label-button` | CTAボタン文字 | 明朝 | Shippori Mincho | 700 | 24px | 1.2 | 0.1em | - 情緒・研究系の見出しと本文は明朝体で上品に組む - 価格・特典・保証などオファー情報は太いゴシックで読みやすくする - FVのメインコピーは縦書きの大きな明朝にし、白文字で写真に重ねる - 見出しの左右に「＼ ／」を付け、小見出しを挟む - 価格の数字は金のグラデの欧文セリフで極端に大きくする - 注釈は※付きの10px前後で、該当ブロックの直下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分の紹介は写真と文を左右交互に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは画面幅の約90%で中央に置き、淡色の地の上に浮かせる - オファーブロック（価格・保証バッジ・CTA）はページ内で3回以上繰り返す - オファーの直後に注釈とブロンズの保証アコーディオンを置く - 定期便特典とお客様の声は横スライダーにし、左右に次のカードを少し見せる - 画面下に「短時間で注文」を示す追従バナー（オペレーター写真付き）を固定する ## Elevation & Depth - 白カードには薄いグレーの柔らかいドロップシャドウを付ける - CTAボタンは下方向に影と金の縁取りを付けて立体的に見せる - 金のバッジはメタリックのグラデとハイライトで光沢を出す - 追従バナーは黄色の縁取りと影で最前面に置く ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物は角丸なしで背景に溶け込ませる。成分写真は矩形。効能は円形の切り抜き - **セクション境界**: 基本は水平。説明セクションの一部を斜めに切り替える - 部位バッジは金の縁取りの六角形を蜂の巣状に並べる - ポイント番号は紺の円にPOINTと数字を入れ、カード左上にはみ出させる - フリー処方は細線の円に斜線を入れて表現する - 保証バッジは白地の角丸の小さな矩形にする ## Components - **金グラデ主CTA**（`button-primary`）: ピル型の金黄グラデのボタン。上に割引率の小ラベル、右端に丸い矢印アイコンを置く - **単品購入ボタン**（`button-secondary`）: グレーのグラデのピル型ボタン。白文字に丸い矢印を付ける - **定期便オファー枠**（`offer-block`）: 青グラデの地に、ロゴ・ボトル・取消線の通常価格・巨大な金の価格・割引率の金丸バッジ・保証バッジ2つ・CTAをまとめた枠 - **保証アコーディオン**（`accordion-guarantee`）: ブロンズのグラデに装飾フレームを付けた帯。白文字で右端に＋を置く - **六角形部位バッジ**（`hex-badge`）: 金または白の六角形の中に部位名を1語ずつ入れ、4つ組み合わせる - **成分ポイントカード**（`point-card`）: 白カードの左上に紺の円形番号、紺のラベル帯の下に明朝の大見出し、続けて図解や写真を置く - **紺ラベル帯**（`label-band`）: 紺の矩形帯に白い明朝の文字を入れる。見出しの上に添える - **お客様の声カード**（`voice-card`）: 上に悩みタブを3つ並べ、写真・名前・年齢の円バッジ・本文を置く。本文はマーカーで強調する - **Q&A行**（`faq-item`）: 淡い水色の地に白い行を並べる。明朝の大きなQ、質問文、右端に＋を置く - **追従注文バナー**（`sticky-banner`）: 黄色の縁取りのピル型。オペレーター写真の丸アイコンと吹き出し文を入れ、上矢印のボタンを付ける ## Do's and Don'ts **Do** - 濃紺と光のボケの上に金のボトルを置いて、高級感と科学感を両立させる - 研究・成分・使い方は淡い水色の地と明朝体で、静かに説明する - 価格のブロックは同じデザインで繰り返し、迷わず申し込める導線にする - ※付きの注釈は小さく、該当箇所のすぐ下に置く - 部位や効能は六角形・円形のバッジに短い言葉で入れて示す **Don't** - 原色の赤や緑を面で使わない。強調の赤はマーカー部分だけにする - 金を本文の文字色に使わない - ゴシック体だけで情緒系の見出しを組まない - 角丸の大きいポップなカードは使わない - CTAに金黄以外の色を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（研究背景と効能を一言で伝える）: 濃紺に光のボケの背景。左に金のボトル、右に縦書きの大コピーと否定形の小帯、六角の部位バッジ4つを置く 2. **実績帯**（販売実績と受賞で信頼を示す）: 金の紙吹雪の地に、巨大な金の数字と雑誌賞の丸バッジを置く 3. **オファー**（初回割引価格と保証を提示する）: 青グラデの枠に、価格・割引率バッジ・保証バッジ・金のCTAを置く。下に注釈と保証アコーディオンを続ける 4. **研究背景**（研究に基づく開発であることを示す）: 白衣の研究者と肌画像・グラフを重ねる。見出しは明朝で、細線の飾りを付ける 5. **技術・成分ポイント**（独自技術と成分を説明する）: 水色の地にPOINT番号付きの白カードを置く。カプセルの図解と、成分写真を左右交互に並べる 6. **有効成分の訴求**（効能を部位で具体化する）: 金の円バッジ「さらに」から入る。紺帯の成分名、赤下線の強調文、横顔の女性写真に六角バッジを組み合わせる 7. **定期便の特典**（解約自由などの不安を解消する）: グレーブルーの地に金ヘッダーのカードスライダーを置く。電話番号も載せる 8. **単品購入**（定期以外の選択肢を示す）: グレーのヘッダーの白枠に価格とグレーのボタンを入れる 9. **社員の声**（作り手の愛用で信頼を補強する）: 金の手書き風吹き出しと金の帯見出しを置く。水色カードに吹き出し・人物・手書きボードを入れたスライダー 10. **お客様の声**（悩み別に共感を得る）: ピンクベージュの地に英字スクリプトの見出しを置く。悩みタブ3つと、マーカー強調の体験談カード 11. **ブランドコンセプト・処方**（情緒価値と低刺激性を伝える）: 泡と水滴の背景に、斜めのボトル、円形の効能バッジ、縦書きコピーを置く。フリー処方は斜線の円、テスト済みは青い円で示す 12. **使用感・使い方**（テクスチャー・香り・手順を伝える）: 動画埋め込み・花の写真・洗顔後の女性写真を使う。手順は線画の顔イラストと▼で区切ったステップにする 13. **よくある質問**（疑問を解消する）: 水色の地に、白いアコーディオン行と明朝のQを並べる 14. **クロージングCTA**（最終の申込を促す）: オファー枠・特典スライダー・単品・保証を再掲する ## Imagery - ボトルはシャンパンゴールドの金属質で、柔らかい反射を付けて切り抜く - 背景は濃紺〜水色の光のボケ・水滴・泡・分子モチーフで透明感を出す - 人物は30〜40代の女性。白やナチュラルな服で、頬や首に手を添えた穏やかな表情 - 研究者は白衣にピペット。肌の拡大画像やグラフを重ねて信頼感を出す - 成分は果実・花・樹木の自然光写真。使い方は細い線画の顔イラスト - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約1000px幅のカラムを置き、FVは横長の構図でボトル左・コピー右に配置する - PCのFVコピーは縦書きでなく横書きの大見出しにする - 成分写真3種と定期便特典3枚は、PCでは横3列に並べる - オファー枠はPCでは価格とCTAを横並びに圧縮する - お客様の声は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-91b15032`（元 LP の URL から採番） - **元 LP**: https://taisho-beauty.jp/TB/shop/lp/MTL_re_navy_3D_Ge.aspx?sb_tracking=true&utm_source=one-adfacebook&utm_medium=display&utm_campaign=2524137137967840_120237794478780180_120240390916340180_120240680017440180____ig_Instagram_Feed&advt=MY4402&argument=mIIYIb - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。