DESIGN.md — くすみブルー×ラベンダーのやさしい着圧タイツ LP（Dusty Blue Lavender Soft Legwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、上品・高級、清潔・爽やか、シンプル・ミニマル
• キーワード: くすみブルー・ラベンダーグラデ・カプセル型写真・大きな欧文見出し・昼夜の対比・余白多め
• 地の質感: マットで粉っぽいパステルのグラデーション。光沢・質感テクスチャは使わない
• 形: 縦長カプセル・大きな円・角丸の大きいカード・ピル型ボタン
• 温度感: やや寒色寄りの淡い色。オレンジのアクセントで温かみを足す

Colors

• 地はくすみブルーを基本にし、セクションごとにラベンダー・グレージュ・淡い白ブルーへ切り替える
• FV とお悩みはラベンダー寄りの縦グラデにする
• 昼ラインはオレンジ、夜ラインはラベンダーで色分けし、タブ・割引額・ボタンに一貫させる
• CTA は全部墨色のピル型にし、色付きボタンは作らない
• マゼンタは丸いお得バッジだけに使う
• 大見出しの欧文は白抜きで地に溶け込ませる
• line-tab は文字 #FFFFFF × 背景 #F5B263 のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AF640B、4.52:1）を使う。

Typography

• 大見出しは白の欧文大文字＋下に小さな和文の 2 段組み
• 本文は中央揃えで行間 2.0 前後と広めにとる
• 字間は全体に 0.08em 以上あけて上品に見せる
• 数字は欧文書体で大きく、単位は小さくする
• 背景に透かしの巨大欧文を淡く敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品・おすすめカードは縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出し・本文は中央揃え
• セクション上部に大見出し、下にカードや写真を配置
• お悩みは 2 列×3 段のアイコン付き楕円で並べる
• 写真カルーセルは中央を大きく、左右を見切れさせる
• 細い白線でセクションを区切る

Elevation & Depth

• 影はほぼ使わず色面の差で階層を出す
• 白カードはフラット、角丸大で浮かせる
• 丸バッジにだけ軽い影を許容

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 縦長カプセル型・大円・角丸大の四角で切り抜く
• セクション境界: 大きな円弧や角丸の色面で切り替え、吹き出し三角で次へつなぐ
• 写真は直角のまま使わない
• ナビボタンは片側だけ角丸の大きいタブ形
• カプセル写真の周りに回転する欧文テキストを沿わせる
• 矢印は細線の円形ボタン

Components

• 購入ピルボタン（button-primary）: 墨色のピル型、中央に白文字、右端にカートアイコン
• 欧文大見出し（section-title）: 白抜きの大文字欧文と小さな和文サブ見出しを縦に重ねる
• アンカーナビ（anchor-nav）: 白い角丸タブに和文と英字小ラベル、下向き矢印
• お得丸バッジ（badge-deal）: マゼンタ円に白文字 2 行。見出しやナビの右上に重ねる
• お悩み楕円（worry-bubble）: 半透明白の楕円に短い悩み文、下に線画の女性イラスト
• 昼夜ラインタブ（line-tab）: オレンジとラベンダーの角丸タブ。太陽・月アイコン付き
• 商品カード（product-card）: 淡ブルーの角丸カードに角丸写真、カラーチップ、価格、購入ボタン
• カラーチップ（color-chip）: 小さな円で展開色を横一列に並べる
• 価格比較ボックス（price-compare）: 墨色ラベルの通常価格→矢印→ライン色ラベルのまとめ買い価格

Do's and Don'ts

Do - 写真は必ずカプセル・円・角丸で切り抜く - 昼夜の 2 ラインを色とアイコンで一貫して分ける - セクション見出しは白の欧文大文字で統一する - 余白を広くとり、本文は短い行で中央揃えにする - CTA は全セクション同じ墨色ピルにする

Don't - 原色の赤や青のボタンを使わない - 強い影やグラデーションの立体ボタンにしない - 写真を四角のまま並べない - 太い明朝や手書き書体を混ぜない - マゼンタを面で大きく使わない

Page Structure

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

1. ファーストビュー（商品の世界観とブランド名を見せる）: 左にモデル写真、右にカプセル写真と回転欧文、ラベンダーグラデ上に欧文タイトル
2. メッセージ（開発の想いと共感）: 中央揃えの短い段落を行間広く並べ、背景に巨大な透かし欧文
3. アンカーナビ（各セクションへの誘導）: 白い角丸タブを 4 つ並べ、1 つにお得バッジ
4. コンセプト（昼夜）（使用シーンを 2 つで伝える）: 大きな円の中に昼と夜の写真と説明を対角に置き、点線で結ぶ
5. 悩みの提起（ターゲットの悩みに共感）: ラベンダー面に楕円の悩み 6 つとイラスト、下端に吹き出し三角
6. 解決提示（商品の紹介）: 周りに浮かぶカプセル写真と光の玉、中央にパッケージ
7. 特徴（機能説明）: 昼夜タブ付きの白カードに脚のイラストと色ラベル付き特徴 3 つ、左右矢印
8. 商品ラインナップ（商品と価格の提示）: 淡ブルー角丸カード 2 枚に写真・カラーチップ・価格・CTA
9. 着用シーン（コーデのイメージ）: カプセル写真のカルーセル、中央に回転欧文、商品名とカラー、CTA
10. おすすめ・まとめ買い（まとめ買いで単価を上げる）: ライン色タブの下に割引額の大きいカード 3 枚と価格比較
11. 関連ブランド（シリーズへの回遊）: 写真付き白カード 3 枚に短い説明と下矢印
12. フッター（メルマガ・各種リンク）: チャコール地に白文字のリンク 2 列とメール入力欄

Imagery

• 脚元を主役にした自然光の着用写真。室内のウッドや街中で撮る
• モデルは柔らかい表情のナチュラルメイク、生成りやグレーの服
• 線画の女性イラストに淡い色を少し足して悩みを表す
• 黄色の光の玉をぼかしてふわっと浮かべる
• 商品の平置きは白やグレーの地で色違いを並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は全て 1 カラムにし、商品・おすすめカードは縦に積む
• 欧文大見出しは SP で 36〜40px に縮める
• お悩みの楕円は SP で 2 列にする
• カルーセルは中央 1 枚＋左右を少し見切れさせる
• アンカーナビは SP で 2×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 行書くと起動時に読み込まれる。