DESIGN.md — 紺×パステルのY2Kポップ雑貨特集LP（Y2K Pop Pixel Retail Feature LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ポップ・元気、かわいい、レトロ、情報量多め・訴求型
• キーワード: Y2K・ピクセル・段影・パステル切替・ゲームUI・ポラロイド
• 地の質感: 地にノイズ・グリッド線・斜線・波打つ網目を重ねる。商品の背景にはドット網の歪み模様を敷く。
• 形: 角丸の濃紺フレーム、黒線＋オフセット影の四角いボタン、上の縁が波形のスカラップ境界、チェッカー柄
• 温度感: 明るく賑やか。濃紺で締めた甘めのポップ

Colors

• ページ外枠と商品フレームは濃紺で統一し、全体を締める。
• ブランドごとにセクション地色をパステルで切り替える（ピンク→ラベンダー→コーラル→ミント→イエロー）。
• 主CTAは濃ピンク地＋白文字、または白地＋濃ピンク文字。どちらも黒の段影をつける。
• ブランド見出しの文字色は、地色と補色関係のビビッドな色にする。
• 商品名の下はパステルのマーカー帯にし、地色ごとに帯の色を変える。
• ライムは帯の見出しとジッパー装飾だけに使う。
• button-primary は文字 #FEFBFD × 背景 #D4577D のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD3D69、4.57:1）を使う。
• button-secondary は文字 #D4577D × 背景 #FEFEFE のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD3D69、4.53:1）を使う。

Typography

• 大見出しは極太英字に、黒の段影と黒フチをつけた立体表現にする。
• 見出しの下に、筆でかすれたような横線を添える。
• 日本語本文は小さめのゴシックで、センター寄せか左寄せにする。
• ボタンの文字はピクセルフォントにし、アイコンを添える。
• 英字見出しはすべて大文字にする。
• 英文の一部に取り消し線を入れて遊ぶ。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ブランド一覧のみ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• ページの左右に濃紺の細い外枠を通す。
• 1 ブランドを 1 ブロックにし、上から見出し→商品フレーム→商品名・価格→吹き出し→CTA の順に並べる。
• CTA は幅 65% で中央に置く。
• 関連商品はカルーセルにし、左右に濃紺の四角い矢印を置く。
• ブロックの間に横スクロール風の英字帯を挟む。

Elevation & Depth

• ボタン・ブランドカードには、ぼかさない段影（右下へ 4〜6px、黒または色）をつける。
• 商品フレームには、右下へ濃紺のずらし影をつける。
• 吹き出しは黒線＋下方向の黒い段影にする。
• ぼかしドロップシャドウは使わない。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きにし、ドット網目の背景の上に置く。関連商品はポラロイド風の白枠にし、内側を単色背景にする。
• セクション境界: セクション上端を半円が並ぶスカラップ形にする。他にチェッカー柄、ライムの英字帯を使う。
• CTA は角丸なしの長方形＋黒線＋段影。
• 商品フレームは角丸 20px の濃紺枠。上部に英字のタブ、下部にピル型の英字ラベルを置く。
• 吹き出しは角丸 8px で、しっぽは左向き。
• お気に入り風の白い丸にピクセルハートを置く。
• OTHERS では、ポラロイドを傾けて重ねる。

Components

• ピクセルCTA（button-primary）: 濃ピンクの長方形に白のピクセル文字とカートアイコン。黒線と段影つき。
• 白地CTA（button-secondary）: 白地に濃ピンクのピクセル文字。黒線と段影つき。
• ゲーム画面風商品フレーム（product-frame）: 濃紺の角丸枠の中に網目背景と商品を置く。上部に英字タブ、左下にハート丸、下部にピルラベル。
• おすすめ吹き出し（speech-point）: 色付きの見出し吹き出しの下に、白の吹き出しを並べる。左に目玉キャラのアイコンを置く。
• ブランドナビカード（brand-card）: 白の長方形に濃紺の英字。色違いの段影をつけ、2 列で並べる。
• ポラロイドカルーセル（polaroid-card）: 白の太枠に単色背景の商品写真を入れる。左右に濃紺の矢印を置く。
• カテゴリ帯見出し（category-bar）: 濃紺の横長帯に、字間を広げた白英字を載せる。
• 英字ループ帯（marquee-band）: ライム地に濃紺の太英字を繰り返す。上下を濃紺線で挟む。
• 限定ラベル（pill-label）: 白地のピル型に濃紺枠と濃紺の文字。

Do's and Don'ts

Do - ブランドごとに地色とテクスチャを変え、スクロールに変化をつける。 - 影は必ずぼかさない段影にする。 - ピクセル・ゲームUI・ジッパーなど、Y2Kのモチーフを散りばめる。 - 商品名にはマーカー帯を敷いて目立たせる。 - 全ブロックの構成を統一し、繰り返しで読みやすくする。

Don't - ぼかし影やグラデーションの立体ボタンは使わない。 - 地色を無彩色のグレーにしない。 - 見出しに細い明朝や細いサンセリフを使わない。 - 濃紺の外枠・フレームを省かない。 - 余白を広く取りすぎて、静かな高級感にしない。

Page Structure

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

1. ファーストビュー（特集の世界観を一目で伝える）: ピンク地に極太の英字ロゴを置き、手書き英字を添える。商品フレームのカルーセルを並べ、下にゲーム風のナビアイコンを置く。
2. 導入（開始日と特集の趣旨を伝える）: 濃紺地に白の極太英字見出しと下向きの矢印を置く。中央揃えの短い文を並べ、手のイラストやキラ装飾を散らす。
3. ブランドナビ（各ブランドへの移動）: 白地に、色違いの段影をつけたカードを 2 列×3 段で並べる。
4. ブランド別商品紹介（主力商品の魅力を伝える）: スカラップ境界のパステル地に、大見出し→商品フレーム→商品名・価格→吹き出し→CTA の順に並べる。
5. 機能解剖図（多機能さを図解で訴求する）: ピンクか紫の地に、番号付きの機能ラベルを商品写真の周りに配置する。
6. オンライン限定（限定品とポイント施策を訴求する）: 英字帯で挟み、斜線地に濃紺のカードを置く。カード内は日付の帯と商品情報。
7. 同ブランド関連商品（他の商品へ回遊させる）: 白文字に段影の英字見出しを置き、ポラロイドのカルーセルとCTAを続ける。
8. その他アイテム（小物を紹介する）: ミントの歪んだグリッド地に、傾けたポラロイドを重ねて置く。
9. 全商品CTA（一覧ページへ送る）: 濃ピンク地に、白のピクセルボタンを置く。
10. キャンペーンバナー（割引・ポイント施策を告知する）: 大きな数字と日付を載せた、ピンクとラベンダーのバナーを2枚縦に並べる。
11. 注釈（注意事項を伝える）: 濃ピンク地に、白の小さな文字で記載する。

Imagery

• 商品は白背景で撮って切り抜く。網目背景や単色背景に載せる。
• 背景は歪んだドット網・グリッド・ノイズ粒子などのデジタルなテクスチャにする。
• ピクセルのハート・カート・矢印などのドット絵アイコンを使う。
• 目玉の丸キャラやグローブの手など、太線のカートゥーンを添える。
• ジッパーやキラ十字などの小物を、装飾として散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC では 375〜480px 幅の SP レイアウトを中央に置き、左右に濃紺のノイズ地を敷くことを推奨する。
• PC でもブランドナビは 3 列、関連商品は 3 枚並びまでにとどめる。
• 大見出しは最大 96px 程度まで拡大する。
• 段影の距離は PC で 8px に増やす。

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