--- version: alpha name: Navy Gold Premium Beauty Drink LP description: 深い紺と金を軸に、淡い桜色・生成り・白の地を交互に重ねた上品な美容ドリンク通販 LP。明朝体の大見出しにピンクの強調語と金の数値を合わせる。紺地のオファー枠に赤い割引バッジと緑のピル型 CTA を置き、購入を後押しする。 colors: primary: '#101E45' on-primary: '#FFFFFF' background: '#FFFFFF' background-alt: '#F1F1F3' tint-1: '#F6E6E6' tint-2: '#F6E9BD' secondary: '#D3AC4B' accent-1: '#BB4467' accent-2: '#E60012' cta: '#1C944D' on-cta: '#FFFFFF' dark-section: '#030305' text: '#101E45' text-muted: '#888888' cta-accessible: '#1A8746' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 40px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 2px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 56px 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: 60px badge-discount: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 56px price-panel: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 140px badge-gold-circle: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 100px label-navy: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 30px ingredient-circle: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 360px pre-cta-ribbon: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 30px --- # DESIGN.md — 紺×金×桜色の高級美容ドリンク LP（Navy Gold Premium Beauty Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、情報量多め・訴求型、やさしい・柔らかい - **キーワード**: 紺と金・明朝の見出し・淡い桜色・光沢グラデーション・数値訴求・定期コースのオファー - **地の質感**: シルクのような光沢グラデーションと金のきらめき。白い地に柔らかなドロップシャドウのカードを重ねる - **形**: 角が小さいカード、円形の成分バッジ、金の円の数値バッジ、ピル型 CTA - **温度感**: 上品で温かみがある。紺の冷たさを桜色と金で和らげる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#101E45` | ブランドの紺。オファー帯とヘッダー | 15% | 画素の実測 | | `on-primary` | `#FFFFFF` | 紺地の上の白文字 | 2% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 18% | 画素の実測 | | `background-alt` | `#F1F1F3` | 淡いグレーの地 | 8% | 画素の実測 | | `tint-1` | `#F6E6E6` | 桜色の地。FV とまとめ | 9% | 画素の実測 | | `tint-2` | `#F6E9BD` | 生成りの地 | 5% | 画素の実測 | | `secondary` | `#D3AC4B` | 金。数値と飾り線 | 4% | 画素の実測 | | `accent-1` | `#BB4467` | 強調語のローズピンク | 2% | 画素の実測 | | `accent-2` | `#E60012` | 割引バッジの赤 | 1% | 推定 | | `cta` | `#1C944D` | 申込ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA の白文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#030305` | 特長導入の黒帯 | 2% | 画素の実測 | | `text` | `#101E45` | 見出しの紺文字 | 3% | 画素の主要色に補正 | | `text-muted` | `#888888` | 注釈のグレー | 1% | 推定 | | `cta-accessible` | `#1A8746` | AA を満たす補正値（計算） | | 計算 | - 地は白、淡いグレー、桜色、生成りを交互に使い、セクションを分ける - オファーは必ず紺の全幅帯にまとめ、白いパネルで価格を見せる - 見出しの強調語はローズピンク、数値は金か赤で大きく出す - CTA は緑のグラデーションのピル型だけにし、ほかの要素で緑を使わない - 割引率は赤い面に白文字のバッジで目立たせる - 特長の導入は黒地に金のきらめきを入れ、高級感を出す - `button-primary` は文字 `#FFFFFF` × 背景 `#1C944D` のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1A8746`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と各章の大見出し | 明朝 | Shippori Mincho | 700 | 30px | 1.4 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 24px | 1.45 | 0.04em | | `headline-md` | 小見出しとリード | 明朝 | Noto Serif JP | 600 | 18px | 1.5 | 0.03em | | `headline-sm` | 帯ラベルとタブ見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | 注釈と規約 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 価格・mg・%の大きな数字と章番号 | 欧文セリフ | Playfair Display | 700 | 40px | 1.1 | 0.0em | | `label-button` | CTA の文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.04em | - 見出しは明朝、本文と価格表はゴシックにする - 見出しの中の 1〜2 語だけピンクにし、少し大きくする - 数値はセリフ体で大きくし、単位は小さく添える - 引用符を大きく付けて、キーワードを強調する - 大見出しは 2〜3 行で中央揃えにする - 注釈は小さいグレー文字で、ブロック下部にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央 600px 前後の固定幅に、背景を全幅で敷く - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - コンテンツは中央の細い固定幅にまとめ、背景だけを全幅にする - 成分は円を 3 つ、三角形に配置して商品を中央に置く - オファー帯はページ内で 3 回くり返す - 特長は大きな 01〜03 の薄い番号と白カードで区切る - 見出しの上に小さなリード文を置き、下に大見出しを置く - 飲み方は点線のタイムラインで蛇行させる ## Elevation & Depth - 白カードには、ぼかし 20px 程度の薄いグレーの影を付ける - CTA ボタンには、下方向に落ちる影と光沢を付ける - 商品ボトルの写真には、接地する影と反射を付ける - 金の円バッジは立体感が出るグラデーションにする ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 人物は四角い写真か背景に溶け込ませる。成分は円形に切り抜き、商品は切り抜きで置く - **セクション境界**: 直線で区切り、背景色を切り替える。下向きの三角や縦線で次へつなぐ - カードの角はほぼ直角 - 成分と数値は円形バッジにする - CTA はピル型にし、左に白い円で割引率を入れる - 見出しラベルは紺の長方形の帯にする - 価格パネルは白い角張った箱にする ## Components - **定期コース CTA**（`button-primary`）: 緑グラデーションのピル型。左端に白い円で割引率、右端に三角の矢印を入れる - **割引バッジ**（`badge-discount`）: 赤い面に白抜きで、初回限定と大きな割引率を載せる - **価格パネル**（`price-panel`）: 白い箱に、取り消し線の通常価格、矢印、赤い大きな価格を並べる。下に小さな特典ボックスを 3 つ置く - **金の数値バッジ**（`badge-gold-circle`）: 金の円の縁取りの中に、実感率などの % を入れる - **紺の見出しラベル**（`label-navy`）: 紺の長方形に白い明朝文字。小見出しやカードの上部に置く - **成分の円カード**（`ingredient-circle`）: 淡い色の円に、上の小ラベル、成分名、金の mg 数値を入れる - **番号付き特長カード**（`feature-card`）: 白いカードの背後に大きな薄い番号を置き、写真と本文を並べる - **CTA 上の吹き出し**（`pre-cta-ribbon`）: 白い角丸の吹き出しに、合計金額のお得感を小さく書く ## Do's and Don'ts **Do** - 紺・金・ピンクの 3 色で高級感と女性らしさを保つ - 見出しは明朝体で中央に揃える - 数値（%・mg・価格）をセリフ体で大きく見せる - オファー帯を FV 直後、中盤、末尾の 3 回置く - 背景に光沢のあるシルク風グラデーションを使う - 注釈を各ブロックの下に小さく入れる **Don't** - CTA 以外の要素に緑を使わない - 原色のビビッドな背景を広く敷かない - 見出しに丸ゴシックやポップな書体を使わない - 角の大きい丸カードを多用しない - 価格表示の取り消し線と税込表記を省かない - 写真を暗く粗い質感にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（高級ラインであることと実感率を伝える）: 左は桜色の地に商品ボトルと金の数値バッジ。右は女性の写真に、縦書き明朝の大コピーと受賞バッジを重ねる 2. **オファー**（初回割引の定期コースへ誘導する）: 紺の全幅帯に、赤い割引バッジ、白い価格パネル、緑のピル型 CTA を置く 3. **受賞実績**（第三者の評価で信頼を示す）: 白地に月桂樹の金の飾りと明朝の受賞文字。右に雑誌の表紙とボトルを並べる 4. **共感・ベネフィット**（外側のケアとの違いを示す）: 生成りから白へのグラデーション。上を向く女性の写真と、うるおい感を表す半透明の球体を置く 5. **事実の提示**（美容成分が年齢とともに減ることを説明する）: 紺の小ラベル、図解カード、ピンクのタグ、減少グラフを入れる 6. **悩みの提起**（あきらめの気持ちに寄り添う）: グレー写真の上に、半透明の黒い箱でチェックリストを 4 つ並べる 7. **解決策**（独自の乳酸菌を答えとして示す）: 金の光沢背景に、大きな引用符付きの見出しと紺の帯の素材名、顕微鏡写真を置く 8. **成分配合**（配合量を数値で見せる）: 円形の成分バッジに mg を表示し、× 記号で組み合わせを示す。3 円の三角配置にする 9. **3つの特長**（特長を整理して伝える）: 黒と金の導入帯のあと、金の背景に 01〜03 の白カードを並べる 10. **飲み方提案**（続け方のアレンジを見せる）: 水面の淡い青い背景に、蛇行する点線のタイムラインとボトルのアイコンを置く 11. **まとめ**（実感と贅沢感を再確認する）: 桜色の地に明朝の大見出し、女性の写真、紺の帯のコピーを置く 12. **最終オファー**（申込を締めくくる）: 紺の帯に、ドリンクとタブレットの 2 つの価格枠と CTA、注釈、フッターのリンクを置く ## Imagery - 30〜40代の女性を白い服で撮る。明るいハイキーで、柔らかな自然光にする - 紺のボトルに金の放射状の柄。白背景で切り抜き、反射を付ける - 背景にシルクの布のような光沢の曲線グラデーション（白・金・桜色）を敷く - うるおいを表す半透明の泡の球体や水面を置く - 金のきらめきや月桂樹など、高級感のある装飾を添える - 成分は顕微鏡写真や断面の図解で、科学的な印象を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 600px 前後の固定幅で、背景だけを全幅に広げる - SP は同じ構成を縦に積み、FV の写真を上、商品とバッジを下に置く - SP の価格パネルは割引バッジの下で全幅にする - SP の成分 3 円は 1 個と 2 個の三角配置を保ち、円の直径は 100px 前後にする - SP の CTA は幅 90%、高さ 60px にする - SP の章番号は控えめのサイズにし、カードと重ならないようにする ## 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-c96e52c8`（元 LP の URL から採番） - **元 LP**: https://www.hyalmoist.jp/air/offer4/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。