DESIGN.md — くすみピンク×ボルドーの大人インナーLP（Dusty Mauve Feminine Innerwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: くすみピンク・ボルドー・明朝見出し・欧文英字ラベル・写真比較・大人フェミニン
• 地の質感: マットで粉っぽいくすみ色の面。光の差す室内写真と柔らかな影の装飾。
• 形: 四角い写真を基本に、円形切り抜きや片側だけ大きく角丸のカードを混ぜる。
• 温度感: やや暖かいピンクベージュ系

Colors

• 地はくすみピンクとグレージュを交互に切り替え、白は白カードと比較写真の面に使う。
• ボルドーはページの中盤で、実績と口コミをまとめる大きな帯に使う。
• ボルドーの上では、数字を金色、見出しを白か淡いピンクにする。
• 強調文字はモーブ寄りのボルドー一色に絞る。
• BEFOREは濃灰、AFTERはボルドー系にして色で対比させる。
• 彩度の高い色は使わない。
• vertical-copy-band は文字 #FAECE7 × 背景 #AE9188 のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#85645A、4.59:1）を使う。
• circle-badge は文字 #FAECE7 × 背景 #A67470 のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#925F5B、4.54:1）を使う。

Typography

• 大見出しは明朝体にし、字間を広めにとる。
• セクションの頭に英字の細いセリフラベルを置き、その下に日本語見出しを置く。
• 本文の強調はゴシックの太字か、淡いマーカーで行う。
• 実績の数字は特大の明朝体を金色にする。
• 筆記体の英字は写真に重ねる飾りとしてだけ使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品・スタイルの一覧は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 比較写真は左右2枚を並べ、点線でバストの位置を示す。
• 機能解説は、左に写真、右に番号と見出しと本文を置く横並びにする。
• 写真は左右に互い違いに配置して、雑誌のような流れを作る。
• チェックリストは左寄せで4項目並べる。
• 写真の多くは端まで広げ、テキストブロックは中央にまとめる。

Elevation & Depth

• 白カードには柔らかい薄い影をつける。
• ポラロイド風の斜め写真には白縁と軽い影をつける。
• それ以外はフラットにする。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 四角が基本。円形や片側を大きく角丸にした切り抜きを混ぜる
• セクション境界: 基本は直線で切り替える。一部で浅いV字の山形を使う
• コンセプトカードは対角の2角だけを大きく丸める。
• 特長キーワードはモーブの正円バッジにする。
• BEFORE/AFTERは小さな四角いラベルで示す。

Components

• 縦書きコピー帯（vertical-copy-band）: FV写真の右側に置く、モーブグレーの縦長帯。白い明朝の縦書きを載せる。
• 比較写真ペア（before-after）: 2枚の写真の左上にBEFORE/AFTERのラベルを付け、点線のガイドを重ねる。
• おすすめチェックリスト（check-list）: 細線のチェックボックスと太字混じりの1行文を4つ並べる。
• 特長円バッジ（circle-badge）: モーブの正円の中に、白い明朝2行のキーワードを入れる。3つ並べる。
• 月桂樹付き実績数字（stat-laurel）: ボルドー地に金色の月桂樹と特大数字を置き、右側に説明と注釈を添える。
• 口コミカード（review-card）: ボルドー帯の上に置く白カード。かぎ括弧の見出しと、太字マーカー混じりの本文を入れる。
• ピル型ラベル（pill-label）: 注記やタイプ名を入れるピル型のラベル。白地またはグレージュ地にする。
• 番号付き機能解説（numbered-feature）: 写真の左上にセリフの番号01〜04を置き、右に太字の見出しと本文を並べる。
• かぎ括弧見出し（bracket-heading）: 細い線のかぎ括弧で挟んだ2行見出し。下の行に淡いマーカーを敷く。

Do's and Don'ts

Do - くすみピンク・グレージュ・白の3つの地を交互に使い、リズムを作る。 - 見出しは明朝体にし、英字のセリフラベルとセットで置く。 - 写真は自然光の室内で撮った柔らかいトーンにそろえる。 - 効果は比較写真と点線で、目に見える形で示す。 - 強調はボルドー系一色と太字マーカーだけに絞る。

Don't - 原色や蛍光色は使わない。 - 丸ゴシックやポップな書体で見出しを組まない。 - 強い影や立体的なボタンは使わない。 - ボルドーの帯を短い間隔で何度も入れない。 - 写真の彩度を上げすぎない。

Page Structure

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

1. ファーストビュー（商品の印象と特徴を一目で伝える）: モデル写真を大きく置き、縦書きの帯コピーと円形の背面写真を添える。下に細い線の欧文ロゴと販売ページの説明を入れる。
2. 効果比較（着用前後の違いを見せる）: 明朝の大見出しの下に、BEFORE/AFTERの写真を2枚並べ、点線のガイドを重ねる。
3. スタイル紹介（着こなしの種類を見せる）: 英字ラベルの下に3列×2段の写真グリッドを置き、部分写真に補足を添える。
4. おすすめ対象（読み手に自分ごと化させる）: チェックボックス付きの1行文を4つ並べる。
5. コンセプト（商品の価値をひと言で伝える）: 角を丸めた白カードに、アイコンの足し算と円バッジ3つを入れる。
6. 実績（信頼を得る）: ボルドーの帯に金色の特大数字と月桂樹を置き、ランキングのメダルを並べる。
7. お客様の声（共感と安心を生む）: ボルドーの帯の上に白カードを3枚置き、続けて愛用者写真をコラージュする。
8. ラインナップ（シリーズの幅を見せる）: 白地に商品の切り抜きを横に並べ、タイプ別に区切る。
9. タイプ比較（購入するタイプを選ばせる）: 3列の写真比較と星評価の帯を置き、タイプ別のチェックリストを続ける。
10. 悩み解決（具体的な不安を解消する）: 写真に円形の吹き出しを重ね、かぎ括弧見出しと比較写真、イラスト付きのシチュエーションを並べる。
11. 機能詳細（仕組みを説明する）: 番号付きの写真と見出し・本文を横並びにし、4項目を縦に積む。
12. 利用シーン（使い方をイメージさせる）: グラデーションのベージュ地に、大きな番号・写真・円形の欧文装飾を置く。
13. カラー展開（色を選ばせる）: 白地に色別の写真を並べ、英字の色名とカナを添える。

Imagery

• 自然光が入る白い室内で、柔らかい影が出るモデル写真にする。
• 商品は白いファー、ドライフラワー、ハンガーと合わせた置き撮りにする。
• 生地の質感はリブを寄りで撮ったマクロ写真で見せる。
• 悩みの場面は線画に淡い彩色の女性イラストで描く。
• 窓からの木漏れ日の影を背景の装飾にする。
• 写真をポラロイド風に斜めに重ねてコラージュする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に最大幅600px程度の1カラムで置き、左右に背景色を敷く。
• 3列グリッドはPCでもそのまま3列にする。
• 機能解説の横並びはPCで写真比率を上げる。
• 見出しサイズはPCで1.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 行書くと起動時に読み込まれる。