DESIGN.md — えんじ×ミントのレトロ特撮コラボ雑貨 LP（Retro Hero Collaboration Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: レトロ、ポップ・元気、クール・先進的
• キーワード: えんじ地・ミントの差し色・帯状コピー・円形カテゴリ図・縦長コンデンス英字・切り抜き商品
• 地の質感: ベタ塗りのマットな面。グラデーションや影は使わない。
• 形: 角丸の写真カード、黒い細枠の長方形ラベル、細線のピル型ボタン、大きな円形図。
• 温度感: えんじの暖色にミントの寒色をぶつけた、補色寄りのコントラスト。

Colors

• 地色は全面えんじ 1 色。セクションを色で分けない。
• 差し色はミントだけ。ラベル、見出し文字、特集パネルに使う。
• ミント地の上の文字は黒かえんじ。白は載せない。
• えんじ地の上の本文は白かミントにする。
• グレージュは円形カテゴリ図の面だけに使う。
• 写真に重ねる見出しラベルは、えんじ地にミント文字。
• category-wheel は文字 #D9D2D1 × 背景 #928686 のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#635959、4.54:1）を使う。

Typography

• 見出しは縦長のコンデンス英字を全大文字で組む。
• 日本語は小さめのゴシックで、短い文を改行して並べる。
• 日本語の大見出しは作らない。
• 円形図のカテゴリ英字は縦書きにして、字間を広く取る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カテゴリのピル型ボタンだけ 2 列。
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 60px、基本単位 8px、カード内 30px（375px 幅換算）
• 帯コピーは画面幅の 60〜75% に左揃えで積み、ブロック全体を中央に置く。
• 円形図は画面幅より大きくし、左右をはみ出させる。
• 特集パネルは幅 85%。中の写真は幅 75% で縦に並べる。
• スライダーは中央の 1 枚を大きく見せ、左右に隣の写真をのぞかせる。

Elevation & Depth

• 影は使わず、すべてフラットに仕上げる。
• ラベルは 1px の黒枠で輪郭を付ける。
• 切り抜いた商品を円形図の上に重ねて、奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: スライダーは角丸 12px の縦長カード。特集写真は角丸なしの横長。商品は白抜きで切り抜く。
• セクション境界: 区切り線は入れず、地色を続けて余白だけで区切る。
• 帯ラベルとカテゴリボタンは角丸なしで、黒の 1px 枠。
• サブ導線はミントの細線で囲むピル型。
• 特集パネルは上下とも角丸 16px。見出し帯の下に細いえんじ線を入れる。

Components

• 写真スライダー（hero-slider）: 角丸の縦長写真カードに白の細枠を付ける。下にドットのページャーを置き、現在位置をミントで示す。
• 帯状コピー（band-copy）: ミント地に黒枠の帯を 1 行ずつ積み、幅は文の長さに合わせる。
• 発売情報ボックス（release-box）: ミントの細線で囲む角丸の枠に、ミント文字で日程を 3 行並べる。
• 円形カテゴリ図（category-wheel）: グレージュの大きな円を放射線で区切り、切り抜いた商品と縦書きの英字を配置する。
• カテゴリボタン（button-category）: ミント地に黒枠と黒文字で、右端に「>」を付ける。
• ピル型サブボタン（button-pill-outline）: 透明地にミントの細線を引き、白文字と右矢印を入れる。2 列で並べる。
• 特集パネル（feature-panel）: ミント地の大きな角丸パネル。上部にえんじの英字見出しを置き、写真を縦に並べる。
• 写真重ね英字ラベル（photo-label）: 写真の端に重ねる、えんじ地にミント英字の長方形ラベル。

Do's and Don'ts

Do - 地色はえんじ 1 色で通す。 - 強調はミントだけにする。 - 英字見出しは縦長のコンデンス体を全大文字で使う。 - 商品は切り抜いて図形の上にリズムよく散らす。 - ラベル類は細い黒枠の長方形で統一する。

Don't - グラデーションやドロップシャドウを使わない。 - ミント以外の鮮やかな色を UI に加えない。 - 日本語を大きな太字見出しにしない。 - 本文を長い段落で組まない。 - セクションごとに地色を変えない。

Page Structure

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

1. ファーストビュー（着用写真で商品の世界観を伝える）: 角丸の写真カードを横スライダーで見せ、下にドットのページャーを置く。
2. コラボロゴ（コラボであることを示す）: 白いロゴを 2 つ上下に並べ、間を光のモチーフでつなぐ。下に小さな権利表記を入れる。
3. コンセプト（企画の趣旨を短く伝える）: ミントの帯に 1 文ずつ載せ、7 行ほど積む。
4. 発売スケジュール（弾ごとの発売日を知らせる）: 細線で囲んだ枠に、ミント文字で 3 行並べる。
5. カテゴリ（商品の種類別に誘導する）: キャラクターの切り抜きの下にミントの英字見出しを置く。円形図に商品を配置し、カテゴリボタンを添える。
6. シリーズ別導線（作品別の一覧へ誘導する）: ピル型の線ボタンを 2 列×2 段で並べる。
7. 特集（アイテム別のスタイリングを見せる）: ミントのパネルに横長の着用写真を縦に並べ、英字ラベルを重ねる。末尾に英文の一言を入れる。

Imagery

• 写真は 20〜30 代の男女の自然光ポートレート。屋外の緑や部屋の中で撮り、色味は少し落ち着かせる。
• 顔が少し切れる寄りの構図で、商品を主役にする。
• 商品は白抜きで切り抜き、角度を少しずつ変えて散らす。
• キャラクターは切り抜きにし、見出しの上に飾りとして置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はスライダーで写真を 3 枚以上並べて表示する。
• PC は本文を中央の約 30% 幅のカラムに置き、左にロゴとカテゴリナビを固定する。
• PC は右余白に、斜めに散らした着用写真のコラージュを置く。
• 円形図と特集パネルは、PC では中央に約 50% 幅で置く。

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