--- version: alpha name: Soft Pink Bubbly Skincare Shaver LP description: 淡いピンクを基調に、泡やハート、雲形の吹き出しをちりばめたやさしい女性向けボディケア LP。大きな角丸パネルを重ねてセクションを区切る。後半は 4 タイプの製品ごとにミント・ピンク・オレンジ・ラベンダーへ地色を切り替えて色分けする。文字は紺、強調はピンク。CTA は黄色のピル型ボタン。 colors: primary: '#F292AE' background: '#FEF5F6' background-alt: '#F9D9DA' secondary: '#F2ABAF' surface: '#FFFFFF' cta: '#FED915' on-cta: '#1F2A3A' text: '#2E3D59' accent-1: '#E35E8E' accent-2: '#CFEFEA' accent-3: '#FEE7BB' tint-1: '#ECDEF5' dark-section: '#83C5E8' on-dark: '#FFF7FB' accent-1-accessible: '#DB306E' typography: display: fontFamily: Yusei Magic fontSize: 44px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Quicksand fontSize: 48px fontWeight: 700 lineHeight: 1.1 headline-md: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.06em body-md: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Quicksand fontSize: 44px fontWeight: 500 lineHeight: 1.0 label-button: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 12px md: 24px lg: 40px full: 999px spacing: unit: 8px card: 32px section: 64px 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: 60px point-label: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 48px highlight-band: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' height: 28px cloud-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 120px circle-callout: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 160px stat-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 480px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 420px type-tab: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 260px --- # DESIGN.md — 桜色と泡モチーフの女性向けシェーバー LP（Soft Pink Bubbly Skincare Shaver LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: かわいい、やさしい・柔らかい、清潔・爽やか、ポップ・元気 - **キーワード**: 淡ピンク・泡とハート・雲形吹き出し・大きな角丸パネル・タイプ別カラー・丸い手書き風見出し - **地の質感**: フラットな単色面。泡やシャボン玉の半透明素材を重ねて、みずみずしさを出す - **形**: 角丸 24〜40px の大きなパネル、ピル型ボタン、円形の成分写真、雲形・波形の境界 - **温度感**: 暖色寄りの柔らかいパステル。差し色にミントの寒色を使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F292AE` | ブランドピンク（訴求パネルの地） | 12% | 画素の実測 | | `background` | `#FEF5F6` | ページの淡ピンク地 | 20% | 画素の実測 | | `background-alt` | `#F9D9DA` | セクション地のピンク | 14% | 画素の実測 | | `secondary` | `#F2ABAF` | サーモンピンクの満足度パネル地 | 10% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード | 12% | 画素の実測 | | `cta` | `#FED915` | 購入ボタンの黄色 | 1% | 画素の実測 | | `on-cta` | `#1F2A3A` | CTA ボタン上の文字 | 0% | 推定 | | `text` | `#2E3D59` | 見出し・本文の紺 | 2% | 画素の実測 | | `accent-1` | `#E35E8E` | 強調ピンク（英字見出し・POINT 番号） | 2% | 画素の実測 | | `accent-2` | `#CFEFEA` | 敏感肌タイプのミント地 | 6% | 画素の実測 | | `accent-3` | `#FEE7BB` | つやすべ肌タイプのクリーム地 | 5% | 画素の実測 | | `tint-1` | `#ECDEF5` | ハリ肌タイプのラベンダー地 | 6% | 画素の実測 | | `dark-section` | `#83C5E8` | フッターの空色 | 3% | 画素の実測 | | `on-dark` | `#FFF7FB` | ピンク地・空色地の上の白文字 | 1% | 画素の実測 | | `accent-1-accessible` | `#DB306E` | AA を満たす補正値（計算） | | 計算 | - 地色は淡ピンク #FEF5F6 を基本にする。訴求パネルは濃いピンクやサーモンで塗り分ける - 濃いピンク地の上は白文字にし、キーワードだけ白帯の上にピンク文字で載せる - 淡い地や白カード上の見出し・本文は紺 #1C2C5B にする - 英字見出し・番号・吹き出し枠線は強調ピンクで統一する - 製品タイプごとに地色・見出し・枠線を同系色（ミント/ピンク/オレンジ/紫）でそろえる - CTA だけ黄色にして、ピンク系の中で目立たせる - `point-label` は文字 `#E35E8E` × 背景 `#FFFFFF` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DB306E`、4.51:1）を使う。 - `highlight-band` は文字 `#E35E8E` × 背景 `#FFFFFF` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DB306E`、4.51:1）を使う。 - `cloud-bubble` は文字 `#E35E8E` × 背景 `#FFFFFF` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DB306E`、4.51:1）を使う。 - `circle-callout` は文字 `#E35E8E` × 背景 `#FFFFFF` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DB306E`、4.51:1）を使う。 - `ingredient-card` は文字 `#E35E8E` × 背景 `#FFFFFF` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DB306E`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ（手書き風の丸文字） | 装飾・ディスプレイ | Yusei Magic | 700 | 44px | 1.3 | 0.02em | | `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Quicksand | 700 | 48px | 1.1 | 0.0em | | `headline-md` | 和文のセクション見出し・タイプ名 | 丸ゴシック | Zen Maru Gothic | 700 | 28px | 1.5 | 0.08em | | `headline-sm` | カード見出し・下線付き小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.7 | 0.06em | | `body-md` | 本文 | 丸ゴシック | Zen Maru Gothic | 500 | 15px | 2.0 | 0.1em | | `note` | 注釈・調査概要 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.02em | | `accent` | POINT・STEP の番号（中抜き数字） | 欧文サンセリフ | Quicksand | 500 | 44px | 1.0 | 0.0em | | `label-button` | ボタン文字・タブ | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.4 | 0.05em | - 全体に丸ゴシックを使い、字間は 0.06〜0.1em と広めにとる - 本文は中央揃えを基本にする。カード内の説明文は左揃えにする - 英字の大見出しのすぐ下に、小さな和文の読みを添える - 番号は輪郭線だけの中抜き数字にし、上に小さな英字ラベルを付ける - 小見出しには紺の細い下線を引く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分写真は 3 列、タイプタブは 2×2 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 32px（375px 幅換算） - パネルは左右 16〜20px の余白をとり、角丸で浮かせて重ねる - STEP カードは番号、見出し、本文、線画イラストの順に縦に積む - 吹き出しや円形の注釈は、製品写真の上に引き出し線で重ねる - 満足度はカードを 1 枚ずつ見せるスライダーにし、左右に矢印を置く ## Elevation & Depth - 影はほぼ使わず、色面の差で階層を出す - CTA ボタンだけ、下方向に淡い影を付ける - 成分カードは細い枠線と淡い色の地で区切る ## Shapes - **角丸**: 小 12px ／ 中 24px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 成分写真は円形に切り抜く。製品写真は背景を抜いた切り抜き - **セクション境界**: 大きな角丸パネルの下端で区切る。悩みセクションは雲・波形のカーブで区切る - 見出しラベルは白のピル型にする - 悩みは白い雲形の吹き出しで見せる - タイプ別カードは、上端に円形写真を半分はみ出させて載せる ## Components - **購入 CTA**（`button-primary`）: 黄色のピル型ボタン。ほぼ全幅で、販売サイトのロゴと購入の文字を載せる - **POINT 見出し**（`point-label`）: 中抜きのピンク数字と、白ピルの見出しを横に並べる - **キーワード白帯**（`highlight-band`）: ピンク地の本文中で、キーワードに白の帯を敷いてピンク文字にする - **雲形吹き出し**（`cloud-bubble`）: 悩みを 2 行の短い言葉で載せる白い雲形。小さな泡を添える - **円形注釈**（`circle-callout`）: ピンクの細い線の円の中に特徴を書き、引き出し線で製品写真を指す - **満足度カード**（`stat-card`）: 白カードに番号・設問・ドーナツグラフ・大きな % を並べる - **使い方 STEP カード**（`step-card`）: 白カードに中抜きの番号を重ね、見出し・本文・線画を載せる - **タイプ切替タブ**（`type-tab`）: 各タイプ色のピル型ボタン。右端に丸いシェブロンを付けて 2×2 に並べる - **成分カード**（`ingredient-card`）: タイプ色の枠線カード。上部に円形写真を重ね、成分名と箇条書きを中央揃えで載せる ## Do's and Don'ts **Do** - 淡いピンク地に大きな角丸パネルを重ね、セクションを柔らかく区切る - 泡・シャボン玉・ハートの素材を、余白にさりげなく散らす - タイプ別の情報は、色ごとに地・見出し・枠線をそろえる - 数字は中抜きの丸い欧文で、かわいく見せる - CTA は黄色のピル型ボタンに統一する **Don't** - 黒や濃いグレーの重い地色を使わない - 角張った四角いボックスや鋭い区切り線を使わない - 明朝体や細く硬い書体を使わない - ピンク地の本文に紺を使わない（白にする） - ドロップシャドウを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（使用シーンと商品の魅力を一目で伝える）: ピンクのタイル浴室の写真に、手書き風の大きなキャッチを重ねる。ハート形の新発売バッジ、No.1 の丸バッジ、4 タイプの製品並びを添える 2. **商品紹介**（リニューアルと独自構造を説明する）: 濃いピンクの角丸パネル。白文字の中央揃え本文に白帯の強調を入れ、4 製品の写真と CTA を置く 3. **悩みの提起**（悩みを短い言葉で 3 つ示す）: 波形で区切った淡い地に、雲形の吹き出しを散らして配置する 4. **解決提示**（商品を答えとして示す）: 紺の短い文に、ハートのバッジと大きなピンクの英字ロゴ風見出しを添える 5. **特長 POINT**（3 つの特長を説明する）: POINT 番号と白ピルの見出しを置く。円形の成分写真、引き出し線、円形注釈を使う 6. **満足度**（調査データで裏付ける）: サーモン地に、ドーナツグラフの白カードをスライダーで並べ、下に注釈を置く 7. **使い方**（手順を 4 ステップで示す）: 英字見出しの下に、STEP 番号付きの白カードと線画イラストを縦に並べる 8. **ラインナップ**（タイプ別に製品と成分を紹介する）: 2×2 の色付きタブを置き、タイプ色の角丸パネルを順に重ねる。各パネルに製品と成分カードを載せる 9. **CTA**（購入へ誘導する）: 最後のタイプパネルの下に、黄色のピル型ボタンを置く 10. **注釈・フッター**（注釈と SNS 導線を載せる）: ピンク地に番号付きの注釈を並べる。続く空色のフッターに白文字・SNS アイコン・メール導線を置く ## Imagery - 製品は背景を抜いて大きく配置し、泡をまとわせる - 成分は自然光の植物やオイルのクローズアップを円形に切り抜く - 使い方はミント色を差し色にした、細い線画のイラストにする - ハートやシャボン玉は、虹色に光る半透明の 3D 素材にする - 人物写真は脚や腕など体の一部だけを、明るいパステルの空間で撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では、商品紹介を写真とテキストの左右 2 カラムにする - 満足度カードは、PC では 3 枚を横に並べる - STEP カードは、PC ではテキストを左・イラストを右に置く横長にする - タイプ別パネルは、PC では製品写真を左・成分情報を右に置く - タイプタブは、PC では 4 つを横一列に並べる - フッターは、PC ではロゴ・SNS・メールを横に並べる ## 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-6346029b`（元 LP の URL から採番） - **元 LP**: https://schick.jp/pages/intuition - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。