--- version: alpha name: Crimson Gold Functional Supplement Mall LP description: 深紅の地と金の月桂冠でランキング実績を打ち出し、生成り地と葉の写真で天然由来らしさを出す機能性表示食品の縦長 LP。極太の明朝体の赤い見出し、グラフ、成分タイル、クーポン告知を積み重ねた、情報量の多い通販モール向けの構成。 colors: primary: '#AE1B29' secondary: '#A21926' accent-1: '#D4A84A' background: '#F3F4E1' surface: '#FEFEFD' accent-2: '#45723E' dark-section: '#6B3A1E' text: '#1F1510' accent-3: '#CC161C' cta: '#50AE52' on-cta: '#14B157' tint-1: '#FEF4C4' on-primary: '#FEFEFE' marker: '#F5E04A' on-cta-accessible: '#0F8843' typography: display: fontFamily: Shippori Mincho B1 fontSize: 56px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 accent: fontFamily: Zen Kaku Gothic New fontSize: 64px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 14px section: 32px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ranking-crown: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 260px heading-mincho-red: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.display}' height: 80px band-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 44px badge-circle: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px graph-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 230px ingredient-tile: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 95px button-primary: backgroundColor: '{colors.surface}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px coupon-block: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' height: 360px note-text: typography: '{typography.note}' height: 40px --- # DESIGN.md — 赤×金×葉緑の機能性サプリ訴求 LP（Crimson Gold Functional Supplement Mall LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、力強い・インパクト、信頼・誠実、ナチュラル - **キーワード**: 深紅と金・極太明朝の赤見出し・葉と生薬の写真・グラフで効果訴求・モール向けクーポン - **地の質感**: 赤地はかすれたテクスチャ、本文エリアは生成りに淡い木漏れ日のぼかし、成分タイルは暗い木目と素材写真 - **形**: 角丸は控えめ。帯見出し、円形バッジ、扇形の吹き出し、角丸ピルのボタン - **温度感**: 暖色寄りで熱量が高く、緑で自然らしさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AE1B29` | ブランドの深紅、FV 地と見出し帯 | 14% | 画素の実測 | | `secondary` | `#A21926` | 濃い赤の地と縁 | 6% | 画素の実測 | | `accent-1` | `#D4A84A` | 月桂冠・王冠の金と金文字 | 4% | 推定 | | `background` | `#F3F4E1` | 本文エリアの生成り地 | 20% | 画素の主要色に補正 | | `surface` | `#FEFEFD` | グラフ・ランキング画面のカード | 12% | 画素の実測 | | `accent-2` | `#45723E` | 濃い葉緑のラベル円・バッジ | 5% | 画素の実測 | | `dark-section` | `#6B3A1E` | 茶色の見出し帯と成分タイルの地 | 6% | 推定 | | `text` | `#1F1510` | 見出し・本文の黒 | 5% | 画素の主要色に補正 | | `accent-3` | `#CC161C` | 強調文字の赤 | 3% | 画素の主要色に補正 | | `cta` | `#50AE52` | LINE 登録帯の緑 | 5% | 画素の主要色に補正 | | `on-cta` | `#14B157` | 白ボタン上の緑文字 | 0% | 画素の実測 | | `tint-1` | `#FEF4C4` | クーポン欄のストライプ地とグラフの強調帯 | 6% | 画素の実測 | | `on-primary` | `#FEFEFE` | 赤・茶の帯の上の白文字 | 2% | 画素の主要色に補正 | | `marker` | `#F5E04A` | ランキングの見出し文字の黄 | 1% | 推定 | | `on-cta-accessible` | `#0F8843` | AA を満たす補正値（計算） | | 計算 | - FV と実績パートは深紅の地に、金・黄・白の文字だけを載せる - 本文パートは生成りに淡い緑のぼかしを敷き、見出しは黒＋赤で構成する - 最重要語は赤い極太明朝、助詞は小さい黒にして強弱をつける - セクションの見出し帯は赤か茶色の横帯にし、白文字を載せる - 緑は成分ラベルと LINE 告知の面に限って使う - クーポン欄は黄色のストライプ地に黒の極太数字を置き、赤は 1〜2 語だけにする - `ranking-crown` は文字 `#D4A84A` × 背景 `#AE1B29` のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 - `ingredient-tile` は文字 `#D4A84A` × 背景 `#6B3A1E` のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 - `button-primary` は文字 `#14B157` × 背景 `#FEFEFD` のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#0F8843`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 核心メッセージの特大見出し | 明朝 | Shippori Mincho B1 | 800 | 56px | 1.1 | 0.0em | | `headline-lg` | セクションの大見出し（赤＋黒の明朝） | 明朝 | Noto Serif JP | 900 | 34px | 1.2 | 0.0em | | `headline-md` | 帯見出し・リード文 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | カードの小見出し・ラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | | `accent` | クーポン金額などの極太数字 | ゴシック | Zen Kaku Gothic New | 900 | 64px | 1.0 | -0.03em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | 試験条件・出典などの注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.0 | 0.05em | - キーワードは明朝の極太で、文字に白フチと影をつけて立体的に見せる - 助詞は主語の半分ほどのサイズに落とす - 感嘆符は斜体ぎみにして勢いを出す - 帯見出しはゴシックの白抜きにする - 注釈には※と番号を付け、小さい灰色の文字でまとめる - 数値はゴシックの太字で大きく、単位は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分タイルと仕組みの図解は 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 32px、基本単位 8px、カード内 14px（375px 幅換算） - 画像はすべて全幅で、セクション間の余白は少なく詰める - 見出し帯は左右端まで、または左右 4% の余白で置く - グラフは白カードに入れ、右に円形の吹き出しを重ねる - 成分は 2 列 × 3 段の写真タイルを隙間なしで並べる - 手順はアイコン 4 つを矢印でつないで横に並べる ## Elevation & Depth - 白カードには薄いドロップシャドウ - ランキング画面のキャプチャは少しずつずらして重ね、影をつける - 商品パッケージには接地影 - 見出し文字には白フチとソフトな影 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 素材写真は角丸なしの矩形。人物と商品は切り抜き - **セクション境界**: 基本は直線の切り替え。帯見出しの下に三角の矢印を付けることがある - ラベルは円形か角丸の小さいバッジにする - 吹き出しは赤い円か扇形にする - ボタンは白のピル型で、右に三角を付ける - 見出しの両側に斜線（＼ ／）を添える ## Components - **金の月桂冠の順位エンブレム**（`ranking-crown`）: 深紅地の中央に金の冠とリボンを置き、その下に実績を黄と白の文字で書く - **赤い極太明朝の訴求見出し**（`heading-mincho-red`）: キーワードを赤、助詞を小さな黒にし、白フチと影をつける - **帯見出し**（`band-heading`）: 赤または茶の横帯に白文字を載せ、下に三角を付けることもある - **円形の成分ラベル**（`badge-circle`）: 緑または金の円に白文字で成分区分を示す - **比較グラフカード**（`graph-card`）: 白カードに 2 系列の折れ線グラフを載せ、黄色の帯で期間を強調し、赤い円の吹き出しで結果を示す - **成分写真タイル**（`ingredient-tile`）: 暗い素材写真に白い小ラベルと金色の明朝の成分名を重ねる - **友達追加ボタン**（`button-primary`）: 緑の帯の上に置く白のピル型ボタン。文字は緑で、右に三角を付ける - **クーポン告知**（`coupon-block`）: 黄色のストライプ地に黒帯の見出しを置き、極太の金額と 4 ステップのアイコンを並べる - **注釈**（`note-text`）: グラフや見出しの下に小さく、試験条件と※の補足を書く ## Do's and Don'ts **Do** - 最重要の効果訴求は極太明朝で、画面幅いっぱいまで大きく組む - 主張には必ず※の注釈と出典を添える - 葉や生薬の写真を見出しの周りに散らして天然らしさを出す - 数値はグラフと赤い吹き出しで視覚化する - 実績パートは深紅と金でまとめ、権威感を出す **Don't** - 見出しを細いゴシックにしない - 寒色や淡いパステルを主役にしない - 広い余白を取ってミニマルにしない - 注釈を省いて断定だけで訴求しない - 赤を本文の長い文章に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ランキング実績**（権威と人気を最初に示す）: 深紅地に金の冠、黄色の大見出し、ランキング画面を重ねたキャプチャ 2. **ファーストビュー（商品）**（効果と商品を提示する）: 極太明朝の見出し、中央に商品パッケージ、左右に円形バッジ、下に素材写真 3. **作用の仕組み**（成分が働く仕組みを図で説明する）: 緑の円ラベルと赤文字のリード、2 カラムの図解カード 4. **訴求のまとめ**（効果を再度言い切る）: 赤い明朝の見出しと赤帯の白文字 5. **専門家による訴求**（信頼性を補強する）: 金色のパネルに巨大見出しを置き、右に白衣の人物を切り抜きで配置 6. **試験データ**（数値で根拠を示す）: 茶色の帯見出し、白カードのグラフ、赤い円の吹き出し、注釈 7. **サポート成分**（付加価値を並べる）: 赤いバッジ、茶色の明朝見出し、2 列 × 3 段の写真タイル 8. **LINE クーポン**（友だち登録を促す）: 緑の帯にスマホのイラストと大きな金額を置き、白のピル型ボタン 9. **レビュー特典**（購入後のレビューを促す）: 黄色のストライプ地、黒帯の見出し、極太の金額、4 ステップのアイコン ## Imagery - 生薬や根菜・粉末を木の台に置き、暖かい光で撮った素材写真 - 鮮やかな緑の葉を見出しの角にぼかしてあしらう - 白衣の医師風の人物を腕組みで撮り、切り抜く - 背景は淡い緑と白の木漏れ日のぼかし - 図解は丸い粒・矢印・細胞膜を使った簡素なフラットイラスト - 手順アイコンは黒の線画 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP と同じ縦長の画像を中央 640px 程度の幅で表示し、左右は無地にする - PC で広げる場合は、成分タイルを 3 列、図解を 2 列のまま余白を増やす - PC では見出しを最大 72px 程度に抑える ## 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-145a04f6`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kanzenshoku-tokyo/0038/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。