DESIGN.md — 夜空ネイビー×淡青の上質シルク寝具 LP（Midnight Navy Silk Bedding LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、信頼・誠実
• キーワード: 夜空・光沢・淡いブルー・明朝体・金の月桂樹・静けさ
• 地の質感: シルクの艶を感じる淡いグラデーションと柔らかい光。星座線を描いた夜空帯でメリハリをつける
• 形: 角丸 8〜12px の白カード、細い線の枠、ピル型のタグ。セクション境界はゆるいカーブや斜めの帯
• 温度感: やや寒色寄り。青灰とネイビーが基調で、金とピンクベージュが少しだけ温かさを足す

Colors

• 地色は白と淡いブルーグレーを交互に使う。全体を明るく保つ
• 濃紺は配送情報・夜空の帯・見出しタグなど要所だけに使う
• 金は実績バッジ・王冠・月桂樹のみ。文字の強調には使わない
• くすみブルーはカード見出し帯と丸いラベルに使う
• ピンクベージュは後半のブランド紹介とメディア掲載だけで温かさを出す
• 強調語は濃紺ベタに白文字のマーカーで示す
• button-primary は文字 #FFFFFF × 背景 #86B3E0 のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#3178C0、4.59:1）を使う。

Typography

• 見出しは明朝体で、字間を広めにとる
• 本文はゴシック体の細めのウエイトで、行間 1.8 前後
• 英字見出しは細いセリフ体にし、下に短い横線を添える
• 番号（01・02 など）は細いセリフ体で大きく、薄い色にする
• 強調語は文字を大きくするか、傍点・下線・濃紺マーカーで示す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。色見本とサイズ一覧だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右 6% の余白をとって中央に置く
• 全幅の写真と全幅の帯を交互に挟んでリズムを作る
• 見出しは中央揃え。本文は左揃え
• 比較表は全幅で、自社列だけ淡青でハイライトする
• 注釈は小さい文字にしてセクション末尾にまとめる

Elevation & Depth

• 白カードには柔らかく広い影をつける（例: 0 4px 16px rgba(30,40,70,0.08)）
• CTA ボタンにはやや強めの影とグラデーションをつける
• 濃紺の帯は影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸の四角。人物写真は全幅で、境界をぼかして地色になじませる
• セクション境界: ゆるいカーブ、斜めの帯、下向き三角の吹き出し
• タグ・誘導ボタンはピル型にする
• 手順カードは左上だけ角を大きく丸めた枠線カードにする
• 丸いラベル（円形）で項目名や地名を示す
• 細い線の枠と、端が切れた装飾線を使う

Components

• 誘導ボタン（button-primary）: 水色グラデーションのピル型ボタン。右端に矢印を置く
• サブボタン（button-outline）: 白地に濃紺の細線枠をつけたピル型ボタン
• 月桂樹の実績バッジ（badge-laurel）: 金の月桂樹と王冠で順位や販売数を囲む
• 配送情報の帯（shipping-band）: 濃紺の面に白い細線の枠。中に当日発送と送料無料を大きく置く
• POINT カード（point-card）: 白カードの上部に小さな英字 POINT と明朝の見出し。下に図と本文
• 見出しタグ（heading-tag）: 濃紺のピル型タグ。下に三角の吹き出しをつける
• 比較表（compare-table）: 左列は濃紺の見出し、自社列は淡青で王冠つき。◎○△× で評価する
• Q&A カード（faq-card）: 淡青の面に、明朝の Q. 見出しと区切り線、本文を置く
• 手順カード（step-card）: 細い線の枠カード。左にイタリックの Step 番号、右に線画のイラスト
• チェックリスト枠（check-list-box）: 半透明の枠にチェックアイコンつきの悩みや願いを 2〜3 行並べる

Do's and Don'ts

Do - 余白を広くとり、明朝見出しで静かな高級感を保つ - 夜空の帯を数か所だけ挟み、昼と夜のメリハリをつける - 数字の実績は金の月桂樹で囲んで信頼感を出す - 素材や仕様は図・表・ピラミッドで見える化する - 写真は光沢と柔らかい自然光を重視する

Don't - 原色や彩度の高い赤・黄を使わない - 太いゴシックで全面を埋めない - 影を濃くしない - 濃紺の面を連続させて重くしない - 金を文字の強調色として多用しない

Page Structure

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

1. ファーストビュー（商品の質感と新登場を伝える）: 星空と光沢のある寝具に眠る女性の写真。明朝のキャッチ、英字の商品名、ピル型の仕様タグ 3 つ
2. 実績バッジ（ランキング実績で信頼を得る）: 白い光の背景に金の月桂樹と王冠。順位を大きく置き、注釈を添える
3. 配送情報（購入のハードルを下げる）: 濃紺の帯に白い線の枠。当日発送と送料無料を大きく示す
4. 問いかけ・素材比較（素材の違いに気づかせる）: 寝室の写真に丸いラベルを引き出し線でつなぐ。素材を 4 マスのタイルで比べる
5. 願望と特長（理想の睡眠と商品を結びつける）: 夜空にチェックリスト、縦書きの見出し、番号つきの写真カード
6. 悩み解決・比較表（機能面で優位性を示す）: チェックリストのボックスと、自社列をハイライトした比較表
7. 品質ポイント（素材のこだわりを証明する）: 濃紺の見出し帯に続けて、POINT 01〜03 の白カード（証明書・ピラミッド図・段階表）
8. 仕様の詳細（使いやすさを説明する）: くすみブルーの見出し帯つきカードと、寝返りの写真＋丸ラベル
9. 嬉しいポイント（副次的なメリットを補う）: 淡青の地に、POINT 番号をタブにした白カードを 3 つ
10. カラー・サイズ（選択肢を示す）: 英字見出しと短い線。2 カラムの色見本と、淡青の箱でサイズを表す
11. お手入れ方法（手入れの不安を解消する）: 夜空の見出し帯に続けて、線画つきの Step カードを 5 つ
12. よくある質問（疑問を解消する）: Q&A の英字見出しと、淡青の Q カードを縦に並べる
13. 関連商品・品質管理（クロスセルと安心の提供）: 淡青の地に商品写真、誘導ボタン、工場の写真と問い合わせボタン
14. ブランド紹介・実績・メディア（ブランドの信頼性を高める）: 手書き風コピーに星座の装飾。金の月桂樹の販売数、ランキングカード、ピンクベージュの地に雑誌のコラージュ、店舗イラスト

Imagery

• 光沢のあるシルク寝具に眠る女性。柔らかい自然光で、青白いトーンにする
• 星座線を描いた濃紺の夜空背景で、睡眠を連想させる
• 繭・布の質感のクローズアップを装飾に散らす
• 手順の説明は細い線画のイラストにし、青を少しだけ差す
• 金の月桂樹・王冠を実績の装飾に使う
• 店舗紹介は淡い水彩風の線画イラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、以下は推奨。PC では本文幅を 600〜720px に絞って中央に置き、左右を淡いブルーグレーで埋める
• 全幅の写真と帯は PC でも画面幅いっぱいに広げる
• POINT カードと嬉しいポイントは PC で 3 カラムにする
• カラー見本は 3〜5 カラムに広げる
• 見出しサイズは PC で約 1.3 倍にする

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