紺青×赤のレトロコラージュアパレルコラボLP

Retro 80s Collage Apparel Collaboration LP

くすんだ紺青の紙質感地に、ポラロイド風フレームの着用写真と星形バッジを散らした80年代レトロなコラボアパレルLP。赤のブラシ書体とピル型BUYボタンが強調色になる。

ファッション・アクセサリーレトロポップ・元気力強い・インパクトSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は紺青と濃紺を交互にしてセクションを分ける
赤はボタン・バッジ文字・区切り線だけに使う
写真は生成りのポラロイド枠で囲み、地から浮かせる
告知は白ボックスに赤文字で入れる
背景の装飾は半透明の淡青で、主役を邪魔しない
フッターは黒地に写真を暗く敷く

TYPOGRAPHY

書体

displayロゴ風の大見出し欧文セリフ／ Playfair Display 900 ／ 48px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

accent星形バッジのITEM番号欧文スクリプト／ Permanent Marker 400 ／ 22px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

body-md導入文ゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm日付告知ゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-lg商品番号・価格欧文サンセリフ／ Roboto 400 ／ 13px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonBUY・ALL ITEMS欧文スクリプト／ Permanent Marker 400 ／ 18px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・著作権表記ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

見出し文字は極力少なく、写真と装飾で語る
商品番号は角括弧で囲み中央揃え
価格は税込表記を小さく添える
ブラシ書体はバッジとボタンだけに使う
本文は白・中央寄せで短く

PAGE STRUCTURE

セクション構成

ファーストビュー作品の世界観とコラボを伝えるコラージュ背景に赤ロゴ、中央に傾けたポラロイドの着用写真
導入・発売告知商品の概要と発売日を伝える白の中央寄せ本文の下に白い告知ボックスを2つ
集合ビジュアルコレクション全体の雰囲気を見せる角丸の大きな集合写真にエンブレムを重ねる
着用写真ギャラリー商品ごとの着こなしを見せる星形番号付きのポラロイドを左右交互に傾ける
商品一覧価格を示して購入へ誘導する2カラムのハンガー商品画像＋価格＋赤BUY
ギャラリーと一覧の繰り返しアイテム群ごとに見せる赤の斜め線で区切り、地色を交互にして繰り返す
一覧CTA・フッター全商品ページへ送る暗い写真の上に赤長方形ボタン、注釈、著作権表記

COMPONENTS

部品

ポラロイド写真枠 polaroid-frame生成りの枠で下を厚くし、傾けて影をつける
星形ITEMバッジ star-badge黒い星形に赤のブラシ文字でITEMと番号
BUYピルボタン button-buy小さく細長い赤ピルに黒文字
一覧へのボタン button-primary幅広の赤長方形にブラシ書体
発売日告知ボックス notice-box白ボックスに赤太字で日付と販路
商品カード product-cardハンガー付き商品画像、番号、価格、BUY
背景ステッカー sticker-decoレトロポスター風の半透明装飾を回転させる

守ること

写真はポラロイド枠か角丸枠で囲む
赤はクリック要素と番号に絞る
紙ノイズのある紺青地を全面に使う
装飾は傾けて重ねてコラージュ感を出す
商品には番号・品名・税込価格を必ず添える

DON'T

避けること

白地や明るい地のセクションは作らない
ブラシ書体を本文に使わない
写真を枠なしのまま並べない
赤を大面積の背景に使わない
長い説明文を入れない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 紺青×赤のレトロコラージュアパレルコラボLP（Retro 80s Collage Apparel Collaboration LP）

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

Overview

