DESIGN.md — ラベンダーとくすみローズの上品ランジェリー LP（Elegant Lavender Lace Lingerie LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: くすみパステル・エディトリアル・明朝×欧文セリフ・色ブロックの重なり・花のあしらい・大人の女性
• 地の質感: サテンやレースの質感写真と、フラットな淡色ブロックの組み合わせ。影はほぼ使わない。
• 形: 角丸なしの長方形が基本。写真と色ブロックを少しずらして重ねる。番号だけ正円。
• 温度感: やや冷たい紫寄りに、温かいローズ・ピンクベージュを差す中間の温度感

Colors

• 地は淡いラベンダー一色で統一し、彩度の高い色は使わない。
• 商品ごとに色ブロック（グレー・ブルーグレー・ライラック・モーブ・ピンクベージュ）を変え、商品カラーと調和させる。
• 見出しの和文はくすみローズ、欧文商品名はワインレッドかプラムで差をつける。
• 誘導ボタンと番号円はモーブの塗り＋白文字。
• 終盤の解説セクションのみくすみピンク地に切り替え、白カードを載せる。
• 黒は FV の帯など最小限にとどめる。
• number-circle は文字 #FEFDFE × 背景 #AB8A8D のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#936A6D、4.58:1）を使う。
• button-primary は文字 #FEFDFE × 背景 #AB8A8D のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#936A6D、4.58:1）を使う。

Typography

• 見出しは明朝の細めウェイトで、太字にしない。
• キャッチ見出しは強調語を大きく、助詞を小さくしてジャンプ率をつける。
• キャッチは 2 行に分け、1 行目を左寄せ、2 行目を右寄せにずらす。
• 商品名は欧文セリフ＋直下に小さな和文名の 2 段構成で中央揃え。
• 価格は欧文セリフで品名と価格を 1 行ずつ並べる。
• 字間はやや広めにとって余裕を出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品ブロックは写真 2 枚と色ブロックを左右に互い違いで重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 90px、基本単位 8px、カード内 14px（375px 幅換算）
• モデル写真は約 55% 幅で片側の端まで寄せ、反対側に商品写真を少し下げて重ねる。
• 色ブロックは写真の背後に、縦横にずらして敷く。
• 価格リストは色ブロックの上に左揃えで置く。
• 商品名とキャッチの間は 16px、キャッチと写真の間は 30px 程度。
• 解説カードは画像左・テキスト右の 2 分割にする。
• セクション間には余白を大きくとり、花の写真を浮かせる。

Elevation & Depth

• 影はほぼ使わない。奥行きは写真と色ブロックの重なりで出す。
• 解説カードは影なしで、細いグレーの枠線だけ付ける。
• 商品写真にはごく弱いドロップシャドウを付けてもよい。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形で端を切り落とす。コレクション一覧のサムネイルは右上だけ大きな角丸にし、右下に斜めの CHECK ラベルを付ける。
• セクション境界: 基本は直線。解説セクションの上端だけ大きくゆるい楕円カーブにする。
• ボタンは角丸なしの細長い長方形にし、右端に ▶ を付ける。
• 番号は正円の中に欧文セリフのイタリック体を置く。
• スライダーのインジケーターは小さな四角 3 つ。
• NEW バッジは濃紺の正円に白文字。

Components

