DESIGN.md — 月夜のラベンダー×生成りの香り洗剤 LP（Twilight Lavender Fragrance Laundry LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: 夜空グラデーション・生成り・明朝見出し・筆記体の欧文・香りのピラミッド・波形の区切り
• 地の質感: ほぼ無地の生成り地。ところどころにぼかした布や夕空の写真背景と、淡いグラデーションを敷く
• 形: 四角いカード、円形の写真、ひし形の写真、三角の香りピラミッド、波形のセクション境界
• 温度感: やや暖かい中間色（生成り）に冷たい紫と暖かいローズを両方差す

Colors

• 地は生成り #F9F6F1。白は面カードにだけ使う
• 見出しは紫 primary。本文は濃紫かグレーで黒は使わない
• 購入ボタンは商品の香りごとに青紫グラデとローズグラデを分けて並べる
• 香り紹介セクションは藤色〜ピンクの夕空グラデを背景に敷いて世界観を見せる
• 濃紫 dark-section はフッターと小さい購入ボタンに限る
• 口コミの強調は淡ピンクのマーカー線で引く
• button-purchase は文字 #FEFEFE × 背景 #6577D6 のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#5B6ED3、4.51:1）を使う。
• feature-badge は文字 #FEFEFE × 背景 #939DE4 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#5C6BD6、4.6:1）を使う。

Typography

• 見出しは明朝、本文はゴシック、口コミは手書き体と使い分ける
• セクション見出しの裏に、薄いピンクの筆記体欧文を斜めに重ねる
• 価格は明朝の大きな数字にし、税込表記は小さく添える
• 本文は中央揃えで、短い行で改行する
• 字間はやや広めにとって上品に見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。関連商品だけ 2 カラムのカード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 購入ブロック（価格＋2色のボタン）を FV 直後と各セクション末に繰り返す
• 特長は Point 番号の帯→白カード→円形写真で縦に積む
• カードは左右に余白をとり、帯の罫線だけ画面端まで伸ばす
• テキストと円形写真は左右交互に並べる

Elevation & Depth

• 影はほぼ使わず、面の色差と細い罫線で区切る
• 白カードは背景写真の上にわずかに浮かせる程度にする
• 円形写真の背景だけ淡い白のぼかしをつける

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 円形・45度回転のひし形・長方形を使い分ける
• セクション境界: ゆるい波形カーブで背景色を切り替える
• 購入ボタンは角丸なしの長方形。四隅に細い十字のトンボ線をはみ出させる
• 口コミカードは細い枠線で囲み、角に斜めの平行線を2本添える
• 香りの構成は三角形を3段に分けたピラミッドで見せる
• 見出しの下にかぎ括弧型の細い曲線を引く

Components

• グラデ購入ボタン（button-purchase）: 上段に小さい香り名、下段に申込文言の2段組。四隅にトンボ線を付け、青紫とローズの2色を縦に並べる
• 濃紫の小ボタン（button-sub）: 関連商品カードの中に置く角丸の濃紫ボタン
• 特長の丸バッジ（feature-badge）: 淡い青紫の円を4つ横に並べ、特長を2行で書く。外側に細い手書き風の円を重ねる
• Point 見出し帯（point-header）: 左右の罫線と二重山括弧で挟み、中央に筆記体の Point と数字を置く
• Tips 番号見出し（tips-heading）: 上下を二重罫線で挟み、左に明朝の大きな番号、右に太字の2行見出しを置く
• 手書き口コミカード（review-card）: 細い枠で囲んだ手書き文字の口コミ。マーカーで強調し、線画の人物と年代を添える
• 香りピラミッド（scent-pyramid）: 白い半透明の三角を3段に分け、筆記体の段名と香料名を中央に置く
• ひし形付き小見出し（diamond-subhead）: 淡い紫のひし形マーカーを先頭に付けた太字の見出し。中央の場合は左右に線とひし形を置く
• 価格ブロック（price-block）: 小さい商品画像、2行の商品名、紫の明朝で大きい価格を横に並べる

Do's and Don'ts

Do - 生成りの地を基本にし、紫系のグラデは見せ場だけに使う - 見出しの裏には必ず薄い筆記体の欧文を重ねる - 購入ブロックはセクションごとに同じ形で繰り返す - 写真は円・ひし形で切り抜き、余白を広くとる - 線は細く（1px）、紫系でそろえる

Don't - 純黒の文字や強い原色を使わない - ボタンをピル型や立体的な影付きにしない - 太いゴシックのインパクト見出しを使わない - 背景を全面の白や鮮やかな色にしない - 装飾を詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（商品と世界観を一目で伝える）: ぼかした室内写真の上に商品ボトル2本。吹き出し風の手書きリードとグラデ文字の明朝コピーを置き、下部に特長バッジを4つ並べる
2. 価格・購入（すぐ買える導線）: 価格ブロックの下に、香り別の2色グラデボタンを縦に並べる
3. 問題提起（家で洗える服の悩みを示す）: 明朝見出しと筆記体の欧文、中央揃えの本文。続けてひし形の写真3枚で服の例を見せる
4. 機能性（特長を4つ説明する）: 布写真の背景に、ひし形付き見出し→Point帯→白カード（円形写真＋文章）を4回繰り返す
5. 動画（使用イメージを伝える）: 横幅いっぱいの埋め込み動画
6. 洗い方（使い方を手順で示す）: Tips番号見出し、洗濯表示アイコンの白丸、Check!の手書き文字、波形の白カードの中に洗える服の写真
7. お客様の声（共感と信頼）: 手書き文字の口コミカードを3枚。マーカーと線画の人物を添える
8. 香りの紹介（香りの魅力を伝える）: 藤色〜夕焼けのグラデ背景に、香りのピラミッド、ボトル、花や果実の切り抜き。香りごとに購入ボタンを置く
9. 関連商品（シリーズへの回遊）: 2カラムで、商品色の淡い面のカードにボトル・ピラミッド・小ボタンを入れる
10. ブランド誘導・フッター（詳細ページへの誘導と会社情報）: 濃紫の大ボタンを置き、濃紫フッターにロゴ・リンク・注意書きを白文字で載せる

Imagery

• 商品は柔らかい自然光の室内で、背景を大きくぼかして撮る
• 服はベージュ・ブラウン系のニットやブラウスを真上から撮った平置き写真
• 円形写真は布や洗濯物のアップで、ふんわりした質感を見せる
• 香りは花・果実・ハーブの切り抜き写真をボトルの周りに添える
• 人物は細い線画のミニイラストにする
• 淡い夕空やシルク布を背景テクスチャにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文を中央 600〜720px 幅に収め、左右は生成りの地にする
• Point カードの写真と文章は PC でも左右交互の2カラムを保つ
• 関連商品は PC で4カラムに広げてよい
• 購入ボタンは PC では最大 480px 程度にして中央に置く
• 波形の区切りと背景グラデは全幅に伸ばす

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