--- version: alpha name: Retro Pop Music Player Apparel LP description: 太い黒線と影付きの角丸パネル、ミント・ラベンダー・ピンク・赤などカテゴリごとに変わるポップな地色、再生ボタン風UIで商品を並べる、雑貨店のTシャツ特集LP。イラストの店頭ビジュアルとバブル書体ロゴで遊び心を出している。 colors: primary: '#90CEC1' background: '#61BA82' secondary: '#02A1E2' cta: '#FFF345' on-cta: '#282A39' tint-1: '#F7C3D9' tint-2: '#B4BCE0' accent-1: '#EB5C4B' accent-2: '#F07A12' accent-3: '#F389B9' background-alt: '#F2EB91' surface: '#FEFEFE' dark-section: '#1E1E8C' marker: '#F38CBA' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em headline-md: fontFamily: Archivo Black fontSize: 20px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em accent: fontFamily: Lobster fontSize: 32px fontWeight: 700 lineHeight: 1.1 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 8px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 12px section: 60px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' button-check: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 72px button-all: backgroundColor: '{colors.dark-section}' textColor: '{colors.surface}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 72px item-row: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 76px player-panel: backgroundColor: '{colors.accent-3}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 500px items-label: typography: '{typography.headline-md}' height: 32px carousel-nav: backgroundColor: '{colors.surface}' rounded: '{rounded.sm}' height: 36px category-bubble: backgroundColor: '{colors.cta}' typography: '{typography.display}' rounded: '{rounded.full}' height: 100px size-chip: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 28px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#90CEC1` | カテゴリパネル地（ミント） | 10% | 画素の主要色に補正 | | `background` | `#61BA82` | ページ外枠の緑地 | 8% | 画素の実測 | | `secondary` | `#02A1E2` | 方眼背景の鮮やかな青 | 7% | 画素の実測 | | `cta` | `#FFF345` | Check ボタンの黄 | 2% | 画素の実測 | | `on-cta` | `#282A39` | ボタン文字・黒線 | 6% | 画素の主要色に補正 | | `tint-1` | `#F7C3D9` | MOVIESパネルのピンク | 11% | 画素の実測 | | `tint-2` | `#B4BCE0` | MUSICパネルのラベンダー | 9% | 画素の実測 | | `accent-1` | `#EB5C4B` | CHARACTER背景のストライプ赤 | 5% | 画素の実測 | | `accent-2` | `#F07A12` | 見出しのオレンジ | 1% | 推定 | | `accent-3` | `#F389B9` | プレーヤーやロゴのピンク | 2% | 画素の実測 | | `background-alt` | `#F2EB91` | MUSIC背景の黄ストライプ | 5% | 画素の実測 | | `surface` | `#FEFEFE` | 商品カードの白 | 4% | 画素の実測 | | `dark-section` | `#1E1E8C` | All Items ボタンの紺 | 1% | 推定 | | `marker` | `#F38CBA` | 区切りのドット帯 | 1% | 画素の実測 | - カテゴリごとに外側の柄背景とパネル地色を組み替える（青方眼×ミント、黄ストライプ×ラベンダー、ミント方眼×ピンク、赤ストライプ×水色） - すべての部品の線と文字は濃紺寄りの黒#282A39で統一 - 主CTAは黄地に黒文字、最終の一覧ボタンだけ紺地に白文字 - カテゴリ境界にはピンク地に白丸が並ぶドット帯を入れる - 商品カードは白地で、色のついたパネル上で目立たせる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ・カテゴリ見出しの太いレトロ欧文 | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.0 | 0.02em | | `headline-md` | ITEMSなどの斜体欧文ラベル | 欧文サンセリフ | Archivo Black | 900 | 20px | 1.2 | 0.02em | | `accent` | Check・All Items の筆記体風ボタン文字 | 欧文スクリプト | Lobster | 700 | 32px | 1.1 | 0.0em | | `headline-sm` | 見出し上の斜線付きリード | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.04em | | `body-md` | 商品名・紹介文 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.04em | | `note` | 価格・注意書き・権利表記 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | - カテゴリ見出しは太い欧文を黒の縁取り付きで、単色の明るい色にする - 見出しの上に「＼ 〜 ／」型の短いリードを置く - 本文は太めのゴシックで短く切り、中央揃えにする - 価格は「(税込)」を小さく添える - ラベルの欧文は斜体のブラック体 - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-1568d292`（元 LP の URL から採番） - **元 LP**: https://www.plazastyle.com/contents/tee_2026/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。