DESIGN.md — ピンク水玉×水色のキャラコラボ服 LP（Pastel Pink Polka Dot Character Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: ピンク水玉・パステル・白枠プレート・商品カードグリッド・手描きキャラ
• 地の質感: フラットな単色に白い水玉柄を繰り返す。影もグラデーションもない
• 形: 角丸の大きい商品カード、白い二重枠の矩形見出し、黒フチのピル型ボタン
• 温度感: 暖かく甘い。差し色の水色で甘さを抑えている

Colors

• 地は全ページでピンク＋白水玉に統一し、セクションごとに地色を変えない
• 商品名と価格は水色帯に白文字で置く
• 見出しプレートは濃いめピンクの面に白文字、外側を白の細枠で囲む
• 情報エリアだけは白い面に黒文字で読みやすくする
• CTA は濃いピンクに黒フチ・黒文字。ほかの要素に黒フチは使わない
• section-plate は文字 #FFFBF8 × 背景 #F4C1C9 のコントラスト比が 1.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-primary-accessible（#923F00、4.54:1）を使う。

Typography

• セクション見出しは英字 1 語だけにし、字間を広く取る
• 日本語の見出しはゴシックの太字に限る
• 価格は数字を本文サイズ、税込表記を小さく添える
• 手描き書体はタイトルロゴだけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は商品 2 カラムのグリッド、情報は 1 カラム
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品カードは同じ大きさで 2 列に並べ、奇数個のときは端数を左右どちらかに寄せる
• 空いたマスには手描きキャラを置いて余白を埋める
• 見出しプレートは中央揃えで幅 60% 程度
• 情報ボックスは白地の箱にまとめ、上に帯見出しを付ける

Elevation & Depth

• 影は使わない。全体をフラットに組む
• 奥行きは白枠と水色帯の色差だけで出す

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 正方形に近い角丸カードの上部に写真を置き、下部を水色帯にする
• セクション境界: 区切り線は入れない。水玉の地と余白で区切る
• 見出しプレートは角丸なしの矩形＋白細枠
• 商品カードは大きめの角丸
• CTA は黒フチのピル型

Components

• 見出しプレート（section-plate）: 濃いめピンクの矩形に白い英字、外側を白の細枠で囲む
• 商品カード（product-card）: 上 75% が平置き写真、下が水色帯で商品名と税込価格を中央揃え
• 情報ボックス（info-box）: 白地の箱。上部に濃いピンクの帯見出しを付ける
• ピンク下線の小見出し（info-subhead）: ピンク文字の下に太いピンクの下線を引く
• 店舗一覧ボタン（button-primary）: 濃いピンクのピル型に黒フチ。英字ラベルと小さな日本語の補足を 2 段で入れる
• タイトルロゴ枠（hero-logo-frame）: 手描きロゴ、キャラの集合イラスト、英字帯を白枠で縦に 3 段重ねる
• 余白キャラ（mascot-filler）: グリッドの空きに手描きキャラと擬音を添える

Do's and Don'ts

Do - 地はピンク＋白水玉を最後まで続ける - 商品写真はベージュの床に平置きし、色違いを並べて撮る - 価格には必ず税込表記を小さく添える - 見出しは英字 1 語の白枠プレートで統一する - グリッドの空きはキャラのイラストで埋める

Don't - 濃い色・ダークな地を使わない - ドロップシャドウやグラデーションを入れない - 見出しに明朝体や太すぎる装飾書体を使わない - 水色をピンクより目立たせない - 商品カードの角丸サイズを揃えずに並べない

Page Structure

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

1. ファーストビュー（コラボ企画であることを伝える）: 手描きロゴ、キャラ集合絵、英字帯を白枠の 3 段プレートで中央に積む
2. 商品ラインナップ（大人向け商品と価格を見せる）: 見出しプレートの下に角丸の商品カードを 2 列グリッドで並べる
3. キッズ商品（子ども向け商品を見せる）: 同じカードで 2 列に組み、空きマスにキャラを置く
4. 販売情報（発売日時と販売店舗を伝える）: 白い情報ボックスに帯見出し、ピンク下線の小見出し、■付きの見出しと店舗リストを並べる
5. CTA（取扱店舗一覧ページへ送る）: 黒フチの濃いピンクのピル型ボタンを中央に 1 つ置く
6. フッター（権利表記を示す）: 水玉の地にコピーライトを小さく中央揃えで置く

Imagery

• 商品はグレージュの床に真上から平置きし、色違いを 3 着並べる
• 自然光でやわらかく、影は薄くする
• キャラは黒の太い手描き線と白い塗り、頬にピンクのチークを入れる
• 擬音や動きの線を手描きで添える
• 水玉は白の正円を一定間隔で互い違いに並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央に約 360px 幅のカラムで組み、両脇は水玉の地を見せる
• SP では商品カードを 2 列のまま幅いっぱいに広げる
• SP では見出しプレートを画面幅の 60〜70% にする
• SP の情報ボックスは左右の余白を 16px にする

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