DESIGN.md — 7色帯で切り替えるTシャツ特集LP（Color-Block Category Catalog Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ポップ・元気、シンプル・ミニマル、クール・先進的
• キーワード: カラーブロック・カテゴリー特集・商品グリッド・欧文コンデンス・フラット
• 地の質感: 影もグラデーションもないフラットな単色面。白地と彩度を抑えたパステル寄りの色帯を交互に置く。
• 形: 角丸なしの四角が基本。カテゴリーアイコンだけ円形にする。
• 温度感: 明るくニュートラル。色帯ごとに温度が変わる

Colors

• カテゴリーごとに7色の帯を1色ずつ割り当て、同じ色を続けて使わない
• 色帯は彩度をやや落とした中明度色にし、上に白文字の見出しを置く
• 商品グリッドの地は必ず白にして、写真を主役にする
• ボタンは全部黒の単色にし、色帯の色は使わない
• 赤はセール価格だけに使う
• FVだけ見出しに黄色を使い、強く目立たせる
• category-band は文字 #FFFFFF × 背景 #CB7171 のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C05353、4.56:1）を使う。
• fv-collage は文字 #EEEF47 × 背景 #71C4CC のコントラスト比が 1.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2B7279、4.51:1）を使う。

Typography

• 見出しは英字のコンデンス書体を斜体にして使う
• 英字見出しの横に、小さなカナ読みを［ ］で囲んで添える
• 番号ラベルは「number.01」の形で、見出しの上に小さく置く
• 商品情報は小さな文字で中央揃えにし、写真を邪魔しない
• 本文の和文は細めのゴシックで控えめにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: PCは商品4列。SPは2列にする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 4px（375px 幅換算）
• カテゴリー帯は全幅の色面にし、中央に横長の写真を帯からはみ出させて置く
• 写真の左下に、番号ラベルと見出しを重ねる
• 商品は縦長の写真に、名前・価格・BUYボタンを縦に積む
• グリッドの最後に、黒い一覧ボタンを中央に置く
• PCでは帯の左端に、縦書きの英字タイトルを置く

Elevation & Depth

• 影はまったく使わない
• 奥行きは、色帯から写真をはみ出させる重なりだけで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は縦長の長方形（3:4前後）、カテゴリー写真は横長、アイコンは正円
• セクション境界: 全幅の色帯を直線で切り替える
• ボタンも写真も角丸なし
• BUYは細い枠線の小さな四角ボタンにする
• 円形はカテゴリーのナビアイコンだけに使う

Components

• カテゴリー色帯（category-band）: 全幅の単色帯。中央の横長写真を上にはみ出させ、左下に見出しを重ねる
• 番号ラベル（number-label）: 「number.0X」を書いた暗い小さな帯
• 円形カテゴリーナビ（category-nav）: 商品写真を円で切り抜き、番号と英字名を添えて7個並べたアンカーリンク
• 商品カード（product-card）: 縦長の写真、ブランド名、価格、BUY枠ボタンを中央揃えで積む
• BUYボタン（button-buy）: 細いグレー枠の小さな四角いボタン
• 一覧へボタン（button-primary）: 黒い横長の四角ボタンに白文字と矢印
• FV商品コラージュ（fv-collage）: 色地の上に、白枠の商品写真タイルを2段に敷き詰める

Do's and Don'ts

Do - カテゴリーごとに帯の色を変えて、リズムを作る - 商品写真の明るさとトーンをそろえる - 見出しは英字の斜体コンデンスと、カナ読みをセットにする - 一覧ボタンは黒で統一する - 白地を多めにとって、写真を主役にする

Don't - 角丸・影・グラデーションを使わない - 色帯に原色や蛍光色を使わない - 商品情報の文字を大きくしすぎない - ボタンの色をカテゴリーごとに変えない - 装飾的なイラストを足さない

Page Structure

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

1. ファーストビュー（特集テーマを一目で伝える）: 左にティール地と英字大見出し、リード文を置き、右に商品写真タイルを並べる
2. カテゴリーナビ（見たいカテゴリーへ移動させる）: 円形サムネイル7個を、番号と英字名つきで横一列に並べる
3. カテゴリー1 帯（テイストを写真で見せる）: 色帯と横長の平置き写真を重ね、番号ラベルと見出しを置く
4. カテゴリー1 商品一覧（購入へつなげる）: 4列×2段の着用写真グリッドの下に、黒い一覧ボタンを置く
5. カテゴリー2〜6（同じ型をくり返して網羅する）: 帯の色だけを変え、帯と8商品と一覧ボタンを交互に置く
6. カテゴリー7 帯と商品一覧（最後のカテゴリーで締める）: 緑の帯と商品グリッドの後、一覧ボタンで終える

Imagery

• カテゴリー写真は、明るいグレーの床に商品を平置きにした俯瞰の物撮り
• 商品写真はモデルの着用カット。顔が切れる構図や自然光のスナップ風
• 背景は白・グレー・街並みなど、明るく自然なものにする
• FVは商品の単体切り抜きを、白い四角タイルに入れて並べる
• イラストやアイコンは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは商品グリッドを2列×4段にする
• FVは見出しブロックを上、写真タイルを下に縦積みにする
• カテゴリーナビは横スクロールか、4個と3個の2段にする
• 縦書きの英字タイトルはSPでは消す
• 帯の写真は幅90%にし、見出しを30px前後に縮める

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