DESIGN.md — 橙×黒板グリーンのぬくもり快眠雑貨 LP（Warm Orange Cozy Sleepwear LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型、ポップ・元気
• キーワード: ぬくもり・オレンジグラデ・黒板風図解・手描き線画・マーカー強調・縦書きコピー
• 地の質感: ピーチ〜クリームの柔らかなグラデーション地に、チョーク調の深緑パネルを差し込む。
• 形: 角丸カード、斜めカットや下向き三角の区切り、八角形の口コミ枠。
• 温度感: 暖色寄り。オレンジとピーチで体温感を出し、深緑で知的な落ち着きを補う。

Colors

• 地は白とピーチ系を交互に置き、セクション切替を色で示す。
• 根拠・図解は深緑の黒板パネルに白線で描く。
• 強調は朱オレンジの帯か、文字下のマーカーで行う。
• 数値の温感は白抜き文字＋オレンジのぼかし円で表現。
• 赤は比較のBad表示だけに限定する。
• 見出し帯はえんじか黒のベタ帯に白文字。
• point-list-card は文字 #F0F8EE × 背景 #FD5C02 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C54802、4.5:1）を使う。
• temp-badge は文字 #F0F8EE × 背景 #FD5C02 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C54802、4.5:1）を使う。
• spec-label は文字 #F0F8EE × 背景 #FD5C02 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C54802、4.5:1）を使う。

Typography

• 見出しは極太ゴシックで字間を広めにとる。
• 写真の上のコピーは縦書き2〜3行で並べる。
• 番号は 01/02/03 を細い白抜きのアウトライン数字にする。
• 要点は太字にし、下半分にマーカーを引く。
• 温度などの数値は明朝系の細い数字を大きく出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較やサーモ画像だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅で置き、コピーをその上に重ねる。
• 図解パネルは左右に約6%の余白をとって角丸で置く。
• ポイント一覧は大きな白カードに3本のオレンジ帯を縦に積む。
• 見出しの下に細い黒線か点線を引く。

Elevation & Depth

• 影は基本使わず、フラットな面で構成する。
• ポイントカードはオレンジの太枠をずらして重ねた立体感にする。
• 温感はぼかしたオレンジの発光で表現する。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は全幅の矩形か角丸4px。人物アイコンは線画。
• セクション境界: 斜めカット、下向き三角、波形のカーブで区切る
• 見出しラベルはベタの角帯にする。
• 口コミカードは角を切った八角形の線枠。
• 吹き出しは角丸の線枠に、丸の連なる思考吹き出しを添える。

Components

• ベタ帯見出し（band-heading）: 全幅のえんじ帯に白文字を置き、下に三角の突起をつける
• 3つのポイントカード（point-list-card）: 装飾枠のタイトルの下にオレンジ帯を3本並べる。番号と縦線つき
• 黒板風図解パネル（chalkboard-panel）: 深緑の地に白い手描き線画と番号ピン
• マーカー強調（marker-text）: 太字の下半分にピーチまたはオレンジの帯を引く
• 温度上昇バッジ（temp-badge）: オレンジのぼかし円に白い＋記号と大きな数値
• 番号付き見出しカード（numbered-heading）: 焦げ茶の線枠カードに、アウトラインの大きな番号と下線つきの見出し
• 口コミカード（review-card）: 八角形のオレンジ線枠に線画アバター、星5、太字見出しを入れたスライダー
• 仕様ラベル（spec-label）: オレンジのベタ角ラベルに白文字。横に仕様テキストを並べる
• 悩み吹き出し（thought-bubble）: 焦げ茶の線の角丸吹き出し。文字の下にミントのマーカー

Do's and Don'ts

Do - 暖色のピーチ地と白地を交互に置く。 - 根拠の説明は黒板風の深緑パネルと白い線画で見せる。 - 数値の効果はサーモ画像の比較と大きな数字で示す。 - 写真の余白に縦書きの極太コピーを重ねる。 - 強調はマーカー下線と朱オレンジの帯に限定する。

Don't - 寒色を地色に使わない（ミントは小さな強調だけ）。 - 濃い影や立体的なボタン装飾を入れない。 - 強調色を4色以上に増やさない。 - 本文を詰めすぎない（行間は1.8以上）。 - 線画のタッチを統一し、写実的なイラストを混ぜない。

Page Structure

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

1. ファーストビュー（温かさと快眠の価値を一目で伝える）: 商品の着用写真を全幅で置く。斜めのオレンジ帯、手書き風の大きなキャッチ、温度バッジを重ね、下端は波形で区切る
2. 商品名と効果実証（商品名と温度上昇を示す）: 点線の下線つきタイトル、商品写真、サーモ画像の2カラム比較とカラースケール
3. イメージ写真（使用シーンで共感を得る）: 全幅写真の左に白い縦書きコピーを置く
4. 悩みの提起（冷えの悩みを可視化する）: えんじ帯見出しの下に、寝ている人の線画と悩み吹き出し3つ。最後にマーカー見出しで結論を出す
5. 根拠解説（ふくらはぎを温める理由を示す）: 番号付き見出しカードと黒板パネルで、Good/Badの比較やツボの図解を見せる
6. 開発のきっかけ（SNS発の共感ストーリー）: スマホのモックと山吹色の円バッジを置く
7. 3つのポイント（特長を要約する）: 縦書きコピー入りの写真のあと、装飾枠タイトルとオレンジ帯3本を置く
8. 特長詳細（各ポイントを深掘りする）: アウトライン番号と太見出しで始め、図解・写真・サーモ画像を並べる。地はピーチと茶色の写真地で切り替える
9. お手入れ・品質（手軽さと国産の安心感）: 洗濯表示のアイコン列、下線つき見出し、国旗ラベル、工場写真
10. お客様の声（使用実感で後押しする）: ピーチ地に八角形の口コミカードを左右スライダーで並べる
11. 製品情報・価格（仕様と価格を提示する）: 黒帯見出し、カラーバリエーションの写真と円ラベル、仕様ラベル、色名タブ、大きな太字の価格

Imagery

• ベッドや布団の上で、素足に着用した寄りの写真。暖色の柔らかな自然光で撮る。
• 着用部位にオレンジ〜黄色の発光エフェクトを重ねて温感を表す。
• 焦げ茶の単線で描くゆるい人物の線画と思考吹き出し。
• 黒板風の深緑地に、チョーク調の白線で描く脚の図解。
• サーモグラフィ画像の着用前後比較。
• 白背景で撮る商品の物撮りとカラバリ。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため、PC では中央 600〜750px 幅の 1 カラムで SP 構成を維持する。
• 左右の余白はピーチ系の地色で埋める。
• サーモ比較やカラバリは横並びのまま拡大する。
• 縦書きコピーは 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 行書くと起動時に読み込まれる。