--- version: alpha name: Aqua Bubble Clinical Skincare LP description: ターコイズと淡いラベンダー白を基調に、水滴・泡・ガラスの3D表現で透明感を出したシートマスクLP。細い罫線で区切ったPOINT見出し、筆記体の英字アクセント、グリッドの成分カードで、清潔さと根拠のある効き目を両方伝える。 colors: primary: '#2CC5DB' cta: '#00A1B9' on-cta: '#FFFFFF' background: '#EEF0FF' background-alt: '#F6FBFE' surface: '#FEFEFE' secondary: '#93DDDA' accent-1: '#2CC5DB' text: '#424246' text-body: '#4A4A4A' line: '#555555' tint-1: '#DFF2F8' accent-2: '#DC0201' text-muted: '#8A8F99' primary-accessible: '#177785' cta-accessible: '#008295' typography: display: fontFamily: Montserrat fontSize: 48px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Great Vibes fontSize: 40px fontWeight: 400 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 2px md: 6px lg: 10px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-heading: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 60px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 280px benefit-icon-tile: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 200px free-badge: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 64px step-number: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 40px purchase-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px accordion: textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px series-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 340px --- # DESIGN.md — 水色と泡が透ける清涼スキンケアLP（Aqua Bubble Clinical Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、クール・先進的、上品・高級、シンプル・ミニマル - **キーワード**: 透明感・水滴・泡・ターコイズ・細罫線・筆記体アクセント・成分訴求 - **地の質感**: ガラスや水面のつややかな反射。淡いグラデーションの地に半透明の球体が浮かぶ - **形**: 角の立った白カードに細い線を組み合わせる。丸は泡や成分アイコンだけに使う - **温度感**: 寒色寄りで涼しい。白とラベンダーで冷たくなりすぎないようにする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2CC5DB` | ブランドのターコイズ（見出し・数字） | 4% | 画素の主要色に補正 | | `cta` | `#00A1B9` | 購入ボタン・購入ボックスの見出し帯 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#EEF0FF` | ページの地（淡いラベンダー白） | 30% | 画素の実測 | | `background-alt` | `#F6FBFE` | 使い方セクションの淡い水色の地 | 10% | 画素の実測 | | `surface` | `#FEFEFE` | 成分カード・購入ボックス | 10% | 画素の実測 | | `secondary` | `#93DDDA` | ファーストビュー・購入エリアの水色の地 | 13% | 画素の実測 | | `accent-1` | `#2CC5DB` | 購入エリアの鮮やかなシアン | 9% | 画素の主要色に補正 | | `text` | `#424246` | 見出しの文字 | 2% | 画素の実測 | | `text-body` | `#4A4A4A` | 本文の文字 | 2% | 推定 | | `line` | `#555555` | POINT見出し・アコーディオンの罫線 | 0% | 推定 | | `tint-1` | `#DFF2F8` | POINT副題の淡い水色の帯 | 3% | 画素の主要色に補正 | | `accent-2` | `#DC0201` | AHA成分カードの赤 | 0% | 画素の実測 | | `text-muted` | `#8A8F99` | 注釈の文字 | 0% | 推定 | | `primary-accessible` | `#177785` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#008295` | AA を満たす補正値（計算） | | 計算 | - 地はラベンダー白（#EEF0FF）と淡い水色で、セクションごとに少しずつ変える - ターコイズは見出し・数字・筆記体アクセントに使い、本文には使わない - 濃い水色やシアンの面はファーストビューと購入エリアだけに使う - 購入ボタンは濃いめのターコイズに白文字。購入ボックスは白で浮かせる - 成分の写真に色を一点だけ入れる（例：赤）のは可。UIの色は増やさない - 関連商品はそれぞれの商品色の枠で区別してよい - `point-heading` は文字 `#2CC5DB` × 背景 `#DFF2F8` のコントラスト比が 1.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#177785`、4.53:1）を使う。 - `benefit-icon-tile` は文字 `#2CC5DB` × 背景 `#FEFEFE` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#177785`、4.54:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#00A1B9` のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#008295`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大きな数字の訴求 | 欧文サンセリフ | Montserrat | 300 | 48px | 1.1 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 500 | 22px | 1.5 | 0.08em | | `headline-md` | POINTの副題（ターコイズ） | ゴシック | Noto Sans JP | 500 | 18px | 1.5 | 0.12em | | `headline-sm` | 成分名・カードの見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.08em | | `note` | ※印の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | 筆記体の英字アクセント | 欧文スクリプト | Great Vibes | 400 | 40px | 1.1 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 14px | 1.4 | 0.1em | - 和文は細めのゴシックで、字間を広めにとる - 英字ラベルは「POINT 1 | 英語の短文」のように、縦線で区切って並べる - 筆記体の英字は見出しの下や写真の横に、ターコイズで添える - 成分名の右上に※番号を小さく付け、注釈はブロックの下にまとめる - 大きな数字は細いウェイトのターコイズにし、小さな筆記体と組み合わせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分カードは2列、効能は2列×2段 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - POINT見出しは上下の細罫線で挟み、幅いっぱいに置く - 成分カードは写真を上、文字を下にする。写真の横に筆記体を縦に置く - 使い方は線画のイラストと、線の上に乗った番号を組み合わせて4ステップ - 購入エリアは、シアンの写真背景の上に白い購入ボックスを重ねる - セクションの間はたっぷり空け、泡のオブジェクトを余白に浮かべる ## Elevation & Depth - カードや購入ボックスは影をつけず、白い面と地の色の差で浮かせる - 泡やガラス球には光沢と透明感を出し、立体的に見せる - 商品写真には反射と柔らかい影をつけ、ガラスの台に置いたように見せる ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。 - **写真の切り抜き**: 成分写真は正方形〜横長の長方形。人物は顔を寄りで切り抜く。商品は角版の写真か切り抜き - **セクション境界**: 直線で区切る。セクションの境目に泡やガラス球をまたがせる - 購入ボタンは角丸が小さい長方形 - 成分アイコンは円の中に線画のしずく - 低刺激の特長は細線の円の中に斜線と文字を入れる - 一覧へ戻るボタンだけピル型の枠線にする ## Components - **POINT見出し**（`point-heading`）: 上下の細罫線に「POINT 番号 | 英語」を挟み、下に淡い水色の帯とターコイズの副題を置く - **成分カード**（`ingredient-card`）: 白いカードの上に成分のマクロ写真、下に成分名と本文。横に筆記体の英字を縦に添える - **効能アイコンタイル**（`benefit-icon-tile`）: 写真の上に、効能ラベル付きの丸いしずくアイコンを重ねたタイル。下に成分名 - **無添加バッジ**（`free-badge`）: 細線の円に斜線を入れ、中に無配合の項目を書く。横に4つ並べる - **使い方ステップ**（`step-number`）: 線画イラストの下に、ターコイズの横線とその中央に乗る大きな数字 - **購入ボックス**（`purchase-box`）: 上部にターコイズの見出し帯、商品写真、割引バッジ、価格、ボタンを並べた白いボックス - **購入ボタン**（`button-primary`）: 幅いっぱいの濃いターコイズのボタンに白文字 - **情報アコーディオン**（`accordion`）: 下罫線だけの行。中央に項目名、右端に＋ - **関連商品カード**（`series-card`）: 商品の色の枠に、写真・商品名の帯・価格・詳細ボタンを入れたカード ## Do's and Don'ts **Do** - 泡・水滴・ガラスで透明感を全体に通す - 見出しに筆記体の英字を添え、上品さを出す - 成分の根拠は※注釈で丁寧に示す - 余白を広めにとり、一つの画面に一つの要素を見せる - 購入ボックスは白で目立たせ、ボタンはターコイズで統一する **Don't** - 暖色の太い文字や、ギラついた赤い強調で煽らない - カードに重い影や太い枠線をつけない - ピル型のポップなボタンを多用しない - 本文を太字やターコイズでベタ塗りしない - テクスチャのない真っ白な地を続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と効能を一目で伝える）: 水色の地にガラスの台と球を置き、商品パッケージを中央に。上にロゴとキャッチ、右に円形の効能バッジ 2. **悩みの提起**（肌の悩みへの共感を得る）: 左に短い見出しと説明、右にマスクを着けた横顔の写真。背景に大きな英字を透かす 3. **成分の導入**（成分へ話をつなぐ）: 宙に浮かぶ商品と泡、曲線。下に見出しと筆記体の英字 4. **特長1（成分）**（主な成分の働きを説明する）: POINT見出しの下に、2列の成分カード 5. **特長2（保湿成分）**（保湿・整肌の成分を並べる）: POINT見出しの下に、アイコン付きの写真タイルを4つ並べる 6. **特長3（シート）**（使い心地を伝える）: とろけるシートの写真、筆記体、構造の図解 7. **低刺激の訴求**（毎日使える安心感を伝える）: 大きな商品写真の下に大きな数字、短いコピー、無添加バッジ4つ 8. **使い方**（使う手順を伝える）: 枠付きのタイトルの下に、線画と番号で4ステップ。下に補足の白い帯 9. **購入**（定期購入と通常購入へ誘導する）: シアンの写真背景に商品、右に白い購入ボックスを2つ 10. **商品情報**（全成分や注意事項を補足する）: 罫線のアコーディオンを2行 11. **関連商品**（シリーズの他の商品へ回遊させる）: 色とりどりの商品とカラーボールの写真、筆記体の見出し、商品カード3枚、ピル型のリンク ## Imagery - 商品は水面やガラスの台に置き、青白い光の反射を入れて撮る - 成分は水滴・ジェル・泡のマクロ写真。白〜水色のトーンでそろえる - 背景にCGの半透明の球体や、細い曲線を浮かべる - 手順は細い黒の線画の人物に、ターコイズの部分色を入れる - 人物は肌の質感が伝わる、白背景での顔の寄り - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央480px相当の幅で、背景だけ全幅にする構成。SPでもほぼ同じ組み方にする - SPの成分カードは2列のまま。文字が窮屈なら1列にする - 効能タイルはPCの4列から、SPでは2列×2段にする - 購入エリアはSPでは商品写真を上、購入ボックスを下に縦に積む - 関連商品カードは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-d62aa098`（元 LP の URL から採番） - **元 LP**: https://lululun.com/shop/products/hydraazs-2410 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。