--- version: alpha name: Calm Pastel Breathing Device Subscription LP description: くすみブルーグレーと淡いピーチ・ミントのパステルを地にして、上品で落ち着いた雰囲気をつくる。そこへ黒い価格カード・赤い割引表示・緑のグラデーションCTAを入れ、定期購入へしっかり誘導する。上半分は静かなライフスタイル写真で見せ、下半分は情報量の多い訴求型にする二層構成。 colors: primary: '#526A82' secondary: '#6A8580' dark-section: '#262826' cta: '#3CCB1E' on-cta: '#FFFFFF' accent-1: '#F75151' tint-1: '#F4D0BA' tint-2: '#B7DBDB' background: '#FFFFFF' background-alt: '#FDEDED' text: '#020202' text-muted: '#6B7478' marker: '#F5E34A' line: '#C9DADB' cta-accessible: '#288814' accent-1-accessible: '#EC0B0B' typography: display: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 52px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 4px md: 10px lg: 20px 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: 86px price-card: backgroundColor: '{colors.dark-section}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 1100px discount-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px pill-label: textColor: '{colors.tint-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 48px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 170px alert-banner: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 110px review-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' height: 66px step-circle: backgroundColor: '{colors.text-muted}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 60px --- # DESIGN.md — くすみ青緑×ピーチの呼吸ガジェット定期 LP（Calm Pastel Breathing Device Subscription LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型、シンプル・ミニマル - **キーワード**: くすみパステル・深呼吸・余白・定期購入訴求・ライフスタイル写真 - **地の質感**: フラットな単色面と自然光の写真。素材感は少なめで、マットで軽い印象 - **形**: 角丸の白カードとピル型見出しタグ。CTAは大きなピル型。円形の図解も使う - **温度感**: クールなブルーグレーを基調に、ピーチで温かみを足す中間〜やや涼しい温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#526A82` | くすみブルーグレーの帯・セクション地 | 10% | 画素の実測 | | `secondary` | `#6A8580` | グレーグリーンの定期便セクション地 | 8% | 画素の実測 | | `dark-section` | `#262826` | 価格カードの黒い地 | 8% | 画素の実測 | | `cta` | `#3CCB1E` | 主CTAボタンの緑グラデ | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#F75151` | 価格・割引・強調の赤 | 2% | 画素の実測 | | `tint-1` | `#F4D0BA` | REST系のピーチ地 | 6% | 画素の実測 | | `tint-2` | `#B7DBDB` | POWER系のミント地 | 6% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 31% | 画素の実測 | | `background-alt` | `#FDEDED` | 口コミカードの淡いピンク | 2% | 画素の実測 | | `text` | `#020202` | 見出し・本文の黒 | 3% | 画素の実測 | | `text-muted` | `#6B7478` | アイコン・補足のグレー | 2% | 画素の実測 | | `marker` | `#F5E34A` | 黒地上の黄色い強調数字 | 0% | 推定 | | `line` | `#C9DADB` | FAQ区切り線 | 0% | 推定 | | `cta-accessible` | `#288814` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#EC0B0B` | AA を満たす補正値（計算） | | 計算 | - 地色は白・ブルーグレー・グレーグリーン・黒の4種をセクションごとに切り替える - リラックス系の訴求はピーチ、集中系の訴求はミントで色分けする - 価格ブロックだけは黒地にして、赤の価格と黄色の数字で目立たせる - 主CTAは鮮やかな緑のグラデーションにする。この色はCTA以外に使わない - 購入ブロックの背景はミント→ピーチの左右グラデーションにする - ラインナップごとのカラー帯（紺・銀・橙・赤・黄緑・深緑）は商品の識別にだけ使う - `button-primary` は文字 `#FFFFFF` × 背景 `#3CCB1E` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#288814`、4.54:1）を使う。 - `discount-badge` は文字 `#FFFFFF` × 背景 `#F75151` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#EC0B0B`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチコピー（写真上の白文字） | ゴシック | Noto Sans JP | 700 | 24px | 1.5 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.08em | | `headline-md` | カード見出し・タイムライン時刻 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 13px | 2.0 | 0.08em | | `note` | 注釈・調査条件 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.02em | | `accent` | 価格の大きな数字・英字ラベル | 欧文サンセリフ | Montserrat | 700 | 52px | 1.1 | 0.02em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 22px | 1.3 | 0.04em | - 本文は字間を広め（0.08em前後）にして、行間2.0でゆったり組む - 見出しは中央揃えの太字ゴシック。装飾は最小限 - 価格は数字だけを極端に大きくし、単位や（税込）は小さく添える - 英字ラベルは太い欧文を淡色の地に置き、ピル型の白タグに入れる - 写真上の文字は白抜きにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。機能アイコンは 3 列、特典カードは 2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは全幅の色面で区切り、中の白カードは左右12〜16pxの余白をとる - 素材写真は3枚を横に並べ、隙間なしで帯にする - 価格ブロックは角丸の黒い大カードにまとめて、ページ中で2回繰り返す - CTAは画面幅いっぱい近くまで広げ、左端に商品画像をはみ出させる - タイムラインは左に縦線と丸を置き、時刻と写真を交互に積む ## Elevation & Depth - 価格の黒カードには柔らかい影（0 4px 12px rgba(0,0,0,.25)） - ピル型英字タグには軽い影をつけて浮かせる - 通常の白カードは影なしのフラット - CTAは薄い外側の光彩で立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は四角のまま。素材写真は正方形に近い比率で並べる - **セクション境界**: 直線で色面を切り替える。カード内は白の破線で区切る - 枠線付きの白カードは角丸10pxで、線はグレー - ラベル見出しは角丸4pxの濃色ボックス - 図解は大きな円を左右に置き、矢印でつなぐ - 割引バッジは赤い正円 ## Components - **緑グラデのCTA**（`button-primary`）: 2行構成のピル型。左に商品画像がはみ出し、右端に矢印。2行目の一部を赤で強調 - **黒地の価格カード**（`price-card`）: 黒地の角丸大カード。色帯付きのフレーバーグリッド→取消線の通常価格→赤枠の定期価格の順に入る - **割引率の円バッジ**（`discount-badge`）: 赤い正円に白文字で割引率を入れ、価格の左に置く - **英字ピルタグ見出し**（`pill-label`）: 淡色の地に白いピル型を置き、その色の淡い大きな英字を入れる。右に成分ラベルを添える - **線画アイコンカード**（`feature-card`）: 白カードに見出し・線画アイコン・小さい説明を縦に並べる。2〜3列で使う - **注意喚起バナー**（`alert-banner`）: ブルーグレー地に警告アイコン付きの白見出しを置き、下に白枠の補足文を入れる - **口コミカード**（`review-card`）: 淡ピンクのカード。見出しと下線、左にイラストのアバター、右に本文。スライダー形式 - **FAQアコーディオン**（`faq-item`）: Q.と質問文を左に、＋を右に置く。行は細い線で区切る - **購入ステップ**（`step-circle`）: 3つの番号入り円を線でつなぐ。濃淡のグレーで段階を表す ## Do's and Don'ts **Do** - パステルは彩度を落としたくすみ色に統一する - 価格・割引の訴求は黒カードの中に集中させる - CTAは2〜3セクションごとに繰り返し置く - 写真は自然光で撮ったくつろぎの場面を使う - 商品バリエーションは色帯と成分×味の2行ラベルで並べる **Don't** - 緑のCTA色を見出しや装飾に使わない - ビビッドな原色を地色に使わない - 本文の字間を詰めない - 写真に強いフィルターや装飾枠をつけない - 1セクションに複数の地色を混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（くつろぎの世界観と受賞実績を伝える）: 青空と人物の全面写真に白抜きのコピーを上下2か所置く。右上に月桂冠バッジ 2. **ラインナップ・受賞**（色展開と信頼性を示す）: 白地に商品を6本並べる。その下にボケ緑の写真を敷き、受賞ロゴを3つ並べる 3. **商品紹介**（商品のコンセプトを説明する）: 英字見出しと中央揃えの本文。続けて商品を並べたイメージ写真 4. **注意喚起と価格オファー**（早めの購入を促し、定期価格を提示する）: ブルーグレーのバナー→グラデーション地に黒い価格カード→CTA→特典カード 5. **フレーバー系統の説明**（気分別に2系統を紹介する）: ピーチ・ミントの色面にピル型英字タグを置き、素材写真を3枚横に並べた帯 6. **権威付け**（専門家の推奨で信頼を得る）: 淡いグレー地に大きな円形エンブレムと注釈 7. **使い方**（手軽さを伝える）: グレー地に×印アイコンカードを3列並べ、回数を大きな数字で見せる 8. **フレーバー詳細スライダー**（味の個性を伝える）: 素材写真に大きな英字を重ね、下部にフレーバー色の帯と説明を入れる 9. **習慣化の図解**（使い分けの価値を見せる）: 左右のピーチ・ミントの大円を循環矢印でつなぎ、ゼロ訴求を3つ並べる 10. **1日のタイムライン**（使用シーンを具体的に見せる）: ブルーグレー地に縦線を引き、時刻と写真を4回繰り返す 11. **お客様の声**（共感と安心をつくる）: 淡ピンクの口コミカードをスライダーで見せる 12. **定期便の特典**（定期購入の不安を解消する）: グレーグリーン地に白カードを並べる（2列のアイコンカード） 13. **よくある質問**（疑問を解消する）: 白地に線区切りのアコーディオン 14. **最終オファーとステップ**（購入を締めくくる）: 価格カードを再掲し、番号円の3ステップを置く。最後に黒いフッター ## Imagery - 人物写真は自然光で撮り、目を閉じる・座ってくつろぐなど穏やかな表情や仕草を選ぶ - 生活シーンは木目と白を基調にした室内で、暖色の柔らかい光にする - 素材写真は果物・ハーブ・豆を真上か接写で撮り、明るく鮮やかにする - 商品は白背景に立てた状態で等間隔に並べる - アイコンは黒またはグレーの線画。赤をワンポイントに使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC版もSPと同じ1カラムの縦長構成で、中央に狭い幅で表示する - PCでは左右の余白に購入ブロックと同じミント→ピーチのグラデーションを敷く - PCでも文字サイズや部品の配置はSPとほぼ同じ比率 - カードの列数はSPと同じ（3列・2列）のまま ## 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-abdb3e70`（元 LP の URL から採番） - **元 LP**: https://breather-ston-lp.com/teiki/stons/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。