--- version: alpha name: Golden Vitamin Glow Korean Serum LP description: ビタミンを思わせる黄色と朱橙を軸にした美容液の縦長 LP。明朝の大見出しと、雫・球体のビジュアルで「生っぽさ」と効果感を出す。白〜生成りの地と黒い石目の地を交互に置き、雑誌掲載・累計実績・成分・使い方へ情報を積み上げる訴求型の構成。 colors: primary: '#FDE85E' accent-1: '#EA4B2B' background: '#FBF6F0' surface: '#FDFDFD' background-alt: '#FBF3E8' dark-section: '#030408' secondary: '#3E4443' on-dark: '#FFFFFF' text: '#2A2220' accent-2: '#D9A93A' accent-3: '#E2386F' tint-1: '#F9FEFA' tint-2: '#F2E3BD' line: '#DE926D' accent-1-accessible: '#DE3716' accent-3-accessible: '#E02864' typography: display: fontFamily: Shippori Mincho fontSize: 52px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Yomogi fontSize: 28px fontWeight: 400 lineHeight: 1.3 label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.12em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' emphasis-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 64px tag-pill: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 26px gold-tag: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 24px framed-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 420px circle-benefit: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px ingredient-bubble: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px speech-burst: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 80px step-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 150px laurel-badge: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.display}' height: 160px --- # DESIGN.md — 黄金イエロー×朱橙の韓国系美容液 LP（Golden Vitamin Glow Korean Serum LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 情報量多め・訴求型、上品・高級、力強い・インパクト、清潔・爽やか - **キーワード**: ビタミンイエロー・黄金の雫・明朝大見出し・朱橙の帯・石目ダーク・成分バブル - **地の質感**: 光沢のある黄金の液体、透ける泡、黒い石目テクスチャ、柔らかな白い光 - **形**: 円形の写真・成分バブル、角丸の枠付きカード、斜めの吹き出し帯 - **温度感**: 暖色寄り。黄色と朱橙が中心で、緑とピンクは成分を示す差し色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FDE85E` | ブランド黄・実績帯の地 | 9% | 画素の主要色に補正 | | `accent-1` | `#EA4B2B` | 朱橙の強調帯・見出し文字 | 4% | 画素の実測 | | `background` | `#FBF6F0` | 基本の明るい地 | 25% | 画素の実測 | | `surface` | `#FDFDFD` | カード・白枠 | 9% | 画素の実測 | | `background-alt` | `#FBF3E8` | 生成りのカード地 | 6% | 画素の実測 | | `dark-section` | `#030408` | 雑誌掲載の黒背景 | 6% | 画素の実測 | | `secondary` | `#3E4443` | 悩み提起の石目ダーク地 | 6% | 推定 | | `on-dark` | `#FFFFFF` | 暗色上の見出し文字 | 1% | 画素の実測 | | `text` | `#2A2220` | 見出し・本文の濃色 | 3% | 推定 | | `accent-2` | `#D9A93A` | 悩みタグ・金色の装飾 | 1% | 推定 | | `accent-3` | `#E2386F` | 保湿・成分訴求のピンク | 2% | 推定 | | `tint-1` | `#F9FEFA` | 浸透説明のくすみ緑グレー地 | 8% | 画素の実測 | | `tint-2` | `#F2E3BD` | 口コミの淡いピーチ地 | 8% | 画素の主要色に補正 | | `line` | `#DE926D` | カードのオレンジ枠線 | 1% | 画素の実測 | | `accent-1-accessible` | `#DE3716` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#E02864` | AA を満たす補正値（計算） | | 計算 | - 地は明るいグレー・白を基本にし、黒・石目のダーク地を 2〜3 回はさんでメリハリをつける - 黄色は商品パッケージと実績・処方のセクション背景だけに使い、面で強く見せる - 朱橙は一番伝えたい語の帯・文字・枠線に限って使う - 緑は CICA 系、ピンクは保湿・成分系の差し色で、意味ごとに色を分ける - カードは白か生成りの地に朱橙の枠線をつける - `emphasis-band` は文字 `#FFFFFF` × 背景 `#EA4B2B` のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DE3716`、4.5:1）を使う。 - `circle-benefit` は文字 `#EA4B2B` × 背景 `#FDFDFD` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DE3716`、4.6:1）を使う。 - `ingredient-bubble` は文字 `#FFFFFF` × 背景 `#E2386F` のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#E02864`、4.51:1）を使う。 - `speech-burst` は文字 `#FFFFFF` × 背景 `#EA4B2B` のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DE3716`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクションの特大見出し | 明朝 | Shippori Mincho | 600 | 52px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 500 | 34px | 1.3 | 0.04em | | `headline-md` | 強調帯・太字の訴求見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.35 | 0.02em | | `headline-sm` | 小見出し・口コミ見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.45 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.04em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 口コミの手書き強調・英字飾り | 手書き・筆 | Yomogi | 400 | 28px | 1.3 | 0.0em | | `label-button` | タグ・ラベル・英字見出し | 欧文サンセリフ | Montserrat | 600 | 13px | 1.2 | 0.12em | - 大見出しは明朝で、キーワードだけ 1.5〜2 倍の大きさにする - 強調語は朱橙で塗った帯に白抜きの太ゴシックで置く - 数字は細い斜体の明朝や欧文を特大にしてアクセントにする - 見出しの上に小さな英字ラベルを添える - 本文は中央揃えで短く改行し、注釈は ※ で小さく添える - 縦書きの明朝見出しを要所で使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。円形カードを 2〜3 列に並べるところもある - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに地の色かテクスチャを切り替えて区切る - 見出しは中央揃え、図版は全幅で大きく見せる - 悩み・効果は円形写真を 2 列のグリッドに並べる - 成分は大小のバブルを散らして配置する - 使い方は左に円形写真、右に STEP 番号と本文を置く ## Elevation & Depth - カードは影をほぼつけず、枠線で区切る - 商品パッケージや雫には柔らかい落ち影をつける - 成分バブルには光沢と内側の光をつける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 円形の切り抜きが中心。ほかに角丸の四角写真と、全幅で背景になじませる写真 - **セクション境界**: 直線の切り替えが基本。一部に斜めのカットや弧を使う - タグは黒または金色の角丸の長方形にする - 吹き出しは朱橙で塗り、斜めに傾ける - 比較図は 2 つの四角を並べ、下にラベル帯をつける ## Components - **朱橙の強調帯**（`emphasis-band`）: キーワードを朱橙のグラデーション帯に白抜きで置く - **黒ピルのラベル**（`tag-pill`）: 見出しの上に置く小さな黒いピル型のラベル - **金色の悩みタグ**（`gold-tag`）: ダーク地の上に悩みを短く 3 つ並べる金色のタグ - **朱橙枠のカード**（`framed-card`）: 生成りの地にオレンジの太枠をつけた説明カード - **円形の効果バッジ**（`circle-benefit`）: 白い円の中に、小さな説明文と朱色の明朝で効果を書く - **成分バブル**（`ingredient-bubble`）: ピンクの光沢のある球に成分名を入れ、大小を散らす - **斜めの吹き出し**（`speech-burst`）: 話題を転換するときに置く朱橙の斜め吹き出し - **STEP 行**（`step-row`）: 円形写真と STEP 番号・細線・本文を横に並べる - **月桂樹の実績表示**（`laurel-badge`）: 累計の数字を月桂樹の装飾で挟み、黄色地に大きく置く ## Do's and Don'ts **Do** - 黄色と朱橙を主役にし、緑・ピンクは成分の意味づけだけに使う - 見出しは明朝の大小の差で強弱をつける - 雫・球体・泡のモチーフをセクションをまたいで繰り返す - 数値の根拠や範囲を示す注釈を ※ で小さく必ず添える - ダーク地の悩みセクションと明るい解決セクションを対比させる **Don't** - 寒色を主役にしない - 四角く硬いボタンを並べない - 見出しをすべて同じ大きさのゴシックにしない - 強調色を本文全体に散らさない - 写真を円形や角丸にせず、雑に四角のまま並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の新しさと主成分を一目で伝える）: 明朝の特大コピーとモデルの顔、黄緑の液体の球、効果を書いた金色の球 3 つ、商品の箱 2. **メディア・SNS実績**（話題性で信頼を得る）: 黒地に金色の文字で掲載実績を見せ、雑誌の写真と SNS 投稿を 3 列に並べる 3. **累計実績**（人気を数字で示す）: 黄色地に商品を散らし、月桂樹で挟んだ特大の数字を置く 4. **掲載誌一覧**（権威づけ）: 明るい地で、雑誌の表紙を円環状に並べ、中央に朱色の見出しを置く 5. **悩みの提起**（肌の悩みに共感してもらう）: 石目のダーク地に金色のタグと、円形写真 2×2 のグリッド 6. **成分の必要性と課題**（必要性と、従来品の弱点を示す）: 朱橙枠のカードに強調帯を入れ、続けて断面イラストで弱点を見せる 7. **開発ストーリー**（技術的な裏付けを示す）: 斜めの吹き出しで話題を転換し、縦書きの明朝見出しと研究の写真、比較カードを置く 8. **お客様の声（専門家）**（第三者の評価を見せる）: 全幅の人物写真に英字の筆記体を重ね、本文の要所を朱色で強調する 9. **特長・処方**（浸透・効果・成分の詳しい説明）: 断面図、黄金の球、棒グラフ、効果の円形バッジ、比較図を、黄色地とグレー地を交互にして見せる 10. **配合成分**（成分の豊富さを伝える）: ピンクの泡の地に、大小の成分バブルを散らす 11. **個包装・使用シーン**（使いやすさを伝える）: 朱橙の枠のカードと、黒いラベルをつけた円形のシーン写真 3 枚 12. **テクスチャ・香り・フリー処方**（使い心地と安心感を伝える）: 縦書きの見出しと柑橘の写真、斜線を入れた円で 8 つの無添加項目を示す 13. **品質・お客様の声**（品質の担保と実感の声）: 紺のダーク地に研究写真を並べる。続けてピーチ地に、金縁の円形顔写真と手書きの声を置く 14. **使い方・ブランドの由来**（使う手順の理解と共感）: 黒帯の英字見出しのあと、アイコンで 3 工程を示し、STEP 行を続ける。最後に明朝のエッセイを置く ## Imagery - 透明感のある女性モデルの顔を寄りで撮る。目を閉じて手を添えるポーズ - 黄金の液体の球・雫・泡を CG で光沢強めに描く - 肌の断面を、淡いピンクのセルで描いたイラスト - 葉や植物、柑橘などの自然素材を、ぼかして周囲に配置する - 黒い石目やダークの雑誌風背景で、高級感を出す - パッケージは黄色。斜めに置いたり散らしたりする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅 750px 前後の SP デザインを置き、左右を淡い地色で埋めるのを推奨 - 円形写真のグリッドは PC では 3〜4 列に広げる - 全幅の背景テクスチャは画面端まで伸ばす - 特大見出しは 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-fc3d29b1`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/fromcocoro/vinnac_skinserum_01/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。