--- version: alpha name: Fresh Lime Green Eyelash Serum LP description: 鮮やかなライムグリーンと淡い若草色のグラデーション地に、チャコールの帯見出しとオレンジのピル型CTAを合わせたスキンケア通販LP。明朝の上品さとゴシックの読みやすさを併用し、成分訴求と定期価格訴求をくり返す構成。 colors: primary: '#68E63D' secondary: '#AAF75B' cta: '#FE7403' on-cta: '#FEFCF2' accent-1: '#ED5820' dark-section: '#425362' on-dark: '#EEF6F8' background: '#FFFFFF' background-alt: '#F2FEE6' tint-1: '#D9D9D9' text: '#3C454D' text-body: '#52504C' accent-2: '#C9A25A' accent-3: '#2E6B2A' cta-accessible: '#BE5601' accent-1-accessible: '#CC4410' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 62px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.02em label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px band-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 52px price-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 260px badge-circle: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 96px card-feature: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 220px label-pill: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px marker-copy: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 44px award-badge: textColor: '{colors.text}' typography: '{typography.accent}' height: 120px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 96px note-text: textColor: '{colors.text-body}' typography: '{typography.note}' height: 16px --- # DESIGN.md — ライムグリーン×チャコールのまつ毛美容液LP（Fresh Lime Green Eyelash Serum LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、ナチュラル、情報量多め・訴求型、上品・高級 - **キーワード**: ライムグリーン・若草グラデーション・チャコール帯・オレンジCTA・円形バッジ・細枠カード - **地の質感**: 白〜淡緑の柔らかいグラデーション地と水面のような淡い質感。マットな商品写真。 - **形**: 円形の成分バッジ、太い緑枠の角型カード、ピル型ボタン、斜めの緑ストライプ装飾。 - **温度感**: やや明るく爽やかな寒暖中間。緑の自然感にオレンジで温度を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#68E63D` | ブランドのライムグリーン（FV地・枠・バッジ） | 9% | 画素の実測 | | `secondary` | `#AAF75B` | 淡いライムの円形バッジ・枠線 | 4% | 画素の実測 | | `cta` | `#FE7403` | 購入ボタンのオレンジ | 2% | 画素の実測 | | `on-cta` | `#FEFCF2` | CTA上の白文字 | 0% | 画素の実測 | | `accent-1` | `#ED5820` | 価格数字の赤橙 | 1% | 画素の実測 | | `dark-section` | `#425362` | 定期プラン帯見出し・ラベル・フッター | 4% | 画素の実測 | | `on-dark` | `#EEF6F8` | チャコール帯上の白文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 29% | 画素の実測 | | `background-alt` | `#F2FEE6` | 淡い若草色の地 | 15% | 画素の実測 | | `tint-1` | `#D9D9D9` | 開発者セクションのグレー地 | 7% | 画素の実測 | | `text` | `#3C454D` | 見出しのチャコール文字 | 2% | 画素の実測 | | `text-body` | `#52504C` | 本文のダークグレー | 3% | 画素の主要色に補正 | | `accent-2` | `#C9A25A` | 満足度の金色月桂樹 | 1% | 推定 | | `accent-3` | `#2E6B2A` | 強調コピーの深緑文字 | 0% | 推定 | | `cta-accessible` | `#BE5601` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CC4410` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い若草色を交互に使い、ライムグリーンは枠・バッジ・FV面に限定する。 - 購入ボタンのみオレンジのグラデーションにし、他要素にオレンジを使わない。 - 価格の大きな数字は赤橙、割引率は白地バッジ＋金縁で目立たせる。 - セクション区切りの帯見出しはチャコール地に白文字で統一する。 - 本文はダークグレー、見出しはやや青みのチャコールを使う。 - 信頼系（調査結果）は金色の月桂樹で表現する。 - `button-primary` は文字 `#FEFCF2` × 背景 `#FE7403` のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BE5601`、4.52:1）を使う。 - `price-block` は文字 `#ED5820` × 背景 `#F2FEE6` のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CC4410`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ・セクション大見出し | 明朝 | Shippori Mincho | 600 | 34px | 1.3 | 0.08em | | `headline-lg` | 数字付きセクション見出し | 明朝 | Shippori Mincho | 500 | 28px | 1.4 | 0.12em | | `headline-md` | 帯見出し・強調コピー | ゴシック | Noto Sans JP | 500 | 24px | 1.4 | 0.1em | | `headline-sm` | カード見出し・リード | ゴシック | Noto Sans JP | 500 | 16px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.03em | | `note` | 成分注釈・購入注意 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 価格数字・割引率 | 欧文サンセリフ | Montserrat | 800 | 62px | 1.0 | -0.02em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 22px | 1.2 | 0.05em | - 情緒的な見出しは明朝、説明と価格はゴシック／太字サンセリフに分ける。 - 見出しは字間を広めにとり上品に見せる。 - 成分には上付きの注釈番号を付け、近くに小さな注釈を置く。 - 価格は数字を特大、円・税込を小さく右に添える。 - 本文は中央揃え短文で、行間を広くとる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長カードは 2 列グリッド。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 価格・CTAブロックはページ内で3回くり返す。 - 各ブロックの前にチャコールの帯見出しを全幅で置く。 - 白カードを淡緑グラデーション地の上に浮かせ、余白は左右6%程度。 - 成分バッジは円を3つ重ねて横並び。 - 使い方はSTEP番号＋イラスト＋文を横並びにした枠カードを縦積み。 ## Elevation & Depth - 白カードは影ほぼなし、細いグレー線の二重枠でずらして奥行きを出す。 - CTAボタンは下方向に柔らかい影＋光沢グラデーション。 - 割引バッジは金縁＋軽いドロップシャドウ。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜き。目元写真は円形クロップ。人物はスクエア写真を重ねてコラージュ。 - **セクション境界**: 直線の切り替え。一部に斜めのライム色の三角・帯装飾。 - 特長カードは角丸なしで太いライム枠。 - ラベル類（Point・STEP・小見出し）はピル型か円形のライム地。 - 強調コピーは下半分に蛍光グリーンのマーカー帯。 - フリー設計は斜線入りの円形バッジを並べる。 ## Components - **購入CTAボタン**（`button-primary`）: オレンジのグラデーションのピル型。左端に商品パッケージをはみ出して重ね、右に矢印。 - **帯見出し**（`band-heading`）: 全幅のチャコール帯に白文字の明朝/ゴシック見出し。 - **価格ブロック**（`price-block`）: 定価に取消線、金縁の割引率円バッジ、赤橙の特大価格、チャコールの定期初回ラベル。 - **成分円バッジ**（`badge-circle`）: 淡いライムの円を重ねて並べ、中に成分名を大きく表示。 - **こだわりカード**（`card-feature`）: 太いライム枠の白カード。見出しに細い下線、線画アイコン、短文説明。 - **ピル見出しラベル**（`label-pill`）: ライム地のピルに数字やカテゴリ英字を載せ、下に明朝見出し。 - **マーカー強調コピー**（`marker-copy`）: 白地に緑グラデーションのマーカーを敷いた強調一文。 - **満足度月桂樹**（`award-badge`）: 金色の月桂樹で数字%を囲む調査結果バッジを3つ三角配置。 - **使い方STEPカード**（`step-card`）: ライムの円にSTEP番号、線画イラスト、説明文を横並びにした細枠カード。 - **注釈**（`note-text`）: 各ブロック下に小さなグレー文字で成分の注釈を記載。 ## Do's and Don'ts **Do** - ライムグリーンは枠・バッジ・面装飾として面積を抑えて使う。 - 価格＋CTAはページ中に繰り返し配置する。 - 成分訴求には必ず注釈番号と注釈文を添える。 - 見出しは明朝で上品さを、本文はゴシックで読みやすさを出す。 - 白い余白を多めにとり清潔感を保つ。 **Don't** - オレンジをCTA・価格以外に使わない。 - 濃い緑の面を広く敷かない。 - カードに強い影や大きな角丸をつけない。 - 原色の赤や青を追加しない。 - 本文を長く左詰めで詰め込まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の印象とベネフィット提示）: ライムグリーン地に白の曲線ストライプ、斜めに置いた商品、明朝の大キャッチ。 2. **オファー（価格＋CTA）**（定期初回価格で購入を促す）: チャコール帯見出し、商品写真、割引バッジ、特大価格、オレンジCTA、注意書き。 3. **主成分紹介**（希少な原料をアピール）: 淡緑地に明朝リード、白地ラベル見出し、原料と商品の写真。 4. **効果説明**（浸透と保護の働きを伝える）: 白カードに短文、円形クロップの目元写真、マーカー強調コピー。 5. **配合成分**（補助成分の追加価値）: 吹き出しラベル、淡緑の円バッジ3連、深緑の強調コピー。 6. **こだわりポイント**（4つの特長を整理）: ピル数字ラベル＋明朝見出し、2×2のライム枠カードに線画アイコン。 7. **フリー設計**（無添加の安心感）: 斜めのライム装飾、斜線入り円バッジ5つ、プラス記号と補足の枠。 8. **商品紹介**（商品の再提示）: 淡い地に商品写真と斜めの英字筆記体、明朝キャッチ。 9. **原料の解説**（原料の背景を説明）: 緑グラデーション地に白カード、本文と原料写真。 10. **開発者の想い**（研究背景による信頼）: グレー地に白カード、線で挟む明朝見出し、白衣人物と研究室写真のコラージュ。 11. **お客様の声（調査結果）**（満足度データで後押し）: ピルの英字ラベル、商品写真と金の月桂樹バッジ3つ。 12. **使い方**（正しい使い方の案内）: グレー帯にPointラベル2行、STEP番号つき枠カード3段。 13. **フッター**（法定表記リンク）: チャコール地に白の小文字リンクを中央揃え。 ## Imagery - 商品はマットなライムグリーン容器を斜めに置き、柔らかい影の切り抜きで。 - テクスチャーのしずくや白いクリーム状の背景で潤い感を出す。 - 目元のクローズアップは円形クロップ。 - 研究者は白衣で明るい研究室、自然光。 - アイコンはグレーの単色線画・シルエット。 - 原料のナッツ実と葉を白地で切り抜く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 750px）のカラムを置き、左右を淡緑の地で埋める。 - PC でも 1 カラム構成を保ち、価格ブロックは横並びの比率を維持する。 - PC の特長カードは 4 列に広げてもよい。 - CTA ボタンの幅は最大 600px に抑える。 ## 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-3d6c8351`（元 LP の URL から採番） - **元 LP**: https://www.kukuilash.jp/lp01/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。