DESIGN.md — ドット絵ゲーム風くすみピンクの菓子LP（Retro Pixel Game Valentine Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、レトロ、ポップ・元気
• キーワード: ドット絵・レトロゲーム機・くすみパステル・ステージ構成・ハート・バレンタイン
• 地の質感: フラットな単色面とドット絵装飾。写真は色紙背景のスタジオ撮り
• 形: 角を階段状に欠いたドット枠、ゲーム機の角丸の筐体、ピクセルハート
• 温度感: 温かくて甘い。ピンクとワイン色に、冷たいミントと青を差し色にしている

Colors

• ページの外側はディープティール。中にワイン、ピンク、ミント系の大きな面を重ねる
• 商品ブロックごとに背景色を変える（紫→ピンク→ティール→ワインの順）
• 商品ブロックの外側の色帯も変え、ステージが切り替わったと感じさせる
• 説明ボックスは、ブロックより一段濃い色にミントか黄色のドット枠を付ける
• 差し色はピンク、ミント、水色のピクセルハートで、小さく散らす
• 文字は濃い地の上に白で置くのが基本。黒い文字はほぼ使わない
• game-console-frame は文字 #FFFFFF × 背景 #E17786 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D43D52、4.58:1）を使う。
• info-ribbon は文字 #FFFFFF × 背景 #5080A0 のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#4D7B99、4.56:1）を使う。

Typography

• 本文は短い文に分けて改行し、すべて中央揃えにする
• 英字の見出しはドットかピクセル風の書体に限る
• 商品名は字間を広めに取り、両側にピクセルハートを付ける
• 導入文は行間をかなり広く取り（2.4前後）、ゆったり見せる
• 文字サイズは小さめにまとめ、絵と写真を主役にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。商品ブロックは全幅で縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 0px、基本単位 8px、カード内 12px（375px 幅換算）
• セクション同士は隙間なく接し、背景色の切り替えで区切る
• 各ステージは、外側の色帯の中にドット枠の付いた写真面を置く
• 写真面の下に説明ボックスを続け、上下ペアで1商品にする
• ステージ名ラベルは写真面の上辺中央に重ねる
• 左右の端に縦のドットハート列を装飾として置く

Elevation & Depth

• 影はほぼ使わない。平面的に作る
• 立体感は濃い縁取り線と2重枠で出す
• ゲーム機の画面は筐体より一段濃い縁で、へこんで見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形をそのまま使う。角は階段状に欠いたドット風
• セクション境界: 直線で背景色を切り替える
• 枠の角は1〜2ドット分を階段状に欠く
• ゲーム機の筐体だけは大きな角丸にする
• ボタンとラベルは角を小さく欠いた八角形に近い形
• ハートはすべてピクセル（ドット）で描く

Components

• ゲーム機風フレーム（game-console-frame）: ピンクの筐体にミントの画面を入れ、下に十字キーとボタンを描く。ファーストビューと特典部に使う
• ステージ名ラベル（stage-label）: 淡いミントやピンクの地に濃い縁取りを付け、ドット書体の英字を入れる。写真の上辺中央に重ねる
• 詳しく見るボタン（button-detail）: 濃いワインの地に淡いピンクの文字。細い縁取りを付け、写真面の下中央に置く
• 商品説明ボックス（product-desc-box）: 濃い単色の地にドット枠を付ける。ハートで挟んだ商品名と、3行程度の説明文を中央揃えで入れる
• ドットハートの縁飾り（pixel-heart-border）: 小さなピクセルハートを列にして、迷路状の線やセクションの縁を作る
• 情報リボン（info-ribbon）: 水色の帯の両端にハートを付け、発売日や特典を一言で示す
• ドット絵の動物（pixel-character）: 白い単色のドット絵で、つがいの動物がハートを作る絵。導入部の四隅に置く

Do's and Don'ts

Do - 商品ごとに背景色を変え、ゲームのステージのように進める - ピクセルハートとキラキラを写真の周りに散らす - 枠の角は階段状にしてドット感を保つ - 写真はパステルの色紙背景で真上から撮る - 最初と最後をゲーム機フレームで挟み、ページ全体を一つのゲームとして閉じる

Don't - 白い地に黒い文字の一般的なレイアウトにしない - 滑らかなグラデーションや強いドロップシャドウを使わない - 大きなピル型ボタンや派手な赤いCTAを置かない - 曲線的で有機的な装飾を混ぜない - 鮮やかすぎる原色を使わない。くすみトーンを守る

Page Structure

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

1. ヘッダー（ブランドの表示とメニュー）: ティールの帯の中央にロゴのラベルを置き、右にドット風のメニューアイコンを置く
2. ファーストビュー（企画タイトルと発売日を伝える）: ゲーム機フレームのミントの画面にドット書体のタイトルと発売日リボンを置き、四隅にピクセルハートを置く
3. 導入ストーリー（ゲームに見立てた世界観を語る）: ワインの地に、ハートの迷路状の縁飾りとドット絵の動物を置く。短い文を5行ほど中央揃えで並べる
4. 商品集合写真（ラインナップを一度に見せる）: オレンジの色紙の上で全商品を撮り、各商品にステージ名の札を添える。ドット枠で囲む
5. 商品ステージ（繰り返し）（商品を1つずつ紹介する）: 上辺にステージ名ラベルを付けた色の違う写真面を置き、詳しく見るボタン、説明ボックスの順に続ける。これを4回繰り返す
6. 最終ステージ（集大成のセット商品を紹介し、価格を示す）: 同じ型で作り、説明ボックスの下に価格の注記を加える
7. 特典告知（購入特典を伝える）: ゲーム機フレームの画面に特典品の写真を置き、下に水色のリボンで説明を入れる
8. フッター（SNSの導線とブランド表示）: 筐体の下部に丸いSNSアイコンとロゴを置き、左右にスピーカー風の横線を描く

Imagery

• 商品はパステルの色紙背景で、真上か斜め上から撮る
• ブロックや台座を組み、箱と個包装のチョコを散らす
• 写真の上にピクセルハートやキラキラ、音符のドット絵を合成する
• キャラクターは白い単色のドット絵で、2匹ずつ向かい合わせて描く
• 背景のパステル色は、そのステージの枠の色と揃える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもコンテンツは中央の約75%幅に収め、両側はティールの地で埋める
• PCではヘッダーのナビを、ピクセル風ラベルのボタンを2段に並べた形にする
• 各ステージの構成はSPと同じまま、写真面を横に広げる
• 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 行書くと起動時に読み込まれる。