DESIGN.md — ボルドー×くすみピンクの甘美なランジェリー LP（Bordeaux Romantic Lingerie Editorial LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、かわいい、やさしい・柔らかい
• キーワード: ボルドー・くすみピンク・雑誌風・ハートモチーフ・細い欧文セリフ・筆記体
• 地の質感: 地は細かいノイズの入ったマットな単色。半透明のハートをぼかして重ねている
• 形: 写真は角丸のない長方形で、互い違いに重ねて置く。細線の楕円や円形の英字ロゴを添える
• 温度感: 暖色寄りで、しっとりした色気がある

Colors

• 地の色は上から順に、濃いボルドー、ローズ、淡いピンク、ボルドーと移っていく
• 濃い地には白の細い文字だけを載せる
• 淡いピンク地にはワインレッドの見出しを使う
• 黒はリボンなど小さな差し色だけに使う
• 派手な原色や、寒色系の CTA 色は使わない
• script-section-title は文字 #FDF5F5 × 背景 #C66D81 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B94C65、4.56:1）を使う。
• staggered-photo は文字 #FDF5F5 × 背景 #C66D81 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B94C65、4.56:1）を使う。

Typography

• 英字が主役で、日本語は短い一文に抑える
• セリフ体は細いウェイトだけを使い、太字にしない
• 日本語コピーは明朝体で、字間を広めに取る
• 欧文の小見出しの下に、短い細線と点線を添える
• 日本語コピーは先頭の 1 文字だけ大きくすることがある
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に互い違いで配置する
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面幅の 60% ほどにして、左右に寄せて交互に置く
• 写真の空いた側に欧文の小見出しを置く
• 写真の一部を前後の写真に少し重ねる
• FV と商品カットは画面幅いっぱいの全幅で見せる
• 文字ブロックの周りは広めに空ける

Elevation & Depth

• 影は基本的に使わない
• 奥行きは、半透明のハートと写真の重なりで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。メイン写真は四隅を逆角丸（内側にえぐれた形）の額縁にする
• セクション境界: 直線で地の色を切り替える。境目に細い白帯を入れることもある
• FV の写真は細い白線の枠で囲む
• 英文は細線の楕円や円形のロゴで囲む
• ハートは大きく半透明にして背景に溶け込ませる

Components

• 筆記体のセクションタイトル（script-section-title）: 白の大きな筆記体の下に、明朝体の日本語コピーを 1 行添える
• 楕円の英文キャプション（oval-caption）: 細い白線の楕円の中に、2 行の小さな英文を入れる
• 円形の英字ロゴ（circle-text-badge）: 細線の円に沿って、英文の一言を回して配置する
• 互い違いの写真ブロック（staggered-photo）: 写真を左右交互に置き、空いた側に欧文の小見出しと細線を添える
• 額縁風のメイン写真（framed-hero-photo）: 四隅を逆角丸にした写真に、欧文の筆記体コピーを重ねる
• カラー展開の紹介（color-variation-card）: 全幅の写真にハートを重ね、欧文のカラー名・カナ・注釈を縦に並べる
• パーツ名のラベル（detail-label）: パーツの写真の角に、ワインレッドの欧文セリフでパーツ名を重ねる

Do's and Don'ts

Do - ボルドーとピンクの同系色だけで、明度に段階をつけて構成する - 欧文は細いセリフ体か筆記体にする - ハート・リボン・ギフトボックスで季節のギフト感を出す - 写真を大きく見せ、文字は最小限にする - 注釈は商品写真の近くに小さく置く

Don't - 太いゴシック体で強く訴えない - 原色の CTA ボタンやバッジを多用しない - 写真に角丸やドロップシャドウを付けない - 長い説明文を詰め込まない - 寒色を使わない

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: モデル写真を全幅で見せ、縦書きの大きな欧文と白い細線の枠を重ねる
2. テーマタイトル（季節のテーマを示す）: ボルドー地の中央に白のセリフ体タイトルを置き、半透明のハートとモデル写真を重ねる
3. ディテール紹介（デザインの魅力を情緒的に伝える）: ローズ地に筆記体のタイトルを置き、写真を互い違いに並べて、明朝体の短いコピーを添える
4. イメージカット（着用シーンへの憧れを高める）: 淡いピンク地に額縁風のメイン写真を置き、筆記体の英文と注釈を添える
5. パーツ紹介（こだわりのパーツを見せる）: 白背景で撮ったパーツ写真を 2 枚並べ、ワインレッドの欧文でラベルを付ける
6. カラー展開（色ごとの印象を見せる）: 色ごとに全幅のモデル写真を置き、ハートとカラー名、注釈を配置する

Imagery

• 単色ボルドーのスタジオ背景で撮った、モデルの全身・半身カット
• 小物はリボン・ギフトボックス・ハートの風船・チョコケーキ
• ソフトな正面光で、肌と生地の光沢を美しく見せる
• パーツは白い布の上で、ふんわり撮る
• 背景に大きな半透明のハートを、ぼかしたグロー付きで重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。PC では中央に 480〜600px 幅の縦長カラムを置き、左右はボルドーの地で埋める
• 互い違いの写真は、PC では 2 カラムのグリッドにしてもよい
• 筆記体のタイトルは、PC では 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 行書くと起動時に読み込まれる。