• FV 商品集合写真（fv-hero）: サテン布の上に商品を積み重ねた写真。上部に白い明朝の大見出し、右側に縦書きの短い訴求ラベルを 3 本、下端に黒帯のサブコピーを置く。
• コレクションサムネイル（collection-thumbs）: 2 枚＋3 枚の 2 段に並べた商品サムネイル。右上だけ角丸で、右下に黒い三角形の CHECK ラベルを付ける。
• 商品名＋キャッチ見出し（product-title）: 欧文セリフの商品名、その下に小さな和文名、さらに大小の文字を混ぜた 2 行キャッチを左右にずらして置く。
• 色ブロック価格リスト（price-block）: 淡い色の長方形に、欧文セリフで品名と価格を並べる。上部に四角いスライダーインジケーターを置く。
• 写真重ねレイアウト（photo-stack）: モデル写真・商品写真・色ブロックの 3 層を互い違いに重ね、周囲に花の切り抜き写真を散らす。
• 番号円（number-circle）: モーブの正円に、白い欧文セリフのイタリック体で 2 桁番号を入れる。カードの左上にはみ出して重ねる。
• 選び方カード（point-card）: 白地に細い枠線を付けたカード。左に商品写真、右に見出し・説明文・誘導ボタンを置く。
• 誘導ボタン（button-primary）: モーブ塗りの細長い角なしボタン。白文字で、右端に ▶ を付ける。

Do's and Don'ts

Do - 見出しは細い明朝と欧文セリフで統一する。 - 商品ごとに色ブロックの色を変え、商品カラーと調和させる。 - 写真は互い違いに重ねて雑誌のような誌面感を出す。 - 花の切り抜き写真をセクションの余白に置く。 - 余白を広くとり、情報を詰め込まない。 - 価格は欧文セリフで静かに表示する。

Don't - 原色や蛍光色の CTA は使わない。 - 太いゴシックの大見出しは使わない。 - 角丸の大きいポップなボタンは作らない。 - 強いドロップシャドウやグラデーションボタンは使わない。 - 写真を均等なグリッドに並べるだけにしない。 - 割引バッジなどの煽り表現を多用しない。

Page Structure

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

1. ファーストビュー（ターゲット世代とテーマを一目で伝える）: ぼかした背景の中央に、商品集合写真のカードを置く。大見出しは明朝の白文字で、縦書きラベル 3 本と下部の黒帯コピーを添える。
2. コレクション一覧（シーズンの商品群を一覧で見せて回遊させる）: 欧文セリフのコレクション名の下に、サムネイルを 2＋3 枚で並べる。背景はぼかし写真。
3. 商品紹介 1（1 つ目の商品の特長と価格を見せる）: 商品名とずらした 2 行キャッチの下に、モデル写真・商品写真・グレーの価格ブロックを重ねる。
4. 商品紹介 2（2 つ目の商品の特長と価格を見せる）: 写真の左右を入れ替え、モーブの色ブロックと花の写真で変化をつける。
5. 商品紹介 3（3 つ目の商品の特長と価格を見せる）: ライラックの色ブロックを敷き、屋外で撮ったモデル写真を使う。
6. 商品紹介 4（新色を含む商品の訴求）: ブルーグレーのブロックに、NEW の丸バッジを付けた商品写真を重ねる。
7. 商品紹介 5（華やかな商品の訴求）: ピンクベージュのブロックに、ベロア布の上で撮った商品写真を重ねる。
8. 選び方の条件（選ぶ基準を示して該当商品へ誘導する）: くすみピンク地の上端を楕円カーブにし、下線付きの明朝見出しを置く。下に番号円付きの白カードを 3 枚縦に並べる。

Imagery

• 外国人モデルが自然光や柔らかいグレー背景の中で静かにポーズするランジェリー写真。
• 商品はサテンやベロアの布の上に、数枚を重ねて置いて真上から撮る。
• 白背景で手に持ち、花と一緒に撮った商品の物撮り写真。
• アリウム・蘭・ガーベラなど淡い色の花の切り抜き写真を余白に浮かせる。
• 背景のぼかし写真はピンクとラベンダーのボケで柔らかくする。
• 解説カードには白い背景で撮った商品のアップ写真を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文幅を 1000px 前後にし、商品ブロックは写真を左右に並べて重ねる配置を保つ。
• コレクションのサムネイルは PC では 5 枚を横 1 列に並べる。
• キャッチ見出しは PC で 36〜40px に拡大し、左右へのずらしは維持する。
• 選び方カードは PC では 3 枚を横に並べるか、写真を大きくする。
• 花の装飾は 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 行書くと起動時に読み込まれる。