--- version: alpha name: Dark Metallic Executive Supplement LP description: 黒い地とシルバーのヘアライン金属質感を交互に重ね、明朝の大見出しで重厚感を出した中高年ビジネス層向けサプリLP。主CTAは光沢のある赤いグラデーションボタンにし、実績は濃紺、成分は金のメダルで見せる。 colors: primary: '#063B6A' background: '#FFFFFF' dark-section: '#1F1F1F' background-alt: '#FFFFFF' surface: '#F4F4F4' cta: '#C8101A' on-cta: '#FFFFFF' secondary: '#2E8B1E' accent-1: '#B8925A' text: '#030303' on-dark: '#FFFFFF' text-muted: '#4F4F4F' accent-2: '#E30101' marker: '#020202' secondary-accessible: '#2D871D' accent-1-accessible: '#91703E' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.1em headline-lg: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 600 lineHeight: 1.45 letterSpacing: 0.1em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.12em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 38px fontWeight: 500 lineHeight: 1.1 label-button: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 2px md: 4px lg: 8px 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.sm}' height: 80px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 64px badge-ribbon: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 48px card-testimonial: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 240px heading-bar: backgroundColor: '{colors.marker}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 28px medal-ingredient: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 120px stat-pie: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 130px price-block: textColor: '{colors.text}' typography: '{typography.accent}' height: 60px --- # DESIGN.md — 黒×銀ヘアライン×赤CTAの男性向けサプリLP（Dark Metallic Executive Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: ラグジュアリー・ダーク、信頼・誠実、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 重厚・金属質感・明朝の格調・エグゼクティブ・エビデンス訴求 - **地の質感**: 黒地に六角形の網目と光の粒、ヘアラインのシルバー金属板、白大理石の面 - **形**: 角の立った矩形が中心。セクションの境目はV字の山形で切り替える。ボタンだけが光沢付きの角丸 - **温度感**: 冷たく硬質。赤と金をアクセントにして熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#063B6A` | ブランド濃紺（実績・定期コース帯） | 6% | 画素の実測 | | `background` | `#FFFFFF` | 白の本文地 | 16% | 画素の実測 | | `dark-section` | `#1F1F1F` | 黒の情緒・成分セクション地 | 21% | 画素の実測 | | `background-alt` | `#FFFFFF` | 薄グレーの金属・大理石地 | 9% | 画素の実測 | | `surface` | `#F4F4F4` | シルバーのヘアラインのカード地 | 8% | 画素の実測 | | `cta` | `#C8101A` | 主CTAの赤 | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#2E8B1E` | 定期コースボタンの緑 | 1% | 推定 | | `accent-1` | `#B8925A` | 金色のメダル・罫線 | 2% | 推定 | | `text` | `#030303` | 見出しの黒文字 | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の上の白文字 | 2% | 画素の主要色に補正 | | `text-muted` | `#4F4F4F` | 注釈グレー | 1% | 画素の実測 | | `accent-2` | `#E30101` | グラフ・強調の赤 | 0% | 画素の実測 | | `marker` | `#020202` | 黒帯の小見出し | 1% | 画素の実測 | | `secondary-accessible` | `#2D871D` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#91703E` | AA を満たす補正値（計算） | | 計算 | - 黒地とシルバー金属地を交互に並べ、白地はエビデンス部分だけに使う - 赤は主CTAと『効果あり』のグラフ棒だけに使う - 金は成分メダル・月桂樹・罫線などの装飾に限る - 濃紺は実績数値と定期コースの帯に使う - 定期コースの継続ボタンは緑にして、主CTAの赤と区別する - 注釈は小さいグレー文字で、各ブロックの直下に置く - `button-secondary` は文字 `#FFFFFF` × 背景 `#2E8B1E` のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#2D871D`、4.57:1）を使う。 - `badge-ribbon` は文字 `#FFFFFF` × 背景 `#B8925A` のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#91703E`、4.57:1）を使う。 - `medal-ingredient` は文字 `#FFFFFF` × 背景 `#B8925A` のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#91703E`、4.57:1）を使う。 - `stat-pie` は文字 `#B8925A` × 背景 `#063B6A` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVと情緒セクションの大見出し | 明朝 | Shippori Mincho | 700 | 34px | 1.35 | 0.1em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 600 | 26px | 1.45 | 0.1em | | `headline-md` | お客様の声のタイトル・帯の見出し | 明朝 | Noto Serif JP | 500 | 20px | 1.4 | 0.12em | | `headline-sm` | 黒帯の小見出し・研究実績の見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em | | `body-lg` | 黒地の情緒コピー（中央揃え） | 明朝 | Noto Serif JP | 500 | 16px | 2.0 | 0.12em | | `body-md` | 声の本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.6 | 0.05em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 価格や%の数字 | 欧文セリフ | Playfair Display | 500 | 38px | 1.1 | 0.0em | | `label-button` | CTAボタンの文言 | 明朝 | Noto Serif JP | 700 | 18px | 1.3 | 0.08em | - 見出しと情緒コピーは明朝体で字間を広く取る - 数字はセリフ体で大きくし、円・税込の表記は小さく添える - グラフや注釈、表のような情報はゴシック体にする - 強調語は一段大きくし、下に細い罫線を引く - 商品名ロゴのように見せる文字だけ極太のゴシックにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品画像と価格は左右 2 分割 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 情緒コピーは中央揃えで行間を広く取る - お客様の声は文と人物写真を左右交互に置く - CTAブロックは商品・価格・ボタン・注釈の順にセットにして3回繰り返す - グラフの下には出典の注釈を必ず置く ## Elevation & Depth - 声のカードやCTAボタンには下方向にやわらかい影をつける - 金属板のカードはヘアラインの質感と影で浮かせる - 金メダルには光沢のグラデーションをかける ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は背景を抜くか矩形で切る。成分は円形のメダル、実績は円グラフで見せる - **セクション境界**: 下向きのV字（山形）で切り替え、所々にシェブロン矢印を置く - カードは角を立てた矩形にする - ボタンは角丸を小さくし、右端に三角アイコンを置く - 左上に金色のリボン型バッジを重ねる ## Components - **赤光沢CTA**（`button-primary`）: 赤のグラデーションで光沢を出したボタン。上段に小さい説明、下段に大きい価格を置き、右端に三角、左上に金リボンのバッジを重ねる - **緑の定期CTA**（`button-secondary`）: 緑のグラデーションのボタン。定期コースで使い、金リボンのバッジを付ける - **金リボンバッジ**（`badge-ribbon`）: 手軽さを伝える短い3行の文言を入れた金色のリボン - **金属板の声カード**（`card-testimonial`）: ヘアラインのシルバー板に、明朝の見出し・年齢と属性・本文・人物写真を並べたカード - **黒帯の小見出し**（`heading-bar`）: グラフの直前に置く、黒地に白いゴシック文字の帯 - **金の成分メダル**（`medal-ingredient`）: 円形の金メダルに英字の略称・和名・シルエットを入れ、3つを三角形に並べる - **濃紺の実績円グラフ**（`stat-pie`）: 濃紺の円の中に金のセリフ体で%を入れる。左に明朝のラベルを置く - **価格比較**（`price-block`）: 通常価格を小さく、矢印の先にモニター価格を大きいセリフ体で表示し、送料無料の枠を添える ## Do's and Don'ts **Do** - 黒と銀の地を交互に重ね、V字で切り替える - CTAブロックは同じ形でページ内に複数回置く - 効果の数値はグラフで見せ、出典を注釈で添える - 明朝の見出しは字間を広げて重厚にする **Don't** - パステル色や丸ゴシックを使わない - 赤をCTAとグラフ以外の装飾に使わない - 注釈を省いて効果を断定的に書かない - 大きな角丸やピル型のボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ターゲットの自己投資意識に訴える）: 暗い書斎に男性の人物写真を置き、左上に白い明朝の大コピーを重ねる 2. **オファーとCTA**（お試し価格をすぐに提示する）: 黒紺の地に商品・No.1バッジ・価格を並べ、その下に赤CTAと注釈を置く 3. **共感コピー**（多忙な責任世代の日常を描く）: 黒地に中央揃えの明朝コピーを7行ほど置き、上に菱形3つの区切りを入れる 4. **お客様の声**（実感を伝える）: シルバー地に声カードを3枚、写真を左右交互に配置する 5. **エビデンス**（成分の機能を根拠で示す）: 白地に明朝の見出し、黒帯の小見出し、棒グラフ2つと出典を並べる 6. **中間CTA**（再度申込を促す）: 金属地の帯見出しと黒地の商品価格ブロックに赤CTAを置く 7. **成分の解説**（成分の重要性と、食事だけでは摂りにくいことを伝える）: 黒地の網目背景に金メダル3つを三角配置し、シェブロンの下に問題提起を置く 8. **解決と配合**（独自配合を示す）: 白大理石の地にカプセル写真と配合量を引き出し線で示し、金の罫線で挟んだ見出しを置く 9. **研究実績**（企業の信頼性を示す）: 研究室の写真に重ねたグレーのカードに、No.1メダルとゴシックの見出しを入れる 10. **販売実績**（社会的証明）: 濃紺の地に金の月桂樹、累計の数字、満足度の円グラフ2つを並べる 11. **まとめのCTA**（最後のひと押し）: FVのコピーを脳のビジュアルと共に再掲し、共感コピーと赤CTAを置く 12. **表示事項と定期コース**（法的表記と継続購入の案内）: 枠線付きの表示ボックス、開閉式の応募要項、濃紺帯のコース紹介と緑ボタンのカード2つを並べる ## Imagery - 人物は40〜60代のスーツ姿で、知的な表情。低い照明で陰影を強く出す - 脳は光る神経網の3Dや金色の液体で表現する - 背景は黒地に六角形の網目と光の粒を薄く入れる - 金属地は横方向のヘアラインのシルバー - 研究写真は実験器具を寄りで撮り、寒色にする - 成分のアイコンは動物や魚の白いシルエット - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に幅600px程度のSPカラムを置き、左右は黒の地で埋める推奨 - PCではFVの人物を右、コピーを左に置き、横長に広げる - PCでは声のカードを2〜3列のグリッドにしてよい - 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-99d8fd44`（元 LP の URL から採番） - **元 LP**: https://www.suntory-kenko.com/contents/pw2s/50/omg/idom18/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。