業種: ファッション・アクセサリー／ 雰囲気: レトロ、ポップ・元気、力強い・インパクト
キーワード: 80年代レトロ・コラージュ・ポラロイド・ストリート・紙の質感・ネオン落書き
地の質感: ざらついた紙ノイズの紺青地。ステッカーやポスターを半透明で重ねる
形: 傾けたポラロイド枠、トゲのある星形バッジ、細い赤の斜め線
温度感: 寒色の地に赤のアクセントで温度差をつける

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#216C96`	ブランド紺青の地	35%	画素の実測
`background`	`#164B6A`	濃紺のセクション地	30%	画素の実測
`cta`	`#BC211B`	BUY・ALL ITEMSボタン	2%	画素の実測
`on-cta`	`#0A0101`	ボタン上の文字	0%	画素の実測
`surface`	`#FEFDFD`	告知ボックスの白	2%	画素の実測
`accent-1`	`#9B393B`	告知文字・ロゴ赤	0%	画素の実測
`tint-1`	`#E9E0DB`	ポラロイド枠の生成り	8%	画素の主要色に補正
`dark-section`	`#0C0B0A`	星形バッジ・フッター黒	6%	画素の実測
`on-dark`	`#E9E0DB`	紺地上の白文字	1%	画素の主要色に補正
`accent-2`	`#BC3D39`	バッジ内の赤ブラシ文字	0%	画素の実測
`line`	`#C23A3A`	セクション区切りの赤線	0%	推定
`text-muted`	`#509BB9`	背景ステッカーの淡青	5%	画素の実測
`dark-section-accessible`	`#ECEAE8`	AA を満たす補正値（計算）		計算
`cta-accessible`	`#E02E27`	AA を満たす補正値（計算）		計算

地は紺青と濃紺を交互にしてセクションを分ける
赤はボタン・バッジ文字・区切り線だけに使う
写真は生成りのポラロイド枠で囲み、地から浮かせる
告知は白ボックスに赤文字で入れる
背景の装飾は半透明の淡青で、主役を邪魔しない
フッターは黒地に写真を暗く敷く
star-badge は文字 #BC3D39 × 背景 #0C0B0A のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#ECEAE8、4.53:1）を使う。
button-buy は文字 #0A0101 × 背景 #BC211B のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E02E27、4.51:1）を使う。
button-primary は文字 #0A0101 × 背景 #BC211B のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E02E27、4.51:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ロゴ風の大見出し	欧文セリフ	Playfair Display	900	48px	1.0	0.0em
`accent`	星形バッジのITEM番号	欧文スクリプト	Permanent Marker	400	22px	1.0	0.02em
`body-md`	導入文	ゴシック	Noto Sans JP	400	13px	1.9	0.05em
`headline-sm`	日付告知	ゴシック	Noto Sans JP	700	14px	1.5	0.02em
`body-lg`	商品番号・価格	欧文サンセリフ	Roboto	400	13px	1.6	0.03em
`label-button`	BUY・ALL ITEMS	欧文スクリプト	Permanent Marker	400	18px	1.0	0.05em
`note`	注釈・著作権表記	ゴシック	Noto Sans JP	400	11px	1.6	0.02em

見出し文字は極力少なく、写真と装飾で語る
商品番号は角括弧で囲み中央揃え
価格は税込表記を小さく添える
ブラシ書体はバッジとボタンだけに使う
本文は白・中央寄せで短く
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、商品一覧は 2 カラム
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
着用写真は1枚ずつ左右交互に傾けて配置
着用写真ブロックの後に商品一覧グリッドを置く
商品は白抜き画像＋番号＋価格＋BUYの縦積み
背景ステッカーは画面外にはみ出させる
セクション間は赤の斜め二重線で区切る

Elevation & Depth

ポラロイド枠に右下へ濃い影
ボタンに下方向の黒い影
大きな集合写真は角丸と黒枠のみ

Shapes

角丸: 小 4px ／中 10px ／大 20px。ボタンはピル型。
写真の切り抜き: ポラロイド風フレームで2〜5度傾ける。集合写真は大きめ角丸の長方形
セクション境界: 細い赤線を斜めに2本引く
番号はトゲのある黒い星形
告知ボックスは角丸10px
ALL ITEMSは角丸なしの赤の長方形
ステッカー類は回転させて重ねる

Components

ポラロイド写真枠（polaroid-frame）: 生成りの枠で下を厚くし、傾けて影をつける
星形ITEMバッジ（star-badge）: 黒い星形に赤のブラシ文字でITEMと番号
BUYピルボタン（button-buy）: 小さく細長い赤ピルに黒文字
一覧へのボタン（button-primary）: 幅広の赤長方形にブラシ書体
発売日告知ボックス（notice-box）: 白ボックスに赤太字で日付と販路
商品カード（product-card）: ハンガー付き商品画像、番号、価格、BUY
背景ステッカー（sticker-deco）: レトロポスター風の半透明装飾を回転させる

