DESIGN.md — パール白×セージ緑の目元美容家電LP（Soft Pearl Sage Beauty Device LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実、清潔・爽やか
• キーワード: パール白・セージグリーン・シャンパンベージュ・明朝見出し・柔らかな光・癒やし
• 地の質感: 白〜淡いグレーのグラデーション地に、薄い光のにじみや波線模様を重ねる。マットで空気感のある質感。
• 形: 角が小さめの四角いカード、六角形のバッジ、細い罫線。全体に直線的で控えめ。
• 温度感: やや寒色寄りのニュートラル。ベージュの暖色で温熱を表現する。

Colors

• 地は白と淡いグレーを交互に使い、清潔感を保つ。
• セージ緑は監修者紹介や機能アイコン帯など、信頼を示す面に使う。
• ベージュは温熱や製品色の表現に限定する。
• 黒地に金文字は販売実績の帯だけに使う。
• 数値の強調だけにコーラルを使い、多用しない。
• 濃い色の帯の上の文字は白にする。
• supervisor-panel は文字 #E4F3F2 × 背景 #728179 のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#626F68、4.61:1）を使う。
• mode-label は文字 #A8AAAC × 背景 #FFFFFF のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#74777A、4.5:1）を使う。
• icon-grid-band は文字 #E4F3F2 × 背景 #728179 のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#626F68、4.61:1）を使う。

Typography

• 見出しも本文も明朝体を基本にし、上品さを出す。
• 大見出しは淡いグレーで大きく、字間を広めにとる。
• 英字の筆記体は飾りとして見出しに重ねる。
• 数値は金や明るいコーラルで大きくする。
• 注釈は小さなゴシック体でまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能カードは 3 列、モードや手順は 2 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• 見出しは中央揃え、本文は左揃えにする。
• 写真は端まで広げ、テキストをその上に重ねる。
• 機能は3列カード、手順は2×2のグリッドで並べる。
• 濃い色の帯で章を区切り、リズムをつくる。

Elevation & Depth

• カードには薄い影（0 4px 12px rgba(0,0,0,.08)）をつける。
• 製品写真の下に柔らかい落ち影をつける。
• 六角形バッジは白地に淡い影で浮かせる。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形。人物は顔のアップ、製品は切り抜きで余白を多めに。
• セクション境界: 基本は直線。柔らかな波形やカーブも一部に使う。
• 角はほぼ立てる。
• 特長は六角形のバッジで4つ並べる。
• 見出し帯は細長い長方形にする。

Components

• 六角形の特長バッジ（hex-badge）: 白い六角形に明朝体の短い特長と英字の小キャプション。4つ横並び。
• 実績の帯（achievement-band）: 濃紺黒の地に金のグラデーション数字と月桂樹の飾り。
• 監修者パネル（supervisor-panel）: セージ緑の地に白の明朝見出し。白い枠に人物写真、筆記体英字を重ねる。
• 機能カード（feature-card）: 淡いグレーのカードに製品イラスト、見出し、2〜3行の説明。3列。
• 悩みチェックリスト（check-list）: 半透明の白い板に、丸いチェックアイコン付きの悩みを5行並べる。
• モード番号ラベル（mode-label）: 筆記体の番号付きグレー帯に、丸いアイコンを組み合わせて並べる。
• 機能アイコン帯（icon-grid-band）: セージ緑の地に白い線アイコンと短い説明を2行×3列で並べる。
• 使い方ステップ（step-card）: 筆記体の「Step」番号と罫線、写真、説明文を2×2で並べる。
• 写真上のキャプション帯（caption-bar）: 写真の下部に半透明の濃グレー帯を敷き、白文字の一文を載せる。

Do's and Don'ts

Do - 白とグレーの地を主にして、余白を広くとる。 - 見出しは明朝体で字間を広めにする。 - 人物写真は目を閉じたリラックスした表情を使う。 - 濃い色の帯は1画面に1つまでにし、リズムをつくる。 - 機能はアイコンと短い言葉で見せる。

Don't - 原色や蛍光色を使わない。 - 太いゴシック体で大きく叫ぶ見出しにしない。 - 角丸の強いポップなボタンや部品を使わない。 - 金色を実績以外に多用しない。 - 写真を暗く強いコントラストにしない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（製品と癒やしの価値を一目で伝える）: 淡い虹色の光の背景に、目を閉じた女性と製品写真。明朝コピーと4つの六角形バッジ。
2. 販売実績（人気で安心感を出す）: 濃紺黒の帯に、金の大きな数字と月桂樹。
3. 監修者紹介（専門家の監修で信頼を示す）: セージ緑の地に人物写真の枠と紹介文。
4. サウンド訴求（癒やしの体験を想像させる）: 白地に見出しと、自然風景の写真を2枚並べる。
5. 装着感（立体構造の快適さを伝える）: 顔のアップに縦書きの明朝コピーを左右に配置。
6. 悩みの提起（共感をつくる）: 人物写真の上にチェックリストと注意を促す一文。
7. 3つの機能（主な機能を説明する）: 3列の機能カードと、施術中の人物写真。
8. モード紹介（選べるモードを見せる）: 淡いグレーの大見出し、白い製品写真、番号付きのモード表。
9. 無線接続（音楽連携を伝える）: スマホを見る人物の写真と、認定マークの帯。
10. こだわり（設計の細部を伝える）: 製品の写真3枚と2行の説明。続けてセージ緑の機能アイコン帯。
11. 温熱訴求（速く温まることを強調する）: ベージュ系の地に製品をつけた人物。数値はコーラル。
12. 品質保証（保証とサポートで安心させる）: グレー帯に白い見出し板を2つ、保証の印章とアイコン。
13. 使い方（簡単さを示す）: 筆記体の見出しと、Step番号付きの写真を2×2で並べる。
14. 接続方法（設定手順を説明する）: スマホのイラストと、番号付きの4ステップリスト。

Imagery

• 白い服の女性が目を閉じてくつろぐ、明るくハイキーな写真。
• 製品は白またはシャンパン色の切り抜きで、柔らかい影をつける。
• 背景は淡い虹色の光や、白い波線のテクスチャー。
• 自然の音を表す鳥や渓流などの写真は、彩度を少しだけ高めにする。
• アイコンは細い線の白抜きで統一する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約750pxの固定幅でSPの構成を表示し、左右に淡いグレーの地を敷く。
• PC では機能カードやモード表を4〜5列に広げてもよい。
• 写真上のコピーはPCで左右に分けて配置する。
• 文字サイズはPCで約1.3倍にする。

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 行書くと起動時に読み込まれる。