DESIGN.md — 紺×赤白ストライプのスポーツ応援コラボグッズLP（Tricolor Stripe Sports Collab Merch LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 代表ユニフォーム配色・斜めストライプ・傾いた黒帯見出し・金ラベル・キャラクター配置・グッズカタログ
• 地の質感: 紺地に青い炎のようなもやの質感、黒帯にはかすれたグランジ加工。ショップ部分は白でフラット。
• 形: 斜め45度の紺・赤ストライプ帯、少し回転させた長方形の見出し帯、角丸の大きい白フレーム。
• 温度感: 紺が基調でクールだが、赤とキャラクターの色で熱く元気な印象。

Colors

• 紺・白・赤の代表カラー3色を軸にし、他の色はキャラクターや写真に任せる。
• ショップの外側は白地に紺と赤の斜めストライプを敷き詰め、内側の白フレームは無地に保つ。
• 見出し帯は黒地に白文字。カテゴリラベルは金地に白文字で統一する。
• 価格は必ず赤、税込表記は小さめの赤。
• 作品紹介のみくすみグリーン地にして、応援パートと切り分ける。
• 紺地セクションには青い炎のようなもやとキラッとした光の装飾を重ねる。
• category-label は文字 #FFFFFF × 背景 #A57E31 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#93702C、4.57:1）を使う。

Typography

• 見出しはどれも極太のゴシックにし、細い書体は使わない。
• 導入文は最初の1文字だけ大きくするドロップキャップ風にする。
• 帯の見出しは-5〜-8度ほど傾けて勢いを出す。
• 商品名は中央揃えで2行まで、改行してバリエーション名を置く。
• 価格は数字を大きく、税込は約60%のサイズにする。
• 紺地の大見出しには黒の太い縁取りを付けて白文字を浮かせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• ショップは大きな角丸白フレームにまとめ、背景のストライプが左右に約5%だけ見えるようにする。
• カテゴリラベルはフレーム左端にぴったり付けた金帯で置く。
• 商品は画像・名前・価格を縦に並べ、1点のときは中央に寄せる。
• キャラクターのイラストを見出し帯の端やフレームの角にはみ出して置く。
• カテゴリ間は約60px空けてリズムを出す。

Elevation & Depth

• 影はほとんど使わずフラットにする。
• 黒帯見出しはかすれた縁で質感を出す。
• 外部ボタンだけ光沢グラデと縁取りで立体的にする。
• 紺地の大見出しは黒の縁取りで浮かせる。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 32px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は白抜きの切り抜き、キャラクターは輪郭で切り抜き
• セクション境界: 直線で切り替える。白地セクションは斜めストライプで区切りを示す
• カテゴリラベル・見出し帯は角丸なしの長方形。
• ショップと店舗紹介は金線2px・大きい角丸のフレーム。
• セレクトボックスは紺線の四角で、左に▼を置く。
• SNSアイコンは丸型で横3つ並べる。

Components

• 傾いた黒帯見出し（tilted-banner-heading）: 黒地にグランジ加工、白の極太文字。少し回転させ、右端にキャラを重ねる。
• 金のカテゴリラベル（category-label）: フレーム左端に付けた金の帯に白文字のカテゴリ名を入れる。
• 角丸ショップフレーム（shop-frame）: 白地に金線の大きい角丸枠。上辺の中央に英字ラベルの金プレートを重ねる。
• 商品カード（product-card）: 切り抜いた商品画像、中央揃えの商品名、赤い価格の3段。枠は付けない。
• カテゴリ選択（category-select）: 紺線の四角に▼アイコンと案内文を入れたプルダウン。
• SNSシェア帯（sns-share-bar）: 黒の帯に丸いSNSアイコンを3つ中央に並べる。
• 外部サイトボタン（button-primary）: 光沢のある赤いグラデに白文字と▶アイコン。上にキャラを座らせる。
• 縁取り大見出し（outlined-headline）: 紺地の上の白文字に黒の太い縁取り。両脇にキラッとした光を添える。

Do's and Don'ts

Do - 紺・赤・白の代表カラーと斜めストライプを繰り返し使う。 - 各セクションの端にキャラクターのミニイラストを置いて親しみを出す。 - 商品は同じフォーマットのカードで整然と並べる。 - 見出し帯は傾けて応援の勢いを出す。 - 価格は赤で統一し、税込表記を添える。

Don't - パステルやグラデの多い配色を加えない。 - ショップフレームの中に柄やストライプを入れない。 - 見出しに細い書体や明朝体を使わない。 - 商品カードに影や色付きの枠を付けない。 - ストライプの角度を場所ごとに変えない。

Page Structure

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

1. ファーストビュー（コラボの世界観と熱量を一目で伝える）: 白地に紺赤の斜線を散らし、紺の極太キャッチを置く。ユニフォーム姿のキャラ集合絵と公式マークを入れる。
2. コラボ導入（企画の内容を説明する）: 青い炎の紺地にロゴを2つ並べ、縁取り大見出しを置く。ミニキャラと、ドロップキャップの白い本文を交互に並べる。
3. SNS投稿の呼びかけ（ハッシュタグで投稿してもらう）: グレー地に黒帯見出しとハッシュタグを2行で置く。キャラのイラストを添え、下の黒帯にSNSアイコンを並べる。
4. グッズショップ（商品一覧で購入につなげる）: ストライプ地の上に白の角丸フレームを置く。金ラベルでカテゴリを分け、商品を2列グリッドで並べる。
5. 販売元表示（購入先を示す）: 白地に小さな赤い英字と店舗ロゴを中央に置く。
6. 企画動画（動画でもう一度盛り上げる）: 紺地に黒帯見出しとロゴを置き、縦長の動画プレイヤーを中央に配置する。下にミニキャラを入れる。
7. ショップ紹介（運営する店舗の信頼性を伝える）: ストライプ地に角丸フレームと金ラベルを重ね、ロゴ・赤リンク・説明文を入れる。
8. 作品紹介（原作を告知し、公式サイトへ誘導する）: くすみグリーン地にロゴ・あらすじ・キービジュアルを並べる。赤の告知見出しの後に光沢ボタンを置く。
9. フッター（規約と権利を表記する）: 紺地に白の下線付きリンクを2つ置き、著作権の注意文と権利表記を入れる。

Imagery

• キャラは代表ユニフォーム姿の線画アニメ調。等身大とデフォルメのミニキャラを使い分ける。
• 商品は白背景で切り抜き、正面から撮ってサイズ感をそろえる。
• 紺地には青い炎や煙のようなテクスチャと白い十字の光を重ねる。
• 背景のストライプは紺・赤・白で太さを変えた45度の平行帯にする。
• 見出し帯には黒いインクのかすれやスプラッシュを入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではショップフレームを中央約72%幅にし、商品を4列で並べる。
• PCのFVは横長のキービジュアルにし、左右にSNS導線とグッズ導線を入れる。
• PCの導入はイラストと本文を左右交互の2カラムにする。
• 背景ストライプはPCでフレームの左右に大きく見せる。
• SPでは帯見出しを画面幅いっぱいに傾けて置く。

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