--- version: alpha name: Deep Navy Water & Gold Men's Skincare LP description: 水面や泡の写真を敷いた深い紺〜青緑の背景に、金色グラデーションの明朝見出しと白文字を重ねた男性向けスキンケア LP。成分を丸い写真と紺色のラベル帯で見せ、高級感と清潔感を同時に出している。 colors: primary: '#14495D' dark-section: '#0D3A50' secondary: '#316571' accent-1: '#D9B66A' surface: '#213549' on-dark: '#EBF2F4' background: '#FDFEFE' background-alt: '#D5DADB' text: '#213549' accent-2: '#5E877E' accent-3: '#51423C' line: '#B89A5E' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.06em accent: fontFamily: Playfair Display fontSize: 48px fontWeight: 400 lineHeight: 1.0 headline-sm: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 0px md: 2px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' gold-headline: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 90px ingredient-label: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 28px ingredient-circle: rounded: '{rounded.full}' height: 120px fv-feature-circle: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 130px vertical-badge: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 180px free-from-circle: textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px quality-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 280px step-number: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 70px --- # DESIGN.md — 深い紺と金文字の男性用洗顔料 LP（Deep Navy Water & Gold Men's Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 深い紺・水面の揺らぎ・金色の明朝・泡と水滴・丸い成分写真・男性向けの高級感 - **地の質感**: 水面・水滴・木目の写真をセクション全面に敷く。平らな単色面は少なく、暗い背景の上に光沢がある - **形**: 成分写真は正円で切り抜く。ラベルは平行四辺形に近い細い紺の帯。カードは角丸なしの白い長方形 - **温度感**: 寒色で冷たく澄んだ印象。金色のアクセントで温かみと高級感を少し加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#14495D` | ブランドの深い紺（背景の基調） | 30% | 画素の主要色に補正 | | `dark-section` | `#0D3A50` | 最も暗い紺の帯セクション | 10% | 画素の主要色に補正 | | `secondary` | `#316571` | 青緑の水面トーン | 12% | 画素の主要色に補正 | | `accent-1` | `#D9B66A` | 見出しの金色グラデーション文字 | 2% | 推定 | | `surface` | `#213549` | 成分ラベル帯の濃紺 | 3% | 画素の主要色に補正 | | `on-dark` | `#EBF2F4` | 暗い背景上の白文字 | 4% | 画素の実測 | | `background` | `#FDFEFE` | 品質説明の白いカード地 | 8% | 画素の実測 | | `background-alt` | `#D5DADB` | 白カードを囲む薄いグレー地 | 6% | 画素の実測 | | `text` | `#213549` | 白地上の濃紺本文 | 2% | 画素の主要色に補正 | | `accent-2` | `#5E877E` | 植物セクションの緑 | 8% | 画素の主要色に補正 | | `accent-3` | `#51423C` | 無添加セクションの木目ブラウン | 7% | 画素の主要色に補正 | | `line` | `#B89A5E` | 金の細い区切り線・光のライン | 0% | 推定 | - 地の色は深い紺〜青緑の写真背景を基本にし、ページの 7 割以上を暗いトーンにする - 見出しの強調語は金色グラデーション、それ以外の見出しは白にする - 成分名などのラベルは濃紺の帯に白文字を載せ、金の細い縁を付ける - 品質説明は唯一の明るいブロック。グレー地に白カードを置き、濃紺文字で書く - 植物は緑、無添加は木目ブラウンのように、テーマに合わせて背景写真の色だけを変える。文字の配色ルールは変えない - セクション境界には金色の光のラインを入れて高級感を出す ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し（金グラデ） | 明朝 | Shippori Mincho | 700 | 34px | 1.4 | 0.08em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 700 | 28px | 1.4 | 0.08em | | `headline-md` | サブ見出し・リード | 明朝 | Noto Serif JP | 600 | 20px | 1.5 | 0.06em | | `accent` | 大きな数字・STEP 番号（イタリック明朝） | 欧文セリフ | Playfair Display | 400 | 48px | 1.0 | 0.0em | | `headline-sm` | 成分ラベル帯の文字 | 明朝 | Noto Serif JP | 600 | 14px | 1.3 | 0.1em | | `body-md` | 成分説明・本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.7 | 0.04em | | `note` | 注釈・小さな補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | - 見出しは明朝体で、字間を広めに取る - 強調語だけ文字サイズを 1.3〜1.6 倍にし、金グラデーションをかける - 数字はイタリックの欧文セリフで大きく見せ、単位の漢字は小さくする - 暗い背景上の文字には弱いドロップシャドウを付けて読みやすくする - 本文は短い行で 2〜3 行に収め、中央揃えか右揃えにする - 認証などのバッジは縦書きの明朝で帯の中に入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分一覧だけ 3 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションは全幅の写真背景にし、上部に見出しを中央揃えで置く - 成分紹介は丸い写真とラベル帯を左右交互にジグザグに並べる - 商品写真は画面幅の 60〜70% の大きさにし、余白を少しはみ出して配置する - 植物エキスは 3×3 の丸写真グリッドにし、各写真の下にラベル帯を重ねる - STEP 解説はテキストと商品写真を左右に振り分け、間に大きな & 記号を入れる ## Elevation & Depth - 丸い成分写真には外側に白〜金の細い縁と、柔らかい影を付ける - 白カードには影を付けず、グレー地とのコントラストだけで浮かせる - 商品パッケージの写真には下方向に柔らかい影を落とす - 金文字には薄い外光（グロー）を付けて光沢を出す ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 成分・植物の写真は正円で切り抜く。商品写真は背景を切り抜いて泡と一緒に配置する - **セクション境界**: 直線で区切り、境界に金色の光のラインを入れる - ラベル帯は角丸なしで、端を斜めに切った細長い帯にする - 無添加の項目は細い白線の正円の中に縦に並べる - カード類は角丸を付けず、シャープな直線でまとめる - 見出しの上下には、中央が明るく両端が消える金の細線を使う ## Components - **金グラデ明朝見出し**（`gold-headline`）: 白と金の明朝体を組み合わせた見出し。強調語だけを大きくして金色にする - **成分ラベル帯**（`ingredient-label`）: 濃紺の細長い帯に金の細い縁を付け、白い明朝で成分名を入れる。帯の下に説明を 1 行添える - **丸い成分写真**（`ingredient-circle`）: 直径 100〜130px の円形写真。光の縁取りを付けてラベル帯と組み合わせる - **FV の特長サークル**（`fv-feature-circle`）: 半透明の細い白線で描いた円の中に、数字と短い特長を 3 行で入れる。縦に 3 つ並べる - **縦書き認証バッジ**（`vertical-badge`）: 上から下がる濃紺の縦長帯に、白い明朝で縦書きの認証表記を入れる - **無添加サークル**（`free-from-circle`）: 木目の背景に細い白線の円を描き、中に白文字で項目名を 2〜3 行入れる - **品質説明カード**（`quality-card`）: 白いカード。左上に濃紺の見出し帯、左に認証マーク、右に実験器具の写真を置き、本文は濃紺にする - **STEP 番号**（`step-number`）: STEP の英字とイタリック体の大きな数字を、半透明の白で重ねて置く ## Do's and Don'ts **Do** - 背景は水面・泡・水滴などの寒色写真で統一する - 見出しの強調語は必ず金グラデーションの明朝体にする - 成分は丸い写真とラベル帯をセットにして見せる - 数字はイタリックの大きな欧文セリフで目立たせる - セクションの境界に金の光のラインを入れる - 明るいブロックは信頼性を伝えるカード 1 か所に絞る **Don't** - パステル色やポップな原色を使わない - 丸ゴシックや手書き風の書体を使わない - ボタンやカードを大きく角丸にしない - 暗い背景の上に濃い色の文字を置かない - 見出しを全部金色にしない（強調語だけに使う） - イラストで成分を描かず、写真を使う ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（高級な男性向けスキンケアであることを一目で伝える）: 水面写真の上に金と白の明朝見出しを置き、泡と一緒に商品を大きく見せる。左に特長サークルを 3 つ並べ、下部に大きなキャッチを置く 2. **有効成分の訴求**（医薬部外品であることと有効成分を示して信頼を得る）: 泡を手に持つ写真と縦書きの認証バッジを置く。大きな数字の見出しの下で、丸写真とラベル帯をジグザグに並べる 3. **保湿成分の訴求**（保湿成分によるうるおいを伝える）: 水滴の背景に丸い成分写真 3 点と商品を配置し、下部に金白の見出しと 1 行の補足を置く 4. **植物エキス**（複数の植物成分による肌へのやさしさを伝える）: 葉と水滴の緑の写真を背景にし、金線で挟んだ見出しの下に 3×3 の丸写真グリッドとラベル帯を並べる 5. **無添加**（肌への負担が少ないことを示す）: 木目の背景に濃紺のリボン見出しと大きな数字の金見出しを置く。商品写真の横に白線の円を並べる 6. **品質管理**（製造品質で安心してもらう）: グレー地に白カードを置き、認証マークと実験器具の写真を添えて濃紺の文字で説明する 7. **価格の根拠**（高品質なのに手に取りやすい理由を伝える）: 濃紺の帯に小さな白文字の前置きを置き、その下の 1 行で強調語だけを金色にする 8. **使い方・ライン使い**（関連商品との併用を提案する）: 水面の背景に STEP1・2 を左右交互に置き、商品写真と大きな & 記号で 2 品をつなぐ ## Imagery - 暗い青の水面を上から撮り、波紋と光の反射を背景にする - 白くきめ細かい泡と、水滴の付いたパッケージを質感強めに撮る - 成分の素材（ハーブ・根・結晶・オイルの粒）を暗い背景で寄りで撮り、円形に切り抜く - 葉先から落ちる水滴をクローズアップし、背景は緑のボケにする - 無添加セクションは暗い木目の棚とタオルで男性的な洗面台を演出する - 金色の光の筋や細かい水滴を装飾として散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像がないため、PC は中央に 640〜750px のカラムを置き、左右は濃紺の写真背景を延長する - 背景写真は全幅に広げ、見出しと商品は中央カラム内に収める - 植物グリッドは PC で 3 列のまま、円の直径を 160px 程度に拡大する - 成分のジグザグ配置は PC では左右 2 カラムに分ける - 見出しは PC で 1.3 倍程度にし、明朝の字間は保つ ## 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-9b897a6a`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/excitech/wash-001/?sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（3/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。