--- version: alpha name: Cobalt Blue Clinical Skincare LP description: 深いコバルトブルーと淡い青白の地を交互に使う、皮膚科発想の化粧品LP。明朝見出しに薄紫のマーカー下線を引き、白い角丸カードでオファーを見せる。科学的な図解と清潔な人物写真で、信頼感と上品さを両立させている。 colors: primary: '#010581' dark-section: '#01017A' on-primary: '#FEFEFE' background: '#EEF3FA' background-alt: '#F6F7FB' tint-1: '#ECF8F8' marker: '#C4CBE4' text: '#202374' text-body: '#333333' text-muted: '#8A8F99' accent-1: '#BC0303' accent-2: '#6377AE' tint-2: '#E6D7D3' accent-3: '#03C855' typography: display: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.04em headline-lg: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 600 lineHeight: 1.45 letterSpacing: 0.03em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Noto Serif JP fontSize: 38px fontWeight: 500 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px 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.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px offer-card: backgroundColor: '{colors.on-primary}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 380px badge-outline: backgroundColor: '{colors.on-primary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 24px discount-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 40px heading-marker: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.display}' height: 48px icon-feature: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 56px review-card: backgroundColor: '{colors.on-primary}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 200px faq-accordion: backgroundColor: '{colors.on-primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 70px outline-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 130px --- # DESIGN.md — コバルトブルー×淡青の皮膚科系スキンケアLP（Cobalt Blue Clinical Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、信頼・誠実、上品・高級、情報量多め・訴求型 - **キーワード**: コバルトブルー・淡青グラデーション・明朝見出し・マーカー下線・白カード・皮膚断面図 - **地の質感**: ガラス瓶の光沢と水面のような淡い青のグラデーション。全体はマットで清潔。 - **形**: 大きめ角丸の白カード、ピル型の紺ボタン、円形アイコン。 - **温度感**: 寒色中心のクール寄りで、肌色の図解がやわらかさを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#010581` | ブランドのコバルト紺（オファー帯・ボタン） | 11% | 画素の実測 | | `dark-section` | `#01017A` | ファーストビューの深い紺の地 | 4% | 画素の実測 | | `on-primary` | `#FEFEFE` | 紺地の上の白文字・白カード | 19% | 画素の実測 | | `background` | `#EEF3FA` | メインの淡い青白の地 | 12% | 画素の実測 | | `background-alt` | `#F6F7FB` | FAQ・使用ステップの薄グレー地 | 10% | 画素の実測 | | `tint-1` | `#ECF8F8` | 口コミ欄のミント系淡色地 | 5% | 画素の実測 | | `marker` | `#C4CBE4` | 見出しの薄紫マーカー下線 | 1% | 画素の実測 | | `text` | `#202374` | 見出しの紺文字 | 2% | 画素の実測 | | `text-body` | `#333333` | 本文のチャコール文字 | 2% | 推定 | | `text-muted` | `#8A8F99` | 注釈のグレー文字 | 1% | 推定 | | `accent-1` | `#BC0303` | 割引価格・OFFバッジの赤 | 0% | 画素の実測 | | `accent-2` | `#6377AE` | 効果バーの明るい青 | 0% | 画素の主要色に補正 | | `tint-2` | `#E6D7D3` | 皮膚図解の肌色ピンク | 4% | 画素の主要色に補正 | | `accent-3` | `#03C855` | LINE誘導ボタンの緑 | 0% | 画素の実測 | - 地は淡い青白とほぼ白を交互に使い、オファーのセクションだけ濃い紺で区切る。 - 見出しは紺文字。強調語の下に薄紫の太いマーカー線を引く。 - 赤は割引率と割引後の価格だけに使う。 - CTAは紺ベタのピル型ボタンに白文字。紺地の上では白カードの中に置く。 - 図解は肌色ピンクと赤矢印で、寒色の画面に温かみを足す。 - SNS誘導は外部ブランドの緑を使い、セクション内で1つだけ置く。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクションの大見出し | 明朝 | Noto Serif JP | 600 | 34px | 1.4 | 0.04em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 600 | 26px | 1.45 | 0.03em | | `headline-md` | カード見出し・特長の小見出し | 明朝 | Shippori Mincho | 600 | 20px | 1.5 | 0.02em | | `headline-sm` | FAQの質問・枠見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `body-md` | 本文・口コミ本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 価格の大きな数字 | 明朝 | Noto Serif JP | 500 | 38px | 1.1 | 0.0em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.1em | - 見出しと価格は明朝、本文・ボタン・FAQはゴシックで分ける。 - 強調したい語だけ文字を大きくし、助詞は小さく残す。 - 見出しは中央揃えで2〜3行に改行する。 - 価格の数字は明朝で大きく、「(税込)」は約1/3の大きさにする。 - 注釈は※番号を付けてセクション末にまとめる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。オファーカードとアイコン一覧は 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - オファーは2枚の白カードを紺の帯の上に横並びで置く。 - 解説系の写真は画面幅いっぱいに置き、その上に見出しを重ねる。 - 特長は写真と白いテキスト箱を半分ずつ重ねて段違いに組む。 - セクション間は 'だから' などのつなぎ語と下向きの山形矢印でつなぐ。 - FAQは白いアコーディオンカードを縦に並べる。 ## Elevation & Depth - FAQカードには薄い青みの影（0 2px 8px rgba(20,30,120,.12)）を付ける。 - オファーカードは影を付けず、紺地とのコントラストで浮かせる。 - 口コミカードは影なしで、1pxの薄グレー枠にする。 - 白テキスト箱は写真の上に重ね、フラットに置く。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの長方形。人物は裁ち落とし、商品は切り抜きで影を付ける。 - **セクション境界**: 直線で背景色を切り替える。区切りの装飾は山形矢印だけにする。 - オファーカードは大きめの角丸（約24px）にする。 - バッジは小さい角丸の紺線枠にする。 - アイコンは紺の円の中に白い線画を入れる。 - 注意書きの箱は角丸なしの紺線枠で、見出しを上の枠線にかぶせる。 ## Components - **購入CTAボタン**（`button-primary`）: 紺ベタのピル型ボタン。右端に＞矢印を付け、下に小さく補足文を添える。 - **オファーカード**（`offer-card`）: 紺の帯の上に置く白い角丸カード。プラン名・商品画像・バッジ・価格・CTAを縦に並べる。 - **条件バッジ**（`badge-outline`）: 紺の細い線枠の小さい角丸タグ。送料無料などの条件を書く。 - **割引率バッジ**（`discount-badge`）: 赤い正方形の中に白で割引率を入れ、割引後の価格の左に置く。 - **マーカー下線見出し**（`heading-marker`）: 明朝の紺見出しに、文字の下半分へ薄紫の帯を敷く。 - **処方アイコン一覧**（`icon-feature`）: 紺の円に白い線画アイコンを入れ、右に短いラベルを置く。2列×4段。 - **口コミカード**（`review-card`）: 白地に薄枠。星評価と属性を上に置き、左に手描き人物イラスト、右に明朝の見出しと本文。 - **FAQアコーディオン**（`faq-accordion`）: 白の角丸カード。頭に明朝の「Q.」、右に紺の円の＋ボタン。 - **注意書きの線枠ボックス**（`outline-box`）: 紺の線枠の箱。見出しを上の枠線の中央に重ねて置く。 ## Do's and Don'ts **Do** - 紺と淡青の2つの地を交互に使い、オファーの帯だけ濃い紺にする。 - 見出しは明朝の紺で書き、要点に薄紫のマーカーを引く。 - 効果は皮膚断面のような図解とバーグラフで見せる。 - オファーカードを途中と後半に繰り返し置く。 - 注釈は小さいグレー文字でセクション末にまとめる。 **Don't** - 赤を見出しや装飾に使わない。価格の訴求だけに使う。 - 暖色やポップな色を地に使わない。 - 丸ゴシックや手書き書体を見出しに使わない。 - ボタンを角張らせたり、グラデーションにしたりしない。 - 影を強くかけない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩みの訴求と実績を示す）: 濃紺のグラデーション地に白の明朝コピー。光る商品瓶、受賞エンブレム、No.1の枠囲み。 2. **初回オファー**（お試し価格ですぐ購入へ誘導する）: 紺地に白の角丸カード。上部の見出しは枠線にかぶせ、価格は大きな明朝、下に紺のピル型CTA。 3. **動画紹介**（ブランドへの信頼と共感をつくる）: 白地に大きい動画1本と小さい動画2本のサムネイル。上に紺のピル型見出し帯。 4. **ベネフィットのビジュアル**（理想の肌のイメージを見せる）: 人物写真を全幅で置き、左側にマーカー下線付きの明朝見出しを重ねる。 5. **効果の実感データ**（テスト結果で効果を示す）: 淡青の地に白カード。チェック付きの項目と青い横バーを並べる。 6. **オファーの比較**（お試しと定期便を比べさせる）: 紺の帯の上に白カードを2枚横並び。定期便には赤い割引バッジ。 7. **悩みの提起**（これまでのケアの失敗に共感する）: 顔の線画を中央に置き、まわりに円で囲んだ方法名を4つ散らす。 8. **メカニズムの解説**（肌が生まれ変わる仕組みを図で伝える）: 肌色ピンクの皮膚断面図に、赤矢印と注釈の箱を重ねる。 9. **商品の紹介・誤解の解消**（独自のアプローチを伝える）: 白衣の手が商品を持つ写真。線枠の箱で誤解を示し、山形矢印でつなぐ。 10. **特長**（テクスチャーと浸透感を伝える）: 写真と白いテキスト箱を段違いに重ね、水滴と矢印の図解を添える。 11. **低刺激処方**（安心感を与える）: 水面の写真に商品を置き、その下に白箱で紺の円アイコンを2列で並べる。 12. **使い方のステップ**（使う順番を示す）: 線画アイコンを横に並べて矢印でつなぎ、商品のところだけ薄紫の円で強調する。 13. **お客様の声**（第三者の評価で背中を押す）: ハッシュタグ風の声を写真の上に重ね、ミント地に口コミカードを並べる。最後に紺の『もっと見る』ボタン。 14. **よくある質問・ブランド紹介**（不安を解消し、ブランドの背景を伝える）: 白い角丸のアコーディオンを並べる。続けて大きな欧文ロゴとブランドの由来の文章、診断への誘導枠を置く。 ## Imagery - 商品はコバルトブルーのガラス瓶。青い光や水面を背景に、映り込みを付けて撮る。 - 人物は素肌感のあるナチュラルメイク。白〜淡青の背景で、青い衣服を差し色にする。 - 白衣の手元や研究室のボトルで、医療・研究の信頼感を出す。 - 図解はフラットなイラスト。肌色ピンクの層に赤い矢印、青い水滴を使う。 - 口コミの人物は、くすんだオレンジや青の手描き風の素朴なイラストにする。 - アイコンは紺の円の中に白い細い線画を入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 600〜750px 幅のカラムを置き、左右は淡青の地で埋める。 - オファーカードは PC でも2枚横並びのまま、余白を広げる。 - 全幅写真は PC ではカラム幅に収め、見出しを写真に重ねる構成は保つ。 - 見出しの文字サイズは PC で 1.2〜1.3 倍にする。 - アイコン一覧は PC で 4 列に広げてもよい。 ## 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-7e0bf8b5`（元 LP の URL から採番） - **元 LP**: https://pr1.takami-labo.com/acquisition/last2.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。