--- version: alpha name: Crimson Gold Functional Supplement LP description: 深紅と金のグラデーションでパッケージの高級感を出す、中高年向け機能性表示食品の LP。生成りや白の地に六角形の写真切り抜きと金帯見出しを並べる。悩みの提起、試験データ、成分、リスク訴求、家族の情景を縦長に積み上げる訴求型の構成。 colors: primary: '#B51A1E' secondary: '#771B18' accent-1: '#B8913F' background: '#F3F3F3' background-alt: '#F0EADE' tint-1: '#C6A786' dark-section: '#1B1B1B' on-dark: '#FAFAF9' marker: '#F5D63A' text: '#37312C' accent-2: '#2E9E5B' surface: '#FEFEFE' accent-1-accessible: '#8C6F30' accent-2-accessible: '#26824B' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 36px fontWeight: 900 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-red-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 160px gold-label-heading: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 44px hex-photo: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 180px hex-red-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 150px data-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 1100px graph-bubble: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px cloud-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 120px spec-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 32px status-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 44px --- # DESIGN.md — 深紅×金箔の機能性サプリ LP（Crimson Gold Functional Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、信頼・誠実、情報量多め・訴求型、力強い・インパクト - **キーワード**: 深紅グラデーション・金箔帯・六角形の切り抜き・試験グラフ・家族の写真・明朝の見出し - **地の質感**: 赤から黒へのグラデーション、光沢のある金、生成りの紙や布の質感を重ねる - **形**: 六角形の写真と赤いパネル、四角い金帯の見出し、ラフな形の写真フレーム - **温度感**: 暖色寄り。赤・金・ベージュで温かく重厚にまとめる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B51A1E` | ブランドの深紅（帯・パネル） | 12% | 画素の実測 | | `secondary` | `#771B18` | 暗い赤のグラデーション地 | 8% | 画素の主要色に補正 | | `accent-1` | `#B8913F` | 金帯の見出し背景 | 3% | 推定 | | `background` | `#F3F3F3` | 白〜薄グレーの基本地 | 30% | 画素の実測 | | `background-alt` | `#F0EADE` | 生成りベージュの地 | 12% | 画素の実測 | | `tint-1` | `#C6A786` | コルク調の茶色地 | 6% | 画素の主要色に補正 | | `dark-section` | `#1B1B1B` | 黒いリスク訴求セクション | 10% | 画素の実測 | | `on-dark` | `#FAFAF9` | 暗い地の上の白文字 | 2% | 画素の実測 | | `marker` | `#F5D63A` | 暗い地での黄色の強調文字 | 1% | 推定 | | `text` | `#37312C` | 見出しと本文の濃い文字 | 4% | 画素の主要色に補正 | | `accent-2` | `#2E9E5B` | グラフの注釈用の緑の吹き出し | 1% | 推定 | | `surface` | `#FEFEFE` | データカードの白い紙面 | 10% | 画素の実測 | | `accent-1-accessible` | `#8C6F30` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#26824B` | AA を満たす補正値（計算） | | 計算 | - ファーストビューと商品訴求は深紅から黒へのグラデーション地で重厚に見せる - 悩みと家族のシーンは生成りベージュの地にしてやわらかくする - 成分とデータは白〜薄グレーの地に置き、清潔で信頼できる印象にする - 見出しの強調語は金帯に白文字、または濃い文字を金帯で囲む - リスク訴求は黒い地にし、キーワードだけ黄色にする - グラフ内の注釈は緑の円にして、赤い折れ線と見分けられるようにする - `gold-label-heading` は文字 `#FAFAF9` × 背景 `#B8913F` のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8C6F30`、4.54:1）を使う。 - `graph-bubble` は文字 `#FAFAF9` × 背景 `#2E9E5B` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#26824B`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | 明朝 | Shippori Mincho | 800 | 44px | 1.2 | 0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 700 | 30px | 1.35 | 0.04em | | `headline-md` | 金帯の強調見出しと吹き出しの見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.4 | 0.03em | | `headline-sm` | 成分名のラベルやグラフのタイトル | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em | | `body-md` | 本文と成分の説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 届出表示や出典などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 欧文ロゴ風の斜体 | 欧文セリフ | Playfair Display | 900 | 36px | 1.1 | 0.0em | | `label-button` | 販売状況などの枠付きラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.05em | - 大見出しは明朝の極太にし、白文字に影を付けて赤い地で目立たせる - 強調語だけ文字を大きくし、続く助詞は小さくする - 数値は太字で大きくし、単位は小さく添える - 注釈は 10px 前後で詰めて書き、行頭に黒丸を付ける - 見出しは中央揃え、説明文は左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分紹介は写真とテキストを左右交互に並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは全幅の地色を切り替えて区切る - 成分紹介は六角形の写真と説明を左右交互にずらす - データは白いカードに収め、上辺にクリップの装飾を付ける - 家族の写真は少し傾けた白枠で重ねて並べる - 製品のラインナップは 3 列に並べ、下に枠付きのラベルを付ける ## Elevation & Depth - 商品パッケージの下に金色の光と影を落とす - データカードには薄いドロップシャドウを付ける - 写真フレームは白い縁と軽い影で浮かせる - 見出しの白文字に暗い影を付けて可読性を確保する ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 六角形、楕円の雲形、ゆるいラフ形状、傾けた白枠の写真 - **セクション境界**: 直線で切り替えるか、斜めの金ラインやグラデーションでつなぐ - 主役の図形は六角形にする（写真・赤パネル） - グラフ上部の帯は角丸を大きくする - ラベルは角丸なしの四角に細線の枠を付ける - 悩みの写真は不定形のシルエットで切り抜く ## Components - **赤い大見出し帯**（`hero-red-band`）: 深紅のグラデーション帯に明朝の白い大見出しを置き、下に金のラインを引く - **金帯の強調見出し**（`gold-label-heading`）: 強調語だけ金色の四角い帯を敷き、残りの文字は帯の外に続ける - **六角形の写真**（`hex-photo`）: 食材や成分の写真を六角形に切り抜き、横に金のラベルと説明を添える - **赤い六角形パネル**（`hex-red-panel`）: 深紅の六角形を 2 つ並べ、間に＋記号を置いて組み合わせを示す - **試験データのカード**（`data-card`）: 上にクリップを付けた白い紙のカード。赤い角丸帯の小見出しと折れ線グラフを入れる - **グラフの注釈吹き出し**（`graph-bubble`）: 緑の円に白抜き文字で変化のポイントを示す - **雲形の吹き出し**（`cloud-bubble`）: 白い不定形の吹き出しに悩みの言葉を太いゴシックで入れる - **成分量のバー**（`spec-bar`）: 黒いバーに白文字で成分名と含有量を 1 行で書く - **販売状況のラベル**（`status-tag`）: 白地に黒の細枠を付けた四角いラベルで、販売中か予定かを示す ## Do's and Don'ts **Do** - 深紅・金・生成りの 3 色を軸にし、ほかの色は差し色に限定する - 成分や食材の写真は六角形で統一する - 強調語は金帯か大きい文字で見せる - データには出典の注釈を必ず添える - 家族の笑顔の写真で安心感を締めくくる **Don't** - パステル調や寒色を主役にしない - 丸ゴシックやポップな手書き文字を使わない - 金を蛍光的な黄色にしない - 注釈を省略して効果を断定する表現にしない - 白地だけで続けず、地色の切り替えで抑揚を作る ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（何に効く商品かと、機能性表示食品であることを即座に伝える）: 赤い帯に明朝の大見出しを置き、暗い背景に金のパッケージと六角形の成分写真を並べる 2. **悩みの提起**（健康診断の結果への不安と、生活改善の難しさに共感する）: 生成りの地に線画のイラストと雲形吹き出しを置き、不定形に切り抜いた写真 2 枚に短い悩みを添える 3. **解決策の提示**（手軽な習慣で毎日ケアできることを示す）: 深紅の地に白い大見出しを置き、パッケージと六角形の写真、成分量のバー、届出表示の注釈を並べる 4. **試験データ**（成分の効果を数値で裏付ける）: コルク地の上に白い紙のカードを置き、金帯の見出しと 2 つの折れ線グラフ、出典の注釈を入れる 5. **配合成分**（主成分以外の付加価値を伝える）: 白〜グレーの地に六角形の写真と金ラベルの説明を左右交互に 3 つ並べる 6. **リスク訴求**（放置した場合のリスクを示し、行動を促す）: 黒い地に楕円で切り抜いた写真を重ね、白文字の中のキーワードを黄色にする 7. **組み合わせ提案**（食生活と商品の併用を提案する）: 食材の写真に囲まれたパッケージの下に、赤い六角形パネルを＋記号でつないで置く 8. **家族の情景**（自分と家族のためという動機づけで締める）: 傾けた白枠の家族写真を重ね、明朝の一言を添えて一部を赤にする 9. **シリーズ紹介**（関連する悩み別の商品を案内する）: 3 列のパッケージの上にアイコン付きの見出し、下に枠付きの販売状況ラベルを置き、最後に本文で締める ## Imagery - パッケージは金の光沢と赤い六角形を強調し、下に金の光を落として撮る - 食材は茶系の器に盛った寄りの写真にし、温かい光で撮る - 悩みのシーンは中高年の人物と居酒屋のビールなど、生活感のある写真にする - リスクの写真は暗く落としてビネットをかけ、楕円に切り抜く - 家族の写真は明るい室内の団らんで、笑顔を中心にする - イラストは茶色の線画で、困った表情の夫婦を描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750px 前後の 1 カラムを維持し、左右に背景色を延長する - 成分紹介は PC で写真とテキストを横並びにし、交互の配置を保つ - グラフのカードは最大 640px 幅に収める - シリーズ紹介は PC でも 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-f450694e`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/aequalis/kn-ketsuatsu/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。