DESIGN.md — 音楽プレーヤー風レトロポップのTシャツ特集LP（Retro Pop Music Player Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ポップ・元気、レトロ、かわいい、情報量多め・訴求型
• キーワード: 音楽プレーヤーUI・太い黒アウトライン・ずらし影・カテゴリ別カラー・ストライプ・方眼背景・横スクロール商品
• 地の質感: ベタ塗りの平面に斜めストライプや方眼の柄。グラデーションは使わない
• 形: 角丸12〜20pxのパネルに2px黒線と右下ずらし影。ボタンはピル型
• 温度感: 明るく賑やかで暖かめ

Colors

• カテゴリごとに外側の柄背景とパネル地色を組み替える（青方眼×ミント、黄ストライプ×ラベンダー、ミント方眼×ピンク、赤ストライプ×水色）
• すべての部品の線と文字は濃紺寄りの黒#282A39で統一
• 主CTAは黄地に黒文字、最終の一覧ボタンだけ紺地に白文字
• カテゴリ境界にはピンク地に白丸が並ぶドット帯を入れる
• 商品カードは白地で、色のついたパネル上で目立たせる

Typography

• カテゴリ見出しは太い欧文を黒の縁取り付きで、単色の明るい色にする
• 見出しの上に「＼ 〜 ／」型の短いリードを置く
• 本文は太めのゴシックで短く切り、中央揃えにする
• 価格は「(税込)」を小さく添える
• ラベルの欧文は斜体のブラック体
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は横スクロールカルーセルで1.4枚分見せる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算）
• 外側の柄背景の上に角丸パネルを置き、中に商品群を入れる
• モデル写真→ITEMSリスト→横スクロール商品の順をくり返す
• カルーセルの下右寄せに戻る・送るボタンを並べる
• カテゴリの最後に幅いっぱいのCheckボタンを置く

Elevation & Depth

• 影はぼかさず、黒または濃色で右下に4〜6pxずらす
• パネルは2枚重ねの色ずらしで厚みを出す
• 商品カードは影なしで黒線だけ

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形、商品画像は正方形
• セクション境界: 白丸が並ぶピンクのドット帯、FV下は白いV字の山形
• 線はすべて2px前後の濃紺黒
• 吹き出し・楕円・ラベル形のカテゴリボタンを傾けて重ねる
• プレーヤー型パネルには進捗バーと再生ボタンを描く

Components

• Check ボタン（button-check）: 黄色のピル型。黒線と下ずらし影、右に黒丸の再生アイコン
• 一覧ボタン（button-all）: 紺地白文字のピル型。最後の総合CTA
• 商品リスト行（item-row）: 白地に黒線の角丸カード。左に小さい商品画像、商品名と価格、右に黒丸の再生ボタン
• プレーヤー風パネル（player-panel）: ピンク地にタイトル、写真、進捗バー、戻る・再生・送るの操作アイコン
• ITEMSラベル（items-label）: 三本線のメニューアイコンと斜体の欧文ラベル
• カルーセル送りボタン（carousel-nav）: 角丸の四角に早戻し・早送りアイコン。戻るは薄く無効風
• カテゴリ吹き出し（category-bubble）: 楕円・吹き出し・札形を色違いで傾けて重ね、各カテゴリへのリンクにする
• サイズ選択ボタン（size-chip）: 白地黒線の小さい角丸ボタン。左に早送りアイコン

Do's and Don'ts

Do - 線色と影色は1色の濃い黒に統一する - カテゴリごとに背景の柄とパネル色を変えて区切る - 再生・早送りなど音楽プレーヤーのアイコンをUIに使う - 商品写真は単色背景のスタジオ撮影で揃える - CTAボタンはカテゴリの終わりごとにくり返す

Don't - グラデーションやぼかし影を使わない - 細い明朝体や上品な書体を使わない - 線のない浮いたカードにしない - パネルを角ばった四角にしない - くすんだ低彩度の配色にしない

Page Structure

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

1. ファーストビュー（企画の世界観と楽しさを伝える）: 空色地に店頭の屋台イラストとモデルを合成し、太いバブル書体のロゴを重ねる
2. 企画紹介（限定品が集まることを説明する）: 青い二重パネルの中に小ロゴと中央揃えの短文、行ごとに下線
3. カテゴリナビ（4カテゴリへ誘導する）: 色違いの吹き出し・楕円・札を傾けて重ね、手描き矢印とTapの文字
4. 注目コラボ特集（目玉の作品コラボを見せる）: 青方眼背景×ミントパネル。プレーヤー型パネル、ITEMSリスト、横スクロール商品
5. 音楽カテゴリ（音楽系Tシャツを並べる）: 黄ストライプ×ラベンダーパネル。オレンジの見出しとモデル写真＋商品リスト
6. 映画・ドラマカテゴリ（映像作品のTシャツを並べる）: ミント方眼×ピンクパネル。青い見出し
7. キャラクターカテゴリ（キャラクターTシャツを並べる）: 赤ストライプ×水色パネル。黄の見出し
8. サイズから探す（シルエット別に絞り込ませる）: ミントの二重パネルにスクリプト見出しと4つの小ボタン
9. 総合CTA・注意事項（全商品ページへ送る）: 紺のピル型ボタンと小さい注意書き、下端にドット帯

Imagery

• モデル写真は赤・紫・青緑・黄などのビビッドな単色背景で、正面から全身や上半身を撮る
• 男女のペアや1人で、Tシャツのプリントがはっきり見えるポーズ
• 商品画像はプリント部分を正方形に大きくトリミングし、右上に丸いプラスアイコン
• イラストは黒の太い線とベタ塗りのレトロポップ調
• 手描き風の矢印や星、ステッカー風の小さなバッジを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないため、柄背景を画面いっぱいに敷き、パネルを最大幅約1000pxで中央に置く
• PCでは商品カルーセルを3〜4枚表示にする
• ITEMSリストはPCで2列にする
• カテゴリナビの吹き出しは横一列に並べる

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