DESIGN.md — 水色×コーラルのグラデ肌着 LP（Airy Pastel Gradient Innerwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、上品・高級、ナチュラル
• キーワード: 白と淡グレー・水色→コーラルのグラデ・細字の和文・手書きスクリプト・曲線の区切り・柔らかな自然光
• 地の質感: ほぼフラット。背景にぼかした光の玉や淡いグレーの曲線を薄く重ねて空気感を出す。
• 形: 大きな円弧でセクションを区切る。丸括弧の飾り、角丸の写真、ピル型の帯見出しを使う。
• 温度感: 冷たい水色と温かいコーラルを組み合わせて、涼しさとぬくもりの両方を感じさせる中間の温度。

Colors

• 地は白を基本にする。カードの外側は淡いグレー、悩み提起の部分だけチャコールにする。
• ブランドの強調は水色→コーラルの横方向か縦方向のグラデーションに絞る。
• グラデーションはピル型の見出し帯、文字マーカー、カードの影、飾り線に使う。
• 本文中の強調語はコーラルか水色の単色文字にする。
• 暗い地の上の強調語は淡い水色かピンクにする。
• 評価の星だけはオレンジにする。
• gradient-heading-band は文字 #EEF2F5 × 背景 #83BBEB のコントラスト比が 1.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1E70B7、4.6:1）を使う。
• point-badge は文字 #EEF2F5 × 背景 #A6C9C2 のコントラスト比が 1.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#48776E、4.51:1）を使う。
• circle-lead-label は文字 #B2B2B2 × 背景 #FFFFFF のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 和文は細めのウェイトにし、字間を広めにとる。
• 見出しの中で助詞だけを小さくして、文字サイズに強弱をつける。
• 英字の手書きスクリプトを見出しの左上に斜めに添える。
• 見出しの下に、細い英字のサブタイトルを小さく置く。
• 本文は行間を 2.0 にし、各行の下に点線を敷く。
• 縦書きの見出しも交ぜてよい。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の 2 分割と、写真＋テキストの左右配置を交ぜる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しは中央に置き、左右を丸括弧の線で挟む。
• ポイントは手書きの「Point」と大きな数字のセリフ体で始める。
• 特長の詳細はグレー地の上に白い大カードを重ね、カードの境目は半円の切り欠きで繋ぐ。
• 写真の上には、グラデ帯の縦書き見出しを重ねる。
• 下矢印の線と小さな円形ラベルで、次のセクションへ視線を誘導する。

Elevation & Depth

• 影はほぼ使わない。
• 口コミカードは、グラデの帯を斜め下へずらして重ね、疑似的な影にする。
• 写真は角丸だけで、影はつけない。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形にする。ほかに縦長カプセル型（アイコン用）、大きな円・半円の窓抜きを使う。
• セクション境界: 大きな円弧、波線、ゆるいウェーブで区切る。
• 見出し帯はピル型か角丸 6px のグラデにする。
• ポイント番号は、カード左上の三角のセージ色バッジに入れる。
• 吹き出しは細い線の枠に小さなしっぽをつける。
• 特長アイコンは円形のグラデに白い線画を入れる。

Components

• グラデ見出し帯（gradient-heading-band）: 水色→コーラルのピル型の帯に白抜き文字を入れる。2 段に積むこともある。
• 丸括弧の見出し（bracket-section-title）: 細いグレー線の丸括弧で、見出しと英字の手書きサブタイトルを挟む。
• ポイント番号（point-number）: 手書きの「Point」とセリフ体の大きな 2 桁数字を縦に積む。下に波線を引く。
• 口コミカード（review-card）: 白地に細い枠と星評価、カプセル型の顔イラスト、年代表記を入れる。グラデの影を斜めにずらして重ねる。
• 吹き出しの声（speech-review）: グラデの線枠の吹き出しを左右にずらして重ね、短い声と星を入れる。
• チェックリスト（check-list）: 暗い地の上に白いチェックボックスと点線の区切りを置き、強調語を淡い水色にする。
• グラデマーカー（text-marker）: 強調語の下半分に、淡いグラデの帯を敷く。
• 角の番号バッジ（point-badge）: カード左上に、セージ色の三角に白いセリフ体の数字を入れる。
• 円形の導入ラベル（circle-lead-label）: 点線の円や吹き出しに「そこで」「さらに」型の短い語を入れる。