Do's and Don'ts

Do - 写真はポラロイド枠か角丸枠で囲む - 赤はクリック要素と番号に絞る - 紙ノイズのある紺青地を全面に使う - 装飾は傾けて重ねてコラージュ感を出す - 商品には番号・品名・税込価格を必ず添える

Don't - 白地や明るい地のセクションは作らない - ブラシ書体を本文に使わない - 写真を枠なしのまま並べない - 赤を大面積の背景に使わない - 長い説明文を入れない

Page Structure

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

ファーストビュー（作品の世界観とコラボを伝える）: コラージュ背景に赤ロゴ、中央に傾けたポラロイドの着用写真
導入・発売告知（商品の概要と発売日を伝える）: 白の中央寄せ本文の下に白い告知ボックスを2つ
集合ビジュアル（コレクション全体の雰囲気を見せる）: 角丸の大きな集合写真にエンブレムを重ねる
着用写真ギャラリー（商品ごとの着こなしを見せる）: 星形番号付きのポラロイドを左右交互に傾ける
商品一覧（価格を示して購入へ誘導する）: 2カラムのハンガー商品画像＋価格＋赤BUY
ギャラリーと一覧の繰り返し（アイテム群ごとに見せる）: 赤の斜め線で区切り、地色を交互にして繰り返す
一覧CTA・フッター（全商品ページへ送る）: 暗い写真の上に赤長方形ボタン、注釈、著作権表記

Imagery

着用写真は工業的な階段や配管で撮り、フラッシュ風の強いコントラストにする
モデルはストリート系のスタイリングで無表情寄り
商品は白背景で切り抜き、ハンガーに掛けた形で見せる
背景は80年代のポスター・ステッカー・カセットなどを半透明でコラージュする
蛍光の稲妻や落書き線を少し足す
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは本文幅を約70%に絞って中央に置く
PCのFVはロゴを左、ポラロイドを右に横並びにする
PCのポラロイドは2〜3枚をジグザグに配置する
PCの商品一覧は3〜4カラムにする
告知ボックスはPCでピル型の横長1行にする

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

---
version: alpha
name: Retro 80s Collage Apparel Collaboration LP
description: くすんだ紺青の紙質感地に、ポラロイド風フレームの着用写真と星形バッジを散らした80年代レトロなコラボアパレルLP。赤のブラシ書体とピル型BUYボタンが強調色になる。
colors:
  primary: '#216C96'
  background: '#164B6A'
  cta: '#BC211B'
  on-cta: '#0A0101'
  surface: '#FEFDFD'
  accent-1: '#9B393B'
  tint-1: '#E9E0DB'
  dark-section: '#0C0B0A'
  on-dark: '#E9E0DB'
  accent-2: '#BC3D39'
  line: '#C23A3A'
  text-muted: '#509BB9'
  dark-section-accessible: '#ECEAE8'
  cta-accessible: '#E02E27'
typography:
  display:
    fontFamily: Playfair Display
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1.0
  accent:
    fontFamily: Permanent Marker
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Roboto
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
  label-button:
    fontFamily: Permanent Marker
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
rounded:
  sm: 4px
  md: 10px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
  polaroid-frame:
    backgroundColor: '{colors.tint-1}'
    height: 380px
  star-badge:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.accent-2}'
    typography: '{typography.accent}'
    height: 70px
  button-buy:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 16px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 56px
  notice-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 72px
  product-card:
    textColor: '{colors.on-dark}'
    typography: '{typography.body-lg}'
    height: 300px
  sticker-deco:
    backgroundColor: '{colors.text-muted}'
    height: 200px
---

