--- version: alpha name: Black Gold Impact Supplement LP description: 黒地に金のグラデーション文字、赤帯、紺の信頼セクションを重ねた機能性表示食品の通販LP。特大の価格表示と試験データのグラフで、訴求とエビデンスを交互に見せる情報量多めの構成。 colors: primary: '#B4987A' background: '#FFFFFF' dark-section: '#010107' accent-1: '#C8101A' secondary: '#050A5B' cta: '#3AA63A' on-cta: '#FEFEFF' accent-2: '#FFEC23' text: '#010107' background-alt: '#DCDCDA' tint-1: '#FAE4E5' on-dark: '#FBF9E7' tint-2: '#E6EAE9' cta-accessible: '#2F862F' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 900 lineHeight: 1.05 letterSpacing: -0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 800 lineHeight: 1.25 headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 900 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.3 rounded: sm: 2px md: 6px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 40px 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: 64px price-block: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 200px benefit-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 44px badge-black-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 30px concern-circle: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 70px data-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 600px number-diamond: textColor: '{colors.primary}' typography: '{typography.accent}' height: 60px voice-age-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 90px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 36px --- # DESIGN.md — 黒×金×赤の高インパクト機能性サプリ LP（Black Gold Impact Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型、信頼・誠実 - **キーワード**: 黒×金・赤帯の強調・特大価格・試験データグラフ・医師・企業の権威付け・放射線と光の演出 - **地の質感**: 黒地に金の流線・光の粒・集中線。金属調グラデーション文字と立体的なドロップシャドウ - **形**: 角の立った帯と長方形が中心。丸型のメダル・悩みバッジ、ピル型の緑CTA - **温度感**: 高温で熱量が強い。暗い地に金と赤が燃えるような印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B4987A` | 金の帯・装飾 | | 画素の主要色に補正 | | `background` | `#FFFFFF` | 購入ブロック・本文の白地 | | 画素の主要色に補正 | | `dark-section` | `#010107` | 黒の訴求セクション地 | | 画素の主要色に補正 | | `accent-1` | `#C8101A` | 赤の強調帯・価格文字・グラフ | | 推定 | | `secondary` | `#050A5B` | 紺の企業信頼セクション地 | | 画素の実測 | | `cta` | `#3AA63A` | 申込ボタンの緑 | | 推定 | | `on-cta` | `#FEFEFF` | CTA上の文字 | | 画素の実測 | | `accent-2` | `#FFEC23` | 注意喚起の黄色帯 | | 画素の実測 | | `text` | `#010107` | 白地の本文・見出し | | 画素の主要色に補正 | | `background-alt` | `#DCDCDA` | グレーの補足・お悩み地 | | 画素の実測 | | `tint-1` | `#FAE4E5` | 解説セクションの淡ピンク地 | | 画素の実測 | | `on-dark` | `#FBF9E7` | 黒地上の白文字 | | 画素の実測 | | `tint-2` | `#E6EAE9` | 医師セクションの淡ミント地 | | 画素の主要色に補正 | | `cta-accessible` | `#2F862F` | AA を満たす補正値（計算） | | 計算 | - 基本は黒地で訴求し、購入ブロック・試験データは白カードで区切る - 金はグラデーションで大見出し・帯・メダルに使い、平面ベタにしない - 赤は価格、強調帯、グラフの『摂取群』に限定して使う - 企業・製造の信頼訴求は濃紺地＋白明朝で切り替える - CTAだけ緑のグラデーションにして他要素と被らせない - 注釈は白地に小さな黒文字、黄色帯は購入上の注意に使う - `button-primary` は文字 `#FEFEFF` × 背景 `#3AA63A` のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2F862F`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 特大キャッチ・価格数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 64px | 1.05 | -0.02em | | `headline-lg` | 金・赤帯の効能見出し | 明朝 | Shippori Mincho | 800 | 30px | 1.25 | 0.0em | | `headline-md` | セクション見出し・試験タイトル | 明朝 | Noto Serif JP | 700 | 22px | 1.4 | 0.02em | | `headline-sm` | グラフ見出し・ラベル帯 | ゴシック | Noto Sans JP | 900 | 17px | 1.4 | 0.0em | | `body-md` | 本文・お客様の声 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.0em | | `note` | 注釈・試験出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 英字セクション名 | 欧文セリフ | Playfair Display | 400 | 26px | 1.2 | 0.03em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 900 | 20px | 1.3 | 0.0em | - キャッチは極太ゴシックに金属グラデーション＋黒縁取り＋影 - 効能見出しは太い明朝で、強調語だけ大きく赤や金にする - 数字は単位より2倍以上大きくし、単位は小さく添える - お客様の声は太いゴシックの縦書き見出しを使う - 注釈は必ず本文直下に小さく置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - 画像主体のセクションは全幅で余白なしに連結 - 試験データは白カードを黒地上に92%幅で置く - グラフ上部に赤や紺のタイトル帯を全幅で付ける - 購入ブロックは商品画像→価格→特典バッジ→注意事項→CTAの順 - 4つの悩みバッジは横並び円形 ## Elevation & Depth - CTAは下方向の濃い影と上部ハイライトで立体ボタン化 - 大見出し文字に黒のドロップシャドウ - 商品パッケージに柔らかい影 - カード自体は影なしのフラット ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物は角版の切り抜きまたは全幅写真。メダル・年齢表示は円形 - **セクション境界**: 直線で切替。下向きの三角矢印やV字でつなぐ箇所あり - 帯・ラベルは角丸なしの長方形 - 割引率は金のギザギザバッジ - 円形の黒バッジに金縁で悩みを表示 - 吹き出しは雲形・角版を使い分け ## Components - **緑の申込CTA**（`button-primary`）: 緑グラデのピル型、左に商品画像、右に丸矢印アイコン。2行文字 - **特大価格表示**（`price-block`）: 赤の巨大数字＋税込小表記、右に金の割引率バッジ、下に赤の値引き額 - **効能の赤金帯**（`benefit-band`）: 赤地に金縁、白抜き明朝で効能を1行ずつ積む - **黒の特典ラベル**（`badge-black-label`）: 国内生産・送料無料などを黒帯白字で2つ横並び - **悩み円バッジ**（`concern-circle`）: 黒地に金縁の円、白明朝で短い悩みを2行 - **試験データカード**（`data-card`）: 白カード、赤見出し帯、赤vs灰の棒グラフ、下に出典注釈 - **機能性番号**（`number-diamond`）: 金線の菱形内にイタリック数字 - **年齢バッジ**（`voice-age-badge`）: 黒円に白の名前と大きな年齢数字、写真左下に重ねる - **チェック付き悩みリスト**（`check-list`）: 白ボックスに赤チェック、強調語に黄マーカー ## Do's and Don'ts **Do** - 黒・金・赤を基調にし、信頼パートだけ紺に切替える - 価格や数値は画面幅いっぱいの特大表示にする - 全ての効能表示・データに注釈を添える - 訴求画像とデータカードを交互に配置する - CTA前に安心感を伝えるサポート説明を入れる **Don't** - 淡いパステル中心の配色にしない - 金をフラットな黄土色ベタで使わない - CTAを緑以外の色にしない - グラフに多色を使わない（赤と灰のみ） - 注釈を省略したり本文から離して置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新商品登場と割引額で掴む）: 集中線の黒青背景に金属文字、赤金の割引帯と大きな矢印 2. **主要効能の提示**（期待できる機能を一目で）: 人物写真と巨大グラデ文字、測定器風の数値パネル 3. **実績・権威**（累計実績で信頼付け）: 金縁額装に巨大数字、粒の写真背景 4. **効能まとめ＋購入**（早期購入の導線）: 悩み円バッジ、赤金帯の効能列挙、白地の価格ブロックと緑CTA 5. **安心サポート**（定期の不安解消）: 黒地に黄色見出し、オペレーター写真 6. **専門家推薦**（協会・医師の権威付け）: 金メダル、雲形吹き出し、ミント地の医師紹介と縦書き明朝 7. **成分と試験データ**（エビデンス提示）: 黒地に金流線、菱形番号、写真＋白データカード＋棒グラフ 8. **メーカー紹介**（企業の信頼性）: 紺地に白明朝、工場写真、周年メダル、製品群 9. **成分解説Q&A**（成分のすごさを解説）: 淡ピンク地、イラスト人物、比較グラフと図解 10. **お客様の声**（共感と期待感）: 全幅人物写真に太ゴシック縦書き、黒円年齢バッジ 11. **悩みの提起**（自分事化）: グレー質感背景に縦書き明朝、チェックリスト、統計グラフ 12. **CTA**（最終申込）: 価格ブロックと緑CTAを繰り返し配置 ## Imagery - 人物は明るいスタジオ光で表情豊かに、驚き・笑顔を強調 - 黒背景に金の光の筋・粒子・放射線を合成した演出背景 - 成分は赤い野菜などを真っ赤に彩度高く大写し - 体の悩みは腹部のクローズアップを暗めトーンで - 工場・研究員写真は清潔な白と青のトーン - グラフはフラットな赤と灰の棒、紺または赤の見出し帯 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは本文を中央の約480〜750px幅に収め、左右は黒やセクション色で延長 - 画像主体のセクションは比率を保ったまま中央寄せ - データカードは最大幅を設け余白を広げる - CTAボタンは最大幅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-90f02152`（元 LP の URL から採番） - **元 LP**: https://medicine.tamagokichi.com/lp/shiboranaito_premium/01chat/index_qu.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（6/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。