DESIGN.md — コーラル×セージの着圧インナー LP（Coral and Sage Soft Shapewear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: コーラルピンク・セージグリーン・細い明朝の数字・帯ラベル・淡いグラデーション・実績訴求
• 地の質感: 白〜生成りの地に、淡いピンクとミントの抽象的なにじみ・波形を重ねた柔らかい質感。
• 形: 角丸の帯ラベル、斜めにカットした見出し帯、角丸の枠カード、円グラフ、ドーナツ型の数値表示。
• 温度感: ややあたたかい（コーラル主体に、セージで落ち着かせる）

Colors

• 地は白・淡いミント・生成りピーチをセクションごとに切り替える。
• コーラルは帯ラベル・数値・強調ボタンに使い、面積は全体の1割程度に抑える。
• セージグリーンは見出し帯やグラフに使い、コーラルと交互に並べる。
• 悩みのセクションだけグレーの地に切り替え、落ち着いた空気をつくる。
• 実績・保証はゴールドのグラデで特別感を出す。
• 本文中の強調はコーラル系の文字色に変える。
• label-band は文字 #FFFFFF × 背景 #F79D87 のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DE370F、4.51:1）を使う。
• pill-tag は文字 #FFFFFF × 背景 #F79D87 のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DE370F、4.51:1）を使う。
• stat-badge は文字 #FFFFFF × 背景 #E8B060 のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A46A18、4.51:1）を使う。

Typography

• 大見出しは細めの明朝で、上品さを出す。
• 数値（%、hPa、番号）は欧文セリフで特大にし、単位は小さくする。
• 帯の中はゴシック太字の白抜きにする。
• 英字の筆記体は見出しの背後に薄く重ねる飾りとして使う。
• 主張の後には※を付け、セクション末尾に小さな注釈をまとめる。
• キャッチは2〜3行で、強調語だけ大きくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長の比較は 2〜4 列のミニカード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション冒頭は小さな英字キャプション、帯ラベル、明朝の見出しの順に縦に積む。
• 番号付きの特長は大きな数字、帯、見出しの順で構成する。
• 数値の訴求は円グラフと大きな%を左右に並べる。
• 商品写真の上に吹き出しラベルや矢印を重ねて説明する。
• 表やメリットは角丸枠のカードにまとめる。
• セクションのつなぎに「だから」「さらに」などの短い接続ラベルを入れる。

Elevation & Depth

• 基本はフラットで、影はほぼ使わない。
• 帯ラベルやバッジにはごく薄いドロップシャドウを付ける。
• 枠カードは影ではなく細い線と淡い地色で区切る。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜きか角丸の矩形。コーディネート写真はアーチ型に切り抜く。
• セクション境界: 柔らかな波形のにじみや斜めの帯で区切る。直線の境界は少なめにする。
• 帯ラベルは角丸の長方形かピル型にする。
• 見出し帯は片側を斜めにカットしてもよい。
• 悩みは丸いバッジを横に並べる。
• サイズ表は色違いのタブ見出しを付けた角丸のセルにする。

Components

• 帯ラベル（label-band）: コーラルかセージで塗った横長の帯に白抜き文字を入れた、見出しの部品。
• ピルタグ（pill-tag）: セクションの導入やつなぎに置くピル型のラベル。
• ポイント番号（point-number）: 細い欧文セリフの大きな番号に、筆記体の英字と横線を添える。
• アンケート円グラフ（survey-donut）: 左にドーナツグラフと質問、右に大きな%を置いて回答率を見せる。
• 実績バッジ（stat-badge）: ゴールドのグラデ地に月桂冠と大きな数字を置いた実績表示。
• 悩みの丸バッジ（worry-circle）: グレー地に、白文字の悩みを入れた円を4つ並べる。
• メリット枠カード（merit-card）: 細い線で囲んだ角丸の枠に、写真と小見出し・本文を左右交互に配置する。
• サイズ表（size-table）: 列ごとに色を変えたタブ見出しと、淡い色のセルで組んだ表。
• 保証ボックス（guarantee-box）: ゴールドの帯見出しと交換のイラストを並べた、保証の案内枠。

Do's and Don'ts

Do - コーラルとセージをセクションごとに交互に使う。 - 数値は細い欧文セリフで大きく見せる。 - 人物写真は明るく自然光で、多様な体型を並べる。 - 主張には※を付け、注釈を小さく添える。 - 地には淡いにじみや波形を入れ、柔らかさを出す。

Don't - 原色の赤や青を使わない。 - 太い角ゴシックの極太見出しを多用しない。 - 影を強くしない。 - 背景を真っ白だけで続けない。 - 一つのセクションでコーラルを広い面に塗りすぎない。

Page Structure

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

1. ファーストビュー（体型を問わず効果が出ることと、実績を一目で伝える。）: コーラルのグラデ地に、異なる体型のモデル4人を並べる。明朝の大きなキャッチと実績バッジを置く。
2. 商品概要（商品の特徴を要約する。）: パッケージ写真と商品名、コーラルの四角い特長バッジを3つ並べる。
3. 訴求コピー（核になるベネフィットを強く打ち出す。）: ピルタグ、明朝の一文、セージの帯を縦に積む。
4. 販売実績（権威付けをする。）: ゴールドの地に月桂冠と特大の数字。販売サイトのロゴを並べる。
5. アンケート（利用者の不満とニーズを数値で示す。）: セージの見出し帯、ドーナツグラフ、理由を示す4色の棒グラフカード。
6. 悩みの提起（読者の悩みに共感する。）: グレーの地に、斜めの黒帯コピーと丸い悩みバッジを4つ置く。
7. 解決の提示（開発の姿勢と商品を示す。）: コーラルのグラデに明朝の大見出し。動きのある人物写真に吹き出しを重ねる。
8. 特長ポイント01〜03（機能を順に説明する。）: 大きな番号と帯見出しに、図解写真・矢印・数値ラベル・比較写真を組み合わせる。
9. メリット（得られる効果を補足する。）: ミントの角丸枠の中に、写真と本文を左右交互に配置する。
10. サイズ展開（誰でも選べることを示す。）: 生成りの枠に、4体型のモデル写真と色分けしたサイズ表を置く。
11. 保証（購入の不安をなくす。）: ゴールドの帯見出しと交換のイラストを並べた保証ボックスを2つ置く。
12. コーディネート（普段使いをイメージさせる。）: アーチ型に切り抜いた写真を横スライダーで見せる。

Imagery

• スタジオの白〜ベージュ背景に自然光を当て、多様な体型の女性が黒いスパッツを履いて並ぶ写真。
• ヨガやストレッチのポーズで、伸びやかさを見せる人物写真。
• 生地のアップや手で引っ張る写真で、質感と伸縮性を伝える。
• 着圧箇所を示すコーラルの矢印と、数値の吹き出し。
• ピンクとミントの水彩風のにじみや、波形の背景装飾。
• 細い線のアイコン（防臭・UVなど）を円の中に入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅の縦長デザインで、PCでも中央に約750px幅で配置する想定。
• PCでは左右の余白を淡いグラデ地で埋める。
• SPでは数値を48〜56px、見出しを24〜28pxにする。
• 4列のカードはSPでも4列のまま維持し、文字を小さくする。
• スライダーはSPでは1枚ずつ、左右の写真を少しのぞかせる。

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