--- version: alpha name: Clinical Teal Metallic Men's Haircare LP description: 深い青緑とシルバーグレーの金属質感を基調にした男性向けシャンプーLPです。分子や六角形の網目模様で科学的な雰囲気を出し、明朝の大見出しで信頼感を演出しています。CTAには蛍光イエローグリーンを使い、強いコントラストで目立たせています。価格ブロックと購入ボタンを何度も繰り返す訴求型の構成です。 colors: primary: '#114152' dark-section: '#0A2331' secondary: '#437987' background: '#CBCDCD' background-alt: '#E7EAEB' surface: '#FFFFFF' tint-1: '#8FB7C3' cta: '#B5FF1C' on-cta: '#1A2A1A' text: '#1B2A36' text-body: '#49595C' marker: '#FEFD93' accent-1: '#C8692E' accent-2: '#D4A93A' on-dark: '#FAFEFE' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 36px fontWeight: 900 lineHeight: 1.25 letterSpacing: -0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 30px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 48px 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: 56px price-block: textColor: '{colors.text}' typography: '{typography.accent}' height: 110px heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 64px benefit-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 44px point-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 280px check-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 150px award-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 180px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 130px step-item: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 150px note-text: typography: '{typography.note}' height: 30px --- # DESIGN.md — 深青緑×銀メタリックの男性向けヘアケアLP（Clinical Teal Metallic Men's Haircare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ヘアケア・ボディケア ／ **雰囲気**: クール・先進的、信頼・誠実、情報量多め・訴求型、上品・高級 - **キーワード**: 深青緑・シルバーメタリック・分子モチーフ・クリニック発想・明朝×ゴシック・蛍光グリーンCTA - **地の質感**: ヘアライン調の銀グレー地、六角形の網目、分子球体の3D表現、光の放射グラデーション - **形**: 平行四辺形の見出し帯、六角形のラベル、ピル型CTA、角丸の白カード - **温度感**: 寒色中心で冷たく清潔。CTAと金色のアワード部分だけを暖色や高彩度にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#114152` | ブランドの深青緑。見出し帯や濃色セクションに使う | 14% | 画素の実測 | | `dark-section` | `#0A2331` | 最も濃いネイビーのセクション地 | 8% | 画素の主要色に補正 | | `secondary` | `#437987` | 中間の青緑。帯や見出しの背景に使う | 9% | 画素の主要色に補正 | | `background` | `#CBCDCD` | シルバーグレーのメタリック地 | 16% | 画素の主要色に補正 | | `background-alt` | `#E7EAEB` | 明るい青白の地 | 12% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | 白のカード面 | 7% | 画素の実測 | | `tint-1` | `#8FB7C3` | くすみ水色のセクション地 | 6% | 画素の実測 | | `cta` | `#B5FF1C` | 蛍光イエローグリーンの購入ボタン | 2% | 画素の実測 | | `on-cta` | `#1A2A1A` | CTAボタン上の文字色 | 0% | 推定 | | `text` | `#1B2A36` | 見出しと価格の濃紺文字 | 2% | 画素の実測 | | `text-body` | `#49595C` | 本文のグレー文字 | 2% | 画素の主要色に補正 | | `marker` | `#FEFD93` | 黄色の蛍光マーカー | 0% | 画素の実測 | | `accent-1` | `#C8692E` | 銅オレンジ。ビフォーアフターや強調ラベルに使う | 1% | 推定 | | `accent-2` | `#D4A93A` | アワードの金色 | 1% | 推定 | | `on-dark` | `#FAFEFE` | 濃色地の上の白文字 | 2% | 画素の実測 | - 濃色の深青緑・ネイビーのセクションと、銀グレーや青白のセクションを交互に並べる - CTAは蛍光イエローグリーンだけにする。ほかの要素にはこの色を使わない - 強調ワードには黄色マーカーか、青緑の帯に白文字を使う - 金色はアワード・実績・保証バッジだけに使う - 銅オレンジは比較の「良い状態」ラベルやパッケージ訴求の差し色に絞る - 注釈は小さいグレー文字で、濃色地では白の半透明にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ。白い帯の上に置く | ゴシック | Zen Kaku Gothic New | 900 | 36px | 1.25 | -0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 600 | 32px | 1.35 | 0.04em | | `headline-md` | カード見出し・特長のタイトル | 明朝 | Noto Serif JP | 600 | 24px | 1.4 | 0.03em | | `headline-sm` | 帯ラベル・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0em | | `accent` | 英字見出しと価格の数字 | 欧文サンセリフ | Montserrat | 500 | 30px | 1.1 | 0.08em | | `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1 | 0.05em | - 大見出しは明朝体にする。助詞はひと回り小さくし、緩急を付ける - 英字見出しは字間を広めにした細いサンセリフの大文字にする - 価格は大きなサンセリフ数字にし、「税込」「円」は小さく添える - 強調したい語に傍点（・）やマーカーを重ねる - 注釈は※付きの小さい文字で、セクション末尾にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。チェックリストや成分アイコンだけ 2〜7 列のグリッドにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは全幅の背景色や画像で区切る - 商品画像の横に訴求帯を縦に 3 本並べる - 価格ブロックの直下に必ず CTA を置く - 訴求の重要な位置でセット商品の価格ブロックを繰り返す - 手順は番号付きで、左に図・右に文を置く ## Elevation & Depth - 白カードには淡いドロップシャドウ（0 4px 16px rgba(0,0,0,.12)）を付ける - CTAボタンは下方向の影と上部のハイライトで立体的に見せる - 訴求帯にも薄い影を付け、銀地から浮かせる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜きで光沢を見せる。人物は斜めにトリミングするか六角形・円形に切り抜く。成分写真は円形にする - **セクション境界**: 基本は直線で切り替える。一部は斜めの帯や三角の矢印で次へつなぐ - 見出し帯は両端を斜めに切った平行四辺形にする - 訴求の帯は両端を矢羽型（六角形風）にする - CTAは横長のピル型にする - 番号は濃色の円の中に白数字を入れる ## Components - **購入CTAボタン**（`button-primary`）: 蛍光イエローグリーンのグラデーションのピル型ボタン。影付きで、幅は約70% - **価格表示**（`price-block`）: 通常価格と定期購入を 2 段で並べる。ラベルは下線付きの小さい文字、数字は大きなサンセリフ - **見出し帯**（`heading-band`）: 全幅の深青緑の帯に、ロゴ風の英字と明朝の見出しを白で載せる - **効果訴求リボン**（`benefit-ribbon`）: 両端を矢羽型にした帯を縦に 3 本重ねる。白地なら明朝の濃紺文字、青緑地なら白文字 - **POINT特長カード**（`point-card`）: POINT と大きな番号、濃色の小見出し帯、明朝の大見出し、本文を白カードにまとめる - **悩みチェックリスト**（`check-list`）: 白枠の中にチェックボックス付きの悩みを 2 列 × 3 行で並べ、語に黄色マーカーを引く - **月桂樹アワードバッジ**（`award-badge`）: 金色の月桂冠と王冠で実績の数字を囲む。背景には紙吹雪を散らす - **お客様の声カード**（`voice-card`）: 六角形に切り抜いた人物写真と白カードを交互に配置する。見出しには黄色マーカー、属性は濃色の小さいラベルで示す - **使い方ステップ**（`step-item`）: 濃色の円に番号、線画イラスト、右側に説明文を置き、下向きの三角でつなぐ - **注釈**（`note-text`）: ※付きの小さいグレー文字。ブロックの末尾に置く ## Do's and Don'ts **Do** - 濃色の青緑セクションと銀グレーのセクションを交互に置き、リズムを作る - 分子球体・六角形の網目・光の放射を背景に敷き、科学的な雰囲気を出す - 大見出しは明朝、ラベルや本文はゴシックで使い分ける - 価格ブロックと購入CTAをセットで何度も繰り返す - 数値（満足度・割合）はとても大きく見せ、注釈で根拠を添える **Don't** - 暖色やパステルを地色に使わない - CTA以外に蛍光グリーンを使わない - 丸ゴシックや手書き書体を使わない - 背景を質感のない真っ白なフラットな面にしない - 注釈を省略して効果を断定しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新しさと先進性を一目で伝える）: 青緑の分子背景に斜めに置いた商品ボトル。左上に白帯の極太キャッチ、黄緑の六角バッジで成分を訴求する 2. **商品と価格（単品）**（効果と価格をすぐ伝える）: 銀グレー地に見出し帯、商品画像と訴求リボン 3 本、価格ブロック、CTA を並べる 3. **悩みの提起**（なんとなく選んでいる層に気づかせる）: スモーク調の暗い背景に考え込む男性の写真。斜めの帯に問いかけを入れ、下に 2 列のチェックリストを置く 4. **独自理論**（科学的な根拠を示す）: 濃い青緑地に六角網目の背景と毛髪のワイヤーフレーム図。オレンジの帯と白の明朝見出しを載せる 5. **開発背景**（専門クリニック発の信頼を伝える）: 院内写真の角丸カードに月桂樹の見出しを載せ、マーカー付きの本文と医師の写真を続ける 6. **満足度・実績**（社会的証明）: 光の放射背景に大きな％の数字と 2 本並べた商品。濃紺地で金の月桂冠アワードと紙吹雪を見せる 7. **セット価格CTA**（セット購入へ誘導する）: 光を背負った 2 本の商品、セットの価格ブロック、CTA、注釈を置く 8. **セット使いの仕組み**（併用する理由を説明する）: 左右から矢印が向かう 2 本の商品と＋記号。白カードに明朝の説明を入れる 9. **特長（POINT）**（成分と機能を詳しく伝える）: 濃色地に POINT 番号付きの白カード、ビフォーアフター図、円形の成分写真グリッドを置く 10. **使い方**（正しい使い方で効果を感じてもらう）: 英字見出しに人物写真、番号付きの 3 ステップを線画で示す 11. **香り・無添加**（使い心地と安心感を伝える）: 果実を添えた商品写真。白カードに斜線入りの円で無添加項目を 5 つ並べる 12. **ラインナップ**（つめかえ用の継続購入を促す）: 台形タブの英字見出しと吹き出しバッジ、パウチ 2 種、価格、CTA を置く 13. **異性の意識調査・お客様の声**（購入の動機付けと共感）: 大きな円グラフと％。六角形の人物写真付きの声カードを左右交互に並べる 14. **返金保証**（購入の不安を取り除く）: 金のリボンバッジと濃色の帯見出し。黄色マーカーで期間を強調し、注意事項の枠と電話番号を載せる ## Imagery - 商品はメタリックな質感の 3D レンダリングにし、光沢とハイライトを強めに出す - 背景にはガラスのような分子球体や結合モデル、六角形の網目を散らす - 人物は 30〜40 代の男性ビジネスマン。清潔感のある自然光で撮る - 使い方の図は細い黒の線画イラストにする - 成分は植物を真上から撮った写真を円形に切り抜き、グリッドに並べる - 実績の演出には金の月桂冠・王冠・紙吹雪を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 750px 前後の SP デザインを置き、左右に濃色または銀グレーの背景を広げる - PC では商品画像と訴求リボンを左右に並べ、余白を広く取る - POINT カードとお客様の声は PC で 2 カラムにしてよい - CTA の幅は PC で最大 480px 程度に抑える ## 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-e8d41bac`（元 LP の URL から採番） - **元 LP**: https://scalp-d.com/brand/hair_root/product/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-22、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。