DESIGN.md — くすみモーヴと白の上品インナー LP（Dusty Mauve Soft Lingerie Editorial LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: くすみモーヴ・細い欧文・縦書き明朝・自然光・余白多め・エディトリアル
• 地の質感: マットで柔らかい。光が回った写真とうっすらしたボケ円・半透明の白いもやを重ねる
• 形: 角の片側だけを大きく丸めた写真、アーチ型の大きな白い面、細い罫線、ピル型ラベル
• 温度感: やや暖かいニュートラル（ピンクベージュ寄りのグレー）

Colors

• 地は白とグレージュ（#F2EEEA）を交互に切り替え、セクションの境を色の切り替えで示す
• 強調はくすみモーヴの面に白文字。鮮やかな色は使わない
• 商品色（黒・ブルーグレー・ピンク）は写真とスウォッチだけで見せ、UI 色には使わない
• 文字は真っ黒にせず濃いグレーにする。欧文の飾り文字は淡いグレージュ
• コレクション紹介はモーヴ地に白いアーチ面を載せて目立たせる
• label-pill は文字 #FBF2EC × 背景 #957D76 のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#816A64、4.55:1）を使う。
• vertical-copy-band は文字 #FBF2EC × 背景 #B39486 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#8B6757、4.55:1）を使う。
• english-panel は文字 #FBF2EC × 背景 #957D76 のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#816A64、4.55:1）を使う。
• point-number は文字 #89807D × 背景 #FFFFFF のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#7D7572、4.51:1）を使う。
• arch-collection は文字 #3E3A39 × 背景 #957D76 のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#816A64、4.59:1）を使う。

Typography

• 欧文の飾り見出しはとても細いウェイトにして、和文見出しの上に重ねるか並べる
• 訴求コピーは縦書きの明朝にし、モーヴの帯の上へ白文字で載せる
• 本文は中央揃えで行間を広くとり、字間も少し空ける
• 太字は使わない。強調は大きさと下線で示す
• 数字は細いセリフ体を大きく使い、横に小さな英字ラベルを添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2 列の千鳥配置もある
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面端まで広げるか、左右どちらかに寄せた非対称配置にする
• テキストブロックは写真の隅に重ねてずらす
• セクション間に広い白い余白をとる
• 商品スウォッチは 3 列で均等に並べる
• ポイントは 01〜04 の番号つきで 1 列→2 列に組む

Elevation & Depth

• 影はほぼ使わない
• ギフト写真カードだけ、ごく薄いぼかし影を付ける
• 写真の端を白いグラデーションのもやでなじませる

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 四角形を基本に、片側の角だけを大きく丸める。素材のスウォッチは楕円で切り抜く
• セクション境界: 直線で色を切り替える。大きなアーチ型の白い面も使う
• モーヴのテキスト面は左上だけを大きく丸める
• カテゴリラベルは細い枠線のピル型か、モーヴで塗ったピル型
• 比較する部分は点線の円で囲む

Components

• カテゴリピルラベル（label-pill）: 商品カテゴリ名を入れる横長のピル。モーヴで塗るものと線だけのものの 2 種類
• 縦書きコピー帯（vertical-copy-band）: 写真の上に重ねるモーヴ色の縦帯。白い明朝で 1〜2 列
• 英文パネル（english-panel）: 片角を丸めたモーヴの面に、小さな英文コピーを中央揃えで置く
• 悩みチェックリスト（check-list）: 写真の上に細い枠を重ね、丸いチェックアイコン付きの悩みを 3 つ並べる
• 円グラフ付き数値（stat-row）: 白い円グラフと大きな%を並べ、回答の文に下線を引く
• 番号付きポイント（point-number）: 細いセリフ体の 01〜04 に小さな英字を添え、その下に写真と説明を置く
• カラースウォッチ（color-swatch）: 商品の切り抜き写真か楕円の生地を 3 列で並べ、下に英字の色名を入れる
• アーチ型シリーズ紹介（arch-collection）: モーヴ地に白いアーチ面を置き、関連商品を 3〜4 列で並べる
• 引き出し線キャプション（leader-caption）: 写真上の点から細い線を伸ばし、小さな英字と和文の説明を添える

Do's and Don'ts

Do - 窓辺の自然光で撮ったモデル写真を大きく使い、余白を広くとる - 細い欧文と明朝を組み合わせて、雑誌のような印象にする - モーヴは帯・ラベル・パネルだけに限って使う - 写真とテキストはずらして重ね、非対称に組む - 数値を見せるときも細いウェイトのまま上品にまとめる

Don't - 原色や蛍光色の CTA を置かない - 太いゴシックや影付きの文字を使わない - 角を均一に丸めたカードを並べただけの単調な構成にしない - 背景を純黒にしない - 装飾アイコンを多用しない

Page Structure

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

1. ファーストビュー（商品の世界観と主な機能を示す）: 全面にモデル写真を敷き、白い明朝コピー・細い欧文ロゴ・カラーチップ・機能ラベルを中央に縦に並べる。左上に雫型のバッジを置く
2. コンセプト（ブランドの思いを伝える）: 淡い写真に欧文の見出しと大きな縦書きのひらがなを重ね、中央揃えの本文を置く
3. イメージギャラリー（着用シーンを見せる）: 写真を千鳥に配置し、片角を丸めたモーヴの英文パネルを添える
4. 悩みの提起（共感を得る）: モーヴがかった写真に細い枠を重ね、欧文の小見出しとチェック付きの悩み 3 項目を並べる
5. 解決提示（商品で解決できることを示す）: 全面写真にモーヴの縦書き帯を 2 本重ねる
6. 特長訴求（機能ごとの利点を伝える）: 大きな縦書きの明朝見出しと写真、小さなモーヴのキャプション箱
7. 試験データ（効果を数字で裏付ける）: グレージュ地に写真を置き、円グラフと%を 3 段で並べる
8. 追加の利点（細かな悩みも解決できると伝える）: 点線の円で示す比較写真と縦書きの帯
9. カラー展開（選べる色を見せる）: 白地に字間を広げた欧文見出し、ピルラベル、3 列のスウォッチ
10. 比較検証（色選びの根拠を示す）: グレー地に 2 枚の写真を並べ、中央揃えの説明文を置く
11. ディテール（仕様を細かく説明する）: 大きな薄い欧文見出し、ピルラベル、角を丸めた写真と引き出し線キャプション
12. ポイントまとめ（特長を整理する）: 番号 01〜04 の写真ブロックと BEFORE/AFTER のモーヴ帯
13. シリーズ紹介（関連商品へ誘導する）: モーヴ地にアーチ型の白い面を置き、商品の切り抜き写真をグリッドで並べる
14. ギフト・カラー別ルック（贈り物としての用途と色ごとの印象を示す）: 角を丸めたギフト写真カードと、色名を欧文で重ねた全面モデル写真を順に並べる

Imagery

• 白いカーテン越しの柔らかい自然光で、ハイキー気味に撮る
• モデルは目線を外し、落ち着いた表情で、ニットなど暖かい素材と合わせる
• 背景は白壁・ソファ・クッションなど、ベージュ系の室内
• 商品は白背景の切り抜きで並べる
• うっすらしたボケ円や白いもやを重ねて、しっとり感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央に約 480〜600px の SP 幅カラムを置く想定
• 左右の外側はグレージュの無地で埋める
• PC ではギャラリーを 3 列、ポイントを 4 列まで広げてよい
• 縦書きの帯は 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 行書くと起動時に読み込まれる。