DESIGN.md — くすみモーヴと生成りのルームソックス LP（Soft Dusty Mauve Roomwear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、上品・高級、ナチュラル、シンプル・ミニマル
• キーワード: くすみモーヴ・生成り・細い欧文セリフ・アーチ写真・余白多め・ルームウェア
• 地の質感: マットで粉っぽい淡色の面。グラデーションはごく薄く、光沢はない
• 形: アーチ、円、大きく角を丸めた写真、斜めに重ねた矩形
• 温度感: 暖かみのある淡いニュートラル

Colors

• 地はオフホワイトを基本にし、淡いピンクベージュの地をセクションごとに交互に使う
• モーヴは円バッジ、強調語、装飾の円・アーチに限って使う
• 悩みのセクションだけはグレーの地に白文字を載せ、変化をつける
• 彩度の高い色は使わない。例外はサーモ画像などの検証写真だけ
• 文字は純黒ではなく、暖かいダークグレーにする
• pill-label は文字 #EEEDEA × 背景 #ACAAA6 のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#6D6A66、4.59:1）を使う。
• problem-circle は文字 #EEEDEA × 背景 #AAA6A0 のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#6F6A63、4.58:1）を使う。
• color-swatch-row は文字 #7A7272 × 背景 #F8F6F7 のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#777070、4.5:1）を使う。

Typography

• 英字見出しは細いセリフ体で字間を広げる
• 日本語の大見出しは明朝体で、強調語だけを大きくしてモーヴにする
• 本文は小さめのゴシック体を中央揃えにし、行間を 2.0 程度に広く取る
• 太字はほとんど使わず、ウェイトは 400〜500 に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真を左右にずらして重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面幅の 90% か、端までの全幅で配置する
• 見出しと本文は中央揃えを基本にする
• ポイント部は写真と文を左右交互にずらす
• セクションの間は 60px 以上空ける

Elevation & Depth

• 影はほぼ使わずフラットにする
• 写真の重なりと地色の差で奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: アーチ型、角丸の矩形、円で切り抜く。写真を斜めにずらして重ねる
• セクション境界: 直線のほか、悩みのセクションの下には V 字の切り込みを入れる
• アーチ型の写真は 1 つのセクションで 1 回まで
• 円は特長の拡大図とバッジに使う
• ラベルはピル型にする

Components

• ポイント番号の円バッジ（badge-point-circle）: モーヴの円の中に、小さな英字と大きなセリフ体の数字を白で入れる
• 素材のピルラベル（pill-label）: グレージュのピル 2 つを × でつないで並べる
• アーチ型の写真枠（arch-photo）: 上辺を半円にした縦長の写真
• 悩みの円カード（problem-circle）: グレーの地に、白い細枠の円を 3 つ散らして配置し、円の上辺に沿って英字ラベルを入れる
• 円の拡大図と引き出し線（callout-zoom）: 商品写真の上に円の拡大図を置き、細い白線で説明文につなぐ
• Point 英字ラベル（point-label-script）: 見出しの上に、モーヴの細いセリフ体で Point と番号を添える
• カラー展開の一覧（color-swatch-row）: 切り抜いた商品を 3 つ並べ、下に大文字のセリフ体で色名を書く
• 白枠の差し込みサムネイル（inset-thumb）: 全幅写真の角に、白い枠付きの寄り写真を重ねる

Do's and Don'ts

Do - 余白を広く取り、静かで上品な間を保つ - 英字見出しと和文説明の 2 段構成をそろえる - モーヴは少量のアクセントに留める - 写真は自然光の白っぽいトーンで統一する

Don't - 原色や蛍光色のボタンを置かない - 太いゴシック体で大きく叫ぶ見出しにしない - 濃い影や光沢のある装飾を付けない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（商品の世界観と素材の特長を一目で伝える）: 全幅のモデル写真に、明朝体のコピーと大きな欧文セリフを重ねる。モーヴの円バッジと色見本を小さく添える
2. ベネフィットの導入（核となる価値を短く伝える）: 明朝体の 2 段見出しとピルラベル、アーチ写真、中央揃えの説明文で組む
3. 素材のポイント（素材の 2 点を紹介する）: 角丸の写真と Point ラベルを左右交互に配置する
4. イメージギャラリー（質感を見せる）: モーヴの円装飾の上に写真をずらして重ね、縦書きの英字を添える
5. カラー展開（色の選択肢を示す）: 英字の大見出しの下に、切り抜いた商品 3 つと色名を並べる
6. 悩みの提起（共感を生む）: グレー地に白線の円を 3 つ置き、下辺を V 字に切る
7. 効果の実証（効果を視覚で証明する）: 比較画像を 2 枚、矢印でつないで並べ、下に説明文を置く
8. こだわりポイント（詳しい特長を 3 つ伝える）: 引き出し線付きの拡大図で全体を示したあと、番号の円バッジ・見出し・写真・説明文を 3 回繰り返す
9. コーディネート提案（使う場面を想起させる）: ピンクベージュの地に、着用写真を左右にずらして重ねる
10. ギフト提案（贈答の需要を取り込む）: 英字見出しの下に角丸のボックス写真を置き、説明文と注釈を添える
11. お手入れ方法（購入前の不安を解消する）: 英字見出しの下に写真と説明文を置く
12. カラー別イメージ（各色の魅力を見せる）: 全幅のモデル写真に、大きな英字の色名と白枠のサムネイルを重ねる

Imagery

• 白いソファ、レースのカーテン、自然光が入る明るい室内で撮る
• モデルはリラックスした座りポーズにし、ニットやボア素材を合わせる
• 手元や足元の寄りで、素材の毛並みを見せる
• 全体を低コントラスト・淡いトーンに仕上げる
• 装飾はモーヴの円やアーチなど、幾何学的な形だけにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨として記載する
• PC では本文幅を 1000px 前後で中央にまとめる
• ポイント部は写真と文の 2 カラムにする
• カラー展開は横 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 行書くと起動時に読み込まれる。