--- version: alpha name: Purple and Mocha Eye-Care Supplement LP description: 深い紫を主役に、モカブラウンの丸バッジと明朝体の大見出しで上品さを出す健康食品 LP。白地と淡いボケ背景を基本にし、紺の金ランキング帯、暗いグレーの悩み帯、黄色の吹き出しやマーカーでリズムを付けた、訴求型の縦長構成。 colors: primary: '#7E1C88' secondary: '#826D6F' background: '#FFFDFE' background-alt: '#FEF9F2' tint-1: '#D3E5F5' dark-section: '#1F2A4A' accent-1: '#383735' accent-2: '#D5B060' accent-3: '#F2ED73' marker: '#F3F5B4' tint-2: '#A56EA5' text: '#0C0C0C' text-body: '#434343' cta: '#6E5A50' on-cta: '#F9F6ED' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 32px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 56px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 500 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-circle-stat: textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 110px badge-ingredient: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px ranking-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-2}' typography: '{typography.display}' height: 380px voice-card: textColor: '{colors.text-body}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 400px staff-reply: backgroundColor: '{colors.accent-3}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 220px worry-bubble: textColor: '{colors.text}' rounded: '{rounded.sm}' height: 75px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 75px label-transition: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 100px notice-box: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 70px --- # DESIGN.md — 紫×モカの明朝系アイケアサプリ LP（Purple and Mocha Eye-Care Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、情報量多め・訴求型、信頼・誠実 - **キーワード**: 深紫・モカブラウンの丸バッジ・明朝の大見出し・ボケ光の背景・金の月桂樹・吹き出しの声 - **地の質感**: 淡いボケ光やグラデーション背景、紺地には斜めのストライプ、悩み帯にはコンクリート風の質感 - **形**: 円形バッジと円形切り抜き写真が多い。角丸は小さいカード、吹き出し、ひし形の矢印 - **温度感**: 白とラベンダー系のやや寒色の上に、紫とブラウンで温かみと高級感を加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7E1C88` | 見出しの強調文字・成分ラベル・帯 | 4% | 画素の実測 | | `secondary` | `#826D6F` | モカブラウンの丸バッジ | 6% | 画素の主要色に補正 | | `background` | `#FFFDFE` | 基本の地色 | 30% | 画素の実測 | | `background-alt` | `#FEF9F2` | 淡いボケ光の背景 | 8% | 画素の実測 | | `tint-1` | `#D3E5F5` | お客様の声の淡い水色背景 | 6% | 画素の実測 | | `dark-section` | `#1F2A4A` | ランキング帯・成分セクションの紺 | 7% | 推定 | | `accent-1` | `#383735` | 悩み帯の濃いチャコール | 5% | 画素の実測 | | `accent-2` | `#D5B060` | ランキングの金 | 1% | 推定 | | `accent-3` | `#F2ED73` | スタッフ返信の黄色吹き出し | 3% | 画素の実測 | | `marker` | `#F3F5B4` | 本文の黄色マーカー | 1% | 画素の実測 | | `tint-2` | `#A56EA5` | 淡紫ラベル・サブ帯 | 2% | 画素の実測 | | `text` | `#0C0C0C` | 見出し文字 | 3% | 画素の実測 | | `text-body` | `#434343` | 本文 | 4% | 画素の実測 | | `cta` | `#6E5A50` | ブラウングラデーションのボタン | 1% | 推定 | | `on-cta` | `#F9F6ED` | ボタン文字 | 0% | 画素の実測 | - 地は白か淡いボケ背景。1 セクションごとに白と淡色を交互に使う - 強調語は紫で書き、残りは黒の明朝で組む - 成分名・実績の丸バッジはモカブラウンのグラデーションで統一する - 権威づけ（ランキング）は紺地に金の文字と月桂樹を使う - 悩み・リスクを伝える帯だけ暗いグレーにして、空気を変える - 黄色はスタッフ返信の吹き出し、マーカー、注意ボックスに限定する ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と各章の大見出し | 明朝 | Shippori Mincho | 700 | 40px | 1.3 | 0.05em | | `headline-lg` | セクション見出し（紫の強調語を含む） | 明朝 | Noto Serif JP | 600 | 32px | 1.35 | 0.04em | | `headline-md` | お客様の声のタイトル | ゴシック | Noto Sans JP | 700 | 28px | 1.35 | 0.02em | | `headline-sm` | 成分名・小見出し | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈・調査条件 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 数値（%・mg・倍） | 欧文セリフ | Playfair Display | 700 | 56px | 1.1 | 0.0em | | `label-button` | ボタン・ラベル | ゴシック | Noto Sans JP | 500 | 20px | 1.3 | 0.05em | - 見出しは明朝。ひらがなを小さく、漢字を大きくしてジャンプ率を付ける - 強調語だけ紫にして一回り大きくする - 数値は欧文セリフのイタリック風で大きく見せ、単位は小さくする - 感嘆符は細い欧文イタリックで添える - 本文はゴシックで、行間を 1.8 前後に広く取る - 英字のセクションラベルはセリフ体の大文字 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。実績バッジのみ 3 列、成分の丸写真は 2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しは中央揃え、本文は左揃え - 写真は全幅で敷き、その上に白カードを重ねる - 成分紹介は写真と丸バッジを左右交互に置く - セクションの間は 60〜80px 空ける - スタッフ返信は丸写真を左、吹き出しを右に置く ## Elevation & Depth - 白カードと吹き出しには、柔らかい影（0 4px 10px rgba(0,0,0,.15)）を付ける - 丸バッジには淡い影とグラデーションで立体感を出す - ボタンは上から下への濃淡グラデーションと影でふくらみを出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物と成分は円形に切り抜く。風景や食材は全幅の矩形。商品パッケージは切り抜いて配置する - **セクション境界**: 直線の切り替えが基本。下向きの三角や、緩い弧で次のセクションへつなぐ - 実績や成分名は正円のバッジにする - ラベルは角の立った矩形帯か、尻尾付きの吹き出しにする - 点線の円枠で番号付きの声ラベルを作る ## Components - **実績の丸バッジ**（`badge-circle-stat`）: 白〜淡グレーの正円に、紫の大きな数字と小さな注釈を入れる。3 つ並べる - **成分名の丸バッジ**（`badge-ingredient`）: モカのグラデーション円に、白い明朝で成分名を入れ、写真の角に重ねる - **ランキング帯**（`ranking-band`）: 斜めストライプの紺地に、金の王冠・月桂樹・順位を中央に大きく置く - **お客様の声カード**（`voice-card`）: 人物写真の上に白カードを重ね、紫のゴシック見出しと本文を入れる。点線の円で番号ラベルを付ける - **スタッフ返信の吹き出し**（`staff-reply`）: 黄色の角丸吹き出しに小さめの本文を入れる。左に丸写真と肩書きを置く - **悩みのチェック吹き出し**（`worry-bubble`）: 暗い写真の上に白い吹き出しを並べ、黒いチェックボックスと短文を入れる - **グラデーションボタン**（`button-primary`）: ブラウンのグラデーションの角丸矩形。白文字と、右端に白丸の再生アイコンを付ける - **転換ラベル**（`label-transition`）: 紫グラデーションの円や帯に、下向きの尻尾を付けて話の転換を示す - **注意見出しボックス**（`notice-box`）: 淡い黄色の帯に警告アイコンと明朝の見出しを入れ、暗い写真の上に載せる ## Do's and Don'ts **Do** - 見出しは明朝で大小を付け、要所だけ紫にする - 成分や実績は丸バッジで示し、数値を大きく見せる - 白地と淡いボケ背景を基本にし、紺とグレーの帯は要所だけに使う - 声には人物写真と、スタッフの返信をセットで載せる - 本文の要点には黄色のマーカーを引く **Don't** - ビビッドな原色やネオンカラーを使わない - 見出しを丸ゴシックにして子どもっぽくしない - 紫を背景の大面積に使い続けない - 数値に注釈を付け忘れない - 角丸の大きいピル型ボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ベネフィットと権威を一目で伝える）: 紫の上部帯の下に人物写真。明朝の大コピー、商品の切り抜き、金メダル、実績の丸バッジ 3 つを置く 2. **コンセプト**（本気度を宣言する）: 白地に明朝の見出しと黄色の下線。食材の写真を置き、成分名の紫ラベルで商品を囲む 3. **ランキング実績**（人気を証明する）: 紺のストライプ地に、金の月桂樹と大きな順位 4. **お客様の声**（体験を共感で伝える）: 英字ラベルと点線。人物写真に白カードを重ね、黄色のスタッフ返信を添える 5. **悩みの提起**（自分ごと化させる）: チャコールの見出し帯。暗い写真にチェック付きの吹き出しを 3 つ並べる 6. **放置のリスク**（危機感を高める）: コンクリート質感の地に、不調の人物写真 2 枚と斜めの吹き出しを置く 7. **解決策の提示**（商品を紹介する）: 紫の円の転換ラベル。ボケ背景に商品、縦書きのコピー、実績バッジ、ボタンを置く 8. **主成分の解説**（成分の優位性を伝える）: 紺の枠の中に白カード。比較写真と紫ボタン、引用符付きの見出し、マーカーを入れる 9. **満足度データ**（数値で効果感を伝える）: ブラウンの円グラフに大きな%表示。周りに白い吹き出しの声を置く 10. **配合成分の紹介**（その他の成分を一つずつ説明する）: 全幅写真に丸バッジを重ね、紫の明朝の小見出しと本文を続ける 11. **配合量まとめ**（配合量を一覧で見せる）: 紫グラデーションの帯見出し。円形写真に mg 表記を重ね、粒の写真を中心に配置する 12. **こだわり・価格の説明**（価格に納得してもらう）: 製造現場の暗い写真に、黄色の注意ボックスと白文字を載せる 13. **ご挨拶**（寄り添う姿勢で信頼を得る）: スタッフ写真と淡紫のラベル。罫線入りの便箋風カードに中央揃えの文章と手書きの署名を入れる ## Imagery - 人物は 40〜60 代のモデル。明るい室内や屋外で、自然な笑顔か、悩んでいる表情を撮る - 食材は白背景か、浅い被写界深度のシズル写真。粒感とツヤを強調する - 背景には淡いボケ光や白飛びのグラデーションを使う - 商品パッケージは影付きで切り抜き、メダルや粒を添える - スタッフはヘッドセット姿の写真を円形に切り抜く - 装飾は金の王冠・月桂樹、点線の円、引用符 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅 750px 前後の中央 1 カラムにし、左右は淡色の地で埋める - 全幅の写真帯や紺の帯は、画面幅いっぱいに広げる - 実績バッジは 3 列のまま、サイズだけ拡大する - 成分紹介は PC で写真と本文を左右 2 カラムにしてもよい - 見出しは PC で 1.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-fffc8f7c`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/biosupli/e_trial/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。