--- version: alpha name: Slate Navy and Orange Enzyme Supplement LP description: くすんだ紺色の石目テクスチャとオレンジのグラデを組み合わせた、健康食品の訴求型 LP です。野菜の写真をたっぷり使い、明朝体の大見出しと菱形の「こだわり番号」で成分のこだわりを順に見せていきます。最後は比較表で締めます。 colors: primary: '#334553' cta: '#E0963C' on-cta: '#FEFEFE' background: '#FEFDFC' background-alt: '#EAE4D9' surface: '#FFFFFF' text: '#3B4659' text-body: '#2F3132' secondary: '#79531E' accent-1: '#3D7CA2' dark-section: '#393939' accent-2: '#EAE5D3' marker: '#F3D488' accent-3: '#C9A24E' cta-accessible: '#A6671A' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.05em headline-md: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Playfair Display fontSize: 48px fontWeight: 500 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' badge-diamond-number: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 80px band-heading: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 44px circle-point: backgroundColor: '{colors.primary}' textColor: '{colors.accent-3}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px ingredient-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 420px ingredient-ball: backgroundColor: '{colors.accent-2}' textColor: '{colors.text-body}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 80px speech-cloud: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 56px pill-callout: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px comparison-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 420px --- # DESIGN.md — 紺鼠×橙グラデの酵素サプリ LP（Slate Navy and Orange Enzyme Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、上品・高級、ナチュラル、信頼・誠実 - **キーワード**: 石目調の紺鼠・オレンジグラデ・明朝の大見出し・野菜の物撮り・菱形の番号バッジ・比較表 - **地の質感**: 紺の黒板・石目テクスチャと、生成りの木目・和紙調の地を交互に使う。オレンジは光沢感のあるグラデーション。 - **形**: 四角い写真パネルが基本。番号は菱形、成分は円形バッジ、帯見出しは長方形。 - **温度感**: 紺の寒色をベースに、オレンジと野菜の色で温かみを差す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#334553` | 石目調の紺鼠セクション地 | 10% | 画素の実測 | | `cta` | `#E0963C` | オレンジ強調の帯・バッジ | 8% | 画素の主要色に補正 | | `on-cta` | `#FEFEFE` | オレンジ面の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FEFDFC` | 白の基本地 | 9% | 画素の実測 | | `background-alt` | `#EAE4D9` | 生成り・木目調のセクション地 | 10% | 画素の実測 | | `surface` | `#FFFFFF` | 淡いグレーのセクション地 | 8% | 画素の実測 | | `text` | `#3B4659` | 見出しの濃紺文字 | 2% | 画素の実測 | | `text-body` | `#2F3132` | 本文の墨色 | 2% | 画素の実測 | | `secondary` | `#79531E` | 成分カードの茶色ヘッダー | 2% | 画素の実測 | | `accent-1` | `#3D7CA2` | 成分カードの青ヘッダー | 2% | 画素の実測 | | `dark-section` | `#393939` | 成分カードの炭色ヘッダー | 2% | 画素の実測 | | `accent-2` | `#EAE5D3` | 円形成分バッジの生成りゴールド | 2% | 画素の実測 | | `marker` | `#F3D488` | 見出し下の黄色マーカー | 1% | 推定 | | `accent-3` | `#C9A24E` | 比較表の自社列の金枠 | 1% | 推定 | | `cta-accessible` | `#A6671A` | AA を満たす補正値（計算） | | 計算 | - 地の色は紺の石目、白、生成り、淡グレーの順に交互に切り替えて、セクションを区切る。 - オレンジは帯見出し・番号バッジ・数字の強調だけに使い、グラデーションで光沢を出す。 - 数字の強調はオレンジからゴールドへのグラデ文字にする。紺地の上ならゴールドが映える。 - 3 つの成分カードはヘッダーを茶・青・炭の色違いにして、成分ごとに色分けする。 - 本文中で強調したい語は赤寄りのオレンジ文字にする。 - 比較表は、項目列を濃紺、自社列をクリーム地に金枠、他社列を白地にグレーの見出しで作る。 - `badge-diamond-number` は文字 `#FEFEFE` × 背景 `#E0963C` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A6671A`、4.55:1）を使う。 - `band-heading` は文字 `#FEFEFE` × 背景 `#E0963C` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A6671A`、4.55:1）を使う。 - `circle-point` は文字 `#C9A24E` × 背景 `#334553` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 - `pill-callout` は文字 `#FEFEFE` × 背景 `#E0963C` のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A6671A`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大キャッチ | ゴシック | Zen Kaku Gothic New | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 700 | 30px | 1.35 | 0.05em | | `headline-md` | 成分カードの見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.4 | 0.08em | | `headline-sm` | 帯見出し・吹き出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.03em | | `accent` | 強調する大きな数字 | 欧文セリフ | Playfair Display | 500 | 48px | 1.0 | 0.0em | | `note` | 注釈・表の小さい文字 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `label-button` | 番号バッジ・円形バッジの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.05em | - 大見出しは明朝にし、助詞は小さく、キーワードを大きくしてジャンプ率をつける。 - 数字は欧文セリフで大きく組み、単位は和文で小さくする。 - キーワードはかぎ括弧でくくり、下に黄色のマーカーを引く。 - 見出しの下には波線か細い線を添える。 - 本文は中央揃えで 2〜3 行にまとめる。 - 飾りとして筆記体の欧文を大きく薄く敷く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分バッジだけ 3〜4 列で並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真パネルは左右 5% の余白を取り、ほぼ全幅で置く。 - 各こだわりセクションは、番号バッジ→見出し→本文→写真の順に組む。 - 成分の写真帯は高さをそろえて縦に積み、左下か右下にラベルを置く。 - FV は大コピーを上に置き、商品パッケージを左、人物を右に配置する。 - 3 つの訴求ポイントは＋記号でつないだ円形を 3 つ横に並べる。 ## Elevation & Depth - 写真パネルの右下に薄いグレーの影をずらして落とす。 - 説明カードは白地にやわらかい影をつけ、写真に重ねる。 - 円形バッジは内側に淡いグラデをかけて立体感を出す。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 四角形の全幅パネル。成分を見せるときは円形に切り抜く - **セクション境界**: 直線で切り替える。オレンジの面へは下向きの矢印と液体のしずくでつなぐ - こだわり番号はオレンジグラデの菱形にする。 - 吹き出しは雲形の暗いグレーにする。 - 比較表の自社列は角丸の金枠で囲む。 - 帯見出しは角のない長方形か、ピル型の吹き出しにする。 ## Components - **こだわり番号の菱形**（`badge-diamond-number`）: オレンジグラデの菱形に、小さい見出しと数字を白抜きで入れる。 - **オレンジの帯見出し**（`band-heading`）: 短い強調語を、横長のオレンジ帯に白い文字で入れる。 - **訴求の円形**（`circle-point`）: 紺地の上に白線の円を置き、ゴールド文字で特長を入れる。円同士は＋でつなぐ。 - **成分カード**（`ingredient-card`）: 色違いのヘッダーに明朝の見出しと 2 行の説明を入れ、下に写真を続ける。 - **成分の円形バッジ**（`ingredient-ball`）: 生成りゴールドのグラデをかけた球体に、成分名を入れる。 - **悩みの吹き出し**（`speech-cloud`）: 暗いグレーの雲形に白文字で、悩みを短く入れる。 - **ピル型の前置き吹き出し**（`pill-callout`）: オレンジグラデのピルにしっぽを付け、見出しの前置きを入れる。 - **比較表**（`comparison-table`）: 濃紺の項目列、金枠の自社列、グレーの他社列で作る。行の区切りは点線。 ## Do's and Don'ts **Do** - 野菜や素材の写真を画面いっぱいに使い、色の豊かさを見せる。 - 大事な数字は大きなグラデ文字にする。 - こだわりセクションには必ず菱形の番号を付ける。 - 紺地と明るい地を交互に置いて、リズムを作る。 - 強調語には黄色のマーカーかオレンジ文字を使う。 **Don't** - オレンジを本文の地に大きく使いすぎない。 - 見出しを全部ゴシックにしない（明朝を残す）。 - 純粋な黒の地は使わない。紺か炭色にする。 - 写真パネルに大きな角丸をつけない。 - 原色の赤や青を強調色に追加しない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品とコンセプトを一目で伝える）: 淡いグレーの地に、オレンジのグラデ大コピーを置く。下にパッケージと女性の写真を並べる。 2. **特長サマリー**（主な成分の数と 3 つの強みを示す）: 紺の石目地に、オレンジの帯、大きな数字の見出し、3 つの円を＋で並べる。下端に野菜写真を置く。 3. **必要性の説明**（成分が必要な理由を伝える）: 生成りの地に明朝の問いかけ見出しを置き、続けて体の写真に暗い帯のテロップを重ねる。 4. **悩みの提起**（不調のサインに共感してもらう）: モノトーンの人物写真に雲形の吹き出しを 3 つ置き、オレンジの帯で結論を示す。 5. **解決の提案**（商品による新しい習慣を提案する）: 矢印としずくでオレンジグラデの面につなぎ、白い明朝の大コピーを置く。 6. **こだわり1**（主成分の製法を伝える）: 野菜写真の上に菱形の番号を置き、紺の石目地に見出し、波線、本文、4 分割の写真を並べる。 7. **こだわり2**（3 つのサポート成分を紹介する）: 淡いグレーの地に、筆記体の飾り文字と、色違いヘッダーの成分カードを 3 枚縦に積む。 8. **イメージ訴求**（成分の相性の良さを情緒的に伝える）: 緑がぼけた背景に女性の写真を置き、明朝の見出しに波線を添える。 9. **こだわり3**（その他の配合成分を並べて見せる）: 木目の地に写真帯を 4 本積み、「さらに」の後に円形バッジを並べ、合計数をマーカーで強調する。 10. **こだわり4**（安全性と品質管理を伝える）: 白〜淡い青の地に工場の写真を置き、説明カードを重ねる。 11. **比較表**（他社より優れている点を示す）: ピル型の吹き出し、明朝の見出し、パッケージ画像、金枠の自社列がある表を並べる。 ## Imagery - 色とりどりの野菜を上から、または斜めから物撮りし、紺の石板の上に敷き詰める。 - 素材は器に入れて、明るい自然光で撮る。 - 白いタンクトップの女性を、白背景で明るく撮る。 - 悩みのパートは、彩度を落としたモノトーン寄りの人物写真にする。 - 工場の写真は青みのある清潔なトーンにする。 - 光沢のあるオレンジの液体やしずくを装飾に使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は SP 幅の画像を PC で中央に置く構成なので、PC でも幅 750px 前後の 1 カラムで中央寄せにする。 - PC では左右の余白を、セクションの地の色かテクスチャで塗る。 - SP では成分バッジを 3〜4 列にし、円形 3 つは横並びを保つ。 - 比較表は SP でも 4 列を保ち、文字は 11〜14px にする。 ## 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-0cc50482`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/le001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。