--- version: alpha name: Fresh Lime Green Cosmetic Serum LP description: 鮮やかなライムグリーンと淡いミントの地、グレーの光沢面を交互に置くまつ毛美容液の縦長LP。見出しは明朝体、説明はゴシック体で、清潔さと上品さを両立させている。成分を丸いバッジにし、注釈を細かく添えて信頼感を出す。 colors: primary: '#66E63C' secondary: '#A6F65B' background: '#FFFFFF' background-alt: '#F2FEE6' tint-1: '#D6D6D6' dark-section: '#42535D' on-dark: '#E4EEF1' text: '#3A4246' accent-1: '#1E4912' cta: '#EA581E' line: '#AEE575' marker: '#B0EE6C' text-muted: '#6B6E70' accent-2: '#C9A464' cta-accessible: '#CA4713' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.12em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Cormorant Garamond fontSize: 32px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px name-band: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 72px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 40px ingredient-circle: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 100px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 150px free-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px step-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 90px price-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.cta}' typography: '{typography.display}' height: 420px laurel-stat: textColor: '{colors.text}' typography: '{typography.accent}' height: 110px --- # DESIGN.md — ライムグリーン×明朝の美容液 LP（Fresh Lime Green Cosmetic Serum LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、ナチュラル、上品・高級、情報量多め・訴求型 - **キーワード**: ライムグリーン・ミントグラデーション・明朝見出し・円形成分バッジ・線囲みカード・注釈多め - **地の質感**: 白地にミント色のやわらかなグラデーションと、グレーの光沢スタジオ背景を重ねたつややかな質感 - **形**: 円形バッジ、片側だけ丸いピル帯、細い緑線の四角枠、斜めのストライプ装飾 - **温度感**: 爽やかで少しクール。自然素材の温かみも感じさせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#66E63C` | ブランドのライムグリーン（FVの地・バッジ） | 14% | 画素の実測 | | `secondary` | `#A6F65B` | 製品本体の黄緑・ピル帯 | 6% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#F2FEE6` | 淡いミントのセクション地 | 12% | 画素の実測 | | `tint-1` | `#D6D6D6` | グレーの光沢スタジオ地 | 9% | 画素の実測 | | `dark-section` | `#42535D` | 料金見出しの濃紺グレー帯 | 2% | 画素の実測 | | `on-dark` | `#E4EEF1` | 濃色帯の上の白文字 | 1% | 画素の実測 | | `text` | `#3A4246` | 見出しの濃いグレー | 3% | 画素の実測 | | `accent-1` | `#1E4912` | 強調見出しの深緑 | 1% | 画素の実測 | | `cta` | `#EA581E` | 価格強調のオレンジ | 1% | 画素の実測 | | `line` | `#AEE575` | カード枠の緑線 | 1% | 画素の実測 | | `marker` | `#B0EE6C` | キーワード下のマーカー帯 | 1% | 画素の主要色に補正 | | `text-muted` | `#6B6E70` | 注釈の灰色文字 | 1% | 推定 | | `accent-2` | `#C9A464` | 月桂冠実績の金色 | 1% | 推定 | | `cta-accessible` | `#CA4713` | AA を満たす補正値（計算） | | 計算 | - 地の色は白・淡いミント・グレー光沢の3種類を交互に置き、セクションの切れ目をつくる - ライムグリーンの全面塗りはFVと『フリー設計』『レビュー』など要所だけにする - 強調語はライムのマーカー帯や塗り帯にのせ、文字は深緑か濃いグレーにする - オレンジは価格と割引率にだけ使う - 注釈は灰色の小さい文字で、各セクションの右下か下にまとめる - 実績の数値は金色の月桂冠と組み合わせて見せる - `price-block` は文字 `#EA581E` × 背景 `#F2FEE6` のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CA4713`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ・セクション大見出し | 明朝 | Shippori Mincho | 600 | 36px | 1.3 | 0.08em | | `headline-lg` | セクション見出し（数字+テーマ） | 明朝 | Shippori Mincho | 500 | 30px | 1.3 | 0.12em | | `headline-md` | マーカー付きの強調見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.04em | | `headline-sm` | カードのタイトル・リード文 | ゴシック | Zen Kaku Gothic New | 500 | 17px | 1.6 | 0.03em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.02em | | `note` | 注釈・成分表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 英字ロゴ風の見出し・数値 | 欧文セリフ | Cormorant Garamond | 600 | 32px | 1.1 | 0.02em | | `label-button` | STEP・Point・User Voiceのラベル | 欧文サンセリフ | Montserrat | 700 | 13px | 1.2 | 0.04em | - 大見出しは明朝で字間を広めにとり、上品な印象にする - 『4つの』のような数字の前置きは、小さいピル帯にのせて見出しの上に置く - 訴求の要点はゴシック太字にし、マーカー帯を敷く - 説明文は中央揃えで、短い行で改行する - 注釈番号は上付きの小さい文字にする - 価格は欧文の数字を非常に大きくし、オレンジで目立たせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長カードだけ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - セクションごとに地の色を全幅で切り替える - 白いカードを淡色の地の上に余白を残して置く - 製品写真と文字を左右に分け、ずらして配置する - 注釈はセクションの最下部に右寄せか左寄せでまとめる - 成分は円形バッジを3つ横並びにし、少し重ねる - 使い方は STEP 番号の円＋線画イラスト＋説明文の横長行にする ## Elevation & Depth - 影はほぼ使わず、フラットな面と細い線で構成する - 製品写真にだけ自然な落ち影をつける - 白カードは影なしで、地色との差だけで浮かせる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 製品は切り抜き。人物は四角。目元のアップは円形に切り抜き、緑の縁をつける - **セクション境界**: 基本は直線で切り替える。ライムの面には斜めストライプや斜めの帯を装飾に入れる - ラベル類は完全なピル型にする - 商品名の帯は右端だけ大きく丸める - カードは角丸を小さくし、緑の細い線で囲む - 成分やフリー表記は正円バッジにする ## Components - **数字ピルラベル**（`pill-label`）: 見出しの上に置く、ライムの塗りのピル型ラベル - **商品名ピル帯**（`name-band`）: 片側が丸い黄緑の帯で、カテゴリ名と英字の商品名をのせる - **マーカー見出し**（`marker-heading`）: 要点の文字の下に黄緑のマーカー帯を敷く - **成分円バッジ**（`ingredient-circle`）: 淡い緑の正円を少し重ねて横に並べ、成分名を大きく入れる - **特長カード**（`feature-card`）: 緑の線で囲んだ2列の白カード。タイトル、小さいアイコン、説明文を入れる - **フリー表記円**（`free-circle`）: ライムの正円に白文字と斜め線をのせ、3つと2つで並べる - **使い方STEP行**（`step-row`）: 左端に緑の番号円を置き、線画イラストと説明文を緑線の枠で囲む - **価格ブロック**（`price-block`）: 濃色の帯見出しの下に、通常価格の取り消し線、金色の割引バッジ、オレンジの特大価格を並べる - **月桂冠実績**（`laurel-stat`）: 金色の月桂冠の中に満足度などの割合を大きく入れる ## Do's and Don'ts **Do** - ライム、ミント、白、グレーの4つの地色だけで構成する - 見出しは明朝、説明はゴシックと使い分ける - 表現の根拠になる注釈番号と注釈文を必ず添える - 製品写真は光沢のある白・グレー背景か、ライムの背景で撮る - 数字を前置きにした見出しで情報を区切る **Don't** - ピンクや紫など、緑系と合わない彩度の高い色を入れない - オレンジを価格以外に使わない - 太いドロップシャドウや立体的なボタンにしない - ポップな丸ゴシックで見出しを作らない - 注釈を省略しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と効果を一目で伝え、受賞実績を見せる）: ライムの全面に白い斜めストライプを入れる。明朝の大きなキャッチ、斜めに置いた製品写真、右上に金色の受賞メダルを配置する 2. **商品紹介**（商品が何かを改めて伝える）: グレーの光沢背景に製品を置き、斜めの英字見出しとキャッチ、商品名のピル帯を添える 3. **SNSでの話題**（SNSでの拡散を見せて社会的証明にする）: ライムの地に投稿のスクリーンショットを3列×2段で、少し傾けて並べる 4. **技術・成分訴求**（独自技術と希少な成分を説明する）: ミントのグラデーション地に、リード文、マーカー見出し、成分写真を置く 5. **作用説明**（浸透と保護のイメージを伝える）: 白カードの中に、文章と円形に切り抜いた目元のアップを並べる 6. **配合成分**（補助成分の配合を見せる）: 重ねた円バッジを3つ並べ、その下に大きな見出しを置く 7. **こだわりポイント**（特長を4つに整理して見せる）: 数字のピルラベルと明朝見出しの下に、緑線の2×2カードを並べる 8. **フリー設計**（無添加であることを示して安心感を出す）: ライムの円を5つ置き、プラス記号と緑線の枠で追加情報を添える 9. **成分ストーリー**（原料の背景を説明する）: 白カードの中に英字見出しと本文、右下に原料の写真を置く 10. **開発者の想い**（研究背景を伝えて権威性を出す）: グレーの地に、両側に線がついた明朝見出し、白衣の人物写真、名前の帯、本文を並べる 11. **お客様の声・満足度**（数値で実感を示す）: 金色の月桂冠に入れた割合を3つ、製品写真と合わせて配置する 12. **使い方**（正しい使い方を示す）: Pointのラベル行のあとに、STEPの番号円、線画、説明文の3行を並べる 13. **価格・定期プラン**（お得さを伝えて購入を後押しする）: 濃色の帯見出し、製品写真、割引バッジ、オレンジの特大価格、注意書きの順に置く 14. **レビューキャンペーン**（購入後の特典を案内する）: ミントの地に緑線の枠を置き、緑のピル見出しとマーカー付きの特典、注意書きを入れる ## Imagery - 製品は真上や斜めから撮った光沢のあるスタジオ写真。テクスチャーのしずくを添える - 背景は白からグレーの柔らかなグラデーションか、ライムの単色にする - 原料のナッツや葉を切り抜いて製品の横に置く - 研究者は白衣で、明るい研究室の写真にする - 使い方は細い黒線の目のイラストに、緑のチップを描き足す - アイコンは小さいモノトーンの線画と点描にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央の幅480〜600pxにSPの構成をそのまま置き、左右はミントかグレーの地で埋める - 特長カードはPCで4列にしてもよい - 成分の円バッジやフリー表記の円は横一列に並べる - FVは製品写真とキャッチを左右に分けて配置する ## 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-a87eb982`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/mandom-shop/ku-001/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。