--- version: alpha name: Amethyst Luxury Supplement LP description: 濃い紫から淡いラベンダーまでのグラデーションに、液体のしぶきや泡の CG を重ねた美容サプリの LP。明朝体の大きな見出しにシャンパンゴールドのグラデーション文字を使い、高級感と純度の高さを伝える。数字で訴える見出しと縦書きコピーを多く使う、情報量の多い縦長の構成。 colors: primary: '#811EAD' dark-section: '#2B1554' secondary: '#19003A' background: '#F9F5FE' background-alt: '#E2D2EF' tint-1: '#FDECFE' accent-1: '#FDD39B' accent-2: '#BD6AB1' text: '#660861' text-body: '#322141' on-dark: '#F6F0F4' line: '#D8A848' accent-3: '#896CA6' typography: display: fontFamily: Shippori Mincho fontSize: 64px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Noto Serif JP fontSize: 36px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Cormorant Garamond fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 32px gold-number-headline: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 80px check-list: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 44px info-panel: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 240px badge-circle: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 96px ingredient-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px tag-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 26px compare-chart: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 220px note-text: typography: '{typography.note}' height: 14px --- # DESIGN.md — 紫×シャンパン金の高級美容サプリ LP（Amethyst Luxury Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型 - **キーワード**: 深い紫・シャンパンゴールド・液体・泡の CG・明朝体の大見出し・数字の訴求・縦書きコピー - **地の質感**: 光沢のある液体、ガラスのような泡、光の筋を重ねたつややかな質感 - **形**: 四角い白枠のパネル、黒い帯のラベル、丸いバッジ、ピル型のタグ - **温度感**: クールな紫を基調にして、金色で温かみと高級感を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#811EAD` | ブランドを代表する鮮やかな紫 | 7% | 画素の主要色に補正 | | `dark-section` | `#2B1554` | 濃紺に近い紫の地 | 12% | 画素の主要色に補正 | | `secondary` | `#19003A` | 黒に近い深い紫の帯・ラベル | 7% | 画素の主要色に補正 | | `background` | `#F9F5FE` | 淡いラベンダー白のパネル地 | 11% | 画素の主要色に補正 | | `background-alt` | `#E2D2EF` | やや濃いラベンダーの地 | 9% | 画素の主要色に補正 | | `tint-1` | `#FDECFE` | ピンクがかった淡紫の地 | 8% | 画素の実測 | | `accent-1` | `#FDD39B` | シャンパンゴールドの強調文字・帯 | 3% | 画素の実測 | | `accent-2` | `#BD6AB1` | ピンク紫の強調文字 | 2% | 画素の主要色に補正 | | `text` | `#660861` | 明るい地の上の濃紫の見出し文字 | 3% | 画素の実測 | | `text-body` | `#322141` | 本文の濃いグレー紫 | 2% | 画素の実測 | | `on-dark` | `#F6F0F4` | 濃い地の上の白文字 | 3% | 画素の主要色に補正 | | `line` | `#D8A848` | 成分を囲む丸バッジの線（ゴールド） | 1% | 推定 | | `accent-3` | `#896CA6` | 悩みのチェックマークや線の中間紫 | 5% | 画素の主要色に補正 | - 地は濃い紫と淡いラベンダーを数セクションごとに交互に入れ替える - 濃い地の数字や大見出しにはシャンパンゴールドのグラデーションを使う - 明るい地の見出しは濃紫で、強調語だけ鮮やかな紫か黒帯の白文字にする - 見出しの前の小ラベルは黒紫の帯に白文字か金文字 - 本文中の強調はピンク紫の太字にする - 紫系から外れる色はほぼ使わない。比較図の基準値だけ水色にしてよい ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの巨大な漢字・数字 | 明朝 | Shippori Mincho | 800 | 64px | 1.1 | 0.0em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 700 | 36px | 1.3 | 0.02em | | `headline-md` | サブ見出し・数字の強調 | 明朝 | Noto Serif JP | 700 | 24px | 1.4 | 0.02em | | `headline-sm` | 帯ラベル・縦書きのコピー | 明朝 | Noto Serif JP | 600 | 18px | 1.4 | 0.05em | | `body-md` | 説明の本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 欧文の商品ロゴ風の文字 | 欧文セリフ | Cormorant Garamond | 500 | 20px | 1.2 | 0.1em | | `label-button` | 成分タグ・バッジの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.0em | - 見出しはすべて明朝体の太字にして、高級感を出す - 数字は単位より 1.5〜2 倍大きく組む - 見出しの中の強調語だけサイズを大きくし、ジャンプ率を高くする - 写真の横には縦書きの明朝コピーを置く - 本文はゴシック体で、行間を 1.7 前後にする - 金色の文字にはグラデーションと薄い影をつけて立体感を出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分バッジは 3〜5 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは画面幅いっぱいの背景画像の上に組む - 説明は白またはラベンダーの枠付きパネルにまとめる - 見出しは中央揃えで、小ラベル→大見出し→本文の順に並べる - 商品画像は中央に置き、左右に縦書きコピーを添える - 成分の一覧は丸いバッジかピル型のタグをグリッドで並べる ## Elevation & Depth - パネルには紫の淡い外側の光（グロー）をつける - 金文字には薄いドロップシャドウ - 泡や液体の CG はハイライトと反射で立体感を出す - 商品パッケージには下に影を落とす ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物は背景を抜いて液体の CG と合成する。素材は丸い泡の形で見せる - **セクション境界**: 直線で切り替えるか、液体の波や光で境目をぼかす。パネルの下端は V 字の矢印形も使う - パネルは角丸を小さくし、細い白枠か紫枠をつける - ラベルは角のない帯にする - 成分バッジは正円に細い色線 - アミノ酸などのタグは濃紫のピル型 ## Components - **黒紫の帯ラベル**（`label-band`）: 見出しの上に置く短い前置きの帯。白か金の明朝体で組む - **金の数字見出し**（`gold-number-headline`）: 販売数や配合量を、大きな金グラデーションの明朝で見せる - **悩みのチェックリスト**（`check-list`）: 紫のチェックボックスの横に、悩みを 1 行ずつ白文字で並べる - **説明パネル**（`info-panel`）: ラベンダー白の地に細い枠をつけ、見出しと本文を入れる - **特長の泡バッジ**（`badge-circle`）: ガラスの泡のような円の中に、特長を 2〜3 文字で入れたものを 3 つ並べる - **成分の丸バッジ**（`ingredient-badge`）: 濃い地の上に色線の正円を並べ、中に成分名を入れる - **成分のピル型タグ**（`tag-pill`）: 濃紫のピル型に白文字を入れ、3 列で並べる - **比較のグラフ**（`compare-chart`）: 立体の棒グラフで基準値と自社の値を比べ、矢印を添える - **※注釈**（`note-text`）: 数字の下に小さく添える根拠の注記 ## Do's and Don'ts **Do** - 紫の濃い地と淡い地を交互に入れ替え、リズムを作る - 見出しは明朝の太字にして、数字を大きく見せる - 主張する数字の下には必ず※注釈を添える - 液体・泡・光の筋を背景に重ねて、純度と潤いを表現する - パッケージのオレンジは商品写真の中だけに使う **Don't** - 丸ゴシックなど、カジュアルな書体を見出しに使わない - 紫・金以外の原色を地に使わない - 装飾のない平坦な単色の背景だけで組まない - 本文を長く続けず、パネルで区切る - 角丸の大きいポップなカードは使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（純度の高さと商品を一目で印象づける）: 巨大な明朝の漢字と、紫の泡の CG に重ねた商品。左右には縦書きの黒帯コピー 2. **実績の訴求**（配合量と特長を数字で示す）: 黒紫の帯の中に金の数字を置き、下に泡のバッジを 3 つ並べる 3. **販売実績**（累計販売数で信頼を示す）: 濃紺の地に金グラデーションの大きな数字と、商品写真 4. **悩みの提起**（ターゲットの悩みに共感する）: モノトーンの人物写真の上に、悩みのチェックリストを 5 項目 5. **解決の提示**（商品が解決策だと示す）: 金の帯の見出しと、縦書きコピーで挟んだ商品 6. **成分の説明**（主成分の純度と配合量を説明する）: 枠付きパネルに比較の図・数字・棒グラフを入れる 7. **ベネフィット**（使ったあとの実感をイメージさせる）: 笑顔の女性と紫の液体のしぶきを合成し、大きな明朝の見出しを置く 8. **希少性**（原料の希少さを伝える）: 縦書きの大見出しと、数字を強調したパネル 9. **栄養成分**（オールインワンの栄養を見せる）: 濃紫の地に成分の丸バッジを並べたグリッド 10. **品質のこだわり**（製法と原料の品質を説明する）: 淡いパネルの見出しの横に、スポイトやガラス器具の写真を置く 11. **アミノ酸量**（成分の豊富さを示す）: 泡の背景の上に大見出しと、ピル型タグの 3 列リスト ## Imagery - 紫の液体のしぶき・泡・ガラス玉を 3DCG 風に光らせる - 人物は 40〜50 代の女性。白い服で、肌のつやを強調し、背景を抜いて合成する - 光の放射や稲妻のような光の筋を、球の中心に置く - カプセルや泡の中に紫の粒を詰めたビジュアル - 悩みのパートは彩度を落としたモノトーンの写真にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 750px 幅のカラムを置き、左右は背景色で埋める - SP は同じ縦長の構成のまま、横幅 100% にする - SP では大見出しを 32〜40px、ファーストビューの漢字を 64px 前後にする - 成分バッジは SP で 4 列、ピル型タグは 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-7c75e37c`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/oga/hk_1/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（4/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。