# DESIGN.md — 紺青×赤のレトロコラージュ アパレルコラボLP（Retro 80s Collage Apparel Collaboration LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: レトロ、ポップ・元気、力強い・インパクト
- **キーワード**: 80年代レトロ・コラージュ・ポラロイド・ストリート・紙の質感・ネオン落書き
- **地の質感**: ざらついた紙ノイズの紺青地。ステッカーやポスターを半透明で重ねる
- **形**: 傾けたポラロイド枠、トゲのある星形バッジ、細い赤の斜め線
- **温度感**: 寒色の地に赤のアクセントで温度差をつける

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#216C96` | ブランド紺青の地 | 35% | 画素の実測 |
| `background` | `#164B6A` | 濃紺のセクション地 | 30% | 画素の実測 |
| `cta` | `#BC211B` | BUY・ALL ITEMSボタン | 2% | 画素の実測 |
| `on-cta` | `#0A0101` | ボタン上の文字 | 0% | 画素の実測 |
| `surface` | `#FEFDFD` | 告知ボックスの白 | 2% | 画素の実測 |
| `accent-1` | `#9B393B` | 告知文字・ロゴ赤 | 0% | 画素の実測 |
| `tint-1` | `#E9E0DB` | ポラロイド枠の生成り | 8% | 画素の主要色に補正 |
| `dark-section` | `#0C0B0A` | 星形バッジ・フッター黒 | 6% | 画素の実測 |
| `on-dark` | `#E9E0DB` | 紺地上の白文字 | 1% | 画素の主要色に補正 |
| `accent-2` | `#BC3D39` | バッジ内の赤ブラシ文字 | 0% | 画素の実測 |
| `line` | `#C23A3A` | セクション区切りの赤線 | 0% | 推定 |
| `text-muted` | `#509BB9` | 背景ステッカーの淡青 | 5% | 画素の実測 |
| `dark-section-accessible` | `#ECEAE8` | AA を満たす補正値（計算） |  | 計算 |
| `cta-accessible` | `#E02E27` | AA を満たす補正値（計算） |  | 計算 |

- 地は紺青と濃紺を交互にしてセクションを分ける
- 赤はボタン・バッジ文字・区切り線だけに使う
- 写真は生成りのポラロイド枠で囲み、地から浮かせる
- 告知は白ボックスに赤文字で入れる
- 背景の装飾は半透明の淡青で、主役を邪魔しない
- フッターは黒地に写真を暗く敷く
- `star-badge` は文字 `#BC3D39` × 背景 `#0C0B0A` のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#ECEAE8`、4.53:1）を使う。
- `button-buy` は文字 `#0A0101` × 背景 `#BC211B` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E02E27`、4.51:1）を使う。
- `button-primary` は文字 `#0A0101` × 背景 `#BC211B` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E02E27`、4.51:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ロゴ風の大見出し | 欧文セリフ | Playfair Display | 900 | 48px | 1.0 | 0.0em |
| `accent` | 星形バッジのITEM番号 | 欧文スクリプト | Permanent Marker | 400 | 22px | 1.0 | 0.02em |
| `body-md` | 導入文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em |
| `headline-sm` | 日付告知 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em |
| `body-lg` | 商品番号・価格 | 欧文サンセリフ | Roboto | 400 | 13px | 1.6 | 0.03em |
| `label-button` | BUY・ALL ITEMS | 欧文スクリプト | Permanent Marker | 400 | 18px | 1.0 | 0.05em |
| `note` | 注釈・著作権表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em |

- 見出し文字は極力少なく、写真と装飾で語る
- 商品番号は角括弧で囲み中央揃え
- 価格は税込表記を小さく添える
- ブラシ書体はバッジとボタンだけに使う
- 本文は白・中央寄せで短く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、商品一覧は 2 カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
- 着用写真は1枚ずつ左右交互に傾けて配置
- 着用写真ブロックの後に商品一覧グリッドを置く
- 商品は白抜き画像＋番号＋価格＋BUYの縦積み
- 背景ステッカーは画面外にはみ出させる
- セクション間は赤の斜め二重線で区切る

## Elevation & Depth

- ポラロイド枠に右下へ濃い影
- ボタンに下方向の黒い影
- 大きな集合写真は角丸と黒枠のみ

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: ポラロイド風フレームで2〜5度傾ける。集合写真は大きめ角丸の長方形
- **セクション境界**: 細い赤線を斜めに2本引く
- 番号はトゲのある黒い星形
- 告知ボックスは角丸10px
- ALL ITEMSは角丸なしの赤の長方形
- ステッカー類は回転させて重ねる

## Components

