DESIGN.md — 夜空ラベンダーと透明ブルーの夜用スキンケアLP（Twilight Lavender Night Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、やさしい・柔らかい
• キーワード: 夜空・透明感・水面のゆらぎ・ラベンダーブルー・白カード・眠り
• 地の質感: 水滴・波紋・星空の写真を背景に敷き、淡い水色の地に半透明の筆記体英字を透かして重ねる
• 形: 角丸カード、正円バッジ、帯状の小見出しラベル、斜線で囲んだ前置きコピー
• 温度感: 寒色寄り。ラベンダーと青でまとめ、淡い黄色でぬくもりを少し足す

Colors

• 白地と淡い水色の地を交互に置き、途中に青紫ベタの帯セクションを1つ入れて変化をつける
• FVと最後のセクションは、紫〜青のグラデーションの写真（水面・夜空）にする
• 見出しは濃紺。1語だけ青紫で強調する
• 濃色の地の上では白文字を使い、強調には淡い黄色を使う
• 赤やオレンジなどの暖色は文字色に使わない。暖色は写真の灯りだけにとどめる
• 注釈は小さな白文字かグレー文字で写真の隅に置く
• band-section は文字 #F9FEFE × 背景 #6C80BE のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#5C72B7、4.54:1）を使う。

Typography

• 見出しは太字のゴシックにし、字間を0.1em前後まで広げる
• 見出しのキーワードは一回り大きくし、色を青紫に変える
• 前置きコピーは左右を「\」「//」状の斜線で挟む
• 英字は小さな帯ラベルにするか、半透明の筆記体で背景に敷く
• 朝・夜を比べるセクションだけは明朝の大きな縦書きを使う
• 本文は中央揃えで、短い2行にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長チェックは 2×2、無添加の円バッジは 4+3 の配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは英字ラベル帯、前置きコピー、大見出し、ビジュアル、リード文の順に積む
• 写真は左右に約6%の余白を取ったカードに収める
• FVだけは全幅の写真にし、左に円バッジを3つ縦に並べ、右に縦書きのキャッチを置く
• 成分紹介は写真と白テキストを左右に並べた横長カードにする
• 商品の拡大は、引き出し線とつながった角丸の囲みで見せる

Elevation & Depth

• 白カードには、ぼかしが大きく淡い青灰色の影（0 6px 20px rgba(40,56,90,.12)）を付ける
• 円バッジにも同じ系統の淡い影を付ける
• 写真カードには、やわらかい影を付けて浮かせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形、商品は切り抜き。比較写真は角丸の枠に収める
• セクション境界: 直線で区切り、色の切り替えやグラデーションの写真でつなぐ
• バッジは正円にする
• チェック項目は左側を青紫の四角にした角丸カードにする
• 朝・夜のラベルは細線の四角で囲み、横に線を伸ばす

Components

• 円形の特長バッジ（badge-circle）: 白い正円に、濃紺の短い2〜3行の文字を入れる。FVや無添加の訴求で並べる
• 英字ラベル帯（label-band）: 全幅の淡い水色の帯に、小さな英字を中央に置く。セクションの頭に使う
• 斜線囲みの前置きコピー（lead-slash）: 見出しの上に置く短いコピー。左右を斜線で挟む
• チェック付き特長カード（check-card）: 左が青紫の四角に白いチェック、右が白地に短い語句。2×2で並べる
• 成分紹介カード（ingredient-card）: 左に写真、右に白地で見出しと本文を置く横長の角丸カード。強調語は青紫にする
• 拡大吹き出し（zoom-callout）: 上部が青紫で白文字の見出し、下部が拡大写真の角丸の囲み。商品と細い線でつなぐ
• 朝夜ラベル（time-label）: 細線の四角に漢字1文字を入れ、横線を伸ばして説明文につなげる
• 青紫ベタの訴求帯（band-section）: 青紫の全面の地に、白の大見出しと黄色の強調、角丸の写真を置く

Do's and Don'ts

Do - 紫〜青の夜のグラデーションで、静かで透明感のある雰囲気を保つ - 強調は1見出しにつき1〜2語に絞る - 写真は角丸のカードにして淡い影を付ける - 背景に水滴・波紋・筆記体英字を薄く重ねる - 文字はすべて中央揃えにし、短い改行でリズムを作る

Don't - 赤や黄色の派手なセールバッジを使わない - 背景を真っ黒にしない。濃色は夜空の濃紺にする - 角張った重い枠線を使わない - 丸ゴシックやポップ体を使わない - 本文を長い段落にしない

Page Structure

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

1. ファーストビュー（商品と夜のケアであることを伝える）: 紫の水面写真に商品のボトルを置く。右に縦書きのキャッチ、左に円バッジを3つ、下に商品名の帯を配置する
2. 有効成分の紹介（美白成分の根拠を示す）: グラデーションの地に前置きコピーと大見出しを置き、成分カードを載せる。下に寝顔の写真を続ける
3. 保湿成分の紹介（保湿の仕組みを図で示す）: 淡い水色の地に、角丸の模式図、リード文、2×2のチェックカード、商品の切り抜きを並べる
4. 香り（癒しの体験を想起させる）: 白地に暖かい灯りの寝室写真を角丸で置き、リード文を2行添える
5. 使用感（べたつかなさを伝える）: 青紫ベタの帯に白の見出しを置き、手肌の角丸写真を合わせる
6. 無添加処方（安心感を示す）: 水滴の背景に、斜線入りの白い円バッジを4+3で並べる
7. 容器の特長（使いやすさを示す）: 商品の切り抜きから引き出し線を伸ばし、拡大吹き出しにつなげる
8. 朝夜ライン使い（シリーズの併用を提案する）: 朝は青空、夜は星空の写真。大きな縦書き明朝と商品の並びで対比させる
9. ブランド締め（余韻を残す）: 星空の写真に、白い欧文ロゴを中央に置く

Imagery

• 水面の波紋や水滴を、紫〜青の寒色ライトで撮る
• 商品はブルーの半透明ボトルを切り抜き、映り込みを添える
• 人物は白い寝具で眠る穏やかな表情を、自然光で撮る
• 寝室はキャンドルなどの暖かい灯りとグレーの寝具でまとめる
• 成分は粒子や泡を3Dの模式図で、淡いピンクと水色で描く
• 朝は淡い青空と雲、夜は星空と天の川を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を 640〜750px 程度の中央寄せにし、左右は淡い水色かグラデーションで埋める
• FVは横長の写真にして、キャッチを右側に縦書きで残す
• チェックカードと円バッジは横一列に並べ替えてよい
• 見出しはPCで1.2〜1.4倍に拡大する

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