DESIGN.md — ヌードベージュ×くすみピンクの下着コレクションLP（Soft Nude Beige Lingerie Collection LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、シンプル・ミニマル
• キーワード: ヌードベージュ・シフォンの質感・細身の欧文・筆記体アクセント・写真コラージュ・カタログ型
• 地の質感: シフォン布のドレープ写真を薄く敷いたマットな背景。光沢は使わず、粉っぽく柔らかい質感。
• 形: 角を1つだけ大きく丸めた写真、アーチ状のセクション上端、円形バッジ、ピル型ボタン、角丸の白い商品カード。
• 温度感: 暖色寄りのニュートラル。前半はベージュ系、後半はくすみピンク系。

Colors

• 地はアイボリーと濃いベージュを交互に使い、シフォン写真を薄く重ねる。
• 前半の機能系はベージュ×ブラウン、後半のデザイン系はピンク×ローズに切り替える。
• CTAは前半をダークブラウン、後半をくすみローズにし、どちらも白文字にする。
• 原色・高彩度色は使わない。強調は濃淡差で表す。
• 写真の裏に primary や tint-2 の矩形ブロックをずらして置き、奥行きを出す。
• number-badge は文字 #FEFDFC × 背景 #C19D74 のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#946E42、4.52:1）を使う。
• bracket-heading は文字 #866A4F × 背景 #D3BDA5 のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-2-accessible（#F7F3EF、4.54:1）を使う。

Typography

• 英字見出しは細身のジオメトリック体で、太字にしない。
• 和文はウェイト400で細めにし、字間を広めにとる。
• リード文は中央揃えで、2行ずつ1ブロックにまとめる。
• 筆記体は小見出しの装飾だけに使い、本文には使わない。
• 文字サイズは小さめに抑え、余白で上品さを出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カテゴリ一覧のみ 3 列グリッド、商品カードは写真と情報の左右 2 分割。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 各カテゴリは見出し→リード→写真コラージュ→Item→商品カードの順で繰り返す。
• 写真コラージュは画面端まで出る写真と内側の写真を互い違いに配置する。
• 商品カードは縦に 16px 間隔で積む。
• 見出しまわりは上下に大きく余白をとる。
• テキストブロックは中央揃えを基本にする。

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる。
• 商品カードは白い面と背景の明度差だけで浮かせる。
• 奥行きは写真の背後に色ブロックをずらして重ねて出す。

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 四角形の 1 角だけを大きく丸める（左下・右上など、写真ごとに変える）。
• セクション境界: セクション上端をなだらかなアーチ状に盛り上げて切り替える。
• ナンバーバッジは正円にする。
• カードの角丸は 16px 前後にする。
• 見出しは対角のかぎ括弧状の細線で囲む。
• ボタンは完全なピル型にする。

Components

• 円形ナンバーバッジ（number-badge）: 小さな英字ラベル・菱形の飾り・2桁番号を縦に並べた正円バッジ。後半は塗りなしの細線円にする。
• かぎ括弧付き英字見出し（bracket-heading）: 英字大見出しと和文サブ見出しを中央に置き、左上と右下に細いL字線を添える。背面に淡い横帯を敷く。
• 筆記体小見出し（script-label）: 商品一覧の直前やType区切りに置く筆記体の一語見出し。
• 商品カード（product-card）: 左に縦長の商品写真、右に商品名・仕様3行・カラーチップ・CHECKボタンを並べた白いカード。
• CHECKボタン（button-primary）: 細字の英字を載せた小さめのピル型ボタン。
• ローズ系大ボタン（button-secondary）: 後半セクションのスタイル写真の下に置く、幅広のピル型ボタン。
• カテゴリ一覧パネル（category-grid）: 白い角丸パネルに切り抜き商品写真・英字ラベル・和名を3列で並べる。左上に角丸タブ状の見出しを付ける。
• 丸い機能バッジ（feature-badge）: 商品写真の左上に重ねる淡色の円形バッジ。機能名を短く入れる。
• カラーチップ（color-chip）: 展開色を横長の小さな矩形で並べる。

Do's and Don'ts

Do - ベージュとピンクの濃淡だけで構成し、彩度を低く保つ。 - 写真は角を1つだけ丸めて、色ブロックと重ねたコラージュにする。 - 英字見出しは細いジオメトリック体を大きく使う。 - カテゴリごとに同じ構成の型を繰り返し、番号で区切る。 - 余白を大きくとり、文字は小さく細くする。

Don't - 太いゴシック体や原色の強調色を使わない。 - ドロップシャドウや光沢グラデーションを使わない。 - 写真を4角とも丸めたり、正方形で均一に並べたりしない。 - 長文の段落を詰めて組まない。 - 赤い値引き表示や煽る装飾を入れない。

Page Structure

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

1. ファーストビュー（コレクションの世界観を伝える）: シフォン背景に複数の商品写真をコラージュし、白い細身の英字タイトルとブランド名を重ねる。
2. コンセプト（選び方の多様さを短い言葉で伝える）: 縦の細線の下に、中央揃えのリード文を3ブロック置く。
3. ラインナップ一覧（目的別・形別に入口をつくる）: 英字の大見出しの下に、タブ見出し付きの3列カテゴリパネルを2つ置く。円弧状の英字装飾を添える。
4. カテゴリ詳細（機能系）（悩みや目的ごとに商品を紹介する）: アーチ上端→番号バッジ→かぎ括弧見出し→リード→写真コラージュの順。地はベージュ系を交互に使う。
5. 機能説明（着用時の効果を図解で見せる）: 写真に矢印や点線を重ね、白い四角に短い説明文を入れて添える。
6. 商品一覧（Item）（商品の詳細ページへ送客する）: 筆記体の小見出しの下に、白い商品カードを縦に積む。
7. カテゴリ詳細（デザイン系）（形の違いによるスタイルを見せる）: 地をピンクに切り替え、細線円の番号バッジとローズ色の見出しを使う。
8. スタイル写真（上下セットの着用イメージを見せる）: 筆記体の小見出し、横スクロール風に並べたモデル写真、ローズ色のピル型ボタン。
9. クロージング（余韻を残してブランドを印象づける）: 木漏れ日とシフォンの淡い背景に、グレーの細身英字の一文と短い和文を中央に置く。

Imagery

• 白〜ベージュの明るい室内で撮った、顔を写さないボディ写真。後ろ姿・腰回りを中心にする。
• 白いシーツや花、本などを添えた俯瞰の物撮り。
• シフォン布やサテンのドレープをぼかして背景に敷く。
• スタイル写真は女性モデルの全身。柔らかい自然光で撮る。
• 白背景の切り抜き商品画像を一覧に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないため推奨になる。PCでは中央 480〜600px の SP レイアウトを維持し、左右にシフォン背景を広げる。
• PCで広げる場合は、商品カードを2列にする。
• 写真コラージュは横幅を活かして3〜4枚を重ねて配置する。
• 見出しサイズはPCで 1.5 倍程度にする。

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