DESIGN.md — コーラル×セージの着圧インナー通販LP（Coral and Sage Body-Shaping Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、上品・高級、情報量多め・訴求型、清潔・爽やか
• キーワード: コーラルグラデーション・セージグリーン・明朝の大見出し・帯ラベル見出し・データ訴求・多様な体型
• 地の質感: 白〜淡いミント地に、水彩風の淡い有機曲線を重ねる。金のメダル風グラデーションで実績を見せる。
• 形: 角丸カード、ピル型の帯、アーチ型の写真フレーム、円グラフ、ドット区切り線
• 温度感: 暖色のコーラルと寒色のセージが半々の、中間的でやわらかい温度感

Colors

• 地は白と淡いミントを交互に使い、ところどころ淡いピンクやベージュの面を挟む
• コーラルはグラデーションの帯・ボックス・FAQ見出しに使う
• セージグリーンは見出しの帯とグラフの枠に使う
• 実績の数字は金のグラデーションパネルに限定する
• 倍率やUPなど一番伝えたい強調にだけピンクの円バッジを使う
• 悩みパートだけダークグレーにして、トーンを落とす
• badge-circle は文字 #FFFFFF × 背景 #DC5E89 のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D43A6F、4.53:1）を使う。

Typography

• 大見出しと数字は明朝。本文はゴシックにする
• 単位（%・hPa・cm）は数字の半分ほどの大きさにする
• 見出しの一部を帯で囲み、帯なしの一行と組み合わせる
• 英字の筆記体を見出しの背後に淡く重ねる
• 注釈は※番号付きの小さい文字でブロックの直下に置く
• 字間は広めにとり、上品に見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長ボックスやバッジは 3〜4 列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地色を切り替えて区切る
• POINT 01〜03 は番号・帯見出し・写真の順に同じ型で繰り返す
• カードは左右に 16px ほどの余白をとって中央に置く
• セクションの間を「さらに」「だから」のような短い接続語でつなぐ
• グラフとサイズ表は横幅いっぱいの角丸カードに入れる

Elevation & Depth

• カードは影を薄くするか使わず、細い枠線で区切る
• 実績パネルは金のグラデーションで立体感を出す
• 円形バッジにはごく弱い影をつける
• 回答の下はドットの罫線で区切る

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形、上が半円のアーチ型、円形
• セクション境界: 水彩風の有機曲線、または地色を直線で切り替える
• 小見出しはピル型のグラデーション帯にする
• コーディネート写真はアーチ型の枠に入れる
• 悩みはドット枠の円バッジを横に並べる
• 見出し帯は角丸を小さめにして平たい長方形にする

Components

• グラデーションのピル見出し（pill-heading）: コーラルのグラデーションで塗ったピル型に白文字を載せ、上に小さな英字ラベルを添える
• 帯見出し（band-heading）: セージまたは金の長方形の帯に明朝の白文字を入れ、帯なしの行と重ねて組む
• 特長ボックス3連（feature-box）: コーラルの四角を3つ並べ、数字を大きく出す
• ポイント番号（point-number）: 大きなセリフ数字に筆記体の英字を重ね、左右に細い線を引く
• 倍率バッジ（badge-circle）: ピンクの円の中に倍率と上昇を表す語を白抜きで入れる
• アンケート円グラフ（survey-donut）: ドーナツグラフの中央に質問を置き、右に回答の大きな%を明朝で表示する
• FAQアコーディオン（faq-item）: コーラルのグラデーション帯に白い質問文と丸い開閉アイコン。回答の下にドット線とAの文字を置く
• サイズ表（size-table）: サイズごとに色分けした見出しセルと、同じ色の淡い色をつけたセルで作る表
• 悩みの円チップ（trouble-chip）: ダーク地にドット枠の円を置き、中に短い悩みを白文字で入れる

Do's and Don'ts

Do - 見出しは明朝にし、帯で一部を強調する - コーラルとセージの2色を交互に使って画面のリズムを作る - 数値はグラフ・%・倍率で大きく見せる - 体型の違うモデルを横に並べて、多様性を示す - 表現を補う※注釈を必ず添える

Don't - 原色の赤や青のベタ塗りを使わない - 見出しを太いゴシックだけで作らない - 影の強いカードや立体的なボタンを使わない - 強調ピンクを多用しない - 背景を真っ白だけにして単調にしない

Page Structure

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

1. ファーストビュー（体型を問わず細く見えることと、実績を一目で伝える）: コーラルからミントへのグラデーション地に、明朝の大キャッチ、金のメダル風バッジ2つ、体型の違うモデルの集合写真を置く
2. 商品の要点（商品の特徴を短くまとめる）: 金の帯見出し、パッケージ写真、コーラルの特長ボックス3つ、注釈
3. 実績（販売数とランキングで信頼を得る）: 金のグラデーションパネルに月桂樹の飾りと大きな明朝の数字。下に通販モールのロゴを並べた白いカード
4. アンケート（悩みと需要をデータで示す）: セージの帯見出し、ドーナツグラフと%、理由を4色の縦長カードで並べる
5. 悩みの提起（従来品への不満に共感する）: グレーのコンクリート調の地に、黒帯で手書き風の文字、円チップ4つ
6. 開発の想い（悩みの解決へ話をつなぐ）: コーラルのグラデーション地に大きな明朝の見出しとモデル写真
7. ポイント1〜3（機能を順に解説する）: 番号見出し、帯見出し、写真に注記をつけた図解、メリットのカードを繰り返す
8. サイズ展開と保証（購入前の不安を減らす）: 生成り色のカードにモデル写真、色分けしたサイズ表、金の保証バナー
9. コーディネート（普段着での使い方を見せる）: アーチ型の枠に入れた写真カルーセル。サイズ・身長をラベルで添える
10. 比較試験（効果を数値で示す）: セージの見出しをつけた角丸カードに、グレーとコーラルの棒グラフとピンクの倍率バッジ
11. ライフスタイル訴求（毎日使いたくなる気持ちを引き出す）: モデル写真の上に、コーラルの縦書き大コピーボックスを重ねる
12. よくある質問（疑問を解消する）: コーラルのグラデーション帯の質問と、ドット線で区切った回答
13. サイズ早見表・商品詳細（仕様を確認できるようにする）: サイズ表をもう一度載せ、淡いミント地に大きな英字の透かし、中央揃えの仕様一覧

Imagery

• 白いスタジオか明るい室内で、ナチュラルな笑顔の女性モデルを撮る
• 体型の違う4人が並ぶ全身写真で、多様性を見せる
• ヨガのような伸びるポーズで、伸縮性を伝える
• 商品の写真に矢印・数値・点線の円を重ねて図解にする
• 背景に水彩風の淡い有機曲線と、紙吹雪のような飾りを置く
• 見出しの背後に筆記体の英字を透かしで入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の固定幅で SP のデザインを置き、左右は淡い地色で埋める
• PC でも 1 カラムの縦積みを保つ
• グラフとサイズ表は最大幅を決めて中央に置く
• カルーセルは PC では左右の矢印を大きくする

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