DESIGN.md — 焦げ茶×ボルドーの艶ランジェリーLP（Dark Bordeaux Sensual Lingerie LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、シンプル・ミニマル
• キーワード: ボルドー・焦げ茶グラデーション・筆記体・雑誌風・暖色照明・細線フレーム
• 地の質感: ぼかしたベルベット調のグラデーション地。マットで光沢は写真だけに任せる
• 形: 直角の写真、楕円・円形の切り抜き、極細の線フレームと楕円枠
• 温度感: 暖色寄りで暗め。キャンドル光のような琥珀色

Colors

• 地は焦げ茶〜ボルドーのみ。純黒やグレーは使わない
• セクションごとに地の明度を変え、ぼかしグラデーションでつなぐ
• 文字はほぼ生成り白1色。強調色の文字は使わない
• 線と楕円枠は生成り色の極細線
• 彩度は写真の商品色(赤錆・黒)に任せ、UI側は抑える
• セクション間に細い白帯を入れて誌面の区切りを作る

Typography

• 筆記体は大きく、写真に一部重ねて配置
• 和文は細めで字間を広く取り、短文を中央揃えか右寄せ
• 和文は1ブロック2行まで
• 太字は使わない
• 英文サブコピーは楕円枠に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と短文を左右交互にずらして配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左寄せ・右寄せを交互にして画面端まで出す
• 短文は写真の反対側の余白に置く
• FVは写真を細線フレームで囲む
• 区切りに細い縦線を入れて視線を下へ流す
• カラー紹介は全幅写真を縦に並べる

Elevation & Depth

• 影は使わずフラット
• 奥行きはぼかしグラデーションと写真の重なりで出す
• 写真上の帯は半透明の赤茶オーバーレイ

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 基本は直角の長方形。要所で大きな円・縦長の楕円に切り抜く
• セクション境界: 細い白帯または直線。グラデーションでなじませる
• カードや写真に角丸はつけない
• 円と楕円はモチーフとして繰り返す
• 枠線は1px の生成り線
• セット紹介は二重角の細線フレームで囲む

Components

• 筆記体見出し（script-heading）: 大きな英字筆記体の下に和文2行を中央に添える
• 楕円枠の英文コピー（oval-caption）: 細線の横長楕円に小さな英文を2行入れる
• 円形バッジ（circle-badge）: 細線の円に筆記体と英字を重ね、円形写真の縁にかぶせる
• 円形切り抜き写真（circle-photo）: 大きな円の写真を細線リングで囲む
• 縦の区切り線（vertical-line）: セクション冒頭に中央の細い縦線を1本置く
• セット内容カード（framed-set-card）: 細線フレームの中に楕円写真と縦の構成品リスト(＋でつなぐ)を並べる
• カラー名ラベル（color-photo-label）: 全幅写真の右下か左下に白い筆記体の色名と小さな和文読みを置く

Do's and Don'ts

Do - 暗い暖色地に生成り白の細い文字だけで構成する - 写真は暖色照明で、商品色を主役にする - 筆記体を大きく使い、写真に一部重ねる - 円・楕円・細線フレームを繰り返して統一感を出す - 余白を大きく取り、1画面1メッセージにする

Don't - 鮮やかな原色や寒色を入れない - 太いゴシックや大きな価格訴求を入れない - 角丸カードやドロップシャドウを使わない - 長文の説明を詰め込まない - 白地を広く取らない(白は区切り帯だけ)

Page Structure

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

1. ファーストビュー（世界観と商品名を一目で伝える）: ボルドー地に細線フレームで囲んだモデル写真。下部に大きな筆記体の商品名と小さな英字サブ
2. コンセプト（情緒的なメッセージで惹きつける）: 黒茶地に縦線と筆記体の英文2行。円形写真と円形バッジを重ねる
3. ディテール（デザインの見どころを伝える）: 筆記体見出しと和文2行と楕円枠コピー。写真と短文を左右交互にずらして並べる
4. イメージカット（着用時の雰囲気を見せる）: 大きな写真に楕円枠の英文と1行の和文を添える
5. 商品ビジュアル（アイテム名と全身の着用感を見せる）: 全幅写真の左端に縦書き筆記体。下に置き撮り写真と細線フレームの帯
6. セット内容（構成アイテムを示す）: 二重細線フレームのカードに楕円の置き撮り写真と、＋でつないだ縦の構成品リスト
7. カラー展開（色ごとの印象を見せる）: 色ごとに全幅写真を並べ、筆記体の色名ラベルを重ねる

Imagery

• ヨーロッパ調の室内(革ソファ・ランプ・木の扉)で暖色照明の写真
• モデル写真は暗めの露出で、肌と商品色を琥珀色に寄せる
• 置き撮りは白い紙の上に商品と小物を並べた俯瞰
• 地にはカーテンのような柔らかいぼかしグラデーションを敷く
• イラストやアイコンは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜600px 幅で SP レイアウトを置き、左右は焦げ茶地で埋める
• 左右交互の写真配置は PC でも同じリズムで残す
• 筆記体見出しは PC で 1.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 行書くと起動時に読み込まれる。