DESIGN.md — 淡いピンク地の上品なアパレル特集 LP（Soft Blush Editorial Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 雑誌風エディトリアル・淡いピンク・大きな人物写真・欧文セリフ・細い線のボタン・余白多め
• 地の質感: 影のないフラットな面。光が回った柔らかい写真が質感を担う
• 形: ほぼ角なし。カードは小さな角丸、ボタンは細い線の長方形
• 温度感: 暖かめで柔らかい（ピンクベージュ寄り）

Colors

• 地は生成り・淡ピンク・白の 3 色をセクションごとに切り替え、境界は直線にする
• 色の強さは商品写真に任せ、UI の面は彩度の低い淡色にとどめる
• ピンクはポイントラベル・キャンペーンバナー・固定バナーだけに使う
• ボタンは色で塗らず、濃いグレーの細い線と文字で作る
• 写真の上に置く文字は白で、細めのウェイトにする
• point-badge は文字 #FFFFFF × 背景 #FCB6C9 のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E90A46、4.57:1）を使う。
• color-swatch-grid は文字 #8A8484 × 背景 #FAF0F1 のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#736D6D、4.54:1）を使う。
• floating-campaign は文字 #FFFFFF × 背景 #FCB6C9 のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E90A46、4.57:1）を使う。

Typography

• 見出しは欧文セリフ、その下に日本語の小さな訳を添えて 2 段にする
• 和文は字間を広め（0.08em 前後）にし、行間 2.0 でゆったり組む
• 本文は 11px 前後と小さく抑え、写真を主役にする
• アイテムの番号ラベルは写真の横に縦書きの欧文で置く
• 太字はアイテム名とリード見出しに限る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カード・シリーズ一覧は 2 列、カラバリは 5 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 16px でそろえる
• アイテム写真は片側を画面端まで寄せ、反対側に縦書きラベルを置く。アイテムごとに左右を入れ替える
• どのアイテムも 商品情報→カラバリ→ポイント→コーデリスト の同じ順に並べる
• コーデリストは 品名・価格・小さな Buy ボタンを 1 行ずつ左寄せで並べる
• セクションの前後には大きく余白を取る

Elevation & Depth

• 影は使わずフラットにする
• 特長カードは白い面と淡い背景の差だけで浮かせる
• スタッフコーデのバナーは写真に薄く暗いオーバーレイをかけ、白文字を読ませる

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は縦長の長方形で角なし。商品の切り抜き写真は正方形で角丸 6px
• セクション境界: 直線。背景色の切り替えだけで区切る
• 主ボタンは角丸 2〜3px の細い線の長方形
• キャンペーン内ボタンだけピル型にする
• 特長カードは角丸 4px の白いカード

Components

• 線のボタン（button-outline）: #付きのコーデ導線や店舗案内に使う、中央寄せで横幅 6 割ほどの細枠ボタン
• 小さな Buy ボタン（button-buy-mini）: 品名・価格の右に並べる、幅 34px ほどの細枠の欧文ボタン
• 縦書きの番号ラベル（vertical-number-label）: No.番号と英字のアイテム名を、写真の横に縦書きの欧文セリフで置く
• 特長カード（feature-card）: (01) の番号、英字タイトル、和訳、2 行の説明を中央寄せにした白カード。2×2 で並べる
• ポイントラベル（point-badge）: ピンク地に白文字の小さなラベル。下に (01)〜(05) の番号付きリストを白い帯で続ける
• カラバリの並び（color-swatch-grid）: 灰白の地の正方形サムネイルを 5 つ並べ、下に小さな英字のカラー名を添える
• シリーズ一覧カード（product-card）: 角丸の切り抜き商品写真、品名、価格、色ドット、Buy ボタンを中央寄せで縦に並べる
• スタッフコーデのバナー（photo-banner）: 横長の写真に白い欧文見出しと #タグ付きの小見出しを中央に重ねる
• 追従キャンペーンバナー（floating-campaign）: 右下に固定する、ピンク地に白文字の小さなバナー

Do's and Don'ts

Do - 写真は大きく、角なしで使う - 欧文見出しには小さな和訳を必ず添える - アイテムごとに同じ情報の型を繰り返す - 背景は淡色 3 色を交互に使い、リズムを付ける - ボタンは細い線で控えめにする

Don't - 塗りの派手な CTA ボタンを置かない - 濃い影やグラデーションを UI に使わない - 太く大きい和文見出しを多用しない - ピンクを広い面に使いすぎない - 余白を詰めて情報を密にしない

Page Structure

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

1. ファーストビュー（シリーズの世界観を一目で伝える）: くすみピンクの地に人物のバストアップ写真。縦書きのキャッチを右上に、細い幾何的なロゴ風コピーと英字シリーズ名を下部に白で重ねる
2. コンセプト文（服づくりの考え方を伝える）: 生成りの地に太字の 2 行の見出し。続けて短い文を改行多めで左寄せに並べる
3. 動画（着用シーンを動きで見せる）: 小さな欧文ラベルの下に、16:9 の動画を全幅で 2 本縦に並べる
4. 特長（4 つのこだわりを示す）: 背景に薄く大きな欧文を置き、白カードを 2×2 で並べる。下半分はピンク帯で、4 要素をつなぐ式と結論ロゴを置く
5. アイテム紹介（3 回繰り返し）（各商品の魅力と買い方を示す）: 縦書きラベル付きの大きな写真スライダー、品名・価格・説明、カラバリ 5 色、ピンクのポイントラベルと番号リスト
6. コーデアイテム（セット買いを促す）: 淡ピンクの地に、品名・価格・Buy のリストと、スタッフコーデへの線のボタンを置く
7. シリーズ一覧（全商品をまとめて比較・購入させる）: 白い地に欧文見出しと和訳。2 列の商品カードと店舗案内の線のボタンを置く
8. スタッフコーデ（着こなし例へ誘導する）: 淡ピンクの地に、写真の上へ白文字を重ねた横長バナーを縦に積む
9. キャンペーンバナー（プレゼント企画へ誘導する）: 白い背景の写真に、ピンクの大きな欧文と線、ピル型ボタンを重ねる
10. フッター（SNS・規約・ブランド情報を載せる）: トップへ戻るリンク、SNS アイコン、欧文の規約リンク、ロゴ、コピーライトを中央寄せで小さく並べる

Imagery

• 人物写真は自然光で柔らかく撮り、都会のアーチ通路・カフェ・屋上などで全身を写す
• モデルは穏やかな笑顔で、正面から少し斜めのポーズを取る
• 商品は明るいグレーの背景で影の薄い切り抜き撮影をし、色の発色を活かす
• ファーストビューはピンクの無地背景のスタジオポートレートにする
• 装飾はほぼ使わず、薄く大きな欧文の透かし文字だけにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを横長にし、人物を中央、キャッチを左右に分けて置く
• PC のコンセプト文は、左に見出し・右に本文の 2 カラムにする
• PC のアイテム紹介は写真と情報欄を左右 2 カラムにし、アイテムごとに左右を入れ替える
• PC の特長カードは 4 列 1 行にする
• PC のシリーズ一覧は、左に見出し・右に 3 列カード。スタッフコーデは 3 列で並べる
• 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 行書くと起動時に読み込まれる。