DESIGN.md — 赤×緑×青のレトロコミック調クリスマス雑貨 LP（Retro Comic Christmas Collection LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ポップ・元気、レトロ、情報量多め・訴求型、親しみ・手作り感
• キーワード: クリスマス・レトロコミック・カタログ型・色面切り替え・柄帯区切り
• 地の質感: ベタ塗りの色面に、星や雪の小さな散らし柄と手描きイラストの帯を重ねる。写真は暖色の店内で撮ったもの
• 形: 角丸の写真カード、ピル型ボタン、黒フチ付きの立体ロゴ見出し
• 温度感: 暖かい・にぎやか

Colors

• セクションごとに青・赤・生成り・緑・白・赤と地の色を替える
• 色地の境目にはイラスト柄の細い帯を入れる
• 大見出しは赤文字に黒フチ。色地の上では黄文字に黒の影をつける
• 主ボタンは赤のピル型にし、どの地の上でも同じ色にする
• 購入ボタンは濃緑の小さなピル型にする
• 本文は焦げ茶か白で、黒は使わない

Typography

• 大見出しはすべて欧文の極太・大文字にし、黒フチか影で立体感を出す
• 大見出しの上に小さな英字ラベルを添える
• 日本語は見出しの下に中央揃えで短く置く
• 価格は小さい欧文にし、税込表記を括弧で添える
• 本文は 2〜4 行に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品グリッドは 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは中央揃えにし、その下に写真ブロックと商品グリッドを置く
• 大きな雰囲気写真とスライダーを左右に並べる（SP では縦に積む）
• 切り抜いた商品写真の下に商品名と小さなボタンを置く
• 各セクションの最後に一覧への赤ボタンを置く
• カテゴリへ飛ぶナビは白いカードを横並びにする

Elevation & Depth

• 影はほぼ使わず、平面で作る
• ナビのカードは黒の細いフチで区切る
• 切り抜きの商品写真に軽い落ち影をつける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 雰囲気写真は角丸の縦長長方形。商品写真は背景を抜いて切り抜く
• セクション境界: イラスト柄の帯か、雪の丘のような波形
• ボタンはすべてピル型にし、黒の細いフチをつける
• 写真カードの角丸は 12〜16px
• SNS 枠は黒フチ付きの大きな角丸カードにする

Components

• 一覧へのボタン（button-primary）: 赤地に白文字のピル型。黒の細いフチ付き
• 購入ボタン（button-buy）: 濃緑の小さなピル型で、文字は白
• 立体ロゴ見出し（heading-logo）: 英字ラベルの下に極太の欧文。赤か黄の文字に黒フチ
• カテゴリナビカード（category-nav-card）: 白い角丸カードに商品アイコンと赤い英字
• サイズ吹き出し（size-badge）: 白い丸の中に高さの数字を書き、ツリーの上に置く
• コーデ提案カード（coordinate-card）: 赤地の角丸カードに写真と大きな数値を置く横長スライダー
• 柄帯ディバイダー（pattern-band）: 手描きのクリスマス柄を横に繰り返す帯
• SNS ボタン（button-dark）: 焦げ茶のピル型に白文字とアイコン

Do's and Don'ts

Do - セクションごとに地の色を変え、柄帯で区切る - 見出しは極太の欧文に黒フチをつけてコミック風にする - 赤のピル型ボタンをセクションの最後に必ず置く - 地の上に小さな星や雪を散らす - 商品は切り抜き写真を余白多めに並べる

Don't - 細い明朝やくすんだ色にしない - グラデーションやガラス風の効果を使わない - ボタンを角張った形にしない - 長い文章を左揃えで詰め込まない - 黒の地を広い面に使わない

Page Structure

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

1. ファーストビュー（季節の世界観を伝える）: 暖色の店内写真に、黄色い立体ロゴを中央に重ねる
2. 導入とカテゴリナビ（コンセプトを示し、各カテゴリへ案内する）: 青い星柄の地。ロゴ、短い文、オーナメントを横並び、白カードのナビを置く
3. 商品カテゴリ1（サイズ展開）（サイズ違いを比べてもらう）: 写真の横スライダーと、高さの吹き出しを付けたツリーの並び。雪の丘の波形で白地へ切り替える
4. 特長ポイント（商品の良さを 3 つ示す）: 写真の下に番号と短い説明を置いた 3 列
5. おすすめ商品スライダー（関連アイテムを提案する）: 赤地に 3 列のスライダー。価格と購入ボタンを付ける
6. 商品カテゴリ2（種類を一覧で見せる）: 生成りの地。大きな写真とスライダー、切り抜き商品の 2 列グリッド
7. コーディネート提案（使い方のイメージを伝える）: 赤い角丸カードの横スライダー
8. 商品カテゴリ3・4（ほかの商品群を見せる）: 緑地と白地を交互にし、写真・4 列の商品・ボタンを置く
9. コラボ企画（限定コラボ商品を訴求する）: 赤一色の地に星を散らす。細い欧文見出しと、細い線で区切った商品の並び
10. 動画（世界観を動画で伝える）: 濃い赤茶の枠に入れたサムネイルと再生ボタン
11. SNS 投稿の募集（投稿してもらう）: 生成りの角丸カードに 2×2 の投稿写真と焦げ茶のボタン
12. フッター（ブランドを示す）: 白地にロゴと著作権表記を置く

Imagery

• レンガ壁と窓のある店内に、暖色の照明と飾り付けを置いて撮る
• 商品は白背景で撮って切り抜き、軽い影をつける
• サンタ・トナカイ・小人などをレトロなアメコミ風に、太い線で描く
• 地には小さな星・雪の結晶・十字のきらめきを散らす
• 街並みや雪の丘のイラストを、セクションの境目の飾りに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 80% の幅で、雰囲気写真とスライダーを左右 2 列に並べる。SP では縦に積む
• 商品グリッドは PC が 4 列、SP は 2 列にする
• カテゴリナビは PC が 6 列、SP は 3 列×2 段にする
• 大見出しは SP で 40〜44px に縮め、1 行に収める
• スライダーは SP で 1 枚表示にし、次の 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 行書くと起動時に読み込まれる。