- **ポラロイド写真枠**（`polaroid-frame`）: 生成りの枠で下を厚くし、傾けて影をつける
- **星形ITEMバッジ**（`star-badge`）: 黒い星形に赤のブラシ文字でITEMと番号
- **BUYピルボタン**（`button-buy`）: 小さく細長い赤ピルに黒文字
- **一覧へのボタン**（`button-primary`）: 幅広の赤長方形にブラシ書体
- **発売日告知ボックス**（`notice-box`）: 白ボックスに赤太字で日付と販路
- **商品カード**（`product-card`）: ハンガー付き商品画像、番号、価格、BUY
- **背景ステッカー**（`sticker-deco`）: レトロポスター風の半透明装飾を回転させる

## Do's and Don'ts

**Do**
- 写真はポラロイド枠か角丸枠で囲む
- 赤はクリック要素と番号に絞る
- 紙ノイズのある紺青地を全面に使う
- 装飾は傾けて重ねてコラージュ感を出す
- 商品には番号・品名・税込価格を必ず添える

**Don't**
- 白地や明るい地のセクションは作らない
- ブラシ書体を本文に使わない
- 写真を枠なしのまま並べない
- 赤を大面積の背景に使わない
- 長い説明文を入れない

## Page Structure

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

1. **ファーストビュー**（作品の世界観とコラボを伝える）: コラージュ背景に赤ロゴ、中央に傾けたポラロイドの着用写真
2. **導入・発売告知**（商品の概要と発売日を伝える）: 白の中央寄せ本文の下に白い告知ボックスを2つ
3. **集合ビジュアル**（コレクション全体の雰囲気を見せる）: 角丸の大きな集合写真にエンブレムを重ねる
4. **着用写真ギャラリー**（商品ごとの着こなしを見せる）: 星形番号付きのポラロイドを左右交互に傾ける
5. **商品一覧**（価格を示して購入へ誘導する）: 2カラムのハンガー商品画像＋価格＋赤BUY
6. **ギャラリーと一覧の繰り返し**（アイテム群ごとに見せる）: 赤の斜め線で区切り、地色を交互にして繰り返す
7. **一覧CTA・フッター**（全商品ページへ送る）: 暗い写真の上に赤長方形ボタン、注釈、著作権表記

## Imagery

- 着用写真は工業的な階段や配管で撮り、フラッシュ風の強いコントラストにする
- モデルはストリート系のスタイリングで無表情寄り
- 商品は白背景で切り抜き、ハンガーに掛けた形で見せる
- 背景は80年代のポスター・ステッカー・カセットなどを半透明でコラージュする
- 蛍光の稲妻や落書き線を少し足す
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは本文幅を約70%に絞って中央に置く
- PCのFVはロゴを左、ポラロイドを右に横並びにする
- PCのポラロイドは2〜3枚をジグザグに配置する
- PCの商品一覧は3〜4カラムにする
- 告知ボックスはPCでピル型の横長1行にする

## 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-d752adc8`（元 LP の URL から採番）
- **元 LP**: https://www.plazastyle.com/strangerthings2024/?via_source=brandsite_banner&via_medium=banner
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

ファッション・アクセサリー桜色×淡青の雑誌風ベビー服 LPSoft Pastel Editorial Baby Apparel LP ファッション・アクセサリーミントティール×黒の機能性サンダル LPTeal Glass Active Footwear LP ファッション・アクセサリー7色帯で切り替えるTシャツ特集LPColor-Block Category Catalog Apparel LP ファッション・アクセサリーくすみブルー×液体シェイプのネイル・アクセ LPPastel Fluid Shapes Accessory & Nail LP ファッション・アクセサリースマイル花柄×原色ポップのアパレルコラボLPMaximal Happy Pop Fashion Collab LP ファッション・アクセサリー生成り×ボルドーのバレンタイン部屋着特集 LPValentine Burgundy Editorial Roomwear LP

配色

書体

セクション構成

部品

守ること

避けること

design.md 全文

DESIGN.md — 紺青×赤のレトロコラージュ アパレルコラボLP（Retro 80s Collage Apparel Collaboration LP）

Overview

Colors

Typography

Layout

Elevation & Depth

Shapes

Components

Do's and Don'ts

Page Structure

Imagery

Responsive Behavior

Agent Prompt Guide

出典と注意

似た LP の design.md

DESIGN.md — 紺青×赤のレトロコラージュアパレルコラボLP（Retro 80s Collage Apparel Collaboration LP）