DESIGN.md — グレージュ×ボルドーの上品ランジェリー LP（Soft Greige Luxury Lingerie LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: くすみカラー・明朝体・欧文スクリプト・フォト主体・余白・静かな高揚感
• 地の質感: 柔らかい自然光の写真、白いもやのようなグラデーション、紙のようなマットな面
• 形: 角丸なしの四角い写真枠、大きな円弧の線、アーチ状の写真切り抜き、楕円のロゴバッジ
• 温度感: やや暖かい中間色。ピンクベージュとグレージュが中心

Colors

• 地は白と生成りを交互に使い、強い原色は使わない
• ボルドーは実績帯・after ラベル・チェックなど要所だけに使う
• ゴールドはボルドー上の装飾と数字だけに限る
• 色名ラベルはグレージュの面に白文字で写真に重ねる
• 写真の上の文字は白か淡いゴールドにして柔らかい影を付ける
• 商品色（コーラル・ミント・ミモザなど）は写真に任せ、UI には使わない
• color-label は文字 #FFFFFF × 背景 #B4ADA4 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#7F7569、4.52:1）を使う。

Typography

• 和文は明朝体を基本にし、太字は使わない
• 欧文見出しは大文字セリフで字間を広めにとる
• スクリプト体は見出しの背後や上に大きく重ねる
• 本文は中央揃えで短い行ごとに改行する
• FV のキャッチは縦書きで右側に置く
• 数字は細いセリフ体で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2 枚並びや左右に段違いで置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は全幅か左右 5% 程度の余白で大きく見せる
• 写真 2 枚の段違い配置でリズムを付ける
• 見出し→写真→before/after→説明文の順でポイントを並べる
• セクションの間は白い余白を広くとる
• 色名ラベルは写真の端に重ねる

Elevation & Depth

• 影はほとんど使わずフラットにする
• 写真の端は白いもやのグラデーションで背景になじませる
• 写真の上の文字には弱いぼかし影を付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角い切り抜きを基本に、上が丸いアーチ型や大きな円の切り抜きを時々入れる
• セクション境界: 直線の切り替えと、ページ幅を超える大きな円弧の細線
• ボタンやラベルは角丸なしの四角にする
• ロゴは細線の楕円バッジで囲む
• NEW バッジだけ濃い茶色の正円にする
• 注釈は細線の四角枠で囲む

Components

• 実績帯（achievement-band）: ボルドーの全幅帯に月桂樹と大きな数字、スクリプトの感謝文を重ねる
• スクリプト重ね見出し（script-heading）: 大きな手書き欧文の上に大文字セリフと和文明朝の小見出しを重ねる
• before/after ラベル（before-after-label）: 2 枚並びの写真下端に、グレーとボルドーの半透明帯で白文字を重ねる
• ポイント見出し（point-heading）: 楕円ロゴバッジ→Point.0X の欧文数字→明朝の 1 行見出しを中央に縦積み
• 色名ラベル（color-label）: 写真の右端に重ねるグレージュの四角に白い大文字セリフの色名
• カラー一覧（color-swatch-grid）: 3 列で商品切り抜き写真と大文字の色名を並べ、新色に丸い NEW バッジ
• おすすめチェックリスト（check-list）: 半透明の白地にボルドーのチェックボックスと明朝の 1 行文を 5 行
• 声の白帯タグ（voice-tag）: 写真の上に白い四角帯で「」付きの短い声を 3 本並べる
• 細線枠の注釈（note-box）: 細いグレー線の四角に小さな注釈文を中央に入れる

Do's and Don'ts

Do - 写真を主役にし、文字は少なく余白を広くとる - 和文は明朝体、欧文はセリフとスクリプトを組み合わせる - 色はくすんだ中間色でまとめ、ボルドーを少しだけ差す - before/after は同じ構図の 2 枚並びで見せる - 柔らかい自然光の写真で統一する

Don't - 鮮やかな原色や蛍光色のボタンを使わない - 太いゴシックの強い訴求コピーを使わない - 角丸の大きいポップなカードを使わない - 強い影や立体ボタンを付けない - 写真に多くの文字を詰め込まない

Page Structure

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

1. ファーストビュー（商品の魅力を印象で伝える）: 全幅のモデル写真に縦書き明朝キャッチ、ロゴ、商品名ラベル、サイズ、色チップ、商品写真の小窓を重ねる
2. ブランドストーリー（情緒的な世界観を伝える）: アーチ型写真の上に大きな数字と短い詩的な文を白文字・中央揃えで重ねる
3. 実績（販売実績で信頼を得る）: ボルドー帯に月桂樹と大きな数字、注釈を右下に小さく
4. 機能の訴求（効果を一目で伝える）: 全幅写真に縦書きコピーと半透明グレーの帯ラベル 2 本
5. ビフォーアフター（違いを見せる）: 円弧の細線で囲み、英字見出しと 2 枚並びの背面写真、明朝の 2 行説明
6. カラー紹介（色の展開を見せる）: 新色の置き撮り写真に大文字見出し、続けて 3 列の色一覧と NEW バッジ
7. ショーツ選択（組み合わせを選ばせる）: スクリプト見出しの下に 2 種類の写真を並べ、型名と和文名、細線枠の注釈
8. アンケート結果（ユーザーの声で共感を得る）: スクリプト見出しと問い、写真の上に白帯の声 3 つと縦線付きのまとめ文
9. 3 つの価値（商品の強みをまとめる）: 縦線とロゴ、2 行の明朝見出し、アーチ写真に大きな白文字で 3 つの価値と短い補足
10. おすすめの人（自分ごと化させる）: 商品の置き撮り写真の上に白いもやを重ね、スクリプト見出しとチェックリスト 5 行
11. イメージギャラリー（着用イメージを広げる）: モデル写真を段違いの 2 枚並びや全幅で並べ、欧文の短いコピーを添える
12. ポイント解説（機能を順に説明する）: 楕円バッジと Point 番号見出し、商品写真、before/after、中央揃え説明を 3 回くり返す
13. カラー別ルック（各色の着用イメージを見せる）: 色ごとに大きな写真とグレージュの色名ラベル、サブ写真を段違いで配置

Imagery

• ナチュラルメイクのモデルを白壁とレースカーテンの前で自然光で撮る
• 白っぽく少し露出を上げた、ふんわり低コントラストの色調にする
• 商品は白いシーツや花・本と一緒に上から置き撮りする
• before/after はグレー背景で背面や側面を同じ構図で撮る
• 写真の端に白い光のもやや花びらのぼかしを重ねる
• 効果の説明は写真の上に白い細い矢印や点線の円を描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像なし。PC では中央 480〜600px 幅の 1 カラムを保ち、左右は生成りの地にする
• 段違いの写真 2 枚並びは PC で左右の余白を広げて大きくする
• 縦書きキャッチは PC でも縦書きのまま写真の右側に置く
• 色一覧は PC で 6 列 1 段にしてもよい

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 行書くと起動時に読み込まれる。