--- version: alpha name: Orange-Red Gradient Fatigue Supplement Sales LP description: オレンジ→赤のグラデーション面と白地を交互に置く。紺の悩みパート、黒帯ラベル、黄マーカー、緑のピル型購入ボタンで畳みかける、情報量の多い疲労対策サプリの通販 LP。終盤は金色の特典パートで高級感を出す。 colors: primary: '#F36826' secondary: '#EE2A23' cta: '#3FA535' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F5F5F4' dark-section: '#0F3A55' text: '#382B31' surface: '#2B2B2B' marker: '#FDFE02' tint-1: '#EADDC2' accent-1: '#6B4A2E' line: '#F2F2F2' cta-accessible: '#33862B' primary-accessible: '#CE4A0B' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 56px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 36px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.06em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 38px fontWeight: 800 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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.sm}' height: 52px offer-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 440px black-label: backgroundColor: '{colors.surface}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 44px symptom-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 58px marker-text: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 8px feature-number: textColor: '{colors.primary}' typography: '{typography.accent}' height: 48px check-list: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px faq-item: backgroundColor: '{colors.line}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px bonus-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 130px --- # DESIGN.md — 橙赤グラデの訴求型医薬部外品サプリ LP（Orange-Red Gradient Fatigue Supplement Sales LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、力強い・インパクト、ポップ・元気 - **キーワード**: 橙赤グラデーション・黒帯ラベル・黄色マーカー・価格の大きな強調・繰り返す購入カード・金色の特典 - **地の質感**: 白地と薄い紙のような石目テクスチャ。グラデーション面はフラット。特典パートは金色の光とぼかしを重ねる - **形**: 四角い帯と角ばったボックスが基本。カードは小さめの角丸。円形のバッジや線だけの円、下向き三角の吹き出しを使う - **温度感**: 暖色が中心で熱量が高い。悩みパートだけ紺で冷たくし、対比をつける ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F36826` | ブランドの橙赤グラデーション（橙側） | 9% | 画素の主要色に補正 | | `secondary` | `#EE2A23` | グラデーションの赤側・見出しの強調 | 7% | 画素の実測 | | `cta` | `#3FA535` | 購入ボタン（緑グラデ） | 1% | 推定 | | `on-cta` | `#FFFFFF` | 購入ボタンの文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 32% | 画素の実測 | | `background-alt` | `#F5F5F4` | 特徴パートの薄い石目地 | 12% | 画素の実測 | | `dark-section` | `#0F3A55` | 悩み提起パートの紺地 | 6% | 推定 | | `text` | `#382B31` | 見出し・本文の濃い文字 | 5% | 画素の主要色に補正 | | `surface` | `#2B2B2B` | 黒帯ラベル・黒い箱 | 3% | 画素の実測 | | `marker` | `#FDFE02` | 黄色の下線マーカー | 1% | 画素の実測 | | `tint-1` | `#EADDC2` | 特典パートの金色系の地 | 5% | 画素の実測 | | `accent-1` | `#6B4A2E` | 特典番号の茶金色の円 | 1% | 推定 | | `line` | `#F2F2F2` | FAQ 項目の灰色地・枠線 | 3% | 画素の実測 | | `cta-accessible` | `#33862B` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#CE4A0B` | AA を満たす補正値（計算） | | 計算 | - 地は白と薄い石目のアイボリー。区切りに橙→赤（左上→右下）のグラデ面を大きく入れる - 悩み提起だけ紺のグラデ地にし、白文字と黄色の下線で強調する - 価格の数字は橙→赤のグラデ文字。通常価格は灰色に赤の取消線 - 購入ボタンだけ緑のグラデにして、暖色の中で一番目立たせる - 黒帯ラベルは話題の切り替えや小見出しに使い、白文字をのせる - 特典パートは金・ベージュに茶色の文字で高級感を出す - `button-primary` は文字 `#FFFFFF` × 背景 `#3FA535` のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#33862B`、4.58:1）を使う。 - `symptom-tag` は文字 `#FFFFFF` × 背景 `#F36826` のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CE4A0B`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューと結論の大コピー | ゴシック | Zen Kaku Gothic New | 900 | 56px | 1.2 | 0.08em | | `headline-lg` | セクション見出し・グラデ帯の白抜き大文字 | ゴシック | Noto Sans JP | 900 | 36px | 1.3 | 0.06em | | `headline-md` | 特徴の小見出し・悩み項目 | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.04em | | `headline-sm` | コース案内・特典などの明朝見出し | 明朝 | Shippori Mincho | 700 | 34px | 1.3 | 0.04em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.02em | | `accent` | Features・番号などの欧文ラベルと大きな番号 | 欧文サンセリフ | Montserrat | 800 | 38px | 1.0 | 0.0em | | `note` | 送料・調査出典などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 22px | 1.3 | 0.08em | - 見出しは極太ゴシックで、字間を少し広げる - 1 行の中で一部の語だけ色・サイズ・白抜きの箱で強調する - 価格の数字は本文の 3〜4 倍の大きさのグラデ文字。円や税込は小さく添える - 特典・コース名など高級感を出したい所だけ明朝やイタリック明朝を使う - セクションの英字ラベル（Features 等）はオレンジの小さな文字で見出しの上に置く - 本文は 14px 前後、行間は 1.8 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。症状タグは 3 列グリッド、コース比較は 3 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 購入カード（商品画像＋成分＋価格＋ボタン）を 4〜5 回繰り返す - グラデ面のセクションは画面幅いっぱいに敷く - カードは左右 16px ほどの余白で配置する - 特徴は番号付きで 01〜04 を縦に並べる - 強調コピーは中央揃え、本文は左揃え ## Elevation & Depth - 購入カードは白地に柔らかい影（0 4px 12px rgba(0,0,0,.15)） - 口コミカードは灰色地の上に白カード、影は弱め - 特典カードは下に濃いぼかし影を落として浮かせる - ボタンは下側に濃い緑の影をつけて立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品パッケージは切り抜きで斜めに重ねる。人物は円形か背景を消した切り抜き - **セクション境界**: 斜めの切り返しや緩い弧でグラデ面に入る。下向き三角の矢印でつなぐ - 症状タグは角の立った四角でグラデ塗り - 黒帯ラベルは長方形で、下に三角を付けて吹き出しにする - 効能のテーマは細いグラデ線の円で囲む - 時間帯の帯は平行四辺形にする ## Components - **購入ボタン**（`button-primary`）: 緑グラデの横長ボタン。左にカート、右に三角アイコン - **購入カード**（`offer-card`）: 白カードに区分ラベル、商品名、成分の黒見出しの箱、商品画像。通常価格は取消線、初回価格は大きなグラデ数字 - **黒帯ラベル**（`black-label`）: 黒い長方形に白文字。下に三角を付けて次につなぐ - **症状タググリッド**（`symptom-tag`）: 橙赤グラデの四角に白抜きの短い語。3 列で並べる - **黄色マーカー強調**（`marker-text`）: 強調する語の下に太い黄色の下線か波線を引く - **特徴番号見出し**（`feature-number`）: 小さい欧文ラベルの横に大きなオレンジの 2 桁番号を置き、続けて太字の見出し - **チェックリスト**（`check-list`）: チェックボックスのアイコンに太字の悩み文。紺地なら白文字に黄色の下線 - **FAQ アコーディオン**（`faq-item`）: 灰色地にオレンジの Q。開くと橙赤グラデ地に白文字の A - **特典カード**（`bonus-card`）: ベージュのカード。左に茶金色の円形番号、右に明朝で大きなグラデ数字 ## Do's and Don'ts **Do** - 購入カードとボタンはセクションの区切りごとに繰り返す - 価格は通常価格（取消線）→矢印→初回価格（大きなグラデ数字）の順で見せる - 強調語は白抜きの箱、グラデ文字、黄色マーカーのどれかで目立たせる - グラデは左の橙から右の赤へ流す - 大きな数字や棒グラフで裏付けを見せる **Don't** - 購入ボタンを緑以外の色にしない - 寒色はファーストビュー直後の悩みパート以外で広く使わない - 細字だけの静かな見出しにしない - 本文の左右余白を詰めすぎない - 金色の演出を特典パート以外に広げない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩みと効果を一言で示し、初回価格まで見せる）: 白い箱の赤文字キーワードを×でつなぎ、極太の大コピーにグラデの下線。商品画像と価格のカードを重ねる 2. **悩みの提起**（読み手の症状に当てはめる）: 紺のグラデ地に円形の人物写真。チェック付きの悩みを 4〜5 個並べ、黄色の下線を引く 3. **データの提示**（悩みが多くの人に共通すると示す）: 黒い円の明朝バッジ、グラデ箱の強調、灰色と橙赤の横棒グラフ、小さな出典 4. **原因の問いかけ**（原因が複数あると気づかせる）: オレンジの問いかけ文、青い吹き出し付きの黒い箱、縦線で下のグラデの弧へつなぐ 5. **改善テーマ**（必要な対策を 4 つ見せる）: グラデ線の円に太字のテーマ、横に線画イラスト。解説は枠線ボックス 6. **解決策の提示**（商品を答えとして示す）: 斜めのグラデ帯に黒いピル型ラベルと白抜き大文字。下にグラデのイタリック見出しと黄色の下線 7. **オファー CTA**（最初の購入の誘導）: 購入カードと緑のボタン 8. **特長**（効能、成分、飲み方、剤形を説明する）: 01〜04 の番号見出し。症状タググリッド、構成図、朝・昼・夜の色分け帯とチェックリスト。白地とグラデ地を交互にする 9. **結論と CTA**（要点をもう一度伝えて購入へ促す）: グラデ地に黒帯ラベル、白い箱のキーワード、極太の白コピー、購入カード 10. **開発背景**（作り手の思いで信頼を得る）: 白地に英字ラベルと見出し、丸点付きの小見出し、長めの本文、担当者名と人物写真 11. **お客様の声**（利用者の実感を伝える）: 灰色のグラデ地に白カードのスライダー。似顔絵アイコン、属性、三角付きの見出し。左右に円形の矢印ボタン 12. **よくある質問**（不安をなくす）: 灰色のアコーディオンに Q。開くとグラデ地に A 13. **定期コースの案内**（まとめ買いへ誘導する）: 斜めのグラデ帯に明朝イタリックの見出し。3 段の矢印型比較と、割引額を見せるグラデの価格ボックス 14. **特典と最終 CTA**（特典で背中を押し、申込みを締める）: 金色の地に月桂樹と王冠、明朝の大見出し、赤いリボン。番号付きの特典カード 4 枚、3 袋の購入カード、注釈 ## Imagery - 商品パッケージは白背景に切り抜き。2〜3 個を斜めに重ねて量を見せる - 悩みの人物は寒色の光で、こめかみを押さえるなど疲れたポーズの写真 - 改善テーマは細い線と淡い水色の、シンプルな人物線画イラスト - 成分は生薬やカプセル、粉末を真上や斜めから撮ったブツ撮り - 特典パートは金のボケ光、王冠、月桂樹、赤いリボンで飾る - 口コミは丸い枠の似顔絵イラスト - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 900px 前後のコンテンツ幅。グラデ面は全幅のまま - PC のファーストビューは左にコピーと購入カード、右に商品画像の 2 カラム - 改善テーマは PC で 2×2、症状タグは 4 列にする - 朝・昼・夜の飲み方は PC で 3 列に並べる - 開発背景は PC で本文と写真を左右に並べる。特典 02〜04 は 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-c238ddcf`（元 LP の URL から採番） - **元 LP**: https://nara-yamatoshoyaku.co.jp/lp?u=bate9_01_Meta_01 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。