--- version: alpha name: Crimson and Gold Premium Supplement LP description: 深紅の亀甲柄の面と金グラデーションの明朝見出しで高級感を出した、50代女性向け健康食品の通販 LP。モノクロの悩み提起から木目・光の写真による成分訴求へ移り、価格オファーのブロックを何度も繰り返す訴求型の構成。 colors: primary: '#A4020B' secondary: '#A50D0D' cta: '#3FA21C' on-cta: '#F6FEF3' background: '#FEFEFD' background-alt: '#FAF9F5' surface: '#BAA997' accent-1: '#9C7A3C' text: '#474033' text-body: '#333333' marker: '#FFF2B0' dark-section: '#474033' on-dark: '#FFFFFF' line: '#BDBDBD' cta-accessible: '#338417' surface-accessible: '#89725B' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 52px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.03em headline-md: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em 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: Great Vibes fontSize: 30px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 58px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 46px offer-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 560px discount-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px benefit-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 54px stat-pie: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' rounded: '{rounded.full}' height: 160px label-band: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 32px voice-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 260px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 340px --- # DESIGN.md — 深紅×金明朝の高級サプリ通販 LP（Crimson and Gold Premium Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、情報量多め・訴求型、信頼・誠実 - **キーワード**: 深紅・金グラデーション明朝・亀甲柄・医師推奨メダル・繰り返しオファー・黄色マーカー - **地の質感**: 赤地に細かい六角形の柄を薄く重ね、キラキラした光の粒やボケ、木目の写真を背景に使う。 - **形**: 白カードは小さめの角丸。円形の写真切り抜き。斜めや V 字のセクション境界。CTA はつやのある立体ピル型。 - **温度感**: 暖色寄り。赤・金・ベージュが中心で、悩みのパートだけ冷たいモノクロにする。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A4020B` | ブランドの深紅（オファー帯・円グラフ） | 9% | 画素の実測 | | `secondary` | `#A50D0D` | 明るい赤（強調テキスト・注意枠） | 2% | 画素の実測 | | `cta` | `#3FA21C` | 主 CTA の緑グラデーションボタン | 1% | 推定 | | `on-cta` | `#F6FEF3` | CTA ボタンの文字 | 0% | 画素の実測 | | `background` | `#FEFEFD` | 基本の地色 | 24% | 画素の実測 | | `background-alt` | `#FAF9F5` | 薄いベージュの地（カード・お客様の声） | 10% | 画素の実測 | | `surface` | `#BAA997` | お試し購入セクションのグレージュの地 | 7% | 画素の実測 | | `accent-1` | `#9C7A3C` | 金の見出しグラデーション（中間色） | 2% | 推定 | | `text` | `#474033` | 濃いブラウンの見出し文字・ラベル帯 | 5% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文のチャコール | 4% | 推定 | | `marker` | `#FFF2B0` | 強調語の下に引く黄色マーカー | 1% | 推定 | | `dark-section` | `#474033` | 悩み提起のモノクロダーク地 | 6% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | ダーク地・赤地の上の白文字 | 1% | 画素の主要色に補正 | | `line` | `#BDBDBD` | 特典リストの点線区切り | 0% | 推定 | | `cta-accessible` | `#338417` | AA を満たす補正値（計算） | | 計算 | | `surface-accessible` | `#89725B` | AA を満たす補正値（計算） | | 計算 | - オファー帯と医師アンケートは亀甲柄の深紅の面で囲み、中に白いカードを置く。 - 見出しは濃いブラウンから金へのグラデーション明朝にする。キーワードだけ大きく、明るい赤か金にする。 - 主 CTA だけをつやのある緑にして、ページ内の赤から際立たせる。 - サブ CTA（お試し購入）はグレージュのピル型にして、主 CTA と差をつける。 - 悩みのパートは写真ごとモノクロのダークトーンにし、解決パート以降は木目や光の暖色に切り替える。 - 本文の強調は、赤の太字に黄色マーカーを重ねる。 - `button-primary` は文字 `#F6FEF3` × 背景 `#3FA21C` のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#338417`、4.58:1）を使う。 - `button-secondary` は文字 `#FFFFFF` × 背景 `#BAA997` のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `surface-accessible`（`#89725B`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のコピー・セクションの大見出し | 明朝 | Shippori Mincho | 700 | 34px | 1.35 | 0.05em | | `headline-lg` | 価格オファーの価格数字 | ゴシック | Noto Sans JP | 900 | 52px | 1.0 | -0.03em | | `headline-md` | セクションの中見出し（金グラデーション） | 明朝 | Noto Serif JP | 700 | 26px | 1.4 | 0.05em | | `headline-sm` | カードの見出し・強調リード | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | ※の注釈・免責文 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | Point! や Voice などの欧文の飾り文字 | 欧文スクリプト | Great Vibes | 400 | 30px | 1.2 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 900 | 20px | 1.2 | 0.05em | - 見出しは明朝体にする。助詞は小さく、キーワードは大きくして、ジャンプ率をつける。 - 価格とパーセントの数字は極太のゴシック。単位や（税込）は小さく添える。 - 成分名などの難読語には小さいルビを振る。 - 本文はゴシックで、行間を広め（1.8）に取る。 - 悩みのコピーは白の明朝で、写真の上に縦方向にずらして置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分一覧は 3 列グリッド、円グラフは 2×2、比較表は左右 2 列。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 価格オファーのブロック（見出し＋白カード＋CTA）を、ページの上・中・下に同じ形で繰り返す。 - 写真は全幅で敷き、その上に文字を重ねる構成を多用する。 - 白カードは左右に約 6% の余白を取って中央に置く。 - 注釈は各ブロックのすぐ下に小さい文字で置く。 ## Elevation & Depth - 白カードには柔らかいドロップシャドウ（0 4px 16px rgba(0,0,0,.15)）をつける。 - CTA ボタンは上部にハイライトのあるグラデーションと、下方向の影で立体的に見せる。 - メダルやバッジは金属的なグラデーションと影で浮かせる。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物は円形に切り抜くか、背景に溶け込ませる。商品パッケージは切り抜いて反射を付ける。 - **セクション境界**: 下向きの V 字・斜めの切り替え・大きな円弧を使う。 - 円グラフは扇形を一部欠いたデザインにする。 - 番号は六角形や円の白地に赤数字で置く。 - 比較表のラベルは縦長のピル型を中央に置く。 ## Components - **緑の立体 CTA**（`button-primary`）: 幅 85% のつや付きピル型。右端に下向きの矢印を置く。 - **グレージュのサブ CTA**（`button-secondary`）: お試し購入用の控えめなピル型ボタン。 - **価格オファーカード**（`offer-card`）: 赤の亀甲柄地の上に白カードを置き、商品画像・ブラウンの帯ラベル・割引の赤丸バッジ・大きな価格を並べる。 - **割引の丸バッジ**（`discount-badge`）: 赤い円の中に白文字と黄色の大きなパーセントを入れる。 - **番号付きの特典リスト**（`benefit-list`）: 金の明朝の大きな番号＋説明文。強調語は赤の大きな文字に黄色マーカー。行間は点線で区切る。 - **円グラフの数値**（`stat-pie`）: 深紅の円の上部に小さな説明、中央に白の大きな明朝のパーセントを置く。 - **ブラウンの帯ラベル**（`label-band`）: 濃いブラウンの矩形に白文字の短いラベルを入れる。 - **お客様の声の吹き出し**（`voice-bubble`）: 白い吹き出しカードに線画のアバター、茶色の見出し、マーカー付きの本文を入れる。 - **購入時の注意枠**（`notice-box`）: 赤の枠線に、上部中央の警告三角アイコンと赤の見出しを置く。 ## Do's and Don'ts **Do** - 価格オファーのブロックを 3 回以上繰り返し、どこからでも購入できるようにする。 - 見出しは明朝体に金グラデーションをかけ、文字サイズのジャンプ率で高級感を出す。 - 根拠となる数値は円グラフや大きな数字で見せる。 - 悩みはモノクロ、解決策は暖色の光で表し、明暗のコントラストをつける。 - ※の注釈を各訴求のすぐ下に添える。 **Don't** - CTA に赤を使わない。地の深紅に埋もれてしまう。 - ポップな丸ゴシックや原色の水色を使わない。 - 見出しを均一のサイズで並べない。 - 余白を詰めすぎて白カードの影を潰さない。 - 悩みのパートにカラー写真を使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（実績と年代への共感を示す）: 笑顔の女性と商品を並べ、上部に赤い月桂樹の実績帯、右上に黒金のメダル、左下に明朝のコピー、最下部に注釈を置く。 2. **価格オファー**（初回割引で購入を促す）: 赤い亀甲柄の地に白カードを置き、割引バッジ・価格・緑の CTA を入れる。 3. **定期便の特典**（定期購入のメリットを列挙する）: キラキラした銀の背景に大きな明朝の数字見出しを置き、5 項目の番号リストを並べる。 4. **単品購入の案内**（お試し購入の受け皿）: グレージュの地に白カード、サブ CTA、注意枠を置く。 5. **悩みの提起**（体調のサインに気づかせる）: ダークなモノクロの地に、円形の人物写真を左右交互に並べ、白の明朝コピーを添える。最後は V 字で区切る。 6. **原因と解決**（商品を解決策として提示する）: 木目のテーブルに商品とカプセルを置いた写真に、明朝の見出しを重ねる。 7. **医師推奨**（権威付け）: 金メダルと 2×2 の円グラフを、光の粒の背景に置く。 8. **成分・製法の特長**（成分量と製法の優位性を示す）: 成分名を 3 列のチップで並べ、製法は左右の比較表、背景は全幅の自然写真にする。 9. **開発の背景**（企業の歴史で信頼を補強する）: ベージュのカードに長文と商品群の集合写真を入れる。 10. **アンケート結果**（数値の根拠を示す）: 赤の亀甲柄地に番号付きの結果を並べ、黄色の大きな数字で強調する。 11. **お客様の声**（実感を伝える）: アバター付きの吹き出しカードを左右交互に置く。 12. **最終 CTA**（購入を締める）: 冒頭の価格オファーと同じ形で再掲する。 ## Imagery - 人物は 40〜50 代の女性。白い服で、明るいハイキーの自然な笑顔。 - 悩みのカットはモノクロで、うつむきや物憂げな表情にする。 - 商品の物撮りは木目のテーブル、ガラスのコップ、散らしたカプセル、斜めからの柔らかい光で撮る。 - 背景に光のボケや金色の粒、六角形の柄を重ねる。 - お客様のアバターは淡いピンクを差した線画のイラストにする。 - 原料の訴求には、苔むした森や大豆・味噌など素材感のある写真を使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP 版のデザインを中央に固定幅（約 750px）で置く。 - PC で左右に余る部分は無地の背景で埋める。 - 文字と画像の比率は SP と同じに保つ。 - PC に広げる場合も 1 カラムを維持し、白カードの最大幅は 700px 程度にする。 ## 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-2f6d91f3`（元 LP の URL から採番） - **元 LP**: https://www.iwatani-i-collect.com/shop/lp/miryoku.aspx - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。