--- version: alpha name: Vivid Yellow and Black Gold Serum LP description: 明るいレモンイエローと淡いグレーの地に、黒と金のセクションを挟んだ韓国系スキンケア LP。成分のカプセルや液体の写真を大きく使い、黒帯の見出しラベルと引き出し線で成分を説明する。数値は極太のセリフ体で大きく見せ、終盤は黄色地のアコーディオン型 Q&A で締める。 colors: primary: '#FCF768' background: '#DFE0E4' background-alt: '#FAFEFE' surface: '#FDFDFD' dark-section: '#000001' text: '#292929' on-dark: '#F8F8F8' accent-1: '#E3AD5B' accent-2: '#5ED9D0' secondary: '#010101' tint-1: '#FAE9AF' marker: '#FDFD6B' line: '#555555' accent-3: '#BCC7CC' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 22px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-sm: fontFamily: Playfair Display fontSize: 90px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.4 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 0px md: 4px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-black: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 30px speech-worry: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 44px stat-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 220px gold-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 34px recommend-list: textColor: '{colors.text}' typography: '{typography.body-md}' height: 180px step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 480px faq-accordion: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px free-circle: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 110px --- # DESIGN.md — レモン黄×黒金の高機能美容液 LP（Vivid Yellow and Black Gold Serum LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: クール・先進的、清潔・爽やか、力強い・インパクト、情報量多め・訴求型 - **キーワード**: レモンイエロー・黒×金・透明カプセル・引き出し線・大きな数字・成分訴求 - **地の質感**: ツヤのある液体やカプセルの CG 調写真、オーロラの光の反射、黒地に金の光の筋 - **形**: 四角い黒帯ラベル、細い引き出し線、角の立った枠、吹き出しは角丸ピル - **温度感**: 明るい黄と冷たいグレーの対比。黒金のパートでは高級感が出る ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FCF768` | ブランドを代表するレモンイエロー地 | 14% | 画素の実測 | | `background` | `#DFE0E4` | 淡いグレーの基本地 | 20% | 画素の実測 | | `background-alt` | `#FAFEFE` | 方眼柄を入れる白っぽいグレー地 | 6% | 画素の実測 | | `surface` | `#FDFDFD` | Q&A の回答カード | 8% | 画素の実測 | | `dark-section` | `#000001` | 黒金の成分訴求セクション | 10% | 画素の実測 | | `text` | `#292929` | 見出しと本文の黒文字 | 3% | 画素の実測 | | `on-dark` | `#F8F8F8` | 黒地の上の白文字 | 1% | 画素の実測 | | `accent-1` | `#E3AD5B` | 見出しの一部に使う金のグラデーション文字・金ラベル | 1% | 画素の実測 | | `accent-2` | `#5ED9D0` | 成分名のミントグリーン文字 | 0% | 推定 | | `secondary` | `#010101` | 見出しラベル・STEP ラベルの黒帯 | 2% | 画素の実測 | | `tint-1` | `#FAE9AF` | 使い方カードの淡いクリーム地 | 2% | 画素の主要色に補正 | | `marker` | `#FDFD6B` | 表見出しや番号の黄色マーカー | 1% | 画素の実測 | | `line` | `#555555` | 表の区切り線と引き出し線 | 0% | 推定 | | `accent-3` | `#BCC7CC` | 見出しキーワード下の淡い紺のマーカー | 0% | 画素の主要色に補正 | - 地は淡いグレーとレモンイエローを交互に使う。 - 中盤の技術説明は黒地にして、金の光の筋で高級感を出す。 - 見出しの一部の文字だけ金のグラデーションにする。 - 小見出しは黒帯に白文字のラベルにする。 - 黄色マーカーは表見出し・番号・注意枠に限って使う。 - Q&A は黄色地に白カードと黒枠で組む。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きキャッチ・大見出し | ゴシック | Zen Kaku Gothic New | 900 | 44px | 1.25 | 0.02em | | `headline-lg` | セクションの大見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.02em | | `headline-md` | 見出し上のリード文 | ゴシック | Noto Sans JP | 500 | 19px | 1.5 | 0.03em | | `accent` | POINT 番号や英字ラベル | 欧文サンセリフ | Montserrat | 400 | 22px | 1.2 | 0.02em | | `headline-sm` | 大きな数字の表示 | 欧文セリフ | Playfair Display | 900 | 90px | 1.0 | -0.02em | | `body-md` | 本文・回答・表の行 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.4 | 0.0em | | `label-button` | 黒帯ラベル・STEP ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.03em | - 見出しは極太ゴシックにし、キーワード数文字だけを金のグラデーションにする。 - 見出しの上に英字ラベル（POINT.1 など）を細めの欧文で置く。 - 数字は太いセリフ体で画面幅の半分以上の大きさにし、% は小さく添える。 - 成分名やキャッチには※の上付き注釈を必ず付ける。 - 注釈は 9px 前後で、ブロックの直下にまとめて置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分タグは 2 列、植物の写真は 3 列。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - 写真とビジュアルは全幅で見せ、テキストは中央揃えにする。 - 成分の説明は写真の上に引き出し線と黒帯ラベルを重ねる。 - 表は左に項目、右に太字の % を置き、細い罫線で区切る。 - Q&A は全幅の 90% の枠で、Q 行と A 行を上下に並べる。 ## Elevation & Depth - 影はほぼ使わず、平面とフラットな枠で構成する。 - 立体感は写真の光沢とカプセルの CG で出す。 - 黒地では金の光の筋で奥行きを出す。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の長方形。成分写真は角丸なしの四角形にする。 - **セクション境界**: 背景色を直線で切り替える。グラデーションでぼかす箇所もある。 - ラベル・カード・Q&A 枠は角丸を付けない。 - 悩みの吹き出しだけは角丸の大きいピル型にし、しっぽを付ける。 - フリー成分は円形に斜線を入れたアイコンにする。 - RECOMMEND の見出しは、角を斜めに切ったタブ型の線にする。 ## Components - **黒帯ラベル**（`label-black`）: 成分名や効果を示す黒地に白文字の四角いラベル。引き出し線とセットで使う。 - **悩み吹き出し**（`speech-worry`）: 白地に黒線のピル型の吹き出し。左右に互い違いに 5 つ並べる。 - **実感度テーブル**（`stat-table`）: 黄色マーカーの見出し行と、項目・大きな % の行を罫線で区切る表。 - **金ラベル**（`gold-label`）: 黒地のセクションで使う、金の地に黒文字のサブコピー帯。 - **番号付きおすすめリスト**（`recommend-list`）: 黄色の四角い番号と点線の区切りで 4 項目を並べる。 - **使い方のステップ**（`step-card`）: クリーム地のカードに黒い STEP ラベルと説明文を置き、罫線で区切る。最後に黄色の注意枠を置く。 - **Q&A アコーディオン**（`faq-accordion`）: 黒枠の Q 行（白い Q 四角と右側にシェブロン）と白い A カード（黄色の A 四角）を組み合わせる。 - **フリー成分の円**（`free-circle`）: 黒線の円の中に成分名を入れ、斜線を重ねる。3 個と 2 個で並べる。 ## Do's and Don'ts **Do** - 黄色・グレー・黒の 3 種類の地を交互に入れて、リズムを作る。 - 成分ごとに引き出し線と黒帯ラベルで写真に注釈を付ける。 - 実感度などの数字は極太のセリフで大きく見せる。 - 全ての効果表現に※注釈を添える。 - 見出しのキーワードだけを金のグラデーションにする。 **Don't** - ラベルやカードを角丸にしすぎない（吹き出しは例外）。 - パステル色やピンクを地の色に使わない。 - 影の強いカードやボタンで立体感を出さない。 - 明朝体を見出しに使わない。 - 黒地のセクションに黄色を広く敷かない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と主要成分を一目で伝える）: 淡い紫グレーの地に泡と商品を置く。縦書きの極太キャッチと、成分ラベルを引き出し線で添える。 2. **悩みの提起**（共感を得る）: 方眼柄の地に見出しを置き、5 つの悩みを吹き出しで互い違いに並べる。下向きのシェブロンで次へつなぐ。 3. **商品の紹介**（商品の成り立ちを示す）: 黄色地に 3 色のカプセルと商品を置き、配合率を引き出し線で示す。モデルの写真に縦書きの黒帯コピーを重ねる。 4. **テクスチャーと実感度**（使用感を数字で証明する）: 液体の大きな写真の上に大きな %、その下に実感度の表を置く。 5. **特長 1（黒金）**（核となる処方を訴求する）: 黒地に金の光の筋を入れ、カプセルの写真に成分の黒帯ラベルを重ねる。商品写真と保湿の図解も置く。 6. **特長 2**（浸透技術を説明する）: 水面調の白地に、2 列の効果別成分タグと肌層の CG を置き、大きな % で締める。 7. **特長 3・4**（処方のこだわりとやさしさを伝える）: 黄色地に液体が流れる写真と黒帯ラベルを置く。次にグレー地で植物の写真を 3 列に並べる。 8. **フリー成分**（安心感を出す）: 斜線入りの円を 5 個並べる。 9. **おすすめの方**（対象者を絞る）: 商品 3 本の写真と、番号付きのリストを置く。 10. **ライン使い**（併用商品を提案する）: 2 つの商品の写真に黄色のラベルと説明を引き出し線で付ける。 11. **使い方**（手順を示す）: 細い枠の上部に英字の見出しを置く。モデルの写真の下に STEP カードと注意枠を置く。 12. **よくある質問**（不安を解消する）: 黄色地に Q&A のアコーディオンを 6 個前後並べる。 ## Imagery - カプセルや液体のしずくを、光沢の強い CG 調で撮る。 - 商品は黄色い液体が透ける瓶にして、ホログラムのラベルを付ける。 - モデルは韓国系の素肌メイクで、目を閉じたツヤ肌のアップにする。 - 黒地には金の斜めの光の筋とガラスの破片風の装飾を入れる。 - 背景の泡、オーロラの反射、水面のゆらぎで透明感を出す。 - 成分の植物はアップで撮り、明るい自然光にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、中央 420〜480px のカラムを維持し、左右に地の色を延長することを推奨する。 - PC では成分タグを 4 列、植物の写真を 3 列で横幅を広げる。 - PC では大きな数字や見出しを 1.3 倍程度にとどめる。 - PC のファーストビューでは、商品とキャッチを左右に分ける。 ## 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-c2ead3d9`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/smart-cosme/c902s03/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。