--- version: alpha name: Crimson and Bronze Premium Supplement LP description: 深い赤の面とブロンズのグラデーション帯、明朝体の大見出しで高級感と権威性を出す機能性表示食品の LP。濃紺の夜景セクションや白カードの FAQ を挟み、注釈を細かく添えて信頼感を補う。 colors: primary: '#EA3D4A' secondary: '#C70925' accent-1: '#938077' accent-2: '#A47A55' dark-section: '#000F52' on-dark: '#F7FAFD' background: '#FFFFFF' background-alt: '#EADACD' tint-1: '#E4F3FA' line: '#E9DACE' text: '#333333' text-muted: '#666666' accent-3: '#CD0405' accent-1-accessible: '#806E66' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em accent: fontFamily: Playfair Display fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.4em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' title-badge-bronze: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 130px laurel-oval: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 80px circle-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px pill-badge-red: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 56px info-box-red: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 160px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 210px faq-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 180px section-label: textColor: '{colors.text}' typography: '{typography.accent}' height: 70px note-block: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 60px --- # DESIGN.md — 深紅×ブロンズの上品な機能性食品 LP（Crimson and Bronze Premium Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、信頼・誠実、情報量多め・訴求型 - **キーワード**: 深紅・ブロンズ・明朝体・権威訴求・注釈多め・女性向け睡眠ケア - **地の質感**: 光沢のある赤い面と、メタリック調のブロンズグラデーション。写真は柔らかい光のスタジオ撮影 - **形**: 角が直線の白カード、ブロンズの円形バッジ、月桂樹で飾った楕円の称号枠 - **温度感**: 暖色の赤とベージュが中心。濃紺の夜景で静けさを差し込む ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EA3D4A` | ブランドの深紅（大きな面） | 9% | 画素の実測 | | `secondary` | `#C70925` | 濃い赤（訴求帯・ボタン） | 6% | 画素の主要色に補正 | | `accent-1` | `#938077` | ブロンズ（称号帯・円バッジ） | 7% | 画素の主要色に補正 | | `accent-2` | `#A47A55` | ブロンズ文字（強調語） | 1% | 推定 | | `dark-section` | `#000F52` | 濃紺の夜空セクション | 6% | 画素の実測 | | `on-dark` | `#F7FAFD` | 濃色面の上の白文字 | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 35% | 画素の実測 | | `background-alt` | `#EADACD` | ベージュ地（FAQ・見出し帯） | 8% | 画素の実測 | | `tint-1` | `#E4F3FA` | 淡い水色地（食べ方セクション） | 3% | 画素の実測 | | `line` | `#E9DACE` | ベージュの枠線 | 1% | 画素の主要色に補正 | | `text` | `#333333` | 見出し・本文の濃い灰黒 | 3% | 推定 | | `text-muted` | `#666666` | 注釈の灰色文字 | 1% | 推定 | | `accent-3` | `#CD0405` | 赤い強調見出し文字 | 1% | 画素の実測 | | `accent-1-accessible` | `#806E66` | AA を満たす補正値（計算） | | 計算 | - 地の色は白を基本に、深紅・濃紺・ベージュ・淡水色をセクションごとに切り替える - 権威の訴求（日本初・特許など）はブロンズのグラデーション帯や円バッジで見せる - いちばん伝えたい言葉は赤の明朝で大きく、白地の上に置く - 赤い面の上は白文字だけにし、ブロンズや黒は重ねない - 注釈は灰色の小さな文字で、各ブロックの直下にまとめる - `title-badge-bronze` は文字 `#F7FAFD` × 背景 `#938077` のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#806E66`、4.62:1）を使う。 - `circle-badge` は文字 `#F7FAFD` × 背景 `#938077` のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#806E66`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューとまとめの大コピー | 明朝 | Shippori Mincho | 600 | 44px | 1.3 | 0.08em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 600 | 28px | 1.4 | 0.1em | | `headline-md` | 称号バッジやカード見出し | 明朝 | Noto Serif JP | 600 | 20px | 1.4 | 0.08em | | `headline-sm` | FAQ の質問・口コミの見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.06em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 400 | 15px | 1.9 | 0.08em | | `accent` | セクション上の小さな英字ラベル | 欧文セリフ | Playfair Display | 400 | 12px | 1.4 | 0.4em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | - 見出しは明朝で字間を広めにとり、上品に見せる - 見出しの上に、字間を大きく空けた英字の小ラベルを添える - 本文はゴシック体で、行間は約 1.9 と広くとる - 強調語は文字サイズを大きくし、色を赤かブロンズに変える - 主張には必ず小さな※印の上付き文字を付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、横並びは称号カード 2 個か円バッジ 3 個まで - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに背景色を全幅で切り替える - カードは画面幅の約 90% にして中央に置く - 各ブロックの直下に注釈エリアを置く - 比較は 2 枚の写真カードを等号で結んで見せる ## Elevation & Depth - 影はほぼ使わず、平面で見せる - 白カードは細い枠線か、地の色との差で浮かせる - 円バッジにはごく薄い外側のリングを付ける ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 商品写真は角丸なしの四角か切り抜き。人物は腰から上を切り抜いて枠からはみ出させる - **セクション境界**: 境界は直線で背景色を切り替える。ブロンズのグラデーション帯で区切る - カードとボックスは角丸なしの直角 - 特長は円形のブロンズバッジで見せる - 称号は月桂樹付きの楕円枠か、ピル型の赤バッジにする - 口コミの見出しは片側だけ丸いタブ型の帯にする ## Components - **ブロンズの称号カード**（`title-badge-bronze`）: 上半分がブロンズのグラデーション帯で、そこに月桂樹と称号を白い明朝で置く。下半分は白地で、説明とブロンズの強調語を入れる - **月桂樹付きの楕円称号**（`laurel-oval`）: 濃紺地の上に白い細線の楕円枠を置き、月桂樹と大きな明朝の称号を入れる - **ブロンズ円バッジ**（`circle-badge`）: 直径約 110px のブロンズの円に、白い明朝で特長を 2〜3 行入れる。3 個並べるか、写真に重ねる - **赤いピル型称号**（`pill-badge-red`）: 赤い面に白の細いフチを付け、白い明朝で称号を入れる。横に 3 個並べる - **赤い届出情報ボックス**（`info-box-red`）: 濃い赤の面に、線で挟んだ見出しと白い本文、届出番号を入れる - **口コミカード**（`voice-card`）: ベージュの枠線を付けた白カード。見出しはベージュのタブ型の帯に入れ、本文の後ろに年代を右寄せで添える - **FAQ カード**（`faq-card`）: ベージュ地の上に白カードを置き、赤い四角の Q アイコンの下に、質問と回答を中央から書き出す - **英字ラベル付き見出し**（`section-label`）: 字間を広げた小さな英字の下に、大きな明朝の見出しを置く - **注釈ブロック**（`note-block`）: 各ブロックの下に、灰色の小さな文字で※注釈をまとめて置く ## Do's and Don'ts **Do** - 見出しは明朝で、字間をゆったりとる - 根拠を示す主張には必ず※注釈を付ける - 赤・ブロンズ・白の 3 色を軸にし、濃紺は 1 セクションだけにする - 権威の訴求は称号バッジでくり返し見せる - 商品は光沢のある赤いパッケージを主役にして撮る **Don't** - ポップな丸ゴシックや手書き文字は使わない - ビビッドな黄色や緑をアクセントに使わない - カードに強い影や大きな角丸を付けない - 注釈を省いて言い切る表現にしない - 赤の面に別の柄や模様を重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（効果のコピーと商品を印象づける）: 赤い全面に白い明朝の大コピーを置き、中央に商品パッケージ、その下にロゴを入れる。下部に称号カードを 2 個並べる 2. **注釈**（主張の根拠を示す）: 白地に小さな灰色の文字で並べる 3. **唯一性の訴求**（機能が公的に認められていることを伝える）: 濃紺の夜空の写真に、月桂樹の楕円称号と白い明朝の見出しを重ねる。下に白い本文ボックスと試験概要を置く 4. **開発者**（技術を語る人物で信頼感を出す）: ベージュの枠に白衣の人物を切り抜いて置き、ブロンズ帯に肩書きと氏名を入れる。下に長めの本文 5. **成分の説明**（成分の価値を伝える）: 赤い全面に大きな漢字の見出しと泡の写真を置き、下線付きのコピーと、赤い枠の白い結論ボックスを続ける 6. **特許技術**（一般品と比較して優位性を見せる）: ブロンズ帯の見出しの下に、写真カード 2 枚を等号でつないで数値を比べる 7. **特長のまとめ**（称号と数値で訴求をまとめる）: 赤いピル型称号を 3 個、赤い明朝のコピー、商品写真、ブロンズ円バッジを置き、最後に赤い届出情報ボックス 8. **食べ方**（摂り方と味を伝える）: 淡い水色地に明朝の見出しを置き、円バッジと商品写真を組み合わせる 9. **お客様の声**（使った人の実感を伝える）: 大きな赤い英字の見出しの下に、枠線付きの口コミカードを縦に 2 枚並べる 10. **まとめ**（最後にもう一度訴求する）: 明るいグレーの光の背景に赤い大コピーと商品を置き、円バッジ 3 個と届出情報ボックスを続ける 11. **よくある質問**（不安を解消する）: ベージュ地に、Q アイコン付きの白カードを縦に並べる ## Imagery - 商品は赤い光沢パッケージで、赤背景に斜めの光を当てて高級感を出す - 泡・水滴・ガラスで成分の透明感を表す - 開発者は白衣で、話している最中のような手振りの写真を切り抜く - 夜空と木立の静かな風景で睡眠を表す - 明るいグレーの光と植物の背景で清潔感を出す - 装飾は月桂樹の線画と、細い白線のみ - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は SP 幅に近い 1 カラムの画像主体の構成。SP でもそのまま縦に積む - PC では中央に約 480〜750px 幅のコラムを置き、背景色だけを全幅に広げる - 称号カードは 2 列、円バッジは 3 列を SP でも維持する - 大見出しは SP で 40〜44px、PC で 56px 前後にする ## 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-120431f5`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/shinryohealthcare/jelly31/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。