DESIGN.md — くすみ青緑×ピーチの呼吸ガジェット定期 LP（Calm Pastel Breathing Device Subscription LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型、シンプル・ミニマル
• キーワード: くすみパステル・深呼吸・余白・定期購入訴求・ライフスタイル写真
• 地の質感: フラットな単色面と自然光の写真。素材感は少なめで、マットで軽い印象
• 形: 角丸の白カードとピル型見出しタグ。CTAは大きなピル型。円形の図解も使う
• 温度感: クールなブルーグレーを基調に、ピーチで温かみを足す中間〜やや涼しい温度感

Colors

• 地色は白・ブルーグレー・グレーグリーン・黒の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

• 本文は字間を広め（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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。