Do's and Don'ts

Do - 強調の色は、水色→コーラルのグラデ 1 種に統一する。 - 和文は細字にし、字間を広めにして余白で上品さを出す。 - 見出しには、手書きの英字スクリプトを小さく添える。 - セクションの境目は円弧や波線で柔らかくする。 - 写真は白とグレーを基調にした、自然光の明るいトーンにする。

Don't - 太いゴシックや原色の赤い CTA は使わない。 - 濃い影や立体的なボタンは使わない。 - 暗い地は悩み提起の 1 箇所以外では使わない。 - グラデを水色→コーラル以外の色の組み合わせにしない。 - 角張った直線的な区切りを多用しない。

Page Structure

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

1. ファーストビュー（季節に合った使い方と、商品の世界観を伝える）: 自然光の着用写真の上に、細字のキャッチと一部グラデの大文字を重ねる。左上には特長の円アイコンを 3 つ縦に並べ、下端は円弧で切る。
2. 商品名と導入（商品名と素材の特徴を示す）: 丸括弧で挟んだ商品名を置き、着用写真のコラージュとグラデ帯のコピーを添える。
3. 社内の声（早い段階で共感を得る）: ぼかした光の背景の上に、グラデ枠の吹き出しを 3 つずらして並べ、星をつける。
4. 悩みの提起（冷えの原因に気づかせる）: 上を円弧で切ったチャコール地に、枠付きのリスト、チェックリスト、状況写真の 4 分割を置く。
5. 反論の提示（「でも暑い・ベタつく」という本音を代弁する）: 吹き出しの導入に続けて、手書き風の大文字に波線を引く。
6. 解決策の提示（商品を答えとして示す）: 下矢印からグラデのピル帯で商品名を出し、イメージ写真と縦書きコピーを添える。
7. 素材の秘密（素材の価値を説明する）: 円形の導入ラベル、白い大見出し、素材の写真を楕円の窓で抜き、グラデのタグを 2 つ並べる。
8. ポイント 1〜3（機能の根拠を示す）: Point 番号の下に、写真とグラデ帯の縦書き見出しを置く。比較図、検証画像のカード、点線罫の本文を続ける。
9. 詳細な特長カード（丈・伸縮・薄さを具体的に示す）: グレー地に白カードを並べ、左上に三角の番号バッジをつける。写真は角丸と円形の窓抜きにし、利用シーンを英字の大きな見出しで紹介する。
10. お客様の声（第三者の評価で後押しする）: 番号つきの口コミカードを 3 枚並べ、顔イラストのカプセルと星を入れる。
11. 商品情報（仕様を確認してもらう）: 点線の円弧の中に商品名を置き、淡いピンクベージュ地の商品写真と仕様の箇条を並べ、注釈で締める。

Imagery

• 白いシャツに淡いグレーの肌着を合わせた女性が、白い寝具やリビングでくつろぐ自然光の写真。
• 商品単体は、淡いピンクベージュのグラデ背景の前で着用したトルソー風の写真。
• 素材は、糸巻き・繭・ニットの寄りで、やわらかく高彩度を避ける。
• パステルのフラットなイラストで生活シーンを補う。
• グラデの線画の横顔アイコン、細い矢印、ぼかした光の玉を飾りにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP と同じ縦長の構成を、幅 750px 前後の中央カラムで見せる。
• 左右の余白は淡いグレーにする。
• 写真の 2 分割はそのまま保ち、見出しのサイズだけ 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 行書くと起動時に読み込まれる。