--- version: alpha name: Airy Bubble Blue Skincare LP description: 白〜淡い水色の地に泡や水滴の写真を重ね、透明感を出すクレンジング系の LP。悩みのパートだけはグレーのコンクリート調に沈めて、明暗で話の流れを切り替える。価格の箱はピンクの数字と緑のピル型 CTA で目立たせる。 colors: primary: '#63A1D5' secondary: '#7EABD2' background: '#FEFFFF' background-alt: '#EDF6FC' surface: '#FCFDFD' cta: '#54AB4B' on-cta: '#F6FEF7' accent-1: '#DD6D84' accent-2: '#F3E7A0' dark-section: '#827E7C' on-dark: '#F8EDDA' text: '#444444' marker: '#FDF494' tint-1: '#F1E2C5' marker-alt: '#5A1A1A' cta-accessible: '#408239' accent-1-accessible: '#D23F5E' primary-accessible: '#3179B6' dark-section-accessible: '#6E6B69' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 18px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.15em label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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 price-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 480px band-heading: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 96px icon-circle: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px point-number: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 64px worry-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 56px bubble-word: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px review-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 400px --- # DESIGN.md — 泡と水色の透明感スキンケア LP（Airy Bubble Blue Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 透明感・泡・水色・細身の明朝・円形アイコン・明暗の切替 - **地の質感**: 泡・水滴を散らした淡い水色の地。悩みのパートはグレーのコンクリート調テクスチャ。 - **形**: 円形のアイコンバッジとシャボン玉風の円、四角の帯見出し、細い線の枠。 - **温度感**: 涼しく清潔。価格まわりだけピンクと緑で温度を上げる。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#63A1D5` | 帯見出し・定期コースのラベル | 6% | 画素の実測 | | `secondary` | `#7EABD2` | 価格セクションの地・くすんだ青 | 8% | 画素の実測 | | `background` | `#FEFFFF` | 基本の白地 | 20% | 画素の実測 | | `background-alt` | `#EDF6FC` | 淡い水色の泡の地 | 12% | 画素の実測 | | `surface` | `#FCFDFD` | 淡いグレーの地 | 9% | 画素の実測 | | `cta` | `#54AB4B` | 購入ボタン（緑のグラデーション） | 1% | 画素の実測 | | `on-cta` | `#F6FEF7` | ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#DD6D84` | 価格の数字・割引ラベル | 1% | 画素の実測 | | `accent-2` | `#F3E7A0` | 見出しの強調に使う淡い黄色 | 0% | 推定 | | `dark-section` | `#827E7C` | 悩みパートのグレー地 | 12% | 画素の主要色に補正 | | `on-dark` | `#F8EDDA` | 暗い地の上のベージュ文字 | 1% | 画素の実測 | | `text` | `#444444` | 見出し・本文の濃いグレー | 3% | 推定 | | `marker` | `#FDF494` | キーワードの下に引く黄色マーカー | 0% | 画素の実測 | | `tint-1` | `#F1E2C5` | 受賞パートのシャンパンゴールドの地 | 5% | 画素の実測 | | `marker-alt` | `#5A1A1A` | 警告帯の暗い赤 | 0% | 推定 | | `cta-accessible` | `#408239` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D23F5E` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#3179B6` | AA を満たす補正値（計算） | | 計算 | | `dark-section-accessible` | `#6E6B69` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い水色を交互に置き、全体を明るく透明に見せる。 - 悩みのパートだけグレーのテクスチャ地にして、ベージュの文字で暗く沈める。 - 青い帯見出しの文字は白。下に青の斜線ストライプを添える。 - ピンクは価格・割引・口コミの強調にだけ使う。 - 緑は購入 CTA 専用。ほかの部品には使わない。 - 受賞のパートはシャンパンゴールドの地に金のグラデーション文字を使う。 - `button-primary` は文字 `#F6FEF7` × 背景 `#54AB4B` のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#408239`、4.57:1）を使う。 - `price-box` は文字 `#DD6D84` × 背景 `#FEFFFF` のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D23F5E`、4.54:1）を使う。 - `icon-circle` は文字 `#63A1D5` × 背景 `#FCFDFD` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3179B6`、4.54:1）を使う。 - `point-number` は文字 `#63A1D5` × 背景 `#FEFFFF` のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3179B6`、4.55:1）を使う。 - `worry-label` は文字 `#F8EDDA` × 背景 `#827E7C` のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#6E6B69`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きキャッチ | 明朝 | Shippori Mincho | 500 | 44px | 1.2 | 0.1em | | `headline-lg` | セクションの大見出し | ゴシック | Zen Kaku Gothic New | 500 | 30px | 1.4 | 0.12em | | `headline-md` | 青い帯見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.08em | | `headline-sm` | 受賞・悩みの明朝見出し | 明朝 | Noto Serif JP | 700 | 24px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.08em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 英字ラベル・満足度の数字 | 欧文セリフ | Playfair Display | 400 | 18px | 1.2 | 0.15em | | `label-button` | CTA の文字 | ゴシック | Noto Sans JP | 700 | 22px | 1.2 | 0.05em | - 細めのゴシックや明朝を、字間を広めにとって組む。 - キーワードは水色や黄色に色を変え、サイズも 1.3 倍程度に上げる。 - 写真の上に置くキャッチは縦書きにし、白い短冊を敷く。 - 価格の数字はピンクで、ほかの文字の 3 倍以上の大きさにする。 - 英字ラベルは大文字のセリフ体で、字間を広くとる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイコンは 3 列、成分は 3 列、フリー処方は 4 列＋3 列。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - セクションごとに地の色を切り替えて区切る。 - 価格の箱は白地で、左に商品写真・右に価格を置く 2 分割。 - 特長は point 番号の円＋青帯見出しのセットで始める。 - 写真はほぼ全幅で使い、文字を重ねる。 - 注釈は各ブロックの右下に小さく添える。 ## Elevation & Depth - CTA ボタンは光沢のグラデーションとドロップシャドウで立体的に見せる。 - 円形アイコンは白の半透明にし、薄い影と細い弧線を添える。 - カードの影はほぼ使わない。区切りは細い線と地の色で行う。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物は角なしの全幅写真。成分・悩みのパーツは円形に切り抜く。 - **セクション境界**: 基本は直線。悩みのパートはグレー地を V 字（矢印形）に切る。 - バッジ・アイコンは円形を基本にする。 - 帯見出しは角なしの長方形にし、斜線ストライプの影を添える。 - 吹き出しは三角のしっぽ付きの角丸長方形。 - フリー処方は細い枠に斜線を引いた四角で表す。 ## Components - **緑の購入ボタン**（`button-primary`）: 光沢のある緑のピル型ボタン。右に丸い矢印、左上にピンクの円バッジを重ねる。 - **価格カード**（`price-box`）: 白地の箱に商品写真・通常価格・初回価格（ピンク大）・割引の吹き出し・条件ラベル 2 つを並べ、下に注釈を入れる。 - **青帯見出し**（`band-heading`）: 白文字の青い帯。右下に斜線ストライプ、上に白い吹き出しタブを添える。 - **円形特長アイコン**（`icon-circle`）: 白い半透明の円に青文字とアイコン線画を入れ、外側に破線の弧を添える。 - **ポイント番号**（`point-number`）: 細い線の円に英字の point と 2 桁の数字を入れ、帯見出しの左上に重ねる。 - **悩みラベル**（`worry-label`）: モノクロ写真の上に置く、半透明の黒い四角＋白い細枠＋白文字のラベル。 - **シャボン玉キーワード**（`bubble-word`）: 虹色の透明な泡の円にキーワードを入れ、× でつなぐ。 - **口コミスライダー**（`review-card`）: クリーム色のカードに写真と属性の円バッジを置く。本文の一部をピンク太字にし、左右に茶色の丸い矢印を付ける。 ## Do's and Don'ts **Do** - 地は白と淡い水色にし、泡や水滴の質感を散らす。 - 特長は円形アイコンで 3〜5 個並べる。 - 悩みのパートはモノクロ写真とグレー地で暗くしてから、明るい解決パートへ転換する。 - 価格カードと CTA は中盤と終盤の 2 か所に同じ形で置く。 - 数値の根拠や効果の範囲は、注釈で必ず添える。 **Don't** - 濃い原色の地を広く使わない。 - 緑を CTA 以外に使わない。 - 太く重い書体で埋め尽くさない。 - 角丸の大きいカードを多用しない（四角＋細線が基本）。 - 人物写真に強いコントラストの加工をかけない（悩みのパートを除く）。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と新しさを一目で伝える）: 泡の地に商品ボトルを斜めに置き、縦書き明朝のキャッチ・受賞バッジ・円形アイコン 4 つを配置。 2. **技術紹介**（微細な泡の特徴を示す）: 英字の枠付きラベル、数値を強調した見出し、使用シーンの写真。 3. **ベネフィット**（2 つの価値を提示する）: シャボン玉キーワードを × でつなぎ、人物写真を合わせる。 4. **オファー・CTA**（初回価格で購入を促す）: くすんだ青の地に、価格カードと緑の CTA。 5. **メディア掲載・受賞**（権威づけ）: 細枠の中に雑誌の写真。続けてゴールドの地に月桂冠の 1 位を 3 つとランキングのキャプチャ。 6. **悩みの提起**（共感を呼ぶ）: モノクロの顔写真に悩みラベルを散らし、暗い赤の警告帯を置く。 7. **原因の解説**（肌トラブルの仕組みを伝える）: グレー地にベージュの明朝で見出し。比較イラストのカード 2 枚と、トラブル 4 種のイラストを 2×2 で。 8. **結論・商品登場**（解決策を提示する）: 青い円の結論バッジと、縦書き短冊を載せた人物写真。ピンクの吹き出しで商品を登場させる。 9. **特長ポイント**（効果と成分を詳しく説明する）: 水色の枠内に point 番号＋青帯見出し、図解、円形の成分写真を 3 列で。 10. **使いやすさ・フリー処方**（安心感と便利さを伝える）: ×付きの円で悩みの解消を示し、青帯見出し・円形アイコン・泡の円・斜線入りの四角で無添加項目を並べる。 11. **開発ストーリー**（こだわりを伝える）: 実験器具の写真を薄く敷いた枠に、中央揃えの明朝で本文。 12. **クロージング CTA**（再度購入を促す）: 問いかけ見出しのあとに、価格カードと CTA を再掲。 13. **満足度・口コミ**（社会的証明）: 青の地にクリーム色の大きな円、中にピンクのイタリック数字で満足度。その下に口コミスライダー。 ## Imagery - 白〜淡い水色の背景に、ボトル・泡・水滴を俯瞰や斜めで撮る。 - 人物は 20〜30 代の女性。目を閉じる・頬に手を当てるなど、柔らかい表情で撮る。 - 悩みのパートの写真はモノクロにする。 - 肌の断面や悩みはフラットなパステル調のイラストで描く。 - 虹色に光る透明なシャボン玉を装飾に散らす。 - 成分は植物の花の写真を円形に切り抜く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC は中央 750px 前後の 1 カラムで SP のデザインを維持する。 - セクションの背景色は画面の全幅に広げる。 - 価格カードは PC で幅 640px 程度に収め、左に写真・右に価格の配置を保つ。 - 円形アイコンは PC で 1 行に並べる。 - 縦書きキャッチは 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-44b40bb7`（元 LP の URL から採番） - **元 LP**: https://lp.aster-one.com/lp/nanobubble_oa1/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。