--- version: alpha name: Golden Honey Skincare Cream LP description: マスタードゴールドと淡いクリーム色を交互に敷き、手書き風コピーと吹き出しで親しみを出したエイジングケアクリームの縦長 LP。受賞バッジ、悩みの吹き出し、番号付き特長、口コミ吹き出しで訴求を重ねる。 colors: primary: '#D9A501' secondary: '#C79F57' background: '#FFFFFF' background-alt: '#F2E4B3' tint-1: '#F7EFD9' tint-2: '#E5EEFD' accent-1: '#CBAA2F' accent-2: '#DBA402' accent-3: '#8B6C4C' marker: '#E3BD74' text: '#222222' on-primary: '#FEFBEC' line: '#333333' primary-accessible: '#8F6D01' accent-2-accessible: '#926D01' typography: display: fontFamily: Yomogi fontSize: 36px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.06em headline-sm: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.06em body-lg: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em accent: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 12px lg: 999px 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}' award-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 160px feature-medal: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px worry-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 70px point-number: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 56px review-bubble: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 120px ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 70px text-marker: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 20px down-arrow: backgroundColor: '{colors.primary}' height: 30px --- # DESIGN.md — 金色×クリーム地の上品スキンケア LP（Golden Honey Skincare Cream LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: ゴールド・クリーム色・吹き出し・手書き文字・受賞バッジ・つぶつぶ質感 - **地の質感**: マットな金色の面と淡い生成りの面を交互に敷く。写真は明るく柔らかい自然光。 - **形**: 円形バッジ、楕円の吹き出し、ひし形の番号、アーチ型の枠、下向き三角。 - **温度感**: 暖色寄り。金と黄みのクリームで温かく上品。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D9A501` | ブランドのマスタードゴールド面 | 9% | 画素の実測 | | `secondary` | `#C79F57` | FV の金色背景 | 9% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白背景 | 23% | 画素の実測 | | `background-alt` | `#F2E4B3` | 特長・使用法の淡いクリーム面 | 15% | 画素の実測 | | `tint-1` | `#F7EFD9` | 受賞セクションの薄いクリーム面 | 3% | 画素の主要色に補正 | | `tint-2` | `#E5EEFD` | 写真セクションの淡いグレー地 | 9% | 画素の実測 | | `accent-1` | `#CBAA2F` | 金色の見出し文字・番号 | 2% | 画素の実測 | | `accent-2` | `#DBA402` | 口コミ吹き出しの金茶面 | 4% | 画素の実測 | | `accent-3` | `#8B6C4C` | 写真上キャッチのブラウン文字 | 2% | 画素の主要色に補正 | | `marker` | `#E3BD74` | 本文中の金色マーカー | 1% | 画素の主要色に補正 | | `text` | `#222222` | 見出し・本文の黒文字 | 4% | 推定 | | `on-primary` | `#FEFBEC` | 金地の上の白文字 | 1% | 画素の実測 | | `line` | `#333333` | 吹き出し・評価枠の黒線 | 1% | 推定 | | `primary-accessible` | `#8F6D01` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#926D01` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡いクリーム・金色をセクションごとに交互に切り替える。 - 金色の面は FV と悩みセクションの枠に限定し、強い面は連続させない。 - 見出しと番号は金色文字、本文は黒に近い濃色で読みやすくする。 - 本文の要点は金色の薄いマーカーで 1〜2 箇所だけ強調する。 - 口コミ吹き出しは金茶塗り＋白文字と白地＋金線を交互に使う。 - 注釈は小さく金色または白で控えめに置く。 - `point-number` は文字 `#FEFBEC` × 背景 `#D9A501` のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8F6D01`、4.64:1）を使う。 - `review-bubble` は文字 `#FEFBEC` × 背景 `#DBA402` のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#926D01`、4.59:1）を使う。 - `ribbon-heading` は文字 `#FEFBEC` × 背景 `#D9A501` のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8F6D01`、4.64:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の手書き風キャッチ | 手書き・筆 | Yomogi | 400 | 36px | 1.3 | 0.05em | | `headline-lg` | セクション大見出し | 丸ゴシック | Zen Maru Gothic | 500 | 26px | 1.4 | 0.08em | | `headline-md` | 特長ポイントの見出し（金色） | 丸ゴシック | Zen Maru Gothic | 500 | 22px | 1.4 | 0.06em | | `headline-sm` | 小見出し・リード | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 15px | 1.9 | 0.06em | | `body-lg` | FV の縦書きコピー | 明朝 | Shippori Mincho | 600 | 18px | 1.5 | 0.1em | | `accent` | 吹き出し内の悩み・口コミ | 丸ゴシック | M PLUS Rounded 1c | 500 | 15px | 1.5 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - キャッチは手書き風の書体で斜めに入れ、動きを出す。 - 見出しは丸ゴシックで字間を広めにし、柔らかい印象にする。 - FV では白帯の上に縦書きの明朝を短く並べる。 - 注釈番号は上付きの小さい字で、ページ下部やブロック下にまとめる。 - 本文は 15px 前後、行間は 1.9 程度で詰めすぎない。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長は文章と画像を左右交互の 2 列に分ける - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに背景色を全幅で切り替える。 - 特長は左右交互の配置でジグザグに流す。 - 口コミは写真と吹き出しを左右交互に 6 組並べる。 - 悩みは円形写真の周りに吹き出しを散らす。 - 主要な見出しは中央揃え、本文は左揃えにする。 ## Elevation & Depth - 影はほぼ使わずフラットにまとめる。 - 受賞バッジ・成分の丸画像には柔らかい影を薄く付けてもよい。 - 立体感は写真の光と陰影で出す。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 人物は円形または角丸の四角に切り抜き、商品は背景ごと全幅で見せる - **セクション境界**: 基本は直線。特長部分では斜めの白帯で区切る。悩み部分はアーチ型の白枠 - 吹き出しは楕円形で、しっぽを付ける。 - 番号はひし形の金色の枠に数字と小さい英字ラベルを入れる。 - FV の特長は円形の白いメダル 3 つで見せる。 - 見出し帯はリボン型・アーチ型で飾る。 ## Components - **受賞バッジ**（`award-badge`）: 王冠と月桂樹付きの円形バッジに順位を大きく入れ、横に星評価の表を添える。 - **特長メダル**（`feature-medal`）: 金地の上に白い円を 3 つ並べ、短い特長と小さな画像・タグを入れる。 - **悩み吹き出し**（`worry-bubble`）: 白地に黒線の楕円吹き出しで悩みを 2 行の短い言葉で入れ、円形写真の周りに 7 つ散らす。 - **ポイント番号**（`point-number`）: 金色のひし形に大きな数字と英字ラベル。右に白帯の上に金色の見出しを置く。 - **口コミ吹き出し**（`review-bubble`）: 金茶塗り＋白文字と白地＋金線＋黒文字を交互に使う楕円吹き出し。写真と対で並べる。 - **リボン見出し**（`ribbon-heading`）: 金色のアーチ状リボンに白文字で見出しを入れ、上に金色の小さいリードを添える。 - **本文マーカー**（`text-marker`）: 本文の要点に金色の薄い帯を敷いて強調する。 - **下向き三角**（`down-arrow`）: 悩みから解決へつなぐ金色の大きな下向き三角。 ## Do's and Don'ts **Do** - 金・クリーム・白の 3 色を地に使い、温かく上品にまとめる。 - コピーは手書き風と丸ゴシックで柔らかさを出す。 - 訴求の根拠は受賞・星評価・成分画像で見せる。 - 吹き出しを多めに使い、利用者の声のような親しみを出す。 - 注釈番号と注釈文は必ず添える。 **Don't** - 青や原色の赤など寒色・強い色を主役にしない。 - 角ばった太いゴシックで威圧感を出さない。 - 金色の面を何セクションも続けて重くしない。 - 濃い影や光沢のグラデーションを多用しない。 - 注釈なしに効能を言い切る表現をしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と受賞実績を一目で伝える）: 金色の地に商品写真、手書き風の斜めキャッチ、縦書きコピー、右上に受賞バッジ、下に特長メダル 3 つ 2. **使用イメージ**（テクスチャの魅力を見せる）: 指でクリームを取る全幅写真の上に、ブラウン文字のキャッチと強調語を置く 3. **受賞・評価**（第三者評価で信頼を得る）: 淡いクリーム地に大きな受賞バッジと星評価の表、下にマーカー付き説明文 4. **悩みの提起**（ターゲットの肌悩みに共感する）: 金色地の中に白いアーチ枠、円形の人物写真の周りに悩みの吹き出しを 7 つ 5. **解決提示**（商品を解決策として示す）: 下向き三角、金色の見出し、短い文章 3 行、球体の小物と商品写真 6. **特長（3 ポイント）**（成分・浸透・使用感を説明する）: クリーム地にひし形番号と白帯見出し、文章と画像を左右交互に配置 7. **お客様の声**（実際の使用感を見せる）: 金色リボン見出し、人物写真と口コミ吹き出しを左右交互に 6 組 8. **使用方法**（使い方を簡潔に示す）: クリーム地に円形の人物写真と見出し・手順の文章 9. **締めのビジュアル**（使ってみたい気持ちを高める）: 蓋を開けた商品の全幅写真に、白帯の縦書きコピーを重ねる ## Imagery - 商品は白い容器と金の蓋。暖色の光で艶を出して撮る。 - テクスチャは指で取る様子やクリームの接写で見せる。 - 人物は 30〜40 代女性の素肌。頬に手を添えるポーズで柔らかく。 - 成分は植物・果実を白い円の中に置いたガラス玉風の画像。 - 口コミ写真は自然な自撮り風の明るい写真を角丸の四角で切る。 - 飾りは王冠・月桂樹・集中線のような手描きの短い線。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は SP 想定の縦長デザインを PC で中央に固定幅表示したもの。 - PC では本文幅を 480〜720px 程度の中央カラムに収め、左右は背景色を延長する。 - 特長と口コミの左右交互の配置は PC でもそのまま使う。 - 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-e39910d9`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/litsr-s001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。