DESIGN.md — マゼンタ×太セリフの遊び心アパレル LP（Playful Bold Serif Fashion Brand Site）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ポップ・元気、シンプル・ミニマル、上品・高級
• キーワード: マゼンタ見出し・太いディスプレイセリフ・横スクロール商品カード・線のピル型ボタン・グレージュ地・大判ファッション写真
• 地の質感: フラットな塗り。影はなく、写真の質感と余白で見せる
• 形: 大きめの角丸カード、ピル型ボタン、ギザギザの丸い順位バッジ、上辺が弧を描くセクション境界
• 温度感: 白とグレーでニュートラル。マゼンタでやや温かく華やか

Colors

• 地は白とグレージュを交互に使い、セクションを切り替える
• 英字見出しは主にマゼンタ。新着とセレクトの見出しだけ黒にして変化をつける
• ボタンは塗らず、白地に 1px の黒またはマゼンタの線で作る
• 赤系はセール価格だけに使い、元価格は薄い赤の取り消し線にする
• 写真の上の文字とボタンは白で、ボタンには半透明の白い面を敷く
• マゼンタ以外の色は写真に任せ、UI 色を増やさない
• button-pink は文字 #E3267A × 背景 #FFFFFF のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#E21D74、4.5:1）を使う。

Typography

• 英字見出しは太い高コントラストのセリフ体で大きく組み、すぐ下に小さな和文ゴシックを添える
• 和文は太めのゴシックで、字間をやや広げる
• 本文は 13px 前後にとどめ、写真を主役にする
• 価格は欧文の数字にし、セール価格は赤で太くする
• 装飾的な英字は見出しにだけ使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は横スクロールのカルーセルで 2.5 枚見せ、カテゴリは 2 列グリッド、特集は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
• 商品カルーセルは右端の次のカードを少し見せて、横に送れることを伝える
• カルーセルの下に細いスクロールバーを置き、その下にボタンを中央揃えで置く
• 見出しブロックは中央揃えにする
• 全幅写真のセクションは余白なしで縦に並べる
• 新着ブロックは背景写真の上に角丸パネルを浮かべる

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真の背景の上にグレーパネルを重ねて出す
• カードは地色との明度差だけで区切る

Shapes

• 角丸: 小 8px ／ 中 20px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 商品は白地の切り抜きを角丸の正方形カードに入れる。特集とインスタは角丸なしの矩形
• セクション境界: 基本は直線。ブランド紹介の前だけ上辺を大きな弧にする
• 商品カードは左上と右上を大きく丸め、下側は小さめの角丸にする
• ボタンは 1px 線のピル型にし、右端から長い矢印線をはみ出させる
• カテゴリは角丸 20px の外枠と細い罫線で 2 列の表にする
• 順位バッジはマゼンタのギザギザの丸に、白のセリフ数字を入れる
• 人気アイテムは角丸のブラケット線で囲む

Components

• 線のピル型ボタン（button-outline）: 白地に黒の 1px 線。右側に長い矢印線がはみ出す
• ピンク線のボタン（button-pink）: マゼンタの線と文字で作る、人気アイテムなどへの誘導ボタン
• 写真上のボタン（button-on-photo）: 半透明の白い面に白の線と白文字
• 英字セリフ見出し（section-title）: マゼンタの大きな英字に、和文の小見出しを重ねて組む
• 商品カード（product-card）: 角丸の白い正方形に商品の切り抜き。下に商品名と価格
• カテゴリ表（category-grid）: マゼンタの線で 2 列に区切り、各マスに矢印を置く
• 順位バッジ（rank-badge）: マゼンタのギザギザの丸に白数字
• New バッジ（new-badge）: くすみ青の円に白のセリフ英字
• お知らせリスト（news-list）: グレー帯に日付と下線付きのリンクを並べる

Do's and Don'ts

Do - 英字見出しは太いセリフ体で、大きくマゼンタにする - ボタンは塗らず、線と矢印で軽く見せる - 商品は白地に切り抜き、角丸カードに入れる - 白とグレージュの地を交互に使ってリズムを作る - 写真は大きく見せ、色は写真に任せる

Don't - ボタンをべた塗りにしない - ドロップシャドウやグラデーションを使わない - マゼンタ以外の強い UI 色を増やさない - 本文の文字を大きくしすぎない - 見出しを和文だけにしない

Page Structure

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

1. ファーストビュー（コラボや季節特集を見せる）: 全幅写真のスライダーに白いロゴを重ね、ドットと矢印で切り替える
2. お知らせ（更新情報を伝える）: グレー帯に日付と下線付きのリンクを 2 行並べる
3. 新着アイテム（新商品へ誘導する）: 花の写真の背景に角丸グレーパネルを置き、黒のセリフ見出しと商品カルーセルを入れる
4. カテゴリ（カテゴリから探してもらう）: マゼンタ線の 2 列の表に矢印付きのリンクを並べる
5. 特集（おすすめ企画を見せる）: 正方形のバナーを 2 列で並べる
6. 全アイテム／キャンペーン（一覧へ大きく誘導する）: 全幅のモデル写真に白の英字とボタンを重ねる
7. セレクト商品（Web 限定の品を見せる）: グレージュ地に黒見出し、商品カルーセル、線のボタンを置く
8. ランキング（人気商品を見せる）: ブラケット線で囲み、順位バッジ付きの大きなカードを中央寄せのカルーセルで並べる
9. ブランド紹介（世界観を伝える）: 上辺が弧の白地に、縦組みのロゴと 2 行の詩的なコピー、開閉ボタンを置く
10. カタログ（デジタルカタログへ誘導する）: 表紙画像を中央に置き、右上に New バッジを付ける
11. SNS（Instagram のフォローを促す）: アイコン付きの見出し、写真の横スクロール、Follow ボタンを並べる

Imagery

• モデル写真は白い壁の前で自然光で撮り、年齢の違う女性を並べる
• 柄物やビビッドな服で、写真に色を担わせる
• 商品は白背景の切り抜きで、平置きかハンガー掛けにする
• 背景には淡い花のアップをぼかして敷く
• 特集バナーは写真に縦組みの英字や白抜き文字を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは中央の写真の左右に隣のスライドを見せる
• PC のカテゴリは 4 列 2 段にする
• PC の特集は 3 列、全アイテムとキャンペーンは 2 列で並べる
• PC のカルーセルは 4〜6 枚見せ、左右にマゼンタの矢印を置く
• 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 行書くと起動時に読み込まれる。