DESIGN.md — 生成りニット地×赤の冬パンツ通販 LP（Cozy Winter Knit Apparel LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、かわいい、親しみ・手作り感、ナチュラル
• キーワード: ニット柄の地・手書き風の赤い見出し・雪の結晶と木の実・ポラロイド写真・点線の吹き出し枠・冬のぬくもり
• 地の質感: 生成りに薄いケーブルニット柄の地。紙っぽい白フチの写真と手書きメモ。
• 形: 点線フチの丸い雲形・ピル形の枠。写真は少し傾けた白フチのカード。
• 温度感: 暖かい。ベージュ地に深い赤と少しの冬らしい青を差す。

Colors

• LP 部はニット柄の生成り地で統一し、情報は白の枠に載せる。
• 見出しは深い赤を主にし、頭の一語だけ冬の青にする。
• 点線枠はからし色で、温かみを足す。
• サイズ表はサーモンとセージの淡い色で区分を分ける。
• 商品一覧と共通部は白地とこげ茶黒の文字だけにする。
• 強い原色の面は使わない。商品の色を引き立てる。

Typography

• 見出しはぽってりした手書き風の書体で、行ごとに少し大きさを変える。
• 小見出しは左右を「＼ ／」で挟む。
• 見出しの頭の短い語は小さめの青文字で添える。
• 写真メモは縦書きの手書きにして、細い縦線を添える。
• 価格は数字だけを大きくし、税込表記は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 2 カラム。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真カードは左右に少しずらして縦に並べ、交互に傾ける。
• 特長は中央の商品写真を囲むように POINT を配置し、線でつなぐ。
• 価格枠は FV 直後と LP の最後に 2 回置く。
• カラー展開は小さな商品写真を 5 つ横に並べ、下に色名を書く。
• LP の後は白地の EC 一覧と共通バナーに切り替える。

Elevation & Depth

• 写真カードは白フチに薄い影を付けて紙っぽく見せる。
• 点線の枠には影を付けない。
• 商品一覧は影なしで、白地の余白だけで区切る。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜きか白フチの四角。商品は切り抜きで影なし。
• セクション境界: 区切り線は使わず、ニット柄の地を続けて余白で分ける。
• 価格枠は点線フチの横長ピル形・雲形にする。
• 特長のまとまりは角丸大きめの点線フチの白い面にする。
• POINT ラベルは黒フチの小さなピル形にする。
• 写真カードは角丸なしで 1〜3 度傾ける。

Components

• まとめ買い価格枠（price-bubble）: 白い横長ピル形に、からし色の点線フチ。スラッシュ付きの赤い見出し、通常価格、大きな割引価格を並べる。
• 手書き風セクション見出し（heading-handwritten）: 赤の太い手書き風の 2 行見出し。頭に青の小さな語を付け、木の実と雪のイラストを添える。
• POINT ラベル（point-label）: 白地に黒フチの小さなピル形で番号を書く。説明文は下に 3〜4 行。
• 特長パネル（feature-panel）: 点線フチの角丸の白い面。中央に商品写真を置き、周りに POINT と丸い拡大写真を置く。
• コーデ写真カード（polaroid-card）: 白フチで少し傾けた写真。右か左に縦書きの手書きメモを入れる。
• カラー展開列（color-lineup）: 切り抜きの商品写真を横に 5 つ並べ、下に小さく色名を書く。新色には白い丸の New バッジを付ける。
• サイズ表（size-table）: 白地の表で、サイズ区分ごとに見出しをサーモンとセージで塗る。横にスクロールする。
• 商品カード（product-card）: 白地 2 カラム。商品写真、太字のコピー、商品名、ピンク枠のタグ、灰色のサイズタグ、価格、ハートを縦に並べる。

Do's and Don'ts

Do - 地にはうっすらケーブルニット柄を敷き、冬のぬくもりを出す。 - 雪の結晶・木の実・小さなもみの木のイラストを見出しの周りに少しだけ散らす。 - 見出しは赤の手書き風書体で、丸く柔らかい印象にする。 - コーデ写真は白フチを付けて傾け、手書きメモを添える。 - 価格は点線の吹き出し枠で目立たせる。

Don't - 真っ黒や原色の面を広く使わない。 - 角張った硬いゴシックを大見出しに使わない。 - イラストを詰め込みすぎて商品写真を邪魔しない。 - 写真に強いフィルターや濃い影を付けない。 - 赤を本文に使わない。見出しと価格だけにする。

Page Structure

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

1. ファーストビュー（冬の商品だとひと目で伝える）: 左に全身のモデル写真を切り抜きで置き、右に吹き出しと大きな赤い手書き見出しを置く。下にカラー展開を並べる。
2. 価格訴求（まとめ買いのお得さを伝える）: 点線のピル形枠に通常価格と割引価格を入れる。
3. カラー展開（色の選択肢を見せる）: 切り抜きの商品を 5 つ横に並べ、下に色名を書く。
4. 特長（素材と仕様の良さを伝える）: 点線フチの白い面に商品写真と POINT1〜3 を配置する。
5. コーデ提案（着こなしをイメージしてもらう）: 白フチの傾いた写真を 5 枚縦に並べ、手書きメモを添える。
6. サイズ展開（誰でも着られるサイズの多さを示す）: 小さな男性モデルの切り抜きと見出しの下に、色分けしたサイズ表を置く。
7. 価格訴求（再掲）・注記（購入の後押し）: FV と同じ価格枠とカラー展開、税込の注記を置く。
8. 商品一覧（商品ページへ誘導する）: 白地 2 カラムの商品カードと絞り込みバーを置く。
9. 関連特集バナー（ほかの特集へ回遊させる）: 横長のバナーを縦に積む。
10. フッター（案内とリンク）: パンくず、2 列のメニュー、規約リンク、ロゴを置く。

Imagery

• モデルは笑顔で自然体。キャップやスニーカーなどのカジュアルな冬服で撮る。
• コーデ写真は明るい白〜グレーの背景で全身を撮る。
• 商品は平置きで切り抜き、影は付けない。
• イラストは雪の結晶、赤い木の実の枝、水色のもみの木を水彩風に小さく描く。
• 素材の良さは丸く切り抜いた生地の寄り写真で見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はページ中央に幅約 600px の LP 列を置き、外側にもニット柄の地を続ける。
• PC のコーデ写真は 2 列に並べ、最後の 1 枚を中央に置く。
• PC の特長パネルは横長にし、POINT を左右に分けて置く。
• PC の商品一覧は 3 カラム、特集バナーも 3 カラムのグリッドにする。
• 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 行書くと起動時に読み込まれる。