--- version: alpha name: Deep Violet Gold Clinical Eye Supplement LP description: 濃い紫と黒に近い紺を地にして、金色のパッケージや円バッジで高級感と信頼感を出すサプリメント LP。白いカードに図解と赤い強調文字を入れて、悩みの提起→原因→成分→根拠の順に説明していく、情報量の多い構成。 colors: primary: '#450C83' dark-section: '#0D001A' secondary: '#415171' background: '#FEFEFE' background-alt: '#FEFEFE' tint-1: '#D3E0E8' accent-1: '#C9A75A' accent-2: '#D0202A' accent-3: '#2A4A9A' text: '#393939' text-muted: '#697375' on-dark: '#FEFEFE' line: '#681677' marker: '#E1E8EB' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 44px point-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 32px white-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 560px check-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 230px gold-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 90px compare-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 56px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px note-block: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 50px --- # DESIGN.md — 濃紫×金の科学系アイサプリ LP（Deep Violet Gold Clinical Eye Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 信頼・誠実、ラグジュアリー・ダーク、情報量多め・訴求型、クール・先進的 - **キーワード**: 濃紫・金のアクセント・科学的根拠・図解・白カード・注釈多め - **地の質感**: ダーク面に光の線やグラデーション。明るいパートは淡いグレーと白でクリニカルな印象 - **形**: 角丸なしの四角いカードと帯見出しが中心。強弱を示すバッジだけ正円 - **温度感**: クールで知的。金と赤を差して温度を少し加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#450C83` | 帯見出し・ラベル塗り | 6% | 画素の実測 | | `dark-section` | `#0D001A` | FV・成分パートの濃紺黒地 | 20% | 画素の実測 | | `secondary` | `#415171` | 悩み提起パートの紺グラデ地 | 6% | 画素の主要色に補正 | | `background` | `#FEFEFE` | カード・本文の白地 | 38% | 画素の主要色に補正 | | `background-alt` | `#FEFEFE` | 淡グレーのセクション地 | 12% | 画素の実測 | | `tint-1` | `#D3E0E8` | 研究室風の淡青グレー地 | 7% | 画素の実測 | | `accent-1` | `#C9A75A` | 金色のバッジ・成分ラベル | 3% | 推定 | | `accent-2` | `#D0202A` | 赤の強調文字・機能性バッジ | 1% | 推定 | | `accent-3` | `#2A4A9A` | 青の強調文字 | 1% | 推定 | | `text` | `#393939` | 見出し・本文の文字 | 4% | 画素の実測 | | `text-muted` | `#697375` | 注釈の小さな文字 | 1% | 画素の実測 | | `on-dark` | `#FEFEFE` | ダーク地の上の白文字 | 2% | 画素の実測 | | `line` | `#681677` | カードの紫枠線 | 1% | 画素の主要色に補正 | | `marker` | `#E1E8EB` | 悩み文の下に引く淡いマーカー | 1% | 画素の主要色に補正 | - ダーク地（濃紺黒・紫）と明るい地（白・淡グレー）を、セクションごとに交互に切り替える - ダーク地の上には白い四角カードを載せて、説明を読みやすくする - 強調語は赤字にし、必要なら赤の下線も引く。ブランド名に相当する語は青字にする - 金色は成分ラベル・円バッジ・数字だけに使い、高級感を出すポイントに限定する - 紫の帯は見出しラベルやポイント番号のラベルに使う - 注釈はグレーの小さな文字で、ブロックのすぐ下にまとめて置く ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と結論の大コピー | 明朝 | Shippori Mincho | 800 | 40px | 1.3 | 0.02em | | `headline-lg` | セクションの大見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.4 | 0.02em | | `headline-md` | カード内の見出し・強調文 | ゴシック | Noto Sans JP | 700 | 21px | 1.5 | 0.02em | | `headline-sm` | 帯ラベル・ポイント番号 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 15px | 1.8 | 0.02em | | `note` | ※注釈・文献 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 成分名・金ラベルの文字 | 明朝 | Noto Serif JP | 700 | 24px | 1.3 | 0.02em | - 感情に訴える大コピーは明朝、説明はゴシックで使い分ける - 強調語は 1.3〜1.6 倍の大きさにして、赤や紫の色を付ける - 見出しは中央揃え、本文は左揃えにする - 注釈記号（※1 など）は肩付きの小さな文字にする - 難しい語にはふりがなを振る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは画面幅の約 90% で中央に置く - カード同士の間は 40px ほど空けて、背景のダーク地を見せる - 比較の図は横 2 列で並べる - 注釈はカード直下に左揃えでまとめる - ダークセクションの下端は下向きの V 字で次へつなぐ ## Elevation & Depth - 白カードは影なしか、ごく弱い影にとどめる - パッケージ写真は床に映り込みを付けて立体感を出す - 円バッジにはわずかなドロップシャドウを付ける ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は円形に切り抜く。図解はカード内の四角形に収める - **セクション境界**: 下向き V 字の矢印形と、直線での切り替え - カードは角丸なしの四角にし、紫の細枠を付ける - 帯見出しは角丸なしの長方形にし、中央下に吹き出しの三角を付けてもよい - 強弱や数値のバッジは正円にする - 成分ラベルは傾けた金色の四角にする ## Components - **紫帯見出し**（`band-heading`）: 紫の長方形に白文字を入れ、下に三角の吹き出しを付ける - **ポイント番号ラベル**（`point-label`）: カード上辺に重ねる紫ラベル。両脇に横線を引き、丸数字を入れる - **紫枠の白カード**（`white-card`）: ダーク地の上に置く説明カード。見出し・図解・本文・注釈を収める - **チェック付き悩みリスト**（`check-list`）: 白い枠に、チェックボックスと青や紺の強調語を並べ、淡いマーカーを引く - **金の円バッジ**（`gold-badge`）: 金色のグラデーションの円に、実績の数字や配合比率の数字を大きく入れる - **強弱比較バッジ**（`compare-badge`）: 赤と紺の正円で強と弱を示し、ぼかした画像と並べて比べる - **紫のピルラベル**（`pill-label`）: 比率や名称を示す紫のピル型ラベル - **注釈ブロック**（`note-block`）: ※番号付きのグレーの小さな文字を数行並べる ## Do's and Don'ts **Do** - ダーク地と明るい地を交互に置き、メリハリをつける - 主張の根拠になる図解・比較画像を必ず添える - 強調語には赤・紫・青の色と下線を使って目立たせる - 金色は数字と成分の強調に絞って使う - 効果をうたう表現には※注釈を付け、近くに置く **Don't** - ポップなパステル色や丸ゴシックを使わない - カードを大きく角丸にしない - 金色を広い面積に使わない - 注釈を省略したり、ページ最下部だけにまとめたりしない - 装飾的なイラストを多用せず、図解は医学的なトーンを保つ ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（最新作であること・実績・効果を一目で伝える）: 濃紫の光線背景に、縦書きの大コピー・パッケージ・上昇矢印・金の円バッジを置き、下に明朝の大見出しと注釈を入れる 2. **商品紹介**（メーカーの信頼性と商品の位置づけを示す）: 紫の帯見出しの下に 3 行の中央揃えコピーを置き、青と紫で強調する。パッケージ写真と赤い円バッジを添える 3. **制度説明**（機能性表示の意味を説明する）: 紫のラベルが付いた白カードに 2 行の説明を入れ、赤で強調する。下に注釈を置く 4. **開発者メッセージ**（開発のこだわりで信頼感を高める）: 白衣の人物写真と、淡紫の見出しボックスを紫の枠のカードに収める 5. **悩みの提起**（読み手に悩みを自覚させる）: 紺のグラデーション地に明朝の大見出しを置き、チェックリスト 3 項目と円形の人物写真を並べる。V 字で下へつなぐ 6. **比較イメージ**（見え方の違いを視覚的に示す）: 白カードの中に、くっきりした画像とぼかした画像を左右に並べ、強弱の丸バッジを付ける 7. **原因の解説**（悩みの原因を図解で説明する）: 紫の帯見出しの下に、眼の断面のイラストと、赤の大きな強調語を置く 8. **解決策の提示**（1 日 1 粒で改善できることを示す）: 濃紺黒地に明朝の大コピーと金の強調を入れる。カプセルと金色の成分ラベルを 2 枚、傾けて配置する 9. **ポイント解説**（成分・配合比・原料のこだわりを 3 つ示す）: 番号付きのラベルが付いた白カードを縦に 3 枚並べる。図解・金の円バッジ・写真に、赤字の本文と文献注釈を添える 10. **まとめ**（こだわりを総括し、購買意欲を高める）: 淡いグレー地に明朝の紫の大コピーを置き、パッケージ写真を映り込み付きで見せる 11. **表示情報**（届出内容と注意事項を記載する）: 白カードに、紫の上下線で挟んだ見出しと、箇条書きの細かい文字を入れる ## Imagery - パッケージは濃紫×金で正面から撮り、床への映り込みを付ける - 背景はぼかした研究室や白い医療空間の写真にする - 人物は悩む表情の中高年や白衣の研究者を、円形に切り抜く - 眼の断面図はフラットなイラストにし、青・黄・ピンクで描く - カプセルは赤褐色で艶のあるものを単体で見せる - ダーク面には放射状の光線や星状のきらめきを入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版も SP と同じ 1 カラムで、幅 750px 程度の中央カラムとして見せる - PC では左右の余白を背景色で延長して埋める - SP では大コピーを 36〜40px に縮め、縦書きコピーは横書きにしてもよい - 比較の 2 列は SP でも維持し、画像を小さくする ## 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-a71af249`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/rohto610/16989r/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。