DESIGN.md — 生成りグレー×朱赤のレトロフェスコラボ LP（Retro Americana Festival Collab Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: レトロ、ポップ・元気、親しみ・手作り感
• キーワード: 50年代アメリカン・コラージュ・オフセット影・生成りグレー・朱赤見出し・フェス
• 地の質感: フラットな生成りグレーの地。FV だけ網点・ざらつきのあるレトロ印刷風コラージュ
• 形: 角丸カード・ピル型ボタンに緑のずらし影。傾いた楕円ラベル
• 温度感: 暖かめ。朱赤とクリームで陽気、紺の文字で引き締める

Colors

• 地は生成りグレー、情報のまとまりは白の角丸ボックスに載せる
• 大見出し・日付・帯は朱赤一色で統一
• 白ボタンとカードには必ず緑のずらし影を付ける
• 本文は黒ではなく濃紺で、柔らかく見せる
• BUY 等の小ボタンは濃紺塗り×白文字
• ページ末尾は朱赤の全幅帯で締める
• 黄・青などの多色は FV コラージュと商品写真に限定
• tag-script は文字 #02B256 × 背景 #FDE483 のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#017539、4.61:1）を使う。
• label-filled-pill は文字 #FDE483 × 背景 #CA3D1B のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BA3819、4.53:1）を使う。

Typography

• 英字見出しは太いサンセリフで朱赤・中央揃え
• 本文は太字寄りで行間 2.0 前後とゆったり
• 価格は小さく、税込は更に小さく添える
• カテゴリラベルだけ筆記体で遊びを出す
• 日付は大きく朱赤、時刻や区分は一段小さく朱赤
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せ 1 カラム＋画像とテキストの 2 カラム交互
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは左右約 10% の余白
• 白ボックスは画面幅の約 90% で角丸大
• 商品カードは縦に積み、間隔 16px 程度
• ボタンは中央配置で幅 60〜80%
• 開催概要はラベル＋値の行を罫線で区切る

Elevation & Depth

• 影はぼかさない緑のオフセット影（右下 6px 程度）のみ
• 白ボックスは影なしのフラット
• 商品写真は白背景に薄い落ち影

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸 12px の矩形。メイン写真は緑細枠の縦長矩形
• セクション境界: 直線で切り替え。最下部は全幅の色帯
• 主ボタンは白ピル＋緑ずらし影＋右に小さな矢印
• 見出し枠は朱赤線の白抜きピル
• カテゴリラベルは緑枠の傾いた楕円
• 小見出しは朱赤塗りピルにクリーム文字

Components

• 白ピル主ボタン（button-primary）: 白地に黒太字、右に「>」、右下に緑のずらし影
• 濃紺小ボタン（button-secondary）: 店舗検索など補助導線。濃紺塗りに白文字と矢印
• 商品カード（product-card）: 白角丸カードに商品写真、名称、価格、説明、右下に濃紺 BUY バッジ。右下に緑オフセット影
• 傾き筆記体ラベル（tag-script）: クリーム地に緑枠・緑文字の楕円、-10度程度傾けて写真の左上にかぶせる
• 枠線ピル見出し（heading-outline-pill）: 朱赤細線の横長ピルに朱赤文字。スケジュール等の区切り
• 朱赤塗りピル小見出し（label-filled-pill）: 写真下に置く朱赤ピル、クリーム太字
• 白い大ボックス（content-box）: 活動紹介やブースを包む白の大角丸パネル
• BUY バッジ（buy-badge）: カード右下の濃紺ピル小バッジ

Do's and Don'ts

Do - 白要素には緑のずらし影を必ず付ける - 見出しは朱赤で統一する - FV はレトロなコラージュで賑やかに、以降は余白多めで整理 - 写真は角丸で揃える - 日付は大きく、販売場所は本文で中央揃え

Don't - ぼかしたドロップシャドウを使わない - 純黒の本文にしない - 朱赤以外の色で見出しを作らない - グラデーション背景を使わない - 筆記体ラベルを多用しない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 生成り地にロゴ、モノクロのダンサー写真、カラフルなアイテムを切り抜きコラージュ。上下に幾何学模様の帯
2. イントロ（協賛の概要と発売告知）: イベントロゴの下に太字本文、白ピル主ボタン
3. コラボアイテム（商品の魅力を見せる）: 朱赤英字見出し、筆記体ラベル付きスライダー写真、リード文、商品カード縦積み
4. 発売スケジュール（発売日と販売場所）: 枠線ピル見出し、朱赤の大きな日付、店舗一覧を中央揃え、朱赤細線区切り、ボタン 2 つ
5. 追加アイテム（別商品の紹介）: 緑枠写真に筆記体ラベル、説明、発売日、価格と主ボタン
6. その他の活動（協賛活動の紹介）: 白大ボックス内に朱赤見出し、ロゴ画像、本文、角丸のライブ写真 2 枚
7. ブース紹介（現地コンテンツの案内）: 白大ボックスに写真＋朱赤塗りピル小見出し＋本文を 3 回繰り返す
8. 開催概要（日時・会場・公式サイト）: 淡グレー地に中央見出し、ラベルと値を罫線区切りで並べる
9. CTA（新作一覧へ誘導）: 朱赤全幅帯に白英字見出し、白ピルボタン 2 つ

Imagery

• FV は網点入りモノクロ人物と、彩度高めのアイテムの切り抜きを重ねたレトロコラージュ
• 幾何学パターン（円・半円・星・波）を紺・朱・水色で帯状に配置
• 商品は白背景の物撮り、薄い落ち影
• 着用写真は自然光のカジュアルなスナップ
• 会場写真はライブの夜景や野外の現地スナップ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV コラージュを横長に広げる
• PC は商品カードを横長型（左に画像・右にテキスト）にする
• PC のスケジュールは左に丸枠見出し、右に日付と店舗の 2 カラム
• PC のブース紹介は画像とテキストを左右交互の 2 カラムに
• PC の最下部 CTA はボタンを横並びにする

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