DESIGN.md — くすみモーブ×コーラルのアパレル特集LP（Dusty Mauve Editorial Fashion Lookbook LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: くすみモーブ・コーラル背景のスタジオ写真・欧文セリフ見出し・白い細線の区切り・エディトリアル・大人の女性
• 地の質感: マットな単色の面。写真はコーラルピンクの無地の壁と床で撮ったスタジオ写真
• 形: 角丸なしの四角形。写真は少し傾けて重ね、円形の回転テキストバッジを置く
• 温度感: あたたかいけれど落ち着いた、くすんだ中間色

Colors

• ページの約6割はくすみモーブの単色地にする
• 強い色は写真背景のコーラルピンクだけ。地には使わない
• モーブ地の文字・線はすべて白にし、細く軽く見せる
• 最後の一覧・コーデ一覧・フッターは白と淡いグレーに切り替える
• CTAの塗りは淡いコーラル。ボタンの数は絞る
• 購入リンクは白地に暗い文字の小さなタグにする
• page は文字 #262D2F × 背景 #977979 のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#A78D8D、4.56:1）を使う。
• photo-slider は文字 #FFFFFF × 背景 #CB7473 のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF5553、4.53:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #F4A4A1 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E52821、4.51:1）を使う。

Typography

• 見出しは欧文セリフ、日本語は細めのゴシックにする
• 太字は使いすぎない。全体の文字は400〜500の細さにする
• 番号は「No.01」のように小さく左に、欧文アイテム名は大きく右に置く
• 本文は行間を1.8前後とって広めにする
• ロゴ以外は大きな文字を使わず、静かな印象にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC の商品詳細は文字と写真の2カラム、一覧は4カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• アイテムの区切りは横幅いっぱいの白い細線
• PCでは商品情報とスライダー写真の間に縦の細線を入れる
• 写真は少しずらして2枚重ね、雑誌の誌面のような余白をとる
• アイテムブロックは同じ構成でくり返す
• コンセプトの特長4つは細線の枠で横並びにする

Elevation & Depth

• 影は使わない。平らな面だけで組む
• 奥行きは写真を重ねる・傾けることで出す
• 枠は1pxの白い細線だけにする

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形で角丸なし。縦長の全身写真が中心で、一部は傾けて置く
• セクション境界: 横幅いっぱいの白い細線か、地色の段差だけで区切る
• 円形の回転テキストバッジをアクセントに置く
• ボタンは小さな四角形にし、角丸はわずかにする
• 装飾は細線と円に限る

Components

• 番号つき欧文見出し（item-number-heading）: 左に小さな番号、右に大きな欧文セリフのアイテム名。下に白い細線を引く
• 細線枠の特長カード（feature-outline-card）: 白い細線の枠の中に、番号・欧文名・和名・短い説明を中央揃えで入れる。4つを横に並べる
• 色違いサムネイル（color-swatch）: 白地の小さな四角に商品写真を入れ、下に色名を英字で添える
• ポイント一覧（point-list）: 細線で囲んだPOINTラベルの横に、番号つきのポイントを5行並べる
• Buyタグ（buy-tag）: アイテム名と価格の横に置く、白地に暗い文字の小さな購入ボタン
• 写真スライダー（photo-slider）: コーラル背景の縦長モデル写真。左右に細い矢印、左下に枚数表示
• 回転テキスト円バッジ（circle-badge）: 円に沿って欧文を一周させ、中央にコーデ誘導の短い文とClick!を置く
• シリーズ一覧カード（product-grid-card）: 白地に置き撮りの商品写真、名前・価格・色ドット・小さなボタンを並べる
• キャンペーンCTA（button-primary）: バナーの中に置く横長の淡いコーラルのボタン。白文字

Do's and Don'ts

Do - 地はくすみモーブにし、写真の背景はコーラルでそろえる - アイテムごとに同じ情報の型（説明・色違い・ポイント・コーデ購入）をくり返す - 細い白線と欧文セリフで上品なリズムを作る - 写真は大きく見せ、余白は広くとる - 各アイテムの最後にコーデ違いの写真2枚と円バッジを置く

Don't - 原色や蛍光色を使わない - 太いゴシックで大きく売り込む表現をしない - 影・グラデーション・丸いピル型ボタンを使わない - 写真の背景色をアイテムごとにばらばらにしない - モーブ地に黒い文字を置かない

Page Structure

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

1. ファーストビュー（シリーズの世界観とモデルを見せる）: ピンクの壁の前に座るモデルの全面写真。大きな細い漢字ロゴと手書き風のコピーを重ねる
2. コンセプト（シリーズの考え方を伝える）: モーブ地の中央に写真を1枚、左右に傾けた写真を置き、短いコンセプト文を白で添える
3. 4つの特長（こだわりを要素ごとに見せる）: 細線の枠のカードを4つ横に並べ、下に「要素×要素＝シリーズ」の式を置く
4. 動画（動きで雰囲気を伝える）: 明るめのモーブ帯に欧文見出しと16:9の動画プレイヤーを置く
5. アイテム詳細（くり返し）（商品ごとの特長と買い方を伝える）: 番号つき欧文見出し、商品情報、色違い、ポイント、コーデ購入リスト、写真スライダーの順で組む
6. 別のコーデ（着回し方を見せる）: 着用写真と置き撮り写真を重ね、アイテムリストと円バッジを添える
7. シリーズ一覧（全商品をまとめて見せる）: 白地に4カラムの商品カードを並べる
8. スタッフコーデ（コーデ記事へ誘導する）: 淡いグレーの地に写真タイルを4枚並べ、写真の上に白い欧文を重ねる
9. キャンペーンCTA（プレゼント企画へ誘導する）: 白い横長バナーに大きな欧文タイトル、商品写真、コーラルのボタンを入れる
10. フッター（会社情報とSNSを載せる）: 白地にロゴ、規約へのリンク、SNSアイコンを小さく並べる

Imagery

• コーラルピンクの無地の壁と床で撮った、モデルの全身スタジオ写真
• 光はやわらかく正面から当て、影を薄くする
• 表情はおだやかで自然な、大人の女性モデル
• 商品は白い地に置いて真上から撮り、コーデ写真として添える
• 一覧用は白背景の切り抜き写真にする
• 装飾は円形の回転テキストと細線だけ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCの商品詳細は文字と写真の2カラム。SPでは見出し、写真スライダー、情報の順に縦に積む
• シリーズ一覧とスタッフコーデはPCの4カラムをSPでは2カラムにする
• 特長カードはPCの横4つをSPでは2×2にする
• コンセプトの傾いた写真はSPでは2枚までにして、はみ出しを控えめにする
• 欧文見出しはSPで約26px。PCでは約32〜40pxにする

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