DESIGN.md — 紺×赤×グレーのレトロ漫画風アパレルコラボ LP（Retro Cartoon Collab Loungewear LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: レトロ、ポップ・元気、力強い・インパクト
• キーワード: アメリカンレトロ・カートゥーン・単色ブロック・白フチ切り抜き・太字スラブ見出し・コラボ告知
• 地の質感: 生成りの細かいドット地と、かすれた筆跡のグレー柄地。光沢感はなく、印刷物のようなマットな質感
• 形: 基本は直角のブロック。赤い太枠の写真フレーム、上が半円のアーチ型カード、ピル型ボタンがアクセント
• 温度感: 紺と赤のコントラストが強いけれど、生成り地で少し温かみを加えた中間の温度

Colors

• 写真ブロックの地は商品ごとに紺・赤・くすみブルーを切り替え、その下の説明文も同じ色で書く
• 説明エリアは生成りのドット地で統一し、写真ブロックとの明度差でリズムをつける
• セクション見出しは赤で書き、筆跡柄のグレー地や白地の上に置く
• 黄色は紺地の上の短い英字だけに使い、他では使わない
• 写真フレームとアーチ型カードの太枠は赤で統一する
• CTA ボタンは濃紺のベタ塗りに白抜き文字
• section-title は文字 #E31B23 × 背景 #F4F4F4 のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DC1A22、4.53:1）を使う。

Typography

• 見出しはすべて英字にし、太い斜体のスラブ体を使う
• 説明は英文を先に置いて区切り線で区切り、その下に和文を続ける 2 段構成にする
• 英文は両端揃えにして、ブロック状の塊に見せる
• 説明文の文字色は、その商品のブロック地の色に合わせる
• 価格は「品名＋金額＋yen」を欧文セリフ体で横に並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真ブロックは全幅
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真ブロックは全幅のベタ色地にして、その中央に切り抜き写真を置く
• 説明エリアは左右 25px 前後の余白を取り、ラベル→英文→線→和文→価格の順に並べる
• ブランド名を横スクロールするマーキーの帯で、セクションの間を区切る
• グッズの紹介は全幅の赤枠写真の下に見出しと本文を中央揃えで置く
• 最後にピル型ボタン、作家プロフィールの順に置く

Elevation & Depth

• 影は使わず、フラットな面と太い枠線で階層をつける
• 切り抜き写真は太い白フチで、ステッカーのように浮かせて見せる

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 商品写真は白い太フチ付きで切り抜く。グッズ写真は赤い太枠の長方形、ノベルティ写真は上側が半円のアーチ型に収める
• セクション境界: 色面を直線で切り替える。斜めや波形は使わない
• ラベルは角丸なしの長方形の色ベタにする
• ノベルティのカードは赤い太枠で、上が半円、下の角は 16px 程度の角丸
• ボタンは完全なピル型にする

Components

• 番号つき項目ラベル（topics-label）: 四角い色ベタの中に、白抜きの斜体英字と大きな番号を入れる。色は商品ブロックに合わせる
• 単色ブロックと切り抜き写真（color-block-photo）: 全幅の紺・赤・ブルーの地に、白フチで切り抜いた商品写真を置く
• 英和 2 段の説明文（bilingual-desc）: 太字英文と和文を細い線で区切り、最後に価格を添える
• ブランド名のマーキー帯（marquee-band）: 白地に黒の斜体英字を大きく横に流す帯
• 赤い太枠の写真（red-frame-photo）: 全幅に近い写真を 3px ほどの赤枠で囲む
• アーチ型のキャンペーンカード（arch-card）: 上が半円で赤い太枠の白カード。写真の下に紺の見出しと本文を置く
• ピル型の CTA（button-primary）: 濃紺のピル型ボタンに、白い太字スラブ体の英字を入れる
• 赤の斜体の大見出し（section-title）: 筆跡柄のグレー地の上に、赤い斜体スラブ体で中央揃えに置く

Do's and Don'ts

Do - 商品ごとに地の色を変え、ラベルと本文の色もそれに揃える - 切り抜き写真には必ず白い太フチをつける - 見出しは太い斜体のスラブ体の英字にする - 生成りのドット地と筆跡柄の地で、紙のような質感を出す - 赤・紺・ブルー以外の色は最小限にする

Don't - グラデーションやドロップシャドウを使わない - 細い明朝や丸ゴシックの見出しにしない - パステル調やビビッドな多色を足さない - 写真を角丸のカードに入れて、ありふれた EC 風にしない - 黄色を広い面に使わない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 上半分はグレー地にキャラロゴ、下半分は紺地に白の英字ロゴとキャラの一部。最後に黄色の英字をあしらう
2. 告知見出し（新作の発表を知らせる）: 白地に赤い斜体英字を 2 行、中央揃えで大きく置く
3. コラボの概要（企画の内容と型数を伝える）: 筆跡柄のグレー地に、赤の英文と和文を細い赤線で区切って並べる
4. マーキー帯（ブランド名を印象づけて区切る）: 白地に黒の斜体英字を横に流す
5. 注目アイテム 1〜3（主力商品を順に紹介する）: 色ブロックに切り抜き写真、その下の生成り地にラベル・英和の説明・価格。紺→赤→ブルーの順に色を変える
6. グッズ紹介（小物を紹介する）: 筆跡柄の地に赤の大見出し、赤枠の写真、赤字の見出しと本文、価格を中央揃えで置く
7. ノベルティ・キャンペーン（購入特典で後押しする）: 赤枠のアーチ型カードに、写真・紺の見出し・条件の本文と注釈を入れる
8. CTA（商品一覧へ誘導する）: 白地の中央に濃紺のピル型ボタン
9. アーティスト紹介（作家の経歴で信頼性を補う）: 白地に黒の和文の本文だけをシンプルに置く

Imagery

• 白背景で撮った平置きの商品写真を切り抜き、太い白フチをつけてステッカー風にする
• カートゥーン調のキャラクターは、太い黒の主線と赤・白・紺の配色で描く
• 小物は明るいグレー背景で、斜めに散らして撮る
• 背景には、かすれた筆跡やペンキのような淡いグレーの柄を敷く
• 生成り地には細かい網点のテクスチャを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は注目アイテムを 2 カラムにし、説明と色ブロックの写真を左右交互に並べる
• PC のファーストビューは、グレー地の左上にロゴ、中央にキャラを大きく置く
• PC の概要は英文と和文を縦線で区切って左右に並べる
• PC のグッズは赤枠の写真を 3 枚横に並べる
• PC のノベルティカードは、円形の写真と横長カードを左右に組み合わせる
• PC の作家紹介は、見出しの横に罫線をつけた横長のレイアウトにする

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