DESIGN.md — グレージュ×金茶の明朝体寝具LP（Greige Gold Mincho Sleep Goods LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: グレージュ・金茶アクセント・明朝体の大見出し・縦書きコピー・細い斜線の装飾・睡眠・リラックス
• 地の質感: マットで平らな面。写真は柔らかい自然光。影はほとんど付けない
• 形: 角は直角が基本。帯の下端は矢羽型。円形の人物写真とバッジ
• 温度感: 暖かめの中間色。悩みのパートだけブルーグレーで冷たくする

Colors

• 地は白とグレージュを交互に使い、セクションを区切る
• 強調する文字は金茶だけにする。赤は価格とセールの部分だけに使う
• 悩みのパートだけブルーグレーの帯にして、気分を切り替える
• 見出しは墨色で書き、キーワードだけ金茶にする
• チェックや比較の見出しには、くすみ緑を少しだけ使う
• セールバナーの水色・黄色は CTA の近くに限って使う

Typography

• 感情を伝える見出しは明朝体にし、字間を広めにとる
• 縦書きコピーは写真の横に置いて余白を活かす
• 見出しに部位名などの英字ルビを小さく添える
• 本文中の強調は太字＋金茶にする。マーカーは使わない
• 英字ラベルは細いサンセリフにして、字間を広くとる
• 数字（割引・価格）だけは太いゴシックで大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は横幅いっぱいか、左右に寄せた半幅で交互に置く
• 縦書きコピーと写真を左右に組み合わせる
• お客様の声はグレージュ帯の上に白カードを重ねる
• セクション間は広めにとり、静かなリズムにする
• 価格パートは割引率・価格を縦に積んで見せる

Elevation & Depth

• 影はほぼ使わず、平らな面を重ねて奥行きを出す
• 白カードはグレージュの地とのコントラストだけで浮かせる
• 商品の切り抜き写真にだけ、薄い接地影を付ける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形が基本。人物は円形に切り抜く。商品は白背景の切り抜き
• セクション境界: 直線で切り替える。悩みの帯の下端は下向きの矢羽型
• カードの角は直角か、ごく小さな角丸にする
• コピーの周りに細いV字の斜線装飾を置く
• 見出しの四隅に小さな三角のコーナー飾りを付ける
• 事実ラベルは円形バッジにする

Components

• お客様の声カード（voice-card）: 英字ラベル＋大きな番号、円形の人物写真、明朝の見出し、本文の順に並べる
• 縦書きコピー（vertical-copy）: 写真の横に置く明朝の縦書き見出し。キーワードは金茶にする
• 悩み帯（worry-band）: ブルーグレーの面にチェック付きの悩みを並べる。下端は矢羽型
• ポイント見出し（point-heading）: 小さな英字のpoint＋番号のあとに、明朝で2行の見出しを置く
• 番号ラベル（label-tag）: 金茶の帯に番号と部位名を白抜きで入れ、写真の上に重ねる
• 円形バッジ（truth-badge）: 金茶の円に漢字2文字と英字の小ラベルを入れる
• セールバナー（sale-banner）: 水色と黄色の面に、割引額を極太の数字で入れる
• 価格ブロック（price-stack）: 割引率→定価の取り消し線→赤字の特価を縦に積む
• カート追加ボタン（button-primary）: 黒地に白文字の角型ボタンを全幅で置く

Do's and Don'ts

Do - 見出しは明朝体にし、字間を広めにとって静かに見せる - 強調色は金茶1色にまとめる - 縦書きと写真を交互に組み、余白を多めに残す - 悩みは寝姿のイラスト図解で見せる - 注釈や試験結果を小さく添えて信頼感を出す

Don't - 原色やネオン色を本文エリアに使わない - 見出しにポップな丸ゴシックを使わない - 強い影や立体的なボタンを使わない - 赤をセール以外の場所に使わない - 写真を詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（商品の価値をひと言で伝える）: 白地に明朝の大見出しと英字ルビ。下に寝姿の写真を全幅で置く
2. 商品紹介とセール告知（特長と期間限定の割引を見せる）: 縦書きコピー＋写真、商品の切り抜き、水色のセールバナー
3. メディア実績（権威付け）: 角丸のグレージュ枠に、媒体ロゴを2列で並べる
4. お客様の声（体験談で共感を得る）: グレージュ帯に白カードを3枚、円形の人物写真付き
5. 悩みの提起（合う枕がない悩みを顕在化する）: ブルーグレーの矢羽帯に、イラストと罫線区切りのコピー
6. 解決策の提示（事実として解決法を示す）: 円形バッジと金茶で強調した大きな文字、コーナー飾り
7. 実績（販売数・世界での実績を見せる）: 月桂冠付きの大きな数字と世界地図
8. 従来品のデメリット（比較で必要性を示す）: EX番号＋縦書き見出し＋骨格の線画図解を点線で区切る
9. 特長ポイント（3つの利点を伝える）: point番号＋明朝見出し、写真とくすみ緑のラベル
10. 商品詳細（構造と素材を説明する）: グレージュ地に番号ラベル、白カードで部位ごとに解説
11. 試験データ・こだわり（客観的な根拠を示す）: 圧力分布の比較図と、縦書きの細部紹介
12. 製品情報（サイズ・カラーを示す）: グレーの見出し帯を付けた表と、色見本の丸チップ
13. ギフト・上位モデル（購入の動機を広げる）: ピンクベージュの地にリボン装飾と紙袋の写真
14. 価格・購入フォーム（購入へ誘導する）: 割引率と赤字価格を縦に積み、セレクトフォームと黒いボタンを置く

Imagery

• 白い寝具に横たわる女性を、柔らかい自然光で撮る
• 商品は白背景の切り抜きで、少し斜めの角度から撮る
• 悩みや図解は、グレーベージュのフラットな線画イラストで描く
• 痛む箇所は赤いぼかしの円で示す
• 細い金茶のV字線を、装飾として写真の周りに置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもSPと同じ縦長の1カラムを、幅約640pxの中央に固定する
• 左右の余白は白のまま残す
• 文字と写真は等倍に近い比率で拡大する
• ヘッダーのロゴと決済アイコンは横並びのまま保つ

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