DESIGN.md — パステルオーロラ配色のボディケア LP（Pastel Aurora Gradient Body Care LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: やさしい・柔らかい、上品・高級、シンプル・ミニマル、清潔・爽やか
• キーワード: パステルグラデーション・オーロラ・余白・ラベンダー・物語・ふんわり
• 地の質感: ノイズのない滑らかな多色グラデーション。商品の背後に色付きのぼかし光をにじませる。
• 形: 角丸はほぼ使わず小さめ。細い横罫線と円形の矢印アイコンで軽く区切る。
• 温度感: やや涼しめの柔らかい中間温度。

Colors

• 地は白を基本に、FV と物語セクションだけ黄→ピンク→ラベンダー→水色の斜めグラデーションで塗る。
• ボタンは同じパステルグラデーションを横方向に流し、白文字で載せる。
• 英字見出しはラベンダー、和文見出しはグレーで色を分ける。
• 商品の背後に商品カラーの円形ぼかし光を置く。
• 濃い原色や黒ベタは使わず、文字も黒ではなくグレー系。
• リンクやアイコンもくすみパステルで統一する。

Typography

• キャッチだけ明朝、他はゴシックで静かに。
• 本文は小さめで行間 2 倍、中央揃え。
• 英字見出しは短い単語 1〜2 語で添える。
• 太字は見出しのみに限定する。
• 文字色は全てグレーかパステル系にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品は横スクロール 3 列または 2 列並び
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは大きな余白で区切る。
• シリーズ見出しは中央寄せ＋下に全幅の細罫線。
• 商品は 1 シリーズ 2〜3 点、パッケージ画像＋2〜3 行の商品名。
• 各シリーズの下に中央寄せのグラデーションボタンを 1 つ。
• 物語は短い段落と縦長写真を交互に配置。

Elevation & Depth

• 影はほぼ使わずフラット。
• 商品パッケージの背後に色付きの円形ぼかしで浮遊感を出す。
• FV の商品は宙に浮くように斜めに散らして配置する。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの縦長長方形、商品は切り抜き
• セクション境界: 直線の切り替え。グラデーション面と白地を水平に分ける
• ボタンは角丸ごく小さい長方形＋右端に白丸の矢印アイコン。
• アコーディオン行は上下の細いグラデーション罫線で区切る。
• 右矢印は円形のグラデーションアイコン。
• 装飾図形は増やさない。

Components

• グラデーション誘導ボタン（button-gradient）: 横幅約 60%、黄ピンク→ラベンダー→水色の横グラデーションに白文字、右に白丸の矢印。
• ヘッダーのショップボタン（header-shop-button）: 白地に小さな英字の長方形ボタンとハンバーガー。グラデーション上に浮かせる。
• シリーズ見出し（series-heading）: 中央のグレー太字見出しの下に全幅の薄い罫線。
• 英字セクション見出し（en-section-title）: ラベンダーまたは白の英字 1 語を中央に置く。
• 商品アイテム（product-item）: 切り抜きパッケージの背後に商品色のぼかし円、下に中央揃えの商品名。
• 注意事項の行リンク（accordion-row）: 左にラベル、右に円形グラデーション矢印、上下にパステル罫線。
• 右寄せテキストリンク（text-link-arrow）: 右寄せの小さな文字＋→。くすみ色。
• SNS アイコン列（sns-icons）: 中央に丸い SNS アイコンを 3 つ並べる。

Do's and Don'ts

Do - グラデーションは黄・ピンク・ラベンダー・水色の 4 色で斜めに流す。 - 白地の余白を広く取り、商品を大きく見せる。 - 本文は短い行で中央揃え、行間を広く。 - 商品の背後に商品色のぼかしを敷く。 - 物語セクションは写真と短い文を交互に並べる。

Don't - 黒や原色の濃い面を使わない。 - 太い影や立体ボタンを使わない。 - 訴求文を大きな赤字で詰め込まない。 - ピル型ボタンや大きな角丸カードにしない。 - グラデーションの色数を増やしすぎない。

Page Structure

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

1. ファーストビュー（ブランド世界観と商品群の提示）: 全面パステルグラデーションに商品を宙に散らし、明朝キャッチと中央揃えのリード 2 段落。
2. ラインナップ導入（商品一覧の開始）: 白地にラベンダーの英字見出しを中央配置。
3. シリーズ別商品一覧 1（主力シリーズの紹介）: 罫線付き見出し、商品 3 点を横並び、下にグラデーションボタン。
4. シリーズ別商品一覧 2（別シリーズの紹介）: 同じ型で商品 2 点を並べボタン。
5. シリーズ別商品一覧 3（別シリーズの紹介）: 同じ型で商品 2 点を並べボタン。
6. ブランドストーリー（情緒的な共感づくり）: ラベンダー→水色の縦グラデーション地に白英字見出し、短い段落と縦長写真を交互、末尾にイラスト。
7. ブランド紹介リンク（詳細ページへの誘導）: 右寄せのくすみ色テキストリンク。
8. 使用上の注意（安全情報への導線）: ラベンダー見出し、説明文、罫線区切りの行リンク 2 本と View more。
9. フッター（SNS 導線）: 中央に SNS アイコン 3 つ。

Imagery

• 商品は白背景で撮った切り抜き、斜めに浮かせて散らす。
• 物語写真は欧州の街並みで踊るバレリーナのような軽やかな人物、自然光でやや淡いトーン。
• 線画に淡い塗りの手描き風人物イラストをセクション端に配置。
• 商品の背後にパッケージ色のぼかし円を敷く。
• アイコン類は細く丸い最小限のもの。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにグローバルナビを横並び表示、SP はハンバーガー。
• PC の FV は商品を左右に広げ、キャッチとリードを右下寄せの左揃えに。
• PC の商品一覧は横スクロールせず 3 列を中央に収める。
• PC のストーリーはグラデーション面を左右にずらし、写真を面からはみ出させて重ねる。
• PC の注意事項の行リンクは 2 列